Bundle-ManifestVersion: 1
Bundle-Name: Tizen Development Environment and Tools
Bundle-SymbolicName: org.tizen.devtools;singleton=true
-Bundle-Version: 2.3.1
+Bundle-Version: 2.4.0
Bundle-Vendor: The Linux Foundation
<body onload="prettyPrint()">
<h1><a name="Creating2" id="Creating2">About This Content</a></h1>
- <p>Tizen 2.3.0</p>
+ <p>Tizen 2.4.0</p>
<h1>License</h1>
<p>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>
<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
</div>
<div id="container"><div id="contents"><div class="content">
<div id="profile">
- <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/> <img alt="Mobile native" src="../images/mn_icon.png"/></p>
+ <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/> <img alt="Mobile native" src="../images/mn_icon.png"/> <img alt="Wearable native" src="../images/wn_icon.png"/></p>
</div>
<h1>Certificate Registration</h1>
<p class="figure">Figure: Author certificate</p>
-<p style="text-align: center;">
-<img alt="Author certificate" src="../images/author_certificate.png" /></p>
+<p align="center"><img alt="Author certificate" src="../images/author_certificate.png" /></p>
<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/> <img alt="Mobile native" src="../images/mn_icon.png"/></p>
+ <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/> <img alt="Mobile native" src="../images/mn_icon.png"/> <img alt="Wearable native" src="../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a class="opensection" href="#target">Testing with a Target Device</a></li>
- <li><a class="opensection" href="#emulator">Testing with the Emulator</a></li>
- <li><a class="opensection" href="#transfer">Transferring Files with Connected Devices</a></li>
- <li><a class="opensection" href="#preference">Setting Preferences</a></li>
+ <li><a href="#target">Testing with a Target Device</a></li>
+ <li><a href="#emulator">Testing with the Emulator</a></li>
+ <li><a href="#transfer">Transferring Files with Connected Devices</a></li>
+ <li><a href="#preference">Setting Preferences</a></li>
</ul>
</div></div>
</div>
<h1>Connection Explorer View</h1>
<p>You can test Tizen applications with connected devices by using the following alternative ways:</p>
-<ul class="ul">
+<ul>
<li>Testing applications on a physical device connected to the host system.</li>
<li>Testing them on an Emulator that emulates a real device as a software component installed on the host computer.</li>
<li>A list of connected devices is available in the <strong>Connection Explorer</strong> view after connecting a device or launching a Tizen Emulator with a tree view.</li></ul>
<p>The <strong>Connection Explorer</strong> view shows the devices connected to the system. It provides the following actions for using connected devices:</p>
-<ul class="ul">
+<ul>
<li>Show connected devices</li>
<li>Provide file operations on connected devices</li>
<li>Send or receive files between the <strong>Project Explorer</strong> view and <strong>Connection Explorer</strong> view by dragging and dropping them between the views</li>
<li>Launch the Emulator Manager to handle the Emulator with multi-instances</li>
</ul>
<p class="figure">Figure: Connection Explorer view</p>
-<p style="text-align:center;"><img alt="Connection Explorer view"
-src="../images/connection_explorer.png" /></p>
+<p align="center"><img alt="Connection Explorer view" src="../images/connection_explorer.png" /></p>
<h2 id="target" name="target">Testing with a Target Device</h2>
<p>You can test your application by running and debugging it on a real target device:</p>
-<ul class="ul">
+<ul>
<li>Connect your device to the host system by using a USB connector. The device icon (<img alt="Device icon" src="../images/device_icon.png"/>) is displayed in the <strong>Connection Explorer</strong> view.</li>
<li>Select the device in the <strong>Connection Explorer</strong> view. It is ready to be run and used to test your project.</li></ul>
<h2 id="transfer" name="transfer">Transferring Files with Connected Devices</h2>
<p>You can transfer files between the connected devices and the host system:</p>
-<ul class="ul">
+<ul>
<li>To transfer a file from a connected device to the host file system, pull the selected file to the desired host system path.
</li>
<li>To transfer a file from the host file system to a connected device, push the selected file to the desired connected device path.
<h2 id="preference" name="preference">Setting Preferences</h2>
<p>You can set the following Connection Explorer preferences:</p>
-<ul class="ul">
+<ul>
<li>Change the Emulator Manager path</li>
<li>Set the file transfer timeout value</li>
</ul>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a href="#features">Using the Emulator</a></li>
+ <li><a href="#features">Using the Emulator</a></li>
<li><a href="#manager">Emulator Manager</a></li>
<li><a href="#hw">Using Hardware Virtualization</a></li>
<li><a href="#controls">Emulator Control Keys and Menu</a></li>
<p>The Tizen SDK includes a virtual device Emulator. The Emulator provides the full stacks of the Tizen platform so that you can test Tizen applications before deploying them to the real target device. The Emulator is based on the open source QEMU project and comprises virtual CPU, memory, and various peripherals. Currently, the Tizen SDK only supports the x86 machine architecture for guest. You can use the <a href="#manager">Emulator Manager</a> to create and launch a Virtual Machine instance. You can communicate with the Emulator instance using the <a href="smart_dev_bridge.htm">Smart Development Bridge (SDB)</a>.</p>
-
-
<p>The main features of the Emulator are:</p>
<ul>
<li>Providing full system emulation, including CPU, memory, and peripheral devices</li>
<li>Simulating events with the <a href="#ecp">Emulator Control Panel</a></li>
<li>Accelerating guest operations using host CPU or GPU</li>
</ul>
-<p> You can refer to <a href="#support">supported features</a> in detail.
+
+<p>For more information see <a href="#support">Supported Features</a>.</p>
<h2 id="features" name="features">Using the Emulator</h2>
<p>To run applications on the Emulator:</p>
<ol>
-<li>Start the Emulator
via <a href="#manager">Emulator Manager</a>.
+<li>Start the Emulator
through the <a href="#manager">Emulator Manager</a>.
<p>You can launch the Emulator from both the Emulator Manager and the command line. If you are using the command line, you can modify the <a href="emulator_features.htm#startup">start-up options</a>.</p></li>
-<li>While running the Emulator, you can use <a href="#controls">the control keys and context menu</a> or <a href="#ecp">Emulator Control Panel</a> to control the Emulator. You can use <a href="emulator_features.htm">extended features</a> while running applications, such as shared directory, multi-point touch, a Webcam, and et. al.</li>
+<li>While running the Emulator, you can use <a href="#controls">the control keys and context menu</a> or the <a href="#ecp">Emulator Control Panel</a> to control the Emulator. You can use <a href="emulator_features.htm">extended features</a> while running applications, such as a shared directory, multi-point touch, and a Webcam.</li>
</ol>
<h2 id="manager" name="manager">Emulator Manager</h2>
-<p>In order to start Emulator quickly,</p>
+<p>To start the Emulator quickly:</p>
<ol>
<li>Start the Emulator Manager by using the Desktop or Start menu:
<ul>
- <li>In Linux: <strong>Desktop > Applications > Tizen SDK > Emulator Manager</strong></li>
- <li>In Windows®: <strong>Start > All Programs > Tizen SDK > Emulator Manager</strong></li>
+ <li>In Linux: <strong>Desktop > Applications > Tizen SDK > Emulator Manager</strong></li>
+ <li>In Windows®: <strong>Start > All Programs > Tizen SDK > Emulator Manager</strong></li>
</ul>
</li>
-<li> Select your prefered profile tab, such as mobile or wearable.</li>
-<li> Select <strong>Create New</strong> and then click <strong>Confirm</strong>.</li>
-<li> Click the <strong>Launch</strong> button (<img alt="launch" src="../images/launch.png" />) or press the <strong>Enter</strong> keyboard key.</li>
+<li>Select your preferred profile tab, such as mobile or wearable.</li>
+<li>Select <strong>Create New</strong> and click <strong>Confirm</strong>.</li>
+<li>Click the <strong>Launch</strong> button ( <img alt="Launch" src="../images/launch.png" /> ) or press the ENTER keyboard key.</li>
<li> To stop the Emulator, right-click the Emulator and select <strong>Close</strong>.</li>
</ol>
-<p class="figure">Figure: Emulator Manager
-<p style="text-align:center;"><img alt="Emulator Manager"
-src="../images/emulator_manager.png" /></p>
+<p class="figure">Figure: Emulator Manager</p>
+<p align="center"><img alt="Emulator Manager" src="../images/emulator_manager.png" /></p>
<table class="note">
-
- <tbody>
+<tbody>
<tr>
<th class="note">Note</th>
</tr>
<tr>
- <td class="note">In order to run App faster, it is recommended that <strong>CPU VT</strong> and <strong>GPU</strong> are turned on. If <strong>CPU VT</strong> is disabled, please check the <a href="#hw">Using Hardware Virtualization</a>. If <strong>GPU</strong> is disabled, it is recommended to <a href="https://developer.tizen.org/downloads/sdk/installing-sdk/prerequisites-tizen-sdk" target="_blank">install latest vendor-provided graphic driver</a>.</td>
+ <td class="note">To run the application faster, switch on <strong>CPU VT</strong> and <strong>GPU</strong>. If <strong>CPU VT</strong> is disabled, check the <a href="#hw">Using Hardware Virtualization</a> section for more information. If <strong>GPU</strong> is disabled, <a href="https://developer.tizen.org/downloads/sdk/installing-sdk/prerequisites-tizen-sdk" target="_blank">install the latest vendor-provided graphic driver</a>.</td>
</tr>
</tbody>
</table>
-</p>
-
-<p>You can also create a new VM by <a href="#manager-cli">Emulator Manager CLI</a>.
-<p>The created VM is added under the current tab. The name of tab, <span style="font-family: Courier New,Courier,monospace"><Profile></span>, refers to the image profile. You can create a VM by using custom image in <strong>Base Image</strong> of detail view. Background color of custom VM is blue.</p>
+<p>You can also create a new virtual machine (VM) with the <a href="#manager-cli">Emulator Manager CLI</a>.</p>
-<p>You can also export a base image of VM and manipulate VM:
+<p>The created VM is added under the current tab. The name of tab, <span style="font-family: Courier New,Courier,monospace"><Profile></span>, refers to the image profile. You can create a VM by using a custom image in <strong>Base Image</strong> of the detail view. The background color of a custom VM is blue.</p>
+
+<p>You can also export a base image of the VM and manipulate the VM:</p>
<ul>
-<li>To create a VM, select <strong>Create New</strong> and then click <strong>Confirm</strong>.</li>
+<li>To create a VM, select <strong>Create New</strong> and click <strong>Confirm</strong>.</li>
<li>To create a base image of a VM, select the VM and <strong>Export as</strong>, and enter a name and location for the base image.</li>
-<li>To modify a VM, click the <strong>Modify</strong> icon (<img alt="Modify icon" src="../images/mod_icon.png" />), make the appropriate changes, and click <strong>Confirm</strong>.</li>
-<li>To delete a VM, click <strong>Delete</strong> or press the <strong>Delete</strong> keyboard key (<strong>fn + Delete</strong> in Mac OS® X).</li>
-<li>To launch a VM, click the <strong>Launch</strong> button (<img alt="launch" src="../images/launch.png" />) or press the <strong>Enter</strong> keyboard key.</li>
+<li>To modify a VM, click the <strong>Modify</strong> icon ( <img alt="Modify icon" src="../images/mod_icon.png" /> ), make the appropriate changes, and click <strong>Confirm</strong>.</li>
+<li>To delete a VM, click <strong>Delete</strong> or press the DELETE keyboard key (<strong>fn + Delete</strong> in Mac OS® X).</li>
+<li>To launch a VM, click the <strong>Launch</strong> button ( <img alt="Launch" src="../images/launch.png" /> ) or press the ENTER keyboard key.</li>
</ul>
+
<h3 id="vm" name="vm">Virtual Machine</h3>
<p>A virtual machine (VM) is a set of hardware options including the file system image. The Emulator Manager controls the virtual machines. When you launch the Emulator, you can specify the VM that you want to customize. Each VM has its own Emulator file system image. In other words, different VMs have different states of Emulators.</p>
<table class="note">
</ul></li>
<li>File Sharing
-<p>You can share a directory between the host PC and the Emulator. If you want to use this feature, set the value to <strong>ON</strong> and define the input directory to share in the <strong>directory</strong> field. For more information, see <a href="emulator_features.htm#file">Directory Sharing</a>.</p></li>
+<p>You can share a directory between the host PC and the Emulator. If you want to use this feature, set the value to <strong>ON</strong> and define the input directory to share in the <strong>directory</strong> field. For more information, see <a href="emulator_features.htm#file">Sharing a Directory</a>.</p></li>
<li>CPU VT
<p>The Emulator supports hardware virtualization. It is kvm on Ubuntu and HAX on Windows®. If the host CPU supports hardware virtualization and a hardware virtualization module is installed, you can change this value. For more information, see <a href="#hw">Using Hardware Virtualization</a>.</p></li>
</ul>
-<h3 name="manager-cli">Emulator Manager CLI</h3>
+<h3 id="manager-cli" name="manager-cli">Emulator Manager CLI</h3>
+
+<p>You can create, modify, delete, and list your VMs through the command line interface commands. The CLI binary is located in:</p>
+ <ul>
+ <li>In Linux:
+ <p><span style="font-family: Courier New,Courier,monospace"><TIZEN_SDK>/tools/emulator/bin/em-cli</span></p></li>
+ <li>In Windows®:
+ <p><span style="font-family: Courier New,Courier,monospace"><TIZEN_SDK>\tools\emulator\bin\em-cli.bat</span></p></li>
+ </ul>
-<p>You can create, modify, delete, and list your VMs through the command line interface commands. The CLI binary is located at:
- <ul>
- <li>In Linux:
- <pre class="prettyprint"><span style="font-family: Courier New,Courier,monospace"><TIZEN_SDK>/tools/emulator</span>/bin/em-cli</pre></li>
- <li>In Windows®:
- <pre class="prettyprint"><span style="font-family: Courier New,Courier,monospace"><TIZEN_SDK>\tools\emulator</span>\bin\em-cli.bat</pre></li>
- </ul></p>
+<p>For more information, see the CLI help messages.</p>
-<p>Please refer to CLI's help messages for detailed information.</p>
+<p class="figure">Figure: Emulator Manager command line</p>
+<p align="center"><img alt="Emulator Manager command line" src="../images/emulator_cli.png" /></p>
-<p class="figure">Figure: Emulator Manager command line</p>
-<p style="text-align:center;"><img alt="Emulator Manager command line" src="../images/emulator_cli.png" /></p>
<h2 id="hw" name="hw">Using Hardware Virtualization</h2>
-<p>In order to run App faster, the Tizen x86 Emulator exploits <a href="http://www.linux-kvm.org/page/Main_Page" target="_blank">KVM</a> (Kernel-based Virtual Machine in Linux) or <a href="https://developer.tizen.org/sdk/haxm" target="_blank">HAX</a> (Hardware Accelerated eXecution in Windows® and Mac OS® X) with HW virtualization support.</p>
-<p>If the <strong>CPU VT</strong> is disabled in <strong>Detail View</strong> on <strong>Emulator Manager</strong>, you should check the following prerequisites and may install KVM or HAX</p>
+
+<p>To run the application faster, the Tizen x86 Emulator exploits <a href="http://www.linux-kvm.org/page/Main_Page" target="_blank">KVM</a> (Kernel-based Virtual Machine in Linux) or <a href="https://developer.tizen.org/sdk/haxm" target="_blank">HAX</a> (Hardware Accelerated eXecution in Windows® and Mac OS® X) with HW virtualization support.</p>
+<p>If the <strong>CPU VT</strong> is disabled in the <strong>Detail</strong> view on the Emulator Manager, check the following prerequisites and install KVM or HAX.</p>
+
<h3 id="prerequisite" name="prerequisite">Prerequisites</h3>
<ul>
<li>In Linux:
-<p>No installation is required for KVM.</p>
+<p>No installation is required for KVM.</p>
</li>
<li>In Windows® and Mac OS® X:
<p>The HAXM driver is installed during the Tizen SDK installation. See the installation manual on the <a href="https://developer.tizen.org/sdk/haxm" target="_blank">Tizen developer site</a>.</p>
</tr>
<tr>
<td class="note">
- <p>If the installation fails with a VT-related message, check the CPU feature and BIOS settings. If the installation fails with an NX-related message, enable NX (or PAE and DEP) related item in the BIOS. In addition, make sure that the operating system supports the NX feature (for more information, see <a href="http://msdn.microsoft.com/en-us/library/windows/hardware/ff542275%28v=vs.85%29.aspx" target="_blank">MSDN</a>).</p>
+ <p>If the installation fails with a VT-related message, check the CPU feature and BIOS settings. If the installation fails with an NX-related message, enable NX (or PAE and DEP)
-related item in the BIOS. In addition, make sure that the operating system supports the NX feature (for more information, see <a href="http://msdn.microsoft.com/en-us/library/windows/hardware/ff542275%28v=vs.85%29.aspx" target="_blank">MSDN</a>).</p>
</td>
</tr>
</tbody>
</table></li></ul>
-
+
<p>No configuration is required for KVM or HAX.</p>
<h3 id="run" name="run">Running the Emulator</h3>
-<p>To run the Emulator with HW virtualization support in the Emulator Manager, turn the <strong>CPU VT</strong> field to <strong>ON</strong>. The field is disabled if your system cannot support HW virtualization.</p>
+<p>To run the Emulator with HW virtualization support in the Emulator Manager, set the <strong>CPU VT</strong> field to <strong>ON</strong>. The field is disabled if your system cannot support HW virtualization.</p>
<p>You can also run the Emulator with HW virtualization support from the command line, by including the <span style="font-family: Courier New,Courier,monospace">-enable-kvm</span> (in Linux) or <span style="font-family: Courier New,Courier,monospace">-enable-hax</span> (in Windows® and Mac OS® X) option in the start-up command.</p>
+
<h2 id="controls" name="controls">Emulator Control Keys and Menu</h2>
<p>The Tizen Emulator provides a variety of control keys and menus.</p>
<p class="figure">Figure: Profile-specific skin Emulator</p>
-<p style="text-align:center;"><img alt="Profile-specific skin Emulator Wearable" src="../images/emulator_controls_wearable.png" /> <img alt="Profile-specific skin Emulator Wearable" src="../images/emulator_controls_wearable_o.png" /></p>
-<p style="text-align:center;"><img alt="Profile-specific skin Emulator Mobile" src="../images/emulator_controls_mobile.png" /></p>
+<p align="center"><img alt="Profile-specific skin Emulator Mobile" src="../images/emulator_profile_mobile.png" /> <img alt="Profile-specific skin Emulator Wearable O" src="../images/emulator_profile_wearable_o.png" /> <img alt="Profile-specific skin Emulator Wearable" src="../images/emulator_profile_wearable.png" /></p>
<h3 id="general" name="general">General Purpose Skin</h3>
<p>The image of the general purpose skin is generated by nine-patch image processing. The Emulator skin frame has the same appearance on every state of resolution, scale, or rotation. Unlike the <a href="#phone">profile-specific skin</a>, the layout of the general purpose skin is not configurable.</p>
<p>The following figure illustrates the general purpose skin Emulator.</p>
<p class="figure">Figure: General purpose skin Emulator</p>
-<p style="text-align:center;"><img alt="General purpose skin Emulator Wearable" src="../images/skin_emulator_wearable.png" /> <img alt="General purpose skin Emulator Mobile" src="../images/skin_emulator_mobile.png" /></p>
+<p align="center"><img alt="General purpose skin Emulator Mobile" src="../images/emulator_general_mobile.png" /> <img alt="General purpose skin Emulator Wearable" src="../images/emulator_general_wearable.png" /></p>
+
+
<h3 id="controlkeys" name="controlkeys">Control Keys</h3>
<p>The following keys are available on the Emulator:</p>
<p>When you tap, it opens a list of options available for the current screen.</p>
</li>
<li><strong>Home</strong> (mobile only)
- <p>If you long press the <strong>Home</strong> key, the Task switcher application appears as in a real device.</p>
+ <p>If you long press the <strong>Home</strong> key, the Task switcher application appears as in a real device.</p>
</li>
<li><strong>Back</strong> (mobile only)
<p>When you tap, it returns to the previous screen.</p>
<tr>
<td>Directory Sharing</td>
- <td>Whether host directory sharing is used or not</td>
+ <td>Whether host directory sharing is used</td>
</tr>
<tr>
<tr>
<td>CPU Virtualization</td>
- <td>Whether hardware virtualization is supported or not</td>
+ <td>Whether hardware virtualization is supported</td>
</tr>
<tr>
<td>GPU Virtualization</td>
- <td>Whether GPU virtualization is supported or not</td>
+ <td>Whether GPU virtualization is supported</td>
</tr>
<tr>
<tr>
<th class="note">Note</th>
</tr>
- <tr>
- <td class="note">In Ubuntu, you need to change a global GNOME setting to view the menu icons:
- <ol>
- <li>In the command console, execute the <span style="font-family: Courier New,Courier,monospace">gconf-editor</span> command.</li>
- <li>In the tree, navigate to <strong>desktop > gnome > interface</strong>.</li>
- <li>Enable the <strong>menus_have_icons</strong> option.</li>
- </ol>
- </td>
- </tr>
+ <tr>
+ <td class="note">In Ubuntu, you need to change a global GNOME setting to view the menu icons:
+ <ol>
+ <li>In the command console, execute the <span style="font-family: Courier New,Courier,monospace">gconf-editor</span> command.</li>
+ <li>In the tree, navigate to <strong>desktop > gnome > interface</strong>.</li>
+ <li>Enable the <strong>menus_have_icons</strong> option.</li>
+ </ol>
+ </td>
+ </tr>
</tbody>
</table>
+
<h2 id="ecp" name="ecp">Emulator Control Panel</h2>
-<p>You can execute the ECP by selecting <strong>Control Panel</strong> on the <a href="#name">Context Menu</a> after the Emulator was successfully launched. You can control and monitor the state of the Emulator dynamically.</p>
-<p>The main features of ECP:</p>
+
+<p>You can execute the Emulator Control Panel (ECP) by selecting <strong>Control Panel</strong> on the <a href="#menu">Context Menu</a> after the Emulator is successfully launched. You can control and monitor the state of the Emulator dynamically.</p>
+<p>The main features of ECP:</p>
<ul>
<li>Device Manager
<th>Wearable</th>
<th>Description</th>
</tr>
-
+
<tr>
<td>Uninstaller</td>
<td>No</td>
<td>Yes</td>
<td>You can see user-installed applications and uninstall them.</td>
</tr>
-
- </tbody>
- </table>
+
+ </tbody>
+ </table>
</li>
-
-
+
+
<li>Event Injector
<p>The following table lists the Event Injector features and their availability on different profiles.</p>
<tr>
<th colspan = "2">Feature</th>
- <th>Mobile</th>
+ <th>Mobile</th>
<th>Wearable</th>
<th>Description</th>
</tr>
-
+
<tr>
<td colspan = "2"><a href="event_injec.htm#device">Battery</a></td>
<td>Yes</td>
<td>Yes</td>
- <td>You can set the battery level using the Level slider.
+ <td>You can set the battery level using the Level slider.
To set the charger status to connected or disconnected, select the appropriate Charger radio button.</td>
</tr>
-
+
<tr>
<td colspan = "2"><a href="event_injec.htm#device">RSSI</a></td>
<td>Yes</td>
<td>No</td>
<td>You can set the remote signal strength using the level bar.</td>
</tr>
-
+
<tr>
<td rowspan = "6"><a href="event_injec.htm#sensor">Sensor</a></td>
- <td>3-Axis Sensor</td>
+ <td>3-Axis Sensor</td>
<td>Yes</td>
<td>Yes</td>
- <td>You can inject user acceleration, magnetic, gyroscope using slider bars or text input.</td>
- </tr>
-
+ <td>You can inject user acceleration, magnetic, and gyroscope values using slider bars or text input.</td>
+ </tr>
+
<tr>
- <td>Light</td>
+ <td>Light</td>
<td>Yes</td>
<td>Yes</td>
- <td>You can inject a lux value into light sensor.
- If you set brightness as auto, then display will be changed by injecting light value.</td>
+ <td>You can inject a lux value into light sensor.
+ If you set brightness as auto, then display will be changed by injecting light value.</td>
</tr>
<tr>
<td>Yes</td>
<td>You can inject the presence of nearby objects.</td>
</tr>
-
+
<tr>
<td>Pressure</td>
<td>Yes</td>
<td>Yes</td>
<td>You can inject a hPa value into the pressure sensor.</td>
</tr>
-
+
<tr>
<td>Ultraviolet</td>
<td>Yes</td>
<td>No</td>
<td> You can inject adding or removing headset.</td>
</tr>
-
+
<tr>
<td colspan = "2">Gesture</td>
<td>No</td>
<td>Yes</td>
<td>You can inject flick up (menu button) or flick down (back button) events in the wearable profile.</td>
</tr>
-
+
<tr>
<td colspan = "2"><a href="event_injec.htm#device">USB</a></td>
<td>Yes</td>
<td>Yes</td>
<td>You can add or remove a USB device by setting the USB device setting to the connected or disconnected state.</td>
</tr>
-
+
<tr>
<td colspan = "2"><a href="event_injec.htm#device">SDCard</a></td>
<td>Yes</td>
<td>No</td>
- <td>You can inject 4, 8, 16, or 32G SD card.</td>
+ <td>You can inject a 4, 8, 16, or 32G SD card.</td>
</tr>
-
+
<tr>
<td colspan = "2"><a href="event_injec.htm#location">Location</a></td>
<td>Yes</td>
<td>Yes</td>
- <td>You can inject latitude and longitude value via map. Also you can inject these manually. Log file as well.</td>
+ <td>You can inject a latitude and longitude values using a map, manually, or from a log file.</td>
</tr>
-
+
<tr>
<td colspan = "2"><a href="event_injec.htm#telephony">Telephony</a></td>
<td>Yes</td>
<td>Yes</td>
- <td>You can make/receive a call via Call tab. Also you can send/receive SMS via SMS tab.</td>
+ <td>You can make and receive a call through the <strong>Call</strong> tab. You can also send and receive SMS messages through the <strong>SMS</strong> tab.</td>
</tr>
</tbody>
<td></td>
<td>S</td>
<td>USB</td>
- <td></td>
- <td></td>
+ <td>O</td>
+ <td>Memory</td>
</tr>
<tr align="center">
<td></td>
<td>Telephony</td>
<td></td>
<td></td>
- </tr>
+ </tr>
</tbody>
</table>
</li>
</table>
</li>
</ul>
-
+
<h3 name="ecp-cli">Emulator Control Panel CLI</h3>
-<p>You can control and monitor the Tizen Emulator by using ECP CLI instead of the ECP UI tool. The ECP CLI supports all the functionalities of the ECP UI. The CLI binary is located at:
- <ul>
- <li>In Linux:
- <pre class="prettyprint"><span style="font-family: Courier New,Courier,monospace"><TIZEN_SDK>/tools/emulator</span>/bin/ecp-cli</pre></li>
- <li>In Windows®:
- <pre class="prettyprint"><span style="font-family: Courier New,Courier,monospace"><TIZEN_SDK>\tools\emulator</span>\bin\ecp-cli.bat</pre></li>
- </ul></p>
+<p>You can control and monitor the Tizen Emulator by using ECP CLI instead of the ECP UI tool. The ECP CLI supports all the functionalities of the ECP UI. The CLI binary is located at:</p>
+ <ul>
+ <li>In Linux:
+ <p><span style="font-family: Courier New,Courier,monospace"><TIZEN_SDK>/tools/emulator/bin/ecp-cli</span></p></li>
+ <li>In Windows®:
+ <p><span style="font-family: Courier New,Courier,monospace"><TIZEN_SDK>\tools\emulator\bin\ecp-cli.bat</span></p></li>
+ </ul>
-<p>You can use the CLI by session mode or shell mode:
+<p>You can use the CLI in a session mode or shell mode:</p>
<ul><li>Session mode
<p>You can access this mode by running the binary without any parameters. The mode keeps a session until it is exited. You can exit by entering the <span style="font-family: Courier New,Courier,monospace">exit</span> command.</p></li>
<li>Shell mode
<p>The following tables list the supported commands of the ECP CLI.</p>
<table>
-<caption>Table: CLI Common commands</caption>
+<caption>Table: CLI common commands</caption>
<tbody>
<tr>
- <th>Commands</th>
+ <th>Command</th>
<th>Syntax</th>
<th>Description</th>
</tr>
<td><span style="font-family: Courier New,Courier,monospace">hds status</span></td>
<td>Show the current host directory sharing status.</td>
</tr>
- </tbody></table>
+ </tbody></table>
<table>
<caption>Table: CLI profile commands</caption>
<th>Command</th>
<th>Mobile</th>
<th>Wearable</th>
- <th>Syntax</th>
+ <th>Syntax</th>
</tr>
<tr>
- <td rowspan="5">call</td>
+ <td rowspan="5">call</td>
<td><span style="font-family: Courier New,Courier,monospace">dial</span></td>
<td rowspan="5">Yes</td>
- <td rowspan="5">No</td>
+ <td rowspan="5">No</td>
<td><span style="font-family: Courier New,Courier,monospace">call dial <number></span></td>
</tr>
<tr>
<tr>
<td><span style="font-family: Courier New,Courier,monospace">status</span></td>
<td><span style="font-family: Courier New,Courier,monospace">call status</span></td>
- </tr>
+ </tr>
<tr>
- <td rowspan="4">sms</td>
+ <td rowspan="4">sms</td>
<td><span style="font-family: Courier New,Courier,monospace">send</span></td>
<td rowspan="4">Yes</td>
- <td rowspan="4">No</td>
+ <td rowspan="4">No</td>
<td><span style="font-family: Courier New,Courier,monospace">sms send <number> <text></span></td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">set status</span></td>
+<td><span style="font-family: Courier New,Courier,monospace">set status</span></td>
<td><span style="font-family: Courier New,Courier,monospace">sms set <available | unavailable></span></td>
</tr>
<tr>
<tr>
<td><span style="font-family: Courier New,Courier,monospace">mms_status</span></td>
<td><span style="font-family: Courier New,Courier,monospace">sms mms_status</span></td>
- </tr>
+ </tr>
<tr>
- <td rowspan="4">location</td>
+ <td rowspan="4">location</td>
<td><span style="font-family: Courier New,Courier,monospace">set</span></td>
<td rowspan="4">Yes</td>
- <td rowspan="4">Yes</td>
+ <td rowspan="4">Yes</td>
<td><span style="font-family: Courier New,Courier,monospace">location set <longitude> <latitude></span></td>
</tr>
<tr>
<td><span style="font-family: Courier New,Courier,monospace">location file <file-path></span></td>
</tr>
<tr>
- <td rowspan="3">battery</td>
+ <td rowspan="3">battery</td>
<td><span style="font-family: Courier New,Courier,monospace">level</span></td>
<td rowspan="3">Yes</td>
- <td rowspan="3">Yes</td>
+ <td rowspan="3">Yes</td>
<td><span style="font-family: Courier New,Courier,monospace">battery level <percent></span></td>
</tr>
<tr>
<td><span style="font-family: Courier New,Courier,monospace">battery status</span></td>
</tr>
<tr>
- <td rowspan="2">earjack</td>
+ <td rowspan="2">earjack</td>
<td><span style="font-family: Courier New,Courier,monospace">set</span></td>
<td rowspan="2">Yes</td>
- <td rowspan="2">No</td>
+ <td rowspan="2">No</td>
<td><span style="font-family: Courier New,Courier,monospace">earjack set <3wire | 4wire | off></span></td>
</tr>
<tr>
<td><span style="font-family: Courier New,Courier,monospace">earjack status</span></td>
</tr>
<tr>
- <td rowspan="2">usb</td>
+ <td rowspan="2">usb</td>
<td><span style="font-family: Courier New,Courier,monospace">set</span></td>
<td rowspan="2">Yes</td>
- <td rowspan="2">Yes</td>
+ <td rowspan="2">Yes</td>
<td><span style="font-family: Courier New,Courier,monospace">usb set <on | off></span></td>
</tr>
<tr>
<td><span style="font-family: Courier New,Courier,monospace">usb status</span></td>
</tr>
<tr>
- <td rowspan="2">rssi</td>
+ <td rowspan="2">rssi</td>
<td><span style="font-family: Courier New,Courier,monospace">set</span></td>
<td rowspan="2">Yes</td>
- <td rowspan="2">No</td>
+ <td rowspan="2">No</td>
<td><span style="font-family: Courier New,Courier,monospace">rssi set <0~4></span></td>
</tr>
<tr>
<td><span style="font-family: Courier New,Courier,monospace">rssi status</span></td>
</tr>
<tr>
- <td rowspan="3">sdcard</td>
+ <td rowspan="3">sdcard</td>
<td><span style="font-family: Courier New,Courier,monospace">mount</span></td>
<td rowspan="3">Yes</td>
- <td rowspan="3">No</td>
+ <td rowspan="3">No</td>
<td><span style="font-family: Courier New,Courier,monospace">sdcard mount <sdcard_ext4_[ 4 | 8 | 16 | 32 ]G></span></td>
</tr>
<tr>
<td><span style="font-family: Courier New,Courier,monospace">sdcard status</span></td>
</tr>
<tr>
- <td rowspan="10">sensor</td>
+ <td rowspan="10">sensor</td>
<td><span style="font-family: Courier New,Courier,monospace">accelerometer</span></td>
<td rowspan="10">Yes</td>
- <td rowspan="10">Yes</td>
+ <td rowspan="10">Yes</td>
<td><span style="font-family: Courier New,Courier,monospace">sensor accelerometer <x> <y> <z></span></td>
- </tr>
+ </tr>
<tr>
<td><span style="font-family: Courier New,Courier,monospace">gyroscope</span></td>
<td><span style="font-family: Courier New,Courier,monospace">sensor gyroscope <x> <y> <z></span></td>
</tr>
<tr>
<td><span style="font-family: Courier New,Courier,monospace">status</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">sensor status [sensor]</span></td>
+<td><span style="font-family: Courier New,Courier,monospace">sensor status [sensor]</span></td>
</tr>
<tr>
<td><span style="font-family: Courier New,Courier,monospace">file</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">sensor file <sensor> <path></span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">sensor file <sensor> <path></span></td>
</tr>
</tbody></table>
- </li>
<h2 id="support" name="support">Supported Features </h2>
-<p>The Emulator provides various virtual H/W, media formats, codecs and <a href="#opengl">OpenGL® ES acceleration</a>. For better performance of OpenGL® ES support, the Tizen Emulator exploits the latest feature of graphic driver so that it is recommended to <a href="https://developer.tizen.org/downloads/sdk/installing-sdk/prerequisites-tizen-sdk" target="_blank">install latest vendor-provided graphic driver</a>. The Emulator, however, has some limitations and <a href="#target">differences compared to physical target devices</a>.</p>
+
+<p>The Emulator provides various virtual H/W, media formats, codecs and <a href="#opengl">OpenGL® ES acceleration</a>. For better performance of the OpenGL® ES support, the Tizen Emulator exploits the latest feature of the graphic driver, so always <a href="https://developer.tizen.org/downloads/sdk/installing-sdk/prerequisites-tizen-sdk" target="_blank">install the latest vendor-provided graphic driver</a>. The Emulator, however, has some limitations and <a href="#target">differences compared to physical target devices</a>.</p>
<p>The following table lists the basic features supported in the Emulator.</p>
<table style="width: 100%" border="1">
<tr>
<td>Skin</td>
-<td><p>Skins are fitted to the screen resolution:</p>
+<td><p>Skins are fitted to the screen resolution:</p>
<ul>
<li>Mobile
<ul><li>WVGA (480 x 800, default)</li>
<li>qHD (540 x 960)</li>
<li>HD (720 x 1280)</li>
</ul>
- </li>
+ </li>
<li>Wearable
<ul><li>320 x 320</li>
<li>360 x 360 (default)</li>
<li>360 x 480</li>
</ul>
</li>
-</ul>
+</ul>
-<p>4 orientation modes are supported:</p>
+<p>4 orientation modes are supported:</p>
<ul>
<li>Portrait (default), landscape, reverse portrait, and reverse landscape</li></ul>
<td>Sound</td>
<td>AC97 device</td>
<td>Supported</td>
-<td>Audio in:
+<td>Audio in:
<ul>
-<li>Make sure that the input volume of the microphone is enough to record your voice or songs on the host machine.</li>
+<li>Make sure that the input volume of the microphone is enough to record your voice or songs on the host machine.</li>
<li>On Windows® 7, inject the microphone into the host machine before starting the Emulator.</li> </ul>
-<p>Audio out:</p>
+<p>Audio out:</p>
<ul>
-<li>On Windows® 7, enable at least 1 audio out device before starting the Emulator. Make sure that the volume icon in the tray is not disabled.</li>
+<li>On Windows® 7, enable at least 1 audio out device before starting the Emulator. Make sure that the volume icon in the tray is not disabled.</li>
<li>While the Emulator is running, do not disable the audio out device, as it can lock the audio system of the guest platform.</li></ul>
</td>
</tr>
<tr>
<td>Camera</td>
-<td><p>Virtual camera device connecting a host machine's Webcam</p>
+<td><p>Virtual camera device connecting a host machine's Webcam</p>
<p>Support: preview, capture, and record</p>
-<p>Image format: YUYV, I420, and YV12</p>
-<p>Attributes: brightness and contrast </p>
+<p>Image format: YUYV, I420, and YV12</p>
+<p>Attributes: brightness and contrast </p>
<p>Resolution: 160 x 120, 176 x 144, 320 x 240, 352 x 288, and 640 x 480</p>
-<p>Video resolution: 1280 x 720 for the WVGA, 320 x 240 for the WQVGA, and 640 x 480 for the HVGA devices.</p>
-<p>The supported video codecs are MPEG-4, H.263, H.264, VC-1 for both encoding and decoding.</p>
+<p>Video resolution: 1280 x 720 for the WVGA, 320 x 240 for the WQVGA, and 640 x 480 for the HVGA devices.</p>
+<p>The supported video codecs are MPEG-4, H.263, H.264, and VC-1 for both encoding and decoding.</p>
</td>
<td>Supported</td>
<td>While recording a video using the Emulator, an audio-video synchronization error can occur depending on your computer hardware and performance.</td>
<tbody>
<tr>
<th style="text-align:center;margin-left:auto;margin-right:auto;">Category</th>
- <th style="text-align:center;margin-left:auto;margin-right:auto;">Subject</th>
+ <th style="text-align:center;margin-left:auto;margin-right:auto;">Subject</th>
<th style="text-align:center;margin-left:auto;margin-right:auto;">Physical target</th>
<th style="text-align:center;margin-left:auto;margin-right:auto;">Emulator</th>
</tr>
<td>Not supported</td>
<td>Supported</td>
</tr>
-
+
<tr>
<td rowspan ="10">Portability</td>
<td>Screen resolution</td>
<td>Bluetooth</td>
<td>Fully supported</td>
<td>Not supported</td>
- </tr>
-
+ </tr>
+
<tr>
- <td rowspan ="3">Performance</td>
+ <td rowspan ="3">Performance</td>
<td>CPU performance</td>
<td>Mobile CPU</td>
<td>Desktop CPU (with hardware virtualization)</td>
<tr>
<th style="text-align:center;margin-left:auto;margin-right:auto;">Category</th>
- <th style="text-align:center;margin-left:auto;margin-right:auto;">Physical target</th>
+ <th style="text-align:center;margin-left:auto;margin-right:auto;">Physical target</th>
<th style="text-align:center;margin-left:auto;margin-right:auto;">Emulator</th>
</tr>
<td>Real device and driver</td>
<td>Virtual (VirtIO) device and driver</td>
</tr>
-
-
+
+
<tr>
<td>Host keyboard and hardware key</td>
<td>Real device and driver</td>
<td>Light</td>
<td>Receives the actual ambient light value of the device.</td>
<td>Receives the virtual ambient light value through the Emulator Control Panel.
- <p>You can register an event handler for the light sensor and test it with the Emulator Control Panel. However, in order to test the screen brightness change, the brightness setting must be automatic in setting application. </p>
+ <p>You can register an event handler for the light sensor and test it with the Emulator Control Panel. However, in order to test the screen brightness change, the brightness setting must be automatic in the setting application. </p>
</td>
</tr>
<tr>
<td>Ultraviolet</td>
- <td>Receives the actual ultraviolet value of the device.</td>
- <td>Receives the virtual actual ultraviolet value through the Emulator Control Panel.
+ <td>Receives the actual ultraviolet value of the device.</td>
+ <td>Receives the virtual actual ultraviolet value through the Emulator Control Panel.
</td>
</tr>
<td>Not supported</td>
</tr>
</tbody>
- </table>
-
+ </table>
+
<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../scripts/showhide.js"></script>
<p class="toc-title">Content</p>
<ul class="toc">
<li><a href="#multi">Using Multi-point Touch</a></li>
- <li><a href="#file">Sharing directory</a></li>
+ <li><a href="#file">Sharing a Directory</a></li>
<li><a href="#webcam">Using a Webcam</a></li>
- <li><a href="#net">Using Emulator in a Network</a></li>
+ <li><a href="#net">Using Network Features</a></li>
<li><a href="#skin">Using Custom Skin Layout</a></li>
<li><a href="#eventcast">Using EventCast</a></li>
- <li><a href="#startup">Emulator Start-up Options</a></li>
-
<li><a href="#dir">Emulator Directory Structure</a></li>
+ <li><a href="#startup">Using Emulator Start-up Options</a></li>
+ <li><a href="#dir">Emulator Directory Structure</a></li>
</ul>
</div></div>
</div>
<h1>Using the Extended Emulator Features</h1>
<p>The Emulator features can be extended in many ways. With the Emulator, you can:</p>
<ul>
-<li><a href="#multi">Using multi-point touch</a></li>
-<li><a href="#file">Sharing directory</a></li>
-<li><a href="#webcam">Using a webcam</a></li>
-<li><a href="#net">Using Emulator in a Network</a></li>
-<li><a href="#skin">Using custom skin layout</a></li>
-<li><a href="#eventcast">Using EventCast</a></li>
-<li><a href="#startup">Emulator start-up options</a></li>
-<li><a href="#dir">Emulator directory structure</a></li>
+<li><a href="#multi">Use multi-point touch</a></li>
+<li><a href="#file">Share a directory</a></li>
+<li><a href="#webcam">Use a Webcam</a></li>
+<li><a href="#net">Use network features</a></li>
+<li><a href="#skin">Use custom skin layout</a></li>
+<li><a href="#eventcast">Use EventCast</a></li>
+<li><a href="#startup">Use Emulator start-up options</a></li>
</ul>
+<p>You can also familiarize yourself with the <a href="#dir">Emulator directory structure</a>.</p>
+
<h2 id="multi" name="multi">Using Multi-point Touch</h2>
<p>To create a multi-point touch effect in the Emulator, press and hold the <strong>CTRL</strong> key (<strong>Command</strong> key in Mac OS® X), while mouse-clicking on the Emulator screen.</p>
<p class="figure">Figure: Adding a touch point</p>
-<p
style="text-align:center;"><img alt="Adding a touch point"
+<p
align="center"><img alt="Adding a touch point"
src="../images/multitouch_add.png"
style="display: block; text-align: center; margin-left: auto; margin-right: auto"/></p>
<h3 id="move" name="move">Moving an Existing Point</h3>
-<p>To move an existing point, press and hold the <strong>CTRL</strong> key (<strong>Command</strong> key in Mac OS® X), mouse-click an existing point, and move it to another location on the screen.</p>
+<p>To move an existing point one by one, press and hold the <strong>CTRL</strong> key (<strong>Command</strong> key in Mac OS® X), mouse-click an existing point, and move it to another location on the screen.</p>
<p class="figure">Figure: Moving an existing point</p>
-<p
style="text-align:center;"><img alt="Moving an existing point"
-src="../images/multitouch_move.png"
+<p
align="center"><img alt="Moving an existing point"
+src="../images/multitouch_move1.png"
style="display: block; text-align: center; margin-left: auto; margin-right: auto"/></p>
+<p>To move all existing points together, press and hold the <strong>CTRL</strong> (<strong>Command</strong> in Mac OS® X) and <strong>SHIFT</strong> keys, mouse-click an existing point, and move it to another location on the screen.</p>
+
+<p class="figure">Figure: Moving all existing points</p>
+<p align="center"><img alt="Moving all existing points" src="../images/multitouch_move2.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
+
+<p>To move 2 existing points symmetrically together, press and hold the <strong>CTRL</strong> (<strong>Command</strong> in Mac OS® X) and <strong>ALT</strong> keys, mouse-click an existing point, and move it to another location on the screen.</p>
+
+<p class="figure">Figure: Symmetrically moving 2 existing points</p>
+<p align="center"><img alt="Symmetrical moving the two existing points" src="../images/multitouch_move3.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
+
+
<h3 id="end" name="end">Ending the Multi-point Touch</h3>
<p>To end the multi-point touch, release the <strong>CTRL</strong> key (<strong>Command</strong> key in Mac OS® X). The touched points on the Emulator screen are invalidated, and the next screen touch event is read as a new event, not part of the previous multi-point touch event.</p>
<p class="figure">Figure: Invalidating touched points</p>
-<p
style="text-align:center;"><img alt="Invalidating touched points"
+<p
align="center"><img alt="Invalidating touched points"
src="../images/multitouch_invalidate.png"
style="display: block; text-align: center; margin-left: auto; margin-right: auto"/></p>
-<h2 id="file" name="file">Sharing directory</h2>
+<h2 id="file" name="file">Sharing a Directory</h2>
<p>You are able to share a directory between Emulator and your computer. The host machine's directory is shown as <span style="font-family: Courier New,Courier,monospace">/mnt/host</span> in the Emulator.</p>
<li>Start the Emulator.</li>
<li>Right-click the Emulator and select <strong>Control Panel</strong> .</li>
<li>Move to the <strong>Host Directory Sharing</strong> tab.</li>
-<li>Mount/unmount the host machine directory.
-</li>
+<li>Mount or unmount the host machine directory.</li>
</ol>
<table class="note">
</table>
-<h2 id="net" name="net">Using Emulator in a Network</h2>
+<h2 id="net" name="net">Using Network Features</h2>
-<p> The Tizen Emulator provides two types of network backend, NAT-based TCP/IP communication and a bridged network. By default, NAT-based network is used. You can configure the type on Emulator Manager > Network Configuration. The Emulator is based on the QEMU virtual machine. "NAT" type exploits QEMU user networking (SLIRP) and "Bridge" type uses tap networking. For more information about networking, refer to <a href="http://wiki.qemu.org/Documentation/Networking" target="_blank">QEMU Networking documentation</a>.</p>
+<p>The Tizen Emulator provides 2 types of network backend: NAT-based TCP/IP communication and a bridged network. By default, the NAT-based network is used. You can configure the type of the network backend in <strong>Emulator Manager > Network Configuration</strong>.</p>
- <h3 id="Proxy" name="Proxy">Proxy Configuration</h3>
- <p> The Tizen Emulator provides three methods of configuration proxy. This can be configurable on Emulator Manager > Network Configuration.</p>
+<p>The Emulator is based on the QEMU virtual machine. The NAT type exploits the QEMU user networking (SLIRP) and the bridge type uses tap networking. For more information about networking, see <a href="http://wiki.qemu.org/Documentation/Networking" target="_blank">QEMU Networking documentation</a>.</p>
+
+<h3 id="Proxy" name="Proxy">Proxy Configuration</h3>
+
+<p>The Tizen Emulator provides 3 methods of proxy configuration. They can be configured in <strong>Emulator Manager > Network Configuration</strong>:</p>
<ul>
-<li>No proxy: does not use proxy configuration.</li>
-<li>Use host proxy: sets the same proxy value that host uses.</li>
-<li>Use manual proxy: sets proxy value manually different from host.</li>
+ <li>No proxy: does not use the proxy configuration.</li>
+ <li>Use host proxy: sets the same proxy value that the host uses.</li>
+ <li>Use manual proxy: sets manually a proxy value different from the host.</li>
</ul>
<table>
- <tbody>
+<tbody>
<tr>
<th class="note">Note</th>
</tr>
<tr>
<td class="note">The following preallocated addresses are not supported as a manual proxy:
- <ul>
- <li>Localhost</li>
- <li>127.0.0.0/8</li>
- <li>10.0.0.0/16</li>
- </ul>
- <p>The automatic proxy configuration is not supported, due to license issues.</p> </td>
+ <ul>
+ <li>Localhost</li>
+ <li>127.0.0.0/8</li>
+ <li>10.0.0.0/16</li>
+ </ul>
+ <p>The automatic proxy configuration is not supported due to license issues.</p> </td>
</tr>
</tbody>
</table>
-<h3 id="NAT" name="NAT">NAT(Network Address Translation)</h3>
-<p>NAT is a default networking backend and has a better usability than other backends. The Emulator supports TCP, UDP, and "ping" within a guest. However, raw socket is not supported.</p>
-<p>The Emulator virtually provides a LAN(Local Area Network), such as the following:</p>
+<h3 id="NAT" name="NAT">NAT (Network Address Translation)</h3>
+<p>NAT is the default networking backend and has better usability than other backends. The Emulator supports TCP, UDP, and ping within a guest. However, a raw socket is not supported.</p>
+<p>The Emulator virtually provides a LAN (Local Area Network), such as the following:</p>
+
<ul>
<li>10.0.2.2: Gateway, host machine</li>
<li>10.0.2.3: DNS (you can specify the Emulator to use the host DNS IP when the Emulator starts)</li>
-<li>10.0.2.15: Emulator's IP</li>
+<li>10.0.2.15: Emulator IP</li>
</ul>
<p class="figure">Figure: Emulator NAT network architecture</p>
-<p style="text-align:center;"><img alt="Emulator network architecture" src="../images/emulator_nat_architecture.png"/></p>
+<p align="center"><img alt="Emulator NAT network architecture"
+src="../images/emulator_nat_architecture.png"/></p>
<h4 id="network" name="network">Network Connections for NAT</h4>
-<p>Inbound connection from external to emulator fails in the NAT backed. If you want to permit inbound connection and test, you should forward port by using one of following methods:</p>
+<p>Inbound connections from external to the Emulator fail in the NAT backend. If you want to permit inbound connections and test, you must forward the port by using one of following methods:</p>
-<ol><li>ECP(Emulator Control Panel)</li>
-<p>You can add port forwarding by using ECP. In ECP > Device Manager > Network tab > User Network Information, click <b>Add port-forwarding</b> button and enter ports to forward</p>
-<li>SDB(Smart Development Bridge)</li>
-<p>SDB provides port forwarding as command. For more information about SDB command, refer to <a href="smart_dev_bridge.htm#command">sdb forward</a>.</p>
-<li>Xml on boot </li>
-<p>You can forward the port on booting the Emulator by modifying QEMU redirection option.</p>
-<p>The QEMU redirection option can be appended in the <span style="font-family: Courier New,Courier,monospace"><TIZEN_SDK_DATA>/emulator/vms/<image name>/vm_config.xml</span> file with the following appending command:</p>
+<ul>
+<li>ECP (Emulator Control Panel)
+<p>You can add port forwarding by using the ECP. In the <strong>ECP > Device Manager > Network</strong> tab, under <strong>User Network Information</strong>, click <strong>Add port-forwarding</strong> and enter the ports to forward.</p></li>
+<li>SDB (Smart Development Bridge)
+<p>The SDB provides port forwarding as a command. For more information about the SDB command, see <a href="smart_dev_bridge.htm#command">sdb forward</a>.</p></li>
+<li>Xml on boot
+<p>You can forward the port on booting the Emulator by modifying the QEMU redirection option. The QEMU redirection option can be appended in the <span style="font-family: Courier New,Courier,monospace"><TIZEN_SDK_DATA>/emulator/vms/<image name>/vm_config.xml</span> file with the following appending command:</p>
<pre class="prettyprint">-redir <PROTOCOL>:<HOST_PORT>:10.0.2.15:<GUEST_PORT></pre>
-<p>Note that <span style="font-family: Courier New,Courier,monospace"><PROTOCOL></span> supports only <span style="font-family: Courier New,Courier,monospace">udp</span> and <span style="font-family: Courier New,Courier,monospace">tcp</span> in the <span style="font-family: Courier New,Courier,monospace"><advancedOptions></span> section:</p>
+<p>Note that <span style="font-family: Courier New,Courier,monospace"><PROTOCOL></span> only supports <span style="font-family: Courier New,Courier,monospace">udp</span> and <span style="font-family: Courier New,Courier,monospace">tcp</span> in the <span style="font-family: Courier New,Courier,monospace"><advancedOptions></span> section:</p>
<pre class="prettyprint"><usability>
<logging>
<level>NONE</level>
<ol><li>Set up the server on A, listening to <span style="font-family: Courier New,Courier,monospace">10.0.2.15:<ServerPort></span>.</li>
-<li>On A, append the <span style="font-family: Courier New,Courier,monospace">-redir tcp:<B's localPort>:10.0.2.15:<A's serverPort></span> redirection option in the <span style="font-family: Courier New,Courier,monospace">vm_config.xml</span> file.</li>
+<li>On A, append the <span style="font-family: Courier New,Courier,monospace">-redir tcp:<B's localPort>:10.0.2.15:<A's serverPort></span> redirection option in the <span style="font-family: Courier New,Courier,monospace">vm_config.xml</span> file.</li>
<li>On B, let the client connect to <span style="font-family: Courier New,Courier,monospace">10.0.2.2:<B's localPort></span>.
-</li></ol>
-<p>For more information, see <a href="http://www.h7.dion.ne.jp/~qemu-win/HowToNetwork-en.html#redir" shape="rect" target="_blank">How to use Network</a>.</p>
+</li>
</ol>
+<p>For more information, see <a href="http://www.h7.dion.ne.jp/%7Eqemu-win/HowToNetwork-en.html#redir" shape="rect" target="_blank">Connection from Host OS to Guest OS by option -redir</a>.</p>
-</li>
+</li> </ul>
+<h3 id="Bridge" name="Bridge">Bridge (Bridged Network)</h3>
+<p>The bridge backend requires a dedicated IP for the Emulator and you can communicate to an external without any port forwarding. If you want to use one of the following, you can try the bridge backend:</p>
-<h3 id="Bridge" name="Bridge">Bridge(Bridged Network)</h3>
-<p>Bridge backend requires a dedicated IP for emulator and you can communicate to external without any port forwarding. If you want one of followings, you can try the bridge backend.</p>
<ul>
-<li>You want to permit inbound connection with no port forwarding.</li>
-<li>Your application should send and receive broadcast/multicast packet. e.g. DLNA(Digital Living Network Alliance) application.</li>
-<li>You want to use firewall-free IP for emulator</li>
-<li>High performance of network</li>
+ <li>You want to permit an inbound connection with no port forwarding.</li>
+ <li>Your application must send and receive broadcast/multicast packets, for example a DLNA (Digital Living Network Alliance) application.</li>
+ <li>You want to use a firewall-free IP for the Emulator.</li>
+ <li>You want high performance from the network.</li>
</ul>
-<p>You can configure the Emulator's IP on Emulator Manager > Network configuration. If you have DHCP server on network, you can configure the Emulator's IP by using DHCP. If not, you should configure the IP manually.</p>
+
+<p>You can configure the Emulator IP in <strong>Emulator Manager > Network Configuration</strong>. If you have a DHCP server on the network, you can configure the Emulator IP using DHCP. If not, you must configure the IP manually.</p>
<p class="figure">Figure: Emulator bridged network architecture</p>
+
+<p align="center"><img alt="Emulator bridged network architecture" src="../images/emulator_bridge_architecture.png"/></p>
+
+
-<p style="text-align:center;"><img alt="Emulator network architecture" src="../images/emulator_bridge_architecture.png"/></p>
<h2 id="skin" name="skin">Using Custom Skin Layout</h2>
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<dbi version="2.0"/>
<rotations>
- <!-- Skin mode definition -->
+ <!--Skin mode definition-->
<rotation name="Portrait">
- <!-- Display number of identification -->
+ <!--Display number of identification-->
<display id="0">">
- <!-- Display screen size and position -->
+ <!--Display screen size and position-->
<region left="35" top="86" width="480" height="800"/>
</display>
<imageList>
- <!-- Resource file name of the usual skin image -->
+ <!--Resource file name of the usual skin image-->
<mainImage>default_0.png</mainImage>">
- <!-- Resource file name of the skin image when HW key events occur -->
+ <!--Resource file name of the skin image when HW key events occur-->
<keyPressedImage>default_0_p.png</keyPressedImage>
</imageList>
<keyMapList>
- <keyMap> <!-- Optional -->
- <!-- HW key region size and position -->
+ <keyMap> <!--Optional-->
+ <!--HW key region size and position-->
<region left="238" top="887" width="74" height="74"/>
<eventInfo>
- <keyCode>139</keyCode> <!-- Keycode value -->
- <keyName>HOME</keyName> <!-- HW key name -->
+ <keyCode>139</keyCode> <!--Keycode value-->
+ <keyName>HOME</keyName> <!--HW key name-->
</eventInfo>
- <!-- This line to be displayed when mouse hovers over the HW key region -->
+ <!--This line to be displayed when mouse hovers over the HW key region-->
<tooltip>Home</tooltip>
</keyMap>
</keyMapList>
</rotation>
</rotations>
<hover>
- <!-- RGB color of the HW key hover -->
+ <!--RGB color of the HW key hover-->
<color B="255" G="255" R="255" />
</hover>
</EmulatorUI></pre>
<ol>
<li>Create a new skin folder in the <span style="font-family: Courier New,Courier,monospace"><TIZEN_SDK>/tools/emulator/skins/</span> folder.</li>
<li>In the skin folder, define the contents of the <span style="font-family: Courier New,Courier,monospace">default.dbi</span> and <span style="font-family: Courier New,Courier,monospace">info.ini</span> files and include the required skin image files.</li>
- <li><p>Select the skin name in the <a href="emulator.htm#manager">Emulator Manager</a>. You can also use the <a href="emulator.htm#startup">Emulator start-up options</a> in the command line.</p>
+ <li><p>Select the skin name in the <a href="emulator.htm#manager">Emulator Manager</a>. You can also use the <a href="#startup">Emulator start-up options</a> in the command line.</p>
<p>The image defined in your modified XML meta file is displayed when the Emulator is launched.</p></li>
</ol>
</tbody>
</table>
+
<h2 id="eventcast" name="eventcast">Using EventCast</h2>
<p>The Emulator supports event injection using ECP (Emulator Control Panel). However, injecting sensor events using ECP is less intuitive and convenient. When you are injecting events, touching the Emulator screen simultaneously is impossible. EventCast enables you to inject sensor and touch events more intuitively using a real target device.</p>
<p>The following figure illustrated how the EventCast application in the target device gathers events and passes them to the Emulator controller, which converts and hands them over to the Tizen platform. This is convenient in case you do not have a Tizen mobile device.</p>
<p class="figure">Figure: EventCast architecture</p>
-
<p style="text-align:center;"><img alt="eventcast_architecture" src="../images/eventcast_architecture.png" /></p>
+
<p align="center"><img alt="eventcast_architecture" src="../images/eventcast_architecture.png" /></p>
<p>EventCast provides the following features:</p>
<ul>
<li>Click <strong>Show Event</strong>. You can now inject a sensor or touch value to the Emulator.</li>
</ol></li></ul>
-<h2 id="startup" name="startup">Emulator Start-up Options</h2>
+
+<h2 id="startup" name="startup">Using Emulator Start-up Options</h2>
+
<p>You can launch the Emulator with specific settings by defining start-up options in the command line:</p>
<pre class="prettyprint">
# ./emulator-x86 --skin-args <skin options> --qemu-args <QEMU options>
<td>Enables a rotary device.</td>
</tr>
-
<tr>
<td>Brightness</td>
<td><span style="font-family: Courier New,Courier,monospace">-device maru-brightness</span></td>
</ul>
+
<h2 id="dir" name="dir">Emulator Directory Structure</h2>
<p>The following table describes the content of the Emulator directory, located in the <span style="font-family: Courier New,Courier,monospace"><TIZEN_SDK>/tools/emulator</span> folder.</p>
<tr>
<td><span style="font-family: Courier New, Courier, monospace">bin/emulator-manager.jar</span></td>
<td>Emulator manager jar, which can also launch the
- Emulator with the <a href="#manager">Emulator
+ Emulator with the <a href="emulator.htm#manager">Emulator
Manager</a>.
</td>
</tr>
</tr>
<tr>
<td><span style="font-family: Courier New,Courier,monospace"><image name>/vm_config.xml</span></td>
- <td>Hardware configuration (for more information, see <a href="#vm">Virtual Machine</a>)</td>
+ <td>Hardware configuration (for more information, see <a href="emulator.htm#vm">Virtual Machine</a>)</td>
</tr>
<tr>
<td><span style="font-family: Courier New,Courier,monospace"><image name>/${USER}.lock</span></td>
</table>
-
-
<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../scripts/showhide.js"></script>
</script>
</body>
-</html>
+</html>
\ No newline at end of file
<h1>Event Injector</h1>
-<p> In the <a href="emulator.htm#ecp">Emulator Control Panel</a>(ECP), you can inject various types of events.</p>
+<p>In the <a href="emulator.htm#ecp">Emulator Control Panel</a> (ECP), you can inject various types of events.</p>
<h2 id="device" name="device">Providing Device Data</h2>
</script>
</body>
-</html>
+</html>
\ No newline at end of file
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/> <img alt="Mobile native" src="../images/mn_icon.png"/></p>
+ <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/> <img alt="Mobile native" src="../images/mn_icon.png"/> <img alt="Wearable native" src="../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<li><a href="#connection">Connection Explorer</a></li>
<li><a href="#build">Build and Run</a></li>
<li><a href="#debug">Debug</a></li>
- <li><a href="#content">Content Assist</a></li>
+ <li><a href="#content_assist">Content Assist</a></li>
<li><a href="#project">Project Management</a></li>
<li><a href="#editor">Editor</a></li>
<li><a href="#refactor">Refactor</a></li>
- <li><a href="#ui">Web UI Builder</a></li>
<li><a href="#ide">Native IDE</a></li>
<li><a href="#web_ide">Web IDE</a></li>
<li><a href="#da">Dynamic Analyzer</a></li>
<p>The following symbols are used to define the supported operating system for each shortcut:</p>
<ul>
-<li><p
style="text-align:left;"><img alt="windows" src="../images/windows.png" />: Windows®</p></li>
-<li><p
style="text-align:left;"><img alt="ubuntu" src="../images/ubuntu.png" />: Ubuntu</p></li>
-<li><p
style="text-align:left;"><img alt="mac" src="../images/mac.png" />: Mac OS®</p></li>
+<li><p><img alt="windows" src="../images/windows.png" />: Windows®</p></li>
+<li><p><img alt="ubuntu" src="../images/ubuntu.png" />: Ubuntu</p></li>
+<li><p><img alt="mac" src="../images/mac.png" />: Mac OS®</p></li>
</ul>
<h2 id="connection" name="connection">Connection Explorer</h2>
</tbody>
</table>
-<h2 id="content" name="content">Content Assist</h2>
+<h2 id="content_assist" name="content_assist">Content Assist</h2>
<table border="1" style="width: 100%">
<col width="40%"/>
<col width="20%"/>
</tbody>
</table>
-<h2 id="ui" name="ui">Web UI Builder</h2>
- <table border="1" style="width: 100%">
- <col width="40%"/>
- <col width="20%"/>
- <col width="40%"/>
-<tbody>
- <tr>
- <th>Command</th>
- <th>Support</th>
- <th>Shortcut</th>
- </tr>
- <tr>
- <td>Toggle editor</td>
- <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
- <td>Ctrl+Tab</td>
- </tr>
-
- <tr>
- <td>Toggle editor reverse</td>
- <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
- <td>Shift+Ctrl+Tab</td>
- </tr>
-
- <tr>
- <td>Toggle page designer mode</td>
- <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
- <td>Ctrl+'</td>
- </tr>
-
-</tbody>
-</table>
-
<h2 id="ide" name="ide">Native IDE</h2>
<table border="1" style="width: 100%">
<col width="40%"/>
<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
</div>
<div id="container"><div id="contents"><div class="content">
<div id="profile">
- <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/> <img alt="Mobile native" src="../images/mn_icon.png"/></p>
+ <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/> <img alt="Mobile native" src="../images/mn_icon.png"/> <img alt="Wearable native" src="../images/wn_icon.png"/></p>
</div>
<h1>Log View</h1>
</head>
<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
</div>
<div id="container"><div id="contents"><div class="content">
<div id="profile">
- <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/> <img alt="Mobile native" src="../images/mn_icon.png"/></p>
+ <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/> <img alt="Mobile native" src="../images/mn_icon.png"/> <img alt="Wearable native" src="../images/wn_icon.png"/></p>
</div>
<h1>Project Explorer View</h1>
-<p>The <strong>Project Explorer</strong> view provides a hierarchical view of all resources in the workspace. You can open files for editing or select resources for operations, such as building, packaging, signing, or validating a widget or an application.</p>
+<p>The <strong>Project Explorer</strong> view provides a hierarchical view of all resources in the workspace. You can open files for editing or select resources for operations, such as building, packaging, signing, or validating an application.</p>
<p>The following figure shows and example of the <strong>Project Explorer</strong> view with a Web application.</p>
<p class="figure">Figure: Project Explorer view</p>
-<p
style="text-align:center;"><img alt="Project Explorer view"
+<p
align="center"><img alt="Project Explorer view"
src="../images/project_explorer.png"
style="display: block; text-align: center; margin-left: auto; margin-right: auto"/></p>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/> <img alt="Mobile native" src="../images/mn_icon.png"/></p>
+ <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/> <img alt="Mobile native" src="../images/mn_icon.png"/> <img alt="Wearable native" src="../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
</head>
<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
</div>
<div id="container"><div id="contents"><div class="content">
<div id="profile">
- <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/> <img alt="Mobile native" src="../images/mn_icon.png"/></p>
+ <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/> <img alt="Mobile native" src="../images/mn_icon.png"/> <img alt="Wearable native" src="../images/wn_icon.png"/></p>
</div>
<h1>Smart Launch</h1>
<p>To use Smart Launch, click the icon on the Tizen IDE toolbar.</p>
<p class="figure">Figure: Smart Launch</p>
- <p
style="text-align:center;"><img alt="Smart Launch" src="../images/smart_launch.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
+ <p
align="center"><img alt="Smart Launch" src="../images/smart_launch.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
<p>If there is a launch history in the IDE, a list of previous project launch settings is displayed.</p>
<p class="figure">Figure: Launch history</p>
- <p
style="text-align:center;"><img alt="Launch history" src="../images/smart_launch_history.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
+ <p
align="center"><img alt="Launch history" src="../images/smart_launch_history.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
<p>To set a new launch configuration, select <strong>New Configuration</strong> or use the <strong>Shift+Alt+F12</strong> key (<strong>option+F12</strong> key in Mac OS® X) combination.</p>
<p>The <strong>New Launch Configuration</strong> window:</p>
<li>Launches your project without a configuration if a profile has been defined.</li>
</ul>
<p class="figure">Figure: New smart launch configuration</p>
- <p
style="text-align:center;"><img alt="New smart launch configuration" src="../images/smart_launch_config.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
+ <p
align="center"><img alt="New smart launch configuration" src="../images/smart_launch_config.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
<p>To view the current launch information, including the configuration name and device serial number, use the <strong>Shift+Alt+[</strong> key (<strong>option+[</strong> key in Mac OS® X) or <strong>Shift+Alt+]</strong> key (<strong>option+]</strong> key in Mac OS® X) combinations.</p>
<p class="figure">Figure: Latest launch information</p>
- <p
style="text-align:center;"><img alt="Latest launch configurations" src="../images/smart_launch_five_config.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
+ <p
align="center"><img alt="Latest launch configurations" src="../images/smart_launch_five_config.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../scripts/showhide.js"></script>
<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
</div>
<div id="container"><div id="contents"><div class="content">
<div id="profile">
- <p><img alt="Mobile Web" src="images/mw_icon.png"/> <img alt="Wearable Web" src="images/ww_icon.png"/> <img alt="Mobile native" src="images/mn_icon.png"/></p>
+ <p><img alt="Mobile Web" src="images/mw_icon.png"/> <img alt="Wearable Web" src="images/ww_icon.png"/> <img alt="Mobile native" src="images/mn_icon.png"/> <img alt="Wearable native" src="images/wn_icon.png"/></p>
</div>
<h1 style="text-align:left;"> <font color="#000000">Tizen</font><br/>
color: #ffffff;
}
-#navigation {width: 20%; position: fixed; right: 17px; top: 0; bottom: 51px; /* overflow: auto; *//* min-width: 200px; *//* background: white; */z-index: 100;padding-top: 10px;/* padding-bottom: 88px; */margin-bottom: 89px;}
#toc-navigation {width: 20%; position: fixed; right: 17px; top: 0; bottom: 51px; /* overflow: auto; *//* min-width: 200px; *//* background: white; */z-index: 100;padding-top: 10px;/* padding-bottom: 88px; */margin-bottom: 89px;}
#toc {padding: 0px 20px 5px 20px; /* border: 2px solid #567a9c; */ border-radius: 15px;position: absolute;top: 78px;bottom: 9px;overflow: auto;/* margin-bottom: 5px; */padding-bottom: 5px;border-bottom: 3px transparent solid;margin-left: 5px;}
#main {width: 75%; height: 90%;}
#container {width:100%;}
#container #contents {padding:0px 0 20px; overflow: auto;position: fixed;top: 0;bottom: 0;margin-bottom: 64px;right: 200px;left: 20px;}
body.no-toc #container #contents {right: 0;padding-right:30px;}
-body.no-toc #navigation {width: auto;}
body.no-toc #toc-navigation {width: auto;}
body.no-toc .top {right: 19px; /* float:none; */ width: 28px;}
body.no-toc #profile {float: right;right: -32px;}
ul.devicespecifications li div.devicespec-tit .items-tit-h3 { /*float:left;*/ margin:0 0 0 14px; padding:0; line-height: 22px; font-size: 14pt; color: #1C1C1C; font-style:normal; font-weight: bold;}
ul.devicespecifications li div.devicespec-tit .items-tit-h4 { /*float:left;*/ margin:0 0 0 14px; padding:0; line-height: 22px; font-size: 12pt; color: #1C1C1C; font-style:normal; font-weight: bold;}
- ul.devicespecifications li div.devicespec-tit span {position: absolute; top: 0; right:0;background:#416cbb; display:block; height:22px; margin-right:0; border-left: solid 1px #7a9bd4; }
- ul.devicespecifications li div.devicespec-tit span a.bt-arr {display:block; width: 55px; height:15px; margin-left:0; padding-top:5px; padding-left: 14px; text-align:left; background: url('../images/ico_arr_hidden.gif') 46px 9px no-repeat;}
- ul.devicespecifications li div.devicespec-tit span a.bt-arr em {display:inline-block; height: 14px; line-height:11px; font-size:11px; color:#fff; font-style:normal; margin-right: 8px;}
- ul.devicespecifications li div.devicespec-tit span * {vertical-align:middle;}
+ ul.devicespecifications li div.devicespec-tit > span {position: absolute; top: 0; right:0;background:#416cbb; display:block; height:22px; margin-right:0; border-left: solid 1px #7a9bd4; }
+ ul.devicespecifications li div.devicespec-tit > span a.bt-arr {display:block; width: 55px; height:15px; margin-left:0; padding-top:5px; padding-left: 14px; text-align:left; background: url('../images/ico_arr_hidden.gif') 46px 9px no-repeat;}
+ ul.devicespecifications li div.devicespec-tit > span a.bt-arr em {display:inline-block; height: 14px; line-height:11px; font-size:11px; color:#fff; font-style:normal; margin-right: 8px;}
+ ul.devicespecifications li div.devicespec-tit > span * {vertical-align:middle;}
ul.devicespecifications li div.devicespec-con ul.con-list { width:100%; }
ul.devicespecifications li div.devicespec-con ul.con-list li {line-height: 18px; margin:0; padding:0 0 0 7px; background: url("../images/ico_bullet_2_7.gif") 0 8px no-repeat; }
<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
</div>
<div id="container"><div id="contents"><div class="content">
</ul>
</li>
<li><a href="common_tools/log_view.htm">Log View</a></li>
+ <li><a href="common_tools/t_trace.htm">T-trace</a></li>
<li><a href="common_tools/keyboard_shortcuts.htm">Keyboard Shortcuts</a></li>
</ul>
</li>
<li><a href="web_tools/tools_w.htm">Web Tools</a>
<ul>
+ <li><a href="web_tools/project_wizard_w.htm">Project Wizard</a></li>
<li><a href="web_tools/config_editor_w.htm">Configuration Editor</a></li>
<li><a href="web_tools/privilege_checker_w.htm">Privilege Checker</a></li>
<li><a href="web_tools/rest_viewer_w.htm">REST Viewer</a></li>
-
<li><a href="web_tools/content_assist_w.htm">Content Assist</a></li>
+ <li><a href="web_tools/content_assist_w.htm">Content Assist</a></li>
<li><a href="web_tools/html_editor_w.htm">HTML Editor</a></li>
<li><a href="web_tools/html_preview_w.htm">HTML Preview</a></li>
<li><a href="web_tools/css_editor_w.htm">CSS Editor</a></li>
<li><a href="web_tools/code_beautifier_w.htm">Code Beautifier</a></li>
<li><a href="web_tools/code_minifier_w.htm">Code Minifier</a></li>
<li><a href="web_tools/live_editing_w.htm">Live Editing</a></li>
- <li><a href="web_tools/uibuilder_w.htm">UI Builder</a></li>
<li><a href="web_tools/command_line_interface_w.htm">Command Line Interface</a></li>
<li><a href="web_tools/web_simulator_w.htm">Web Simulator</a>
<ul>
</ul>
</li>
<li><a href="web_tools/web_unit_test_tool_w.htm">Web Unit Test Tool</a></li>
- <li><a href="web_tools/remote_inspector_w.htm">Remote Inspector</a></li>
+ <li><a href="web_tools/web_inspector_w.htm">Web Inspector</a></li>
<li><a href="web_tools/js_analyzer_w.htm">JavaScript Analyzer</a></li>
<li><a href="web_tools/js_log_console_w.htm">JavaScript Log Console View</a></li>
<li><a href="web_tools/set_ide_preference_w.htm">IDE Preferences</a></li>
</head>
<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
</div>
<div id="container"><div id="contents"><div class="content">
<div id="profile">
- <p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../images/mn_icon.png"/> <img alt="Wearable native" src="../images/wn_icon.png"/></p>
</div>
<h1>API and Privilege Checker</h1>
- <p>The IDE provides the API and privilege checker tool to identify potential problems in the application code related to API and <a href="../../../org.tizen.gettingstarted/html/details/sec_privileges.htm#native">privilege usage</a>.</p>
- <p>You can enable the checks during <a href="../../../org.tizen.gettingstarted/html/process/app_dev_process_n.htm#build">build process</a> or code editing in the <a href="../../../org.tizen.gettingstarted/html/process/setting_properties_n.htm">project properties</a>. You can also perform the checks manually in the IDE by selecting <strong>Project > Check API and Privilege Violations</strong>.</p>
+ <p>The IDE provides the API and privilege checker tool to identify potential problems in the application code related to API and <a href="../../../org.tizen.gettingstarted/html/native/details/sec_privileges_n.htm">privilege usage</a>.</p>
+ <p>You can enable the checks during <a href="../../../org.tizen.gettingstarted/html/native/process/app_dev_process_n.htm#build">build process</a> or code editing in the <a href="../../../org.tizen.gettingstarted/html/native/process/setting_properties_n.htm">project properties</a>. You can also perform the checks manually in the IDE by selecting <strong>Project > Check API and Privilege Violations</strong>.</p>
<p>The results of the check are displayed in the <strong>Problems</strong> view. The following tables define the different alarms that the checks can generate.</p>
<table id="API" border="1">
<caption>
</head>
<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
</div>
<div id="container"><div id="contents"><div class="content">
<div id="profile">
- <p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../images/mn_icon.png"/> <img alt="Wearable native" src="../images/wn_icon.png"/></p>
</div>
<h1>Call Stack View </h1>
</head>
<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
</div>
<div id="container"><div id="contents"><div class="content">
<div id="profile">
- <p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../images/mn_icon.png"/> <img alt="Wearable native" src="../images/wn_icon.png"/></p>
</div>
<h1>Command Line Interface</h1>
</pre>
<p>The CLI in the IDE provides functional commands for:</p>
-<ul class="ul">
+<ul>
<li><a href="#cli_config">Setting CLI configuration options</a></li>
<li><a href="#tizen_list">Displaying a sub-command list</a></li>
<li><a href="#tizen_create">Creating a project</a></li>
tizen cli-config -l | --list
</pre>
-<ul class="ul">
+<ul>
<li><span style="font-family: Courier New,Courier,monospace;">-l, --list</span>:
<p>Shows the list of all CLI configuration keys and values.</p></li>
<li><span style="font-family: Courier New,Courier,monospace;">-g, --global</span>:
<td>Queries, sets, replaces, and unsets CLI setting options.
<p>The key and the name are separated by an equal sign.</p>
<p>The CLI configuration keys are:</p>
-<ul class="ul">
+<ul>
<li><span style="font-family: Courier New,Courier,monospace;">default.build.architecture=<x86|arm></span><p>
Sets the default executable architecture type: x86 or arm.</p></li>
<li><span style="font-family: Courier New,Courier,monospace;">default.build.compiler=<llvm|gcc></span><p>
</ul>
</td>
<td>
-<ul class="ul">
+<ul>
<li><p>Set the <span style="font-family: Courier New,Courier,monospace;">profile.xml</span> path globally:</p>
<pre class="prettyprint">
$ tizen cli-config –g default.profiles.path=/home/workspace/.metadata/.plugins/org.tizen.common.sign/profiles.xml
<td>Shows what kind of template each profile supports, and the list corresponding with the given sub-command.
</td>
<td>
-<ul class="ul">
+<ul>
<li><p>List all templates:</p>
<pre class="prettyprint">
$ tizen list native-project
<pre class="prettyprint">
tizen create native-project [-p|--profile <profile name>] [-t|--template <predefined template>]
[-n|--name <project name>] [-- <project location>]</pre>
-<ul class="ul">
+<ul>
<li><span style="font-family: Courier New,Courier,monospace;">-p, --profile</span>:
<p>Sets the profile name.</p></li>
<li><span style="font-family: Courier New,Courier,monospace;">-t, --template</span>:
</ul></td>
<td>Creates a Tizen native project. If an option is empty, the default project is generated from the default template.</td>
<td>
-<ul class="ul">
+<ul>
<li><p>Create the template project based on the basic Tizen mobile UI project:</p>
<pre class="prettyprint">
$ tizen create native-project –p mobile-2.3 –t basic_ui –n basic -- /home/workspace
tizen build-native [-a|--arch <architecture name>] [-c|--compiler <compiler name>]
[-C|--configuration <configuration name>] [--]
</pre>
-<ul class="ul">
+<ul>
<li><span style="font-family: Courier New,Courier,monospace;">-a, --arch, <x86|arm></span>:
<p>Determines the architecture type for the rootstrap.</p></li>
<li><span style="font-family: Courier New,Courier,monospace;">-c, --compiler <llvm|gcc></span>:
<td>Builds the Tizen native project with the default values (if you do not set the options). <p>There are 3 options: architecture, compiler, and configuration. All the options are required and the default values are described in the CLI configuration file.</p>
</td>
<td>
-<ul class="ul">
+<ul>
<li><p>Build the project with the llvm compiler and the debug mode. The x86 executable named basic is generated, if the project is built successfully:</p>
<pre class="prettyprint">
$ tizen build-native -–arch x86 –-compiler llvm –-configuration Debug -- /home/workspace/basic
<pre class="prettyprint">
tizen package [-t | --type <package type>] [-s | --sign <security profile name>] [-S, --strip <on|off>] [--]
</pre>
-<ul class="ul">
+<ul>
<li><span style="font-family: Courier New,Courier,monospace;">-t, --type <tpk | wgt></span>:
<p>Sets the package type.</p></li>
<li><span style="font-family: Courier New,Courier,monospace;">-s, --sign</span>:
<p>Determines whether to strip the native binary.</p>
<p>The default value is <span style="font-family: Courier New,Courier,monospace;">off</span>. This option only works when the native binary is based on the <strong>arm</strong> architecture and <strong>release</strong> build configuration.</p></li>
<li><span style="font-family: Courier New,Courier,monospace;">--</span>:
-<p>Sets the project's build configuration path.</p></li>
+<p>Sets the project's build configuration path or package file path with a file name.</p></li>
</ul></td>
- <td>Packages the Tizen application with signing.
+ <td>Packages the Tizen application with signing. If there is a package file path in the options, the package is re-signed.
<p>The Tizen application is signed with a certified profile named <span style="font-family: Courier New,Courier,monospace">profiles.xml</span>. You can create the default profile from the Tizen IDE, which generates the file in a hidden directory in your workspace (<span style="font-family: Courier New,Courier,monospace"><Your workspace directory>/.metadata/.plugins/org.tizen.common.sign/profiles.xml</span>). Set the path of the <span style="font-family: Courier New,Courier,monospace">profile.xml</span> file once before packaging the Tizen application (you can use the <span style="font-family: Courier New,Courier,monospace">tizen cli-config</span> command).</p>
</td>
<td>
-<ul class="ul">
+<ul>
<li><p>Set up the path of the <span style="font-family: Courier New,Courier,monospace;">profile.xml</span> file that you already have:</p>
<pre class="prettyprint">
$ tizen cli-config –g default.profiles.path=/home/workspace/profiles.xml
$ ls /home/workspace/basic/Debug
org.tizen.basic-1.0.0-i386.tpk
-</pre></li></ul>
+</pre></li>
+<li><p>Re-sign the package:</p>
+<pre class="prettyprint">
+$ tizen package --type tpk --sign myprofile2 -- /home/workspace/basic/Debug/org.tizen.basic-1.0.0-i386.tpk
+</pre></li>
+</ul>
</td>
</tr>
<tr id="tizen_install">
<pre class="prettyprint">
tizen install <-t | -target <target name>> <-n | --name <package name>> [--]
</pre>
-<ul class="ul">
+<ul>
<li><span style="font-family: Courier New,Courier,monospace;">-t, --target</span>:
<p>Sets the target, which installs the Tizen package.</p></li>
<li><span style="font-family: Courier New,Courier,monospace;">-n, --name</span>:
<td>Installs a Tizen application to a Tizen device.
</td>
<td>
-<ul class="ul">
+<ul>
<li><p>Install a basic application named <span style="font-family: Courier New,Courier,monospace;">org.tizen.basic-1.0.0-i386.tpk</span> to the emulator-26101:</p>
<pre class="prettyprint">
$ tizen install -–target emulator-26101 –-name org.tizen.basic-1.0.0-i386.tpk -- /home/workspace/basic/Debug
<pre class="prettyprint">
tizen uninstall <-t | --target <target name>> <-p | --pkgid <package id>>
</pre>
-<ul class="ul">
+<ul>
<li><span style="font-family: Courier New,Courier,monospace;">-t, --target</span>:
<p>Sets the target, which uninstalls the Tizen package.</p></li>
<li><span style="font-family: Courier New,Courier,monospace;">-p, --pkgid</span>:
</ul></td>
<td>Uninstalls a Tizen application from a Tizen device.</td>
<td>
-<ul class="ul">
+<ul>
<li><p>Uninstall a basic application whose pkgid is <span style="font-family: Courier New,Courier,monospace">org.tizen.basic</span> from the emulator-26101:</p>
<pre class="prettyprint">
$ tizen uninstall -–target emulator-26101 -–pkgid org.tizen.basic
<pre class="prettyprint">
tizen run <-t | --target <target name>> <-p | --pkgid <package id>>
</pre>
-<ul class="ul">
+<ul>
<li><span style="font-family: Courier New,Courier,monospace;">-t, --target</span>:
<p>Sets the target, which runs the Tizen package.</p></li>
<li><span style="font-family: Courier New,Courier,monospace;">-p, --pkgid</span>:
<td>Runs the Tizen application.
</td>
<td>
-<ul class="ul">
+<ul>
<li><p>Run the basic application whose pkgid is <span style="font-family: Courier New,Courier,monospace">org.tizen.basic </span> on an emulator-26101:</p>
<pre class="prettyprint">
$ tizen run -–target emulator-26101 –-pkgid org.tizen.basic
</pre></td>
<td>Prints the CLI version number of the executable and exits.</td>
<td>
-<ul class="ul">
+<ul>
<li><p>Show the version:</p>
<pre class="prettyprint">
$ tizen version
<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
</div>
<div id="container"><div id="contents"><div class="content">
<div id="profile">
- <p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../images/mn_icon.png"/> <img alt="Wearable native" src="../images/wn_icon.png"/></p>
</div>
<h1>Content Assist</h1>
<p>The Tizen IDE provides the API assist and API hover features to make writing content in the native editor quick and efficient:</p>
- <ul class="ul">
+ <ul>
<li>API Assist
- <p>This feature is used for writing and editing source code. It helps to create content faster by providing suggestions for the APIs that are already present. A list of API methods, keywords, and macros defined in the
native <a href="../../../org.tizen.native.mobile.apireference/index.html">API Reference</a> is displayed when you enter prefix words that match related items.</p></li>
+ <p>This feature is used for writing and editing source code. It helps to create content faster by providing suggestions for the APIs that are already present. A list of API methods, keywords, and macros defined in the <a href="../../../org.tizen.native.mobile.apireference/index.html">API Reference</a> is displayed when you enter prefix words that match related items.</p></li>
<li>API Hover
<p>This features displays information about API methods and API-related types and macros for the native framework.</p></li></ul>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../images/mn_icon.png"/> <img alt="Wearable native" src="../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p>The <strong>File</strong> tab of the dynamic analyzer shows information associated with file operations. The <strong>File</strong> tab can be enabled or disabled in runtime from the <strong>Configuration</strong> dialog. If the file analysis capabilities are disables, the file API information is not displayed.</p>
<p class="figure">Figure: File analysis</p>
- <p
style="text-align: center;"> <img alt="File analysis" src="../images/file_tab.png" /> </p>
+ <p
align="center"> <img alt="File analysis" src="../images/file_tab.png" /> </p>
<p>The tab consists of the following views:</p>
<ol>
<li><a href="#chart">File chart</a> shows file operations (open/close, read/write, lock) as a time flow chart.</li>
<h2 name="chart" id="chart">File Chart</h2>
<p>The file chart has a separated child and parent chart. There can be only 1 parent chart of each file, whereas multiple child charts are supported. Multiple child charts are separated by PID and TID. The parent chart records all the operations performed by the child charts.</p>
<p class="figure">Figure: File chart</p>
- <p
style="text-align: center;"> <img alt="File chart" src="../images/file_chart.png" /> </p>
+ <p
align="center"> <img alt="File chart" src="../images/file_chart.png" /> </p>
<p>The file chart shows the following information:</p>
<ul>
<li>The open or closed state of the file is shown through the color of the graph bars:
<h2 name="api" id="api">File API List</h2>
<p>The <strong>File API List</strong> view shows the APIs that are associated with the file selected in the <strong>File chart</strong>. When the child of the file is selected, this view shows information about the file included in the TID.</p>
<p class="figure">Figure: File API List view</p>
- <p
style="text-align: center;"> <img alt="File API List view" src="../images/file_api_list.png" /> </p>
+ <p
align="center"> <img alt="File API List view" src="../images/file_api_list.png" /> </p>
<p>The view has the following columns:</p>
<ul>
<li><strong>#</strong> shows the sequence number of the API calls.</li>
<h2 name="details" id="details">File Details</h2>
<p>The <strong>File Details</strong> view shows detail information of the file selected in the file chart. When the child row of the file is selected, this view shows information of the file that is included in the TID.</p>
<p class="figure">Figure: File Details view</p>
- <p
style="text-align: center;"> <img alt="File Details view" src="../images/file_detail_info.png" /> </p>
+ <p
align="center"> <img alt="File Details view" src="../images/file_detail_info.png" /> </p>
<p>The view has the following fields:</p>
<ul>
<li><strong>File name</strong> is the file name.</li>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../images/mn_icon.png"/> <img alt="Wearable native" src="../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p>The <strong>Network</strong> tab of the dynamic analyzer displays network information. It only supports the socket APIs of glibc.</p>
<p class="figure">Figure: Network analysis</p>
- <p
style="text-align: center;"> <img alt="Network analysis" src="../images/da_network.png" /> </p>
+ <p
align="center"> <img alt="Network analysis" src="../images/da_network.png" /> </p>
<p>The tab consists of the following views:</p>
<ol>
<p>The <strong>Network chart</strong> displays the socket object in a tree format using a graph.</p>
<p class="figure">Figure: Network chart</p>
- <p
style="text-align: center;"> <img alt="Network chart" src="../images/da_network_chart.png" /> </p>
+ <p
align="center"> <img alt="Network chart" src="../images/da_network_chart.png" /> </p>
<p>The color of horizontal bar in the chart indicates the state of the socket:</p>
<ul>
<p class="figure">Figure: Network API List view</p>
- <p
style="text-align: center;"> <img alt="Network API List view" src="../images/da_network_api_list.png" /> </p>
+ <p
align="center"> <img alt="Network API List view" src="../images/da_network_api_list.png" /> </p>
<p>The view has the following columns:</p>
<ul>
<p>The <strong>Network Details</strong> view displays detailed information of the network socket object selected in the network chart.</p>
<p class="figure">Figure: Network Details view</p>
- <p
style="text-align: center;"> <img alt="Network Details view" src="../images/da_network_details.png" /> </p>
+ <p
align="center"> <img alt="Network Details view" src="../images/da_network_details.png" /> </p>
<p>The view has the following fields:</p>
<ul>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../images/mn_icon.png"/> <img alt="Wearable native" src="../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p>The <strong>OpenGL</strong> (Open Graphics Library) page of the dynamic analyzer displays information about OpenGL® 2.0 and EvasGL.</p>
<p class="figure">Figure: OpenGL® analysis</p>
- <p
style="text-align: center;"> <img alt="OpenGL® analysis" src="../images/da_opengl_analysis.png" /> </p>
+ <p
align="center"> <img alt="OpenGL® analysis" src="../images/da_opengl_analysis.png" /> </p>
<p>The tab consists of the following views:</p>
<ul>
<ul><li> <p>The frame time chart shows the elapsed frame time. The x-axis value of the frame time chart means the frame index number. A small chart value means a good status frame. Only the frames smaller than the value specified by the user and changed to yellow are visible.</p>
<p class="figure">Figure: Frame time chart</p>
- <p
style="text-align: center;"> <img alt="Frame time chart" src="../images/da_opengl_chart_time.png" /> </p> </li>
+ <p
align="center"> <img alt="Frame time chart" src="../images/da_opengl_chart_time.png" /> </p> </li>
<li> <p>The frame rate chart shows the FPS. The x-axis value of the frame rate chart means the analysis time. A larger chart value means a good status frame.</p>
<p class="figure">Figure: Frame rate chart</p>
- <p
style="text-align: center;"> <img alt="Frame rate chart" src="../images/da_opengl_chart_rate.png" /> </p> </li></ul>
+ <p
align="center"> <img alt="Frame rate chart" src="../images/da_opengl_chart_rate.png" /> </p> </li></ul>
<p>The <strong>Details</strong> view shows the details of the selected chart.</p>
<p class="figure">Figure: OpenGL® Chart Details view</p>
- <p
style="text-align: center;"> <img alt="OpenGL® Chart Details view" src="../images/da_opengl_chart_details.png" /> </p>
+ <p
align="center"> <img alt="OpenGL® Chart Details view" src="../images/da_opengl_chart_details.png" /> </p>
<h2 name="statistics" id="statistics">Statistics</h2>
<p>The <strong>Statistics</strong> view displays the API statistics related to EvasGL and OpenGL® 2.0.</p>
<p class="figure">Figure: OpenGL® Statistics List view</p>
- <p
style="text-align: center;"> <img alt="OpenGL® Statistics List view" src="../images/da_opengl_statistics.png" /> </p>
+ <p
align="center"> <img alt="OpenGL® Statistics List view" src="../images/da_opengl_statistics.png" /> </p>
<p>The view has the following columns:</p>
<ul>
<p>The <strong>API List</strong> view displays the APIs associated with the values selected in the chart.</p>
<p class="figure">Figure: OpenGL® API List view</p>
- <p
style="text-align: center;"> <img alt="OpenGL® API List view" src="../images/da_opengl_api_list.png" /> </p>
+ <p
align="center"> <img alt="OpenGL® API List view" src="../images/da_opengl_api_list.png" /> </p>
<p>The view consists of the following columns:</p>
<ul>
<p>The OpenGL® <strong> Details</strong> view displays the detail information associated with the API selected in the <strong>API List</strong> view. The detailed information shows the uniform data and the error value.</p>
<p class="figure">Figure: OpenGL® Details view</p>
- <p
style="text-align: center;"> <img alt="OpenGL® Details view" src="../images/da_opengl_details.png" /> </p>
+ <p
align="center"> <img alt="OpenGL® Details view" src="../images/da_opengl_details.png" /> </p>
<h2 name="redundant" id="redundant">Redundant List</h2>
<p>The <strong>Redundant</strong> view displays the APIs that are called repeatedly with the same parameters.</p>
<p class="figure">Figure: OpenGL® Redundant view</p>
- <p
style="text-align: center;"> <img alt="OpenGL® Redundant view" src="../images/da_opengl_redundant.png" /> </p>
+ <p
align="center"> <img alt="OpenGL® Redundant view" src="../images/da_opengl_redundant.png" /> </p>
<p>The view has the following columns:</p>
<ul>
<p>The <strong>Context</strong> view displays the context rendering state associated with the item selected in the <strong>API List</strong> view. The title of the table refers to the context number of the selected API.</p>
<p class="figure">Figure: OpenGL® Context view</p>
- <p
style="text-align: center;"> <img alt="OpenGL® Context view" src="../images/da_opengl_context.png" /> </p>
+ <p
align="center"> <img alt="OpenGL® Context view" src="../images/da_opengl_context.png" /> </p>
<p>The view has the following columns:</p>
<ul>
<p>Compare the <strong>Default state</strong> and <strong>Current state</strong> to see changes in any value. Yellow represents a changed state. If you click the filter icon (marked with a red box in the following figure), only the changed state is shown in the list. You can also view the API that changed the value of the state. </p>
<p class="figure">Figure: OpenGL® Context view (changed state)</p>
- <p
style="text-align: center;"> <img alt="OpenGL® Context view (changed state)" src="../images/da_opengl_context_changed.png" /> </p>
+ <p
align="center"> <img alt="OpenGL® Context view (changed state)" src="../images/da_opengl_context_changed.png" /> </p>
<h2 name="program" id="program">Program List</h2>
<p>The <strong>Program</strong> view displays the program information associated with the items selected in the <strong>API List</strong> view.</p>
<p class="figure">Figure: OpenGL® Program view</p>
- <p
style="text-align: center;"> <img alt="OpenGL® Program view" src="../images/da_opengl_program.png" /> </p>
+ <p
align="center"> <img alt="OpenGL® Program view" src="../images/da_opengl_program.png" /> </p>
<p>The view has the following columns:</p>
<ul>
<p>The <strong>Details</strong> view displays the source of the selected program.</p>
<p class="figure">Figure: OpenGL® Details view</p>
- <p
style="text-align: center;"> <img alt="OpenGL® Details view" src="../images/da_opengl_program_details.png" /> </p>
+ <p
align="center"> <img alt="OpenGL® Details view" src="../images/da_opengl_program_details.png" /> </p>
<h2 name="texture" id="texture">Texture List</h2>
<p>The <strong>Texture</strong> view displays the textures associated with the item selected in the <strong>API List</strong> view.</p>
<p class="figure">Figure: OpenGL® Texture view</p>
- <p
style="text-align: center;"> <img alt="OpenGL® Texture view" src="../images/da_opengl_texture.png" /> </p>
+ <p
align="center"> <img alt="OpenGL® Texture view" src="../images/da_opengl_texture.png" /> </p>
<p>The view has the following columns:</p>
<ul>
<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
</div>
<div id="container"><div id="contents"><div class="content">
<div id="profile">
- <p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../images/mn_icon.png"/> <img alt="Wearable native" src="../images/wn_icon.png"/></p>
</div>
<h1>Dynamic Analyzer</h1>
<p>You can monitor the performance and reliability of your Native application on a target device or the Emulator
- by <a href="../../../org.tizen.gettingstarted/html/process/performance_n.htm#running">running the dynamic analyzer tool</a> included within the Tizen SDK.</p>
+ by <a href="../../../org.tizen.gettingstarted/html/native/process/performance_n.htm#running">running the dynamic analyzer tool</a> included within the Tizen SDK.</p>
<p>Dynamic Analyzer provides various functions for profiling applications. To better understand the profiling result, you need to know about each component that tool screen contains, providing you with the tracing information of your application.</p>
<p class="figure">Figure: Dynamic Analyzer screen</p>
- <p
style="text-align: center;"> <img alt="Dynamic Analyzer screen" src="../images/dynamic_analyzer.png" /> </p>
+ <p
align="center"> <img alt="Dynamic Analyzer screen" src="../images/dynamic_analyzer.png" /> </p>
<ol>
<li><a href="da_timeline_n.htm">Timeline</a>
<p>The <strong>Timeline</strong> tab shows the application data values over time as a graph.</p> </li>
<p>The tabs on the main display can be reordered by dragging and dropping.</p>
<p class="figure">Figure: Tab pages</p>
- <p
style="text-align: center;"> <img alt="Tab pages" src="../images/tab_pages.png" /> </p>
+ <p
align="center"> <img alt="Tab pages" src="../images/tab_pages.png" /> </p>
<p>The analysis result helps you to recognize and fix bottlenecks, bugs, and memory and resource leaks.
For instructions on running the dynamic analyzer and ways to analyze the result and utilize the result
- for improving your application performance, see <a href="../../../org.tizen.gettingstarted/html/process/performance_n.htm#dynamic_analysis">Dynamic Analysis</a>.</p>
+ for improving your application performance, see <a href="../../../org.tizen.gettingstarted/html/native/process/performance_n.htm#dynamic_analysis">Dynamic Analysis</a>.</p>
<h2 id="settings" name="settings">Settings</h2>
<p>The settings button on the toolbar opens the <strong>Settings</strong> dialog box, which is used to adjust the dynamic analyzer functions during operation or stop.</p>
<p>The target shows a list of the currently supported profiles.</p>
<p>The template is a combination of several useful features and you can set up a template for each target. When you select a template, the template description is displayed on the screen.</p>
<p class="figure">Figure: Features tab</p>
- <p
style="text-align:center;"><img alt="Features tab" src="../images/features_tab.png" /></p>
+ <p
align="center"><img alt="Features tab" src="../images/features_tab.png" /></p>
<p>The following templates are provided:</p>
<ul>
<li><strong>Bottleneck</strong>: This template shows where can be the most bottleneck point while you are using your program.</li>
<p>When you click the <strong>Details</strong> button in the Features tab, the <strong>Feature details</strong> dialog appears on the screen.</p>
<p class="figure">Figure: Feature details</p>
- <p
style="text-align:center;"><img alt="Features tab" src="../images/feature_details.png" /></p>
+ <p
align="center"><img alt="Features tab" src="../images/feature_details.png" /></p>
<p>The Feature detail dialog contains the following settings for feature analysis:</p>
<ul>
<li><strong>Options</strong>
<p>The configuration settings define the dynamic analyzer configuration.</p>
<p class="figure">Figure: Options tab</p>
- <p
style="text-align:center;"><img alt="Option tab" src="../images/config_tab.png" /></p>
+ <p
align="center"><img alt="Option tab" src="../images/config_tab.png" /></p>
<ul><li>Recording / Replay option
<ul><li><strong>Auto-stop while replaying</strong>: Reproduces the information that was saved through the dynamic analyzer previously. The stored information has an end time.
<p>Select this option to terminate at the same time as before.</p></li>
<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
</div>
<div id="container"><div id="contents"><div class="content">
<div id="profile">
- <p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../images/mn_icon.png"/> <img alt="Wearable native" src="../images/wn_icon.png"/></p>
</div>
<h1>Range</h1>
<p>The range information feature of the dynamic analyzer provides information about the application performance in a selected range.</p>
<p class="figure">Figure: Range information</p>
- <p
style="text-align:center;"><img alt="Range information" src="../images/range_info.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
+ <p
align="center"><img alt="Range information" src="../images/range_info.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
<p>The range information can be created in one of the following 2 ways:</p>
<ul>
<li>Chart (<strong>Timeline</strong>, <strong>File</strong>, and <strong>Thread</strong> tabs)
</ul>
<p class="figure">Figure: Set range on a chart</p>
- <p
style="text-align:center;"><img alt="Set range on a chart" src="../images/set_range_chart.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p></li>
+ <p
align="center"><img alt="Set range on a chart" src="../images/set_range_chart.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p></li>
<li>Table (all tables, except profiling)
<ul>
</ul>
<p class="figure">Figure: Set range on a table</p>
- <p
style="text-align:center;"><img alt="Set range on a table" src="../images/range_context_menu.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p></li>
+ <p
align="center"><img alt="Set range on a table" src="../images/range_context_menu.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p></li>
</ul>
<p>In the context menu, select <strong>Clear Analyze range</strong> to clear the set range values and close the range page. The start and end time selection is not removed.</p>
<p>When range information is created, the values within the range are displayed in yellow in the other views.</p>
<p class="figure">Figure: Range area in the Call Trace view</p>
- <p
style="text-align:center;"><img alt="Range area in the Call Trace view" src="../images/range_info_view.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
+ <p
align="center"><img alt="Range area in the Call Trace view" src="../images/range_info_view.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../images/mn_icon.png"/> <img alt="Wearable native" src="../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p>The <strong>Summary</strong> tab of the dynamic analyzer provides various information about the application performance.</p>
<p class="figure">Figure: Summary information</p>
- <p
style="text-align: center;"> <img alt="Summary information" src="../images/da_summary_info.png" /> </p>
+ <p
align="center"> <img alt="Summary information" src="../images/da_summary_info.png" /> </p>
<p>The tab consists of the following views:</p>
<ol>
<p>The <strong>Leaks</strong> view shows data that is recognized as a leak on application runtime, mainly related to memory allocation and file operations.</p>
<p class="figure">Figure: Leaks view</p>
- <p
style="text-align: center;"> <img alt="Leaks view" src="../images/leak_view.png" /> </p>
+ <p
align="center"> <img alt="Leaks view" src="../images/leak_view.png" /> </p>
<p>The <strong>Leak candidates</strong> view shows data that is estimated as a leak in the running application, mainly due to memory allocation and file operations.</p>
<p class="figure">Figure: Leak candidates view</p>
- <p
style="text-align: center;"> <img alt="Leak candidates view" src="../images/leak_candidates_view.png" /> </p>
+ <p
align="center"> <img alt="Leak candidates view" src="../images/leak_candidates_view.png" /> </p>
<p>These views have the following columns:</p>
<ul>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../images/mn_icon.png"/> <img alt="Wearable native" src="../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../images/mn_icon.png"/> <img alt="Wearable native" src="../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<h1>Timeline</h1>
<p>The <strong>Timeline</strong> tab of the dynamic analyzer shows the data values over time as a graph.</p>
<p class="figure">Figure: Timeline information</p>
- <p
style="text-align: center;"> <img alt="Timeline information" src="../images/timeline.png" /> </p>
+ <p
align="center"> <img alt="Timeline information" src="../images/timeline.png" /> </p>
<p>The tab consists of the following views:</p>
<ol>
<li><a href="#timechart">Timeline chart</a> shows the data values in a graph. The chart content can be edited in the <a href="#config">Edit chart</a> dialog.</li>
<p>The timeline chart shows the data values over time as a chart. You can create 12 different charts, which can be selected from the left side of the window.</p>
<p class="figure">Figure: Timeline chart</p>
- <p
style="text-align: center;"> <img alt="Timeline chart" src="../images/timeline_chart.png" /></p>
+ <p
align="center"> <img alt="Timeline chart" src="../images/timeline_chart.png" /></p>
<ol>
<li><strong>CPU chart</strong>
<p>Shows CPU usage.</p>
<li><p> <img src="../images/color_1.png" />: System CPU usage (%)</p></li>
<li><p> <img src="../images/color_2.png" />: Application CPU Usage (%)</p></li>
</ul> </li>
- <li><p><strong>CPU core chart</strong></p> <p>Shows CPU core usage. Depending on the number of device cores, the number of lines on the chart varies.</p>
+
+ <li><strong>CPU core chart</strong> <p>Shows CPU core usage. Depending on the number of device cores, the number of lines on the chart varies.</p>
<ul>
<li> <p><img src="../images/color_3.png" />: CPU core0 usage (%)</p></li>
<li><p> <img src="../images/color_4.png" />: CPU core1 usage (%)</p></li>
<li><p> <img src="../images/color_03.png" />: CPU core6 usage (%)</p></li>
<li><p> <img src="../images/color_04.png" />: CPU core7 usage (%)</p></li>
</ul> </li>
- <li><strong>CPU frequency chart</strong></li>
+ <li><strong>CPU frequency chart</strong>
<p>Shows CPU frequency. Depending on the number of device cores, the number of lines on the chart varies. In the Emulator, the frequency is always 0.</p>
<ul>
<li><p> <img src="../images/color_05.png" />: CPU core0 frequency (KHz)</p></li>
<li><p> <img src="../images/color_010.png" />: CPU core5 frequency (KHz)</p></li>
<li><p> <img src="../images/color_011.png" />: CPU core6 frequency (KHz)</p></li>
<li><p> <img src="../images/color_012.png" />: CPU core7 frequency (KHz)</p></li>
- </ul>
- <li><p><strong>Heap allocation chart</strong></p></li>
+ </ul> </li>
+ <li><strong>Heap allocation chart</strong>
<p>Shows heap memory allocation. System total and app-allocated data is shown. Confirm additional binary allocation if you have set the binary in the setting dialog.</p>
- <p>If a process is added, a child chart is dynamically created for the added process.
-</p>
+ <p>If a process is added, a child chart is dynamically created for the added process.</p>
<ul>
<li> <p><img src="../images/color_8.png" />: System total allocated (KB)</p></li>
<li> <p><img src="../images/color_9.png" />: App-allocated (KB)</p></li>
<li>Optionally, binary (user set) allocated (KB)</li>
- </ul>
- <li><strong>Process Size chart</strong>
<p></p> <p>Shows amount of memory usage. VSS is virtual memory, RSS is physical memory and PSS is process's private memory + shared memory / number of shared processes.</p>
+ </ul> </li>
+ <li><strong>Process Size chart</strong> <p>Shows amount of memory usage. VSS is virtual memory, RSS is physical memory and PSS is process's private memory + shared memory / number of shared processes.</p>
<p>If a process is added, a child chart is dynamically created for the added process.</p>
<ul>
<li><p><img src="../images/color_11.png" />: Physical RSS (resident set size) memory (KB) size used by the process</p></li>
<li><p><img src="../images/color_12.png" />: PSS (proportional set size) memory (KB) in the following format: [(Unique memory + Shared memory)/number of processes sharing the memory].</p></li>
</ul></li>
- <li><strong>Memory chart</strong>
<p></p> <p> Shows system memory usage.</p>
+ <li><strong>Memory chart</strong> <p> Shows system memory usage.</p>
<ul>
<li><p><img src="../images/color_13.png" />: System maximum memory (KB)</p></li>
<li><p><img src="../images/color_14.png" />: System used memory (KB)</p></li>
<li><p><img src="../images/color_15.png" />: App used memory (KB)</p></li>
</ul></li>
- <li><p><strong>Screenshot chart</strong></p> <p>Shows screenshots (they can be taken only when the <strong>Take snapshot</strong> button is enabled).</p></li>
+ <li><strong>Screenshot chart</strong> <p>Shows screenshots (they can be taken only when the <strong>Take snapshot</strong> button is enabled).</p>
<table class="note">
<tbody>
<tr>
<td class="note">The screenshot is captured about 2 seconds after the scene or form is transformed. To capture screenshots perfectly, use scene management or animation to transform a panel or form.</td>
</tr>
</tbody>
- </table>
- <li><
p><strong>Disk IO chart</strong></p> <p>Shows the disk's read and write bytes and the number of sectors.</p>
+ </table> </li>
+ <li><
strong>Disk IO chart</strong> <p>Shows the disk's read and write bytes and the number of sectors.</p>
<ul>
<li><p><img src="../images/color_013.png" />: Disk read operation counts</p></li>
<li><p><img src="../images/color_014.png" />: Disk write operation counts</p></li>
<li><p><img src="../images/color_015.png" />: Disk bytes read size (KB)</p></li>
<li><p><img src="../images/color_016.png" />: Disk bytes written size (KB)</p></li>
</ul></li>
- <li><
p><strong>Network IO</strong></p> <p>Shows the network send and receive bytes.</p>
+ <li><
strong>Network IO</strong> <p>Shows the network send and receive bytes.</p>
<ul>
<li><p><img src="../images/color_017.png" />: Receive bytes (KB)</p></li>
<li><p><img src="../images/color_018.png" />: Send bytes (KB)</p></li>
</ul></li>
- <li><
p><strong>UI Event chart</strong></p> <p>Shows UI events that occur on the device.</p>
+ <li><
strong>UI Event chart</strong> <p>Shows UI events that occur on the device.</p>
<ul>
<li><p><img src="../images/color_20.png" />: Touch event</p></li>
<li><p><img src="../images/color_22.png" />: Orientation event</p></li>
</ul></li>
- <li><
p><strong>Device chart</strong></p> <p>Shows the status of Wi-Fi, Bluetooth, GPS, DNet, and camera on the device.</p>
+ <li><
strong>Device chart</strong> <p>Shows the status of Wi-Fi, Bluetooth, GPS, DNet, and camera on the device.</p>
<ul>
<li><p><img src="../images/color_019.png" />: Wi-Fi</p></li>
<li><p><img src="../images/color_020.png" />: Bluetooth</p></li>
<li><p><img src="../images/color_023.png" />: Camera</p></li>
</ul></li>
- <li><
p><strong>Energy chart</strong></p> <p>Shows the power consumption of Flash memory, CPU, and LCD.</p>
+ <li><
strong>Energy chart</strong> <p>Shows the power consumption of Flash memory, CPU, and LCD.</p>
<ul>
<li><p><img src="../images/color_024.png" />: Total energy usage (mA)</p></li>
<li><p><img src="../images/color_025.png" />: Flash memory (mA)</p></li>
<h3 id="chart" name="chart">Chart Buttons and Slider</h3>
<p>You can use the chart buttons to ease the analysis.</p>
<p class="figure">Figure: Chart buttons</p>
- <p
style="text-align: center;"> <img src="../images/timeline_buttons.png" /> </p>
+ <p
align="center"> <img src="../images/timeline_buttons.png" /> </p>
<ol>
<li><strong>Add</strong> button <p>The button activates the <strong>Edit chart</strong> dialog. You can define which charts are visible in the <strong>Timeline</strong> page.</p></li>
- <li><strong>Chart Minimize</strong> button <p>Comparing different charts can be helpful. You can do it easily by minimizing all the charts.</p> <p
style="text-align: center;"> <img alt="Chart Minimize button" src="../images/timeline_chart_min.png" /> </p></li>
+ <li><strong>Chart Minimize</strong> button <p>Comparing different charts can be helpful. You can do it easily by minimizing all the charts.</p> <p
align="center"> <img alt="Chart Minimize button" src="../images/timeline_chart_min.png" /> </p></li>
<li><strong>Chart Maximize</strong> button <p>To see the chart in more detail, maximize it.</p></li>
</ol>
<p>To manage the process life-cycle and modify the time scale:</p>
<ol>
<li>Confirm the status of the target process through the life-cycle bar.
- <p
style="text-align: center;"><img alt="Life-cycle bar" src="../images/timeline_lifecycle_bar.png" /></p>
+ <p
align="center"><img alt="Life-cycle bar" src="../images/timeline_lifecycle_bar.png" /></p>
<ul>
<li><p><img src="../images/color_028.png" />: Initializing status</p></li>
<li><p><img src="../images/color_029.png" />: Running status</p></li>
</li>
<li>Adjust the chart's time scale using the scale slider at the bottom left.
- <p
style="text-align: center;"> <img alt="Timeline time scale" src="../images/timeline_scale.png" /> </p>
+ <p
align="center"> <img alt="Timeline time scale" src="../images/timeline_scale.png" /> </p>
</li>
</ol>
<h2 id="config" name="config">Chart Configuration</h2>
<p>The <strong>Edit chart</strong> dialog is an editor window for managing the <strong>Timeline page</strong> chart. The <strong>Edit chart</strong> dialog can be used to control the order in which the visible charts are shown on the <strong>Timeline</strong> page in runtime. To change the order, drag the applicable chart to the new location. To change the visibility state of a chart, click the chart. For a detailed description of each chart, see <a href="#timechart">Timeline Chart</a>.</p>
<p class="figure">Figure: Chart Configuration</p>
- <p
style="text-align: center;"> <img alt="Chart Configuration" src="../images/da_edit_chart_dialog.png" /> </p>
+ <p
align="center"> <img alt="Chart Configuration" src="../images/da_edit_chart_dialog.png" /> </p>
<p>The chart classifies the visibility states by color:</p>
<ul>
<li>Blue
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../images/mn_icon.png"/> <img alt="Wearable native" src="../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<h2 name="snapshot" id="snapshot">Snapshot</h2>
<p>The <strong>Snapshot</strong> view shows the current screen capture and CPU usage, process usage, and available memory.</p>
<p class="figure">Figure: Snapshot view</p>
- <p
style="text-align:center;"><img alt="Snapshot view" src="../images/snapshot_view.png" /></p>
+ <p
align="center"><img alt="Snapshot view" src="../images/snapshot_view.png" /></p>
<p>The <strong>Snapshot</strong> view contains the following components:</p>
<ol>
<li>Image viewer<p>The image viewer shows a snapshot of the current screen.</p> <p>If you select an image, the <a href="da_timeline_n.htm#trace">Call Trace</a> view and the <a href="da_timeline_n.htm#timechart">timeline chart</a> content moves to the API at that time.</p> </li>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../images/mn_icon.png"/> <img alt="Wearable native" src="../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p>For more information about the EDC format, see <a href="http://docs.enlightenment.org/auto/edje/edje_main.html" target="_blank">Edje</a> module and <a href="http://docs.enlightenment.org/auto/edje/edcref.html" target="_blank">EDC</a> format.</p>
<p class="figure">Figure: Enventor basic view</p>
-<p
style="text-align:center;"><img alt="Enventor basic view" src="../images/enventor_basic_view.png" /></p>
+<p
align="center"><img alt="Enventor basic view" src="../images/enventor_basic_view.png" /></p>
<p>Before using Enventor, familiarize yourself with the following:</p>
<ul>
</ul>
<p class="figure">Figure: Layout of Enventor</p>
-<p
style="text-align:center;"><img alt="Layout of Enventor" src="../images/enventor_layout.png" /></p>
+<p
align="center"><img alt="Layout of Enventor" src="../images/enventor_layout.png" /></p>
<h2 id="textview" name="textview">Using the Text View</h2>
<p>The following figure shows the auto-complete contextual pop-up listing the reserved keywords.</p>
<p class="figure">Figure: Auto-complete pop-up</p>
-<p
style="text-align:center;"><img alt="Auto-complete pop-up" src="../images/enventor_autocomplete.png" /></p>
+<p
align="center"><img alt="Auto-complete pop-up" src="../images/enventor_autocomplete.png" /></p>
</li>
<li>Candidate list
<p>The following figure shows the type candidate list.</p>
<p class="figure">Figure: Candidate list</p>
-<p
style="text-align:center;"><img alt="Candidate list" src="../images/enventor_candidate.png" /></p>
+<p
align="center"><img alt="Candidate list" src="../images/enventor_candidate.png" /></p>
<p>The candidate list function also helps you to know the available range of the numeric value based on the context. The numeric candidate function shows the range of the available number.</p>
<p class="figure">Figure: Numerical value range</p>
-<p
style="text-align:center;"><img alt="Numerical value range" src="../images/enventor_function.png" /></p>
+<p
align="center"><img alt="Numerical value range" src="../images/enventor_function.png" /></p>
</li>
</ul>
<p>The following figure shows the LiveEdit contextual pop-up containing part object types.</p>
<p class="figure">Figure: Part object types</p>
-<p
style="text-align:center;"><img alt="Part object types" src="../images/enventor_part_objects.png" /></p>
+<p
align="center"><img alt="Part object types" src="../images/enventor_part_objects.png" /></p>
</li>
<li>Set the position and size of the part object.
<p>The following figure shows the preview of the rectangle object in the live view with the position and the size information created by the LiveEdit contextual pop-up.</p>
<p class="figure">Figure: Part object position and size settings</p>
-<p
style="text-align:center;"><img alt="Part object position and size settings" src="../images/enventor_preview_object.png" /></p>
+<p
align="center"><img alt="Part object position and size settings" src="../images/enventor_preview_object.png" /></p>
<p>After the position and size of the part object is set, press <strong>Enter</strong> to add the part object. The corresponding EDC source code is added automatically in the text view.</p>
<p>The following figure shows the automatically written EDC source code corresponding to the added rectangle part object.</p>
<p class="figure">Figure: Automatically created source code</p>
-<p
style="text-align:center;"><img alt="Automatically created source code" src="../images/enventor_source_code.png" /></p>
+<p
align="center"><img alt="Automatically created source code" src="../images/enventor_source_code.png" /></p>
</li>
</ul>
<th>Function</th>
</tr>
<tr>
-<td rowspan="1" colspan="1"><p
style="text-align:center;"><img alt="Save" src="../images/enventor_save.png" /></p> </td>
+<td rowspan="1" colspan="1"><p
align="center"><img alt="Save" src="../images/enventor_save.png" /></p> </td>
<td rowspan="1" colspan="1"><p>Save</p></td>
<td rowspan="1" colspan="1"><p>Save a file.</p></td>
</tr>
<tr>
-<td rowspan="1" colspan="1"><p
style="text-align:center;"><img alt="Undo" src="../images/enventor_undo.png" /></p> </td>
+<td rowspan="1" colspan="1"><p
align="center"><img alt="Undo" src="../images/enventor_undo.png" /></p> </td>
<td rowspan="1" colspan="1"><p>Undo</p></td>
<td rowspan="1" colspan="1"><p>Undo text changes.</p></td>
</tr>
<tr>
-<td rowspan="1" colspan="1"><p
style="text-align:center;"><img alt="Redo" src="../images/enventor_redo.png" /></p> </td>
+<td rowspan="1" colspan="1"><p
align="center"><img alt="Redo" src="../images/enventor_redo.png" /></p> </td>
<td rowspan="1" colspan="1"><p>Redo</p></td>
<td rowspan="1" colspan="1"><p>Redo text changes.</p></td>
</tr>
<tr>
-<td rowspan="1" colspan="1"><p
style="text-align:center;"><img alt="Highlight" src="../images/enventor_highlight.png" /></p> </td>
+<td rowspan="1" colspan="1"><p
align="center"><img alt="Highlight" src="../images/enventor_highlight.png" /></p> </td>
<td rowspan="1" colspan="1"><p>Highlight</p></td>
<td rowspan="1" colspan="1"><p>Add or remove the part object highlighting in the live view.</p></td>
</tr>
<tr>
-<td rowspan="1" colspan="1"><p
style="text-align:center;"><img alt="Swallow" src="../images/enventor_swallow.png" /></p> </td>
+<td rowspan="1" colspan="1"><p
align="center"><img alt="Swallow" src="../images/enventor_swallow.png" /></p> </td>
<td rowspan="1" colspan="1"><p>Swallow</p></td>
<td rowspan="1" colspan="1"><p>Show or hide virtual images to visualize SWALLOW part objects in the live view.</p></td>
</tr>
<tr>
-<td rowspan="1" colspan="1"><p
style="text-align:center;"><img alt="LiveEdit" src="../images/enventor_liveedit.png" /></p> </td>
+<td rowspan="1" colspan="1"><p
align="center"><img alt="LiveEdit" src="../images/enventor_liveedit.png" /></p> </td>
<td rowspan="1" colspan="1"><p>LiveEdit</p></td>
<td rowspan="1" colspan="1"><p>Add or remove the LiveEdit function.</p></td>
</tr>
<tr>
-<td rowspan="1" colspan="1"><p
style="text-align:center;"><img alt="Lines" src="../images/enventor_lines.png" /></p> </td>
+<td rowspan="1" colspan="1"><p
align="center"><img alt="Lines" src="../images/enventor_lines.png" /></p> </td>
<td rowspan="1" colspan="1"><p>Lines</p></td>
<td rowspan="1" colspan="1"><p>Show or hide the line numbers in the text view.</p></td>
</tr>
<tr>
-<td rowspan="1" colspan="1"><p
style="text-align:center;"><img alt="Find" src="../images/enventor_find.png" /></p> </td>
+<td rowspan="1" colspan="1"><p
align="center"><img alt="Find" src="../images/enventor_find.png" /></p> </td>
<td rowspan="1" colspan="1"><p>Find</p></td>
<td rowspan="1" colspan="1"><p>Find the given word.</p></td>
</tr>
<tr>
-<td rowspan="1" colspan="1"><p
style="text-align:center;"><img alt="Goto" src="../images/enventor_goto.png" /></p> </td>
+<td rowspan="1" colspan="1"><p
align="center"><img alt="Goto" src="../images/enventor_goto.png" /></p> </td>
<td rowspan="1" colspan="1"><p>Goto</p></td>
<td rowspan="1" colspan="1"><p>Go to the given line in the text view.</p></td>
</tr>
<tr>
-<td rowspan="1" colspan="1"><p
style="text-align:center;"><img alt="Console" src="../images/enventor_console.png" /></p> </td>
+<td rowspan="1" colspan="1"><p
align="center"><img alt="Console" src="../images/enventor_console.png" /></p> </td>
<td rowspan="1" colspan="1"><p>Console</p></td>
<td rowspan="1" colspan="1"><p>Show or hide the console view.</p></td>
</tr>
<tr>
-<td rowspan="1" colspan="1"><p
style="text-align:center;"><img alt="Status" src="../images/enventor_status.png" /></p> </td>
+<td rowspan="1" colspan="1"><p
align="center"><img alt="Status" src="../images/enventor_status.png" /></p> </td>
<td rowspan="1" colspan="1"><p>Status</p></td>
<td rowspan="1" colspan="1"><p>Show or hide the status bar.</p></td>
</tr>
<tr>
-<td rowspan="1" colspan="1"><p
style="text-align:center;"><img alt="Setting" src="../images/enventor_setting.png" /></p> </td>
+<td rowspan="1" colspan="1"><p
align="center"><img alt="Setting" src="../images/enventor_setting.png" /></p> </td>
<td rowspan="1" colspan="1"><p>Setting</p></td>
<td rowspan="1" colspan="1"><p>Show the configure setting window.</p></td>
</tr>
<tr>
-<td rowspan="1" colspan="1"><p
style="text-align:center;"><img alt="About" src="../images/enventor_about.png" /></p> </td>
+<td rowspan="1" colspan="1"><p
align="center"><img alt="About" src="../images/enventor_about.png" /></p> </td>
<td rowspan="1" colspan="1"><p>About</p></td>
<td rowspan="1" colspan="1"><p>Show shortcut keys.</p></td>
</tr>
<p>Additionally, you can control the tool functions.</p>
<p class="figure">Figure: Configuration Setting window</p>
-<p
style="text-align:center;"><img alt="Configuration Setting window" src="../images/enventor_settings_window.png" /></p>
+<p
align="center"><img alt="Configuration Setting window" src="../images/enventor_settings_window.png" /></p>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../images/mn_icon.png"/> <img alt="Wearable native" src="../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../images/mn_icon.png"/> <img alt="Wearable native" src="../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<li><a href="#ui"><ui-application> Element</a></li>
<li><a href="#account"><account> Element</a></li>
<li><a href="#privileges"><privileges> Element</a></li>
- <li><a href="#feature"><feature> Element</a></li>
+ <li><a href="#feature"><feature> Element</a></li>
+ <li><a href="#profile_element"><profile> Element</a></li>
+ <li><a href="#widget_app"><widget-application> Element</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Manifest Text Editor</h1>
- <p>A Tizen native application package consists of exactly 1 manifest file, called <span style="font-family: Courier New,Courier,monospace;">tizen-manifest.xml</span>. It is used to describe the information of application. The manifest file is composed of XML elements, which include the root <a href="#manifest"><manifest></a> element and its child elements representing application information, such as <span style="font-family: Courier New,Courier,monospace;"><version></span>, and <span style="font-family: Courier New,Courier,monospace;"><privileges></span>. The <a href="#hierarchy">child elements are organized into a specific hierarchy</a>. Elements may have attributes associated with them. Attributes describe information about the element.</p>
-<p>The manifest file information can be edited using the <a href="../../../org.tizen.gettingstarted/html/process/setting_properties_n.htm#manifest">manifest editor</a>, or you can modify the XML structure directly using the text editor. To open the manifest editor, double-click the <span style="font-family: Courier New,Courier,monospace;">tizen-manifest.xml</span> file in the <strong>Project Explorer</strong> view of the IDE. To use the text editor, right-click the <span style="font-family: Courier New,Courier,monospace;">tizen-manifest.xml</span> file in the <strong>Project Explorer</strong> view and select <strong>Open with > Text Editor</strong>.</p>
+ <p>A Tizen native application package consists of exactly 1 manifest file, called <span style="font-family: Courier New,Courier,monospace;">tizen-manifest.xml</span>, which is used to describe the application information. The manifest file is composed of XML elements, which include the root <a href="#manifest"><manifest></a> element and its child elements representing application information, such as <span style="font-family: Courier New,Courier,monospace;"><version></span>, and <span style="font-family: Courier New,Courier,monospace;"><privileges></span>. The <a href="#hierarchy">child elements are organized into a specific hierarchy</a>. The elements can have attributes associated with them, providing more information about the element.</p>
+<p>The manifest file information can be edited using the <a href="../../../org.tizen.gettingstarted/html/native/process/setting_properties_n.htm#manifest">manifest editor</a>, or you can modify the XML structure directly using the text editor. To open the manifest editor, double-click the <span style="font-family: Courier New,Courier,monospace;">tizen-manifest.xml</span> file in the <strong>Project Explorer</strong> view of the IDE. To use the text editor, right-click the <span style="font-family: Courier New,Courier,monospace;">tizen-manifest.xml</span> file in the <strong>Project Explorer</strong> view and select <strong>Open with > Text Editor</strong>.</p>
<table class="note"><tbody>
<tr>
<author email="email@email.com" href="http://test.com">author</author>
<description>testdescriptions</description>
<description xml:lang="en-gb">testdesc</description>
- <ui-application appid="org.tizen.uiapp" auto-restart="false" exec="uiapp" multiple="false" nodisplay="false" on-boot="true" taskmanage="true" type="capp">
+ <ui-application appid="org.tizen.uiapp" auto-restart="false" exec="uiapp" launch_mode="single" multiple="false" nodisplay="false" on-boot="true" taskmanage="true" type="capp">
<label>uiapplication</label>
<label xml:lang="en-gb">testlang</label>
<icon>uiapp.png</icon>
</privileges>
<feature name="http://tizen.org/feature/camera.front.flash"/>
<feature name="http://tizen.org/feature/data.encryption"/>
+ <profile name="mobile"/>
+ <widget-application appid="org.tizen.widget-test" exec="widget-test" main="true" update-period="0">
+ <icon>widget-test.png</icon>
+ <label>widget-test</label>
+ <support-size preview="widget-test.png">2x2</support-size>
+ </widget-application>
</manifest>
</pre>
<span style="font-family: Courier New,Courier,monospace"><a href="#feature"><feature></a></span>
</td>
</tr>
+<tr>
+<td style="border:none;"></td>
+ <td colspan="6" style="border:none;">
+ <span style="font-family: Courier New,Courier,monospace"><a href="#profile_element"><profile></a></span>
+</td>
+ </tr>
+<tr>
+<td style="border:none;"></td>
+ <td colspan="6" style="border:none;">
+ <span style="font-family: Courier New,Courier,monospace"><a href="#widget_app"><widget-application></a></span>
+</td>
+ </tr>
+<tr>
+<td colspan="2" style="border:none;"></td>
+ <td colspan="5" style="border:none;">
+ <span style="font-family: Courier New,Courier,monospace"><a href="#widget_icon"><icon></a></span>
+ </td>
+ </tr>
+ <tr>
+<td colspan="2" style="border:none;"></td>
+ <td colspan="5" style="border:none;">
+ <span style="font-family: Courier New,Courier,monospace"><a href="#widget_label"><label></a></span>
+ </td>
+ </tr>
+<tr>
+<td colspan="2" style="border:none;"></td>
+ <td colspan="5" style="border:none;">
+ <span style="font-family: Courier New,Courier,monospace"><a href="#widget_supportsize"><support-size></a></span>
+ </td>
+ </tr>
</tbody>
</table>
</td>
</tr>
</tbody></table>
-<p class="figure">Figure: Manifest editor</p>
-<p style="text-align:center;"><img alt="manifest editor" src="../images/manifest.png" /></p>
+
+<p class="figure">Figure: Editing the <manifest> element in the manifest editor</p>
+<p align="center"><img alt="Editing the manifest element in the manifest editor" src="../images/manifest.png" /></p>
+
<table border="1" id="installlocation"><tbody>
<tr>
<th style="text-align:left;margin-left:auto;margin-right:auto;">
</tr>
<tr>
<td> <p>Installation location for the application.</p>
- <p>By default, set to the internal and developer may select auto or prefer-external to the installation to an external device, sunc as an SD card.</p>
+<p>By default, this value is set to <span style="font-family: Courier New,Courier,monospace">"internal-only"</span>. You can select other values to install to an external device, such as an SD card.</p>
<p><strong>Expected value:</strong> </p>
<ul>
-<li>One of the following values: <span style="font-family: Courier New,Courier,monospace">"auto"</span>, <span style="font-family: Courier New,Courier,monospace">"internal-only"</span>, <span style="font-family: Courier New,Courier,monospace">"prefer-external"</span></li>
+<li><p><span style="font-family: Courier New,Courier,monospace">"auto"</span> (the platform decides where the application is installed)</p></li>
+<li><p><span style="font-family: Courier New,Courier,monospace">"internal-only"</span></p></li>
+<li><p><span style="font-family: Courier New,Courier,monospace">"prefer-external"</span> (preferably installed to an external storage device; however, if the external storage device has no empty space, the application is installed in the internal storage)</p></li>
+
</ul>
- <p>auto - The platform will decide where the app is installed.</p>
- <p>internal-only</p>
- <p>prefer-external - Asked to install an external storage device, but is not guaranteed. If there is no empty space in the external storage device, it is installed on the internal.</p>
</td>
</tr>
</tbody></table>
</tbody></table>
<p><strong>For example:</strong> </p>
<pre class="prettyprint">
-<manifest xmlns="http://tizen.org/ns/packages" package="org.tizen.uiapp" version="1.0.0" api-version="2.3.0">
+<manifest xmlns="http://tizen.org/ns/packages" package="org.tizen.uiapp" version="1.0.0" api-version="2.3.1">
<author email="email@email.com" href="http://test.com">author</author>
<description>.....</description>
<ui-application>.....</ui-application>
<span style="font-family: Courier New,Courier,monospace">href</span> attribute</th>
</tr>
<tr>
-<td> <p>Web site of the package creator. (e.g., a homepage, a profile on a social network, etc)</p>
+<td> <p>Web site of the package creator (such as a homepage or a profile on a social network).</p>
<p><strong>Expected value:</strong> </p>
<ul>
<li>Any valid Web site string value</li>
<h2 name="service" id="service"><service-application> Element</h2>
<p>The <span style="font-family: Courier New,Courier,monospace"><service-application></span> element represents the manifest information of a Tizen native application without a graphical user interface (GUI).</p>
-<p>This is suitable for developing a program to be run continuously, as getting the sensor data. Service application can be packaged with native up application, web application.</p>
+
+<p>Create a service application if you want to develop a program that is to be run continuously, for example, to get the sensor data. The service application can be packaged together with a native UI application or a Web application.</p>
<table border="1"><tbody>
<tr>
</tr>
<tr>
<td> <p>Indicates whether the application is relaunched automatically if it is terminated abnormally.</p>
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">This attribute is not supported in Tizen wearable devices.</td>
+ </tr>
+ </tbody>
+ </table>
+
<p><strong>Expected value:</strong> </p>
<ul>
<li><span style="font-family: Courier New,Courier,monospace">true</span></li>
</tr>
<tr>
<td> <p>Indicates whether the application is launched automatically on device booting time or application installation time.</p>
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">This attribute is not supported in Tizen wearable devices.</td>
+ </tr>
+ </tbody>
+ </table>
+
<p><strong>Expected value:</strong> </p>
<ul>
<li><span style="font-family: Courier New,Courier,monospace">true</span></li>
<ul>
<li><span style="font-family: Courier New,Courier,monospace"><a href="#ui_appid">appid</a></span></li>
<li><span style="font-family: Courier New,Courier,monospace"><a href="#ui_exec">exec</a></span></li>
+ <li><span style="font-family: Courier New,Courier,monospace"><a href="#launch_mode">launch_mode</a></span></li>
<li><span style="font-family: Courier New,Courier,monospace"><a href="#ui_multiple">multiple</a></span></li>
<li><span style="font-family: Courier New,Courier,monospace"><a href="#ui_nodisplay">nodisplay</a></span></li>
<li><span style="font-family: Courier New,Courier,monospace"><a href="#ui_taskmanage">taskmanage</a></span></li>
</td>
</tr>
</tbody></table>
+<table border="1" id="launch_mode"><tbody>
+<tr>
+<th style="text-align:left;margin-left:auto;margin-right:auto;">
+<span style="font-family: Courier New,Courier,monospace">launch_mode</span> attribute</th>
+ </tr>
+<tr>
+<td> <p>Application launch mode.</p>
+<p>By default, this value is set to <span style="font-family: Courier New,Courier,monospace">caller</span>.</p>
+ <p><strong>Expected value:</strong> </p>
+ <ul>
+<li><span style="font-family: Courier New,Courier,monospace">single</span> (launched as a main application)</li>
+<li><span style="font-family: Courier New,Courier,monospace">caller</span> (caller application defines the launch mode with the <span style="font-family: Courier New,Courier,monospace">app_control_set_launch_mode()</span> function)</li>
+ </ul>
+</td>
+ </tr>
+</tbody></table>
<table border="1" id="ui_multiple"><tbody>
<tr>
<th style="text-align:left;margin-left:auto;margin-right:auto;">
</tr>
<tr>
<td> <p>Indicates whether the application is relaunched automatically if it is terminated abnormally.</p>
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">This attribute is not supported in Tizen wearable devices.</td>
+ </tr>
+ </tbody>
+ </table>
+
<p><strong>Expected value:</strong> </p>
<ul>
<li><span style="font-family: Courier New,Courier,monospace">true</span></li>
</tr>
<tr>
<td> <p>Indicates whether the application is launched automatically on device booting time or application installation time.</p>
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">This attribute is not supported in Tizen wearable devices.</td>
+ </tr>
+ </tbody>
+ </table>
+
<p><strong>Expected value:</strong> </p>
<ul>
<li><span style="font-family: Courier New,Courier,monospace">true</span></li>
<p><strong>For example:</strong></p>
-<pre class="prettyprint"><ui-application appid="org.tizen.uiapp" auto-restart="false" exec="uiapp"
+<pre class="prettyprint"><ui-application appid="org.tizen.uiapp" auto-restart="false" exec="uiapp" launch_mode="single"
multiple="false" nodisplay="false" on-boot="true" taskmanage="true" type="capp">
<label>uiapplication</label>
<label xml:lang="en-gb">testlang</label>
<span style="font-family: Courier New,Courier,monospace"><icon></span> element</th>
</tr>
<tr>
-<td> <p>Since the icons are used in the device under settings, Accounts place them in a shared directory.</p>
+<td> <p>Account provider icon image. Since the icons are used in the device under settings, the account icons are placed in a shared directory.</p>
<p><strong>Attributes:</strong> </p>
<ul>
<li><span style="font-family: Courier New,Courier,monospace"><a href="#section">section</a></span></li>
<span style="font-family: Courier New,Courier,monospace"><capability></span> element</th>
</tr>
<tr>
-<td> <p>Capability of the account provider. Capabilities are defined in the http://<VENDOR_INFORMAION>/accounts/capability/<NAME> </p>
+<td> <p>Account provider capability. The capabilities are defined as the <span style="font-family: Courier New,Courier,monospace">http://<VENDOR_INFORMAION>/account/capability/<NAME></span>.</p>
<p><strong>Expected value:</strong> </p>
<ul>
<li>IRI string</li>
</pre>
<h2 name="privileges" id="privileges"><privileges> Element</h2>
-<p>The <span style="font-family: Courier New,Courier,monospace"><privileges></span> element represents required privileges for the Tizen application.</p>
-<p>Applications that use such sensitive APIs must declare the required privileges in the manifest.xml.</P>
-<p>Since the category of privilege different for each type of API, developer have to find a privilege related to the API on document.</p>
-<p>Press the Add button briings up the Add privilege dialog.</p>
-<p class="figure">Figure: Privileges</p>
-<p style="text-align:center;"><img alt="Privileges" src="../images/privilege.png" /></p>
+<p>The <span style="font-family: Courier New,Courier,monospace"><privileges></span> element represents required privileges for the Tizen application. Applications that use sensitive APIs must declare the required privileges in the <span style="font-family: Courier New,Courier,monospace">manifest.xml</span> file. Since the privilege categories differ for each API type, make sure you define a <a href="../../../org.tizen.gettingstarted/html/native/details/sec_privileges_n.htm">correct privilege related to the API you need</a>.</p>
+
+<p>Press <strong>Add</strong> to open the <strong>Add Privilege</strong> dialog.</p>
+<p class="figure">Figure: Editing the <privileges> element in the manifest editor</p>
+<p align="center"><img alt="Editing the privileges element in the manifest editor" src="../images/privilege.png" /></p>
+
<table border="1"><tbody>
<tr>
<th style="text-align:left;margin-left:auto;margin-right:auto;">
<span style="font-family: Courier New,Courier,monospace"><privilege></span> element</th>
</tr>
<tr>
-<td>
-<p>Required privilege for the Tizen application.</p>
-<p><strong>Occurrences:</strong> </p>
+<td> <p>Required privilege for the Tizen application.</p>
+<p><strong>Occurrences:</strong> </p>
<ul>
<li>1 or more (optional)</li>
</ul>
<p><strong>Expected value:</strong> </p>
-<p>name</p>
-<p>Mandatory, URI of the Device API privilege</p>
+<p>Name (mandatory, the URI of the Device API privilege)</p>
<p>For example:</p>
<ul>
<li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/application.admin</span></li>
<li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/account.read</span></li>
</ul>
-<p>For more information on the expected values, see <a href="../../../org.tizen.gettingstarted/html/details/sec_privileges.htm#native">Security and API Privileges</a>.</p>
+<p>For more information on the expected values, see <a href="../../../org.tizen.gettingstarted/html/native/details/sec_privileges_n.htm">Security and API Privileges</a>.</p>
</td>
</tr>
</tbody></table>
</pre>
<h2 id="feature"><feature> Element</h2>
-<p>The <span style="font-family: Courier New,Courier,monospace"><feature></span> element represents the list of required features for feature-based filtering in the Tizen Store. It is used to define the hardware and software components for the tizen application. In order to use/access to api that specialized for each vendor or platform, features must declare. This element has no child elements.</p>
-<p class="figure">Figure: features</p>
-<p style="text-align:center;"><img alt="features" src="../images/features.png" /></p>
+<p>The <span style="font-family: Courier New,Courier,monospace"><feature></span> element represents the list of required features for feature-based filtering in the Tizen Store. This element has no child elements.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace"><feature></span> element represents the list of required features for feature-based filtering in the Tizen Store. It is used to define the hardware and software components for the Tizen application. In order to use or access an API that is specialized for each vendor or platform, the feature must be declared. This element has no child elements.</p>
+<p class="figure">Figure: Editing the <feature> element in the manifest editor</p>
+<p align="center"><img alt="Editing the feature element in the manifest editor" src="../images/features.png" /></p>
+
<table border="1"><tbody>
<tr>
<th style="text-align:left;margin-left:auto;margin-right:auto;">
</ul>
<p><strong>Attributes:</strong> </p>
<ul>
-<li><a href="#name"><span style="font-family: Courier New,Courier,monospace">name</span></a></li>
+<li><a href="#name"><span style="font-family: Courier New,Courier,monospace">name</span></a> (mandatory, a feature key URI)</li>
</ul>
-<p>Mandatory: feature key URI</p>
</td>
</tr>
</tbody></table>
<li><span style="font-family: Courier New,Courier,monospace">"http://tizen.org/feature/camera"</span></li>
<li><span style="font-family: Courier New,Courier,monospace">"http://tizen.org/feature/fmradio"</span></li>
</ul>
-<p>For more information on the expected values and the application filtering mechanism, see <a href="../../../org.tizen.gettingstarted/html/details/app_filtering.htm#native">Feature Filtering for Native Applications</a>.</p>
+<p>For more information on the expected values and the application filtering mechanism, see <a href="../../../org.tizen.gettingstarted/html/native/details/app_filtering_n.htm">Application Filtering</a>.</p>
</td>
</tr>
</tbody></table>
<feature name="http://tizen.org/feature/fmradio"/>
</pre>
- <h2 id="profile"><profile> Element</h2>
-<p>The <span style="font-family: Courier New,Courier,monospace"><profile></span> element determinated that tizen package operate what kind of device. This element has no child elements.</p>
+<h2 id="profile_element"><profile> Element</h2>
+<p>The <span style="font-family: Courier New,Courier,monospace"><profile></span> element determines on which kind of device the Tizen package operates. This element has no child elements.</p>
<table border="1"><tbody>
<tr>
<th style="text-align:left;margin-left:auto;margin-right:auto;">
</tr>
<tr>
<td>
-<p>targeted requirements for specific device categories which layer on top of the Tizen Common Platform, including additional components for devices, APIs, and hardware requirements. Platform must conform to the Tizen common requirements as well as at least one profile.</p>
+<p>Targeted requirements for specific device categories, which layer on top of the Tizen Common Platform, including additional components for devices, APIs, and hardware requirements. The platform must conform to the Tizen common requirements as well as at least 1 profile.</p>
<p><strong>Occurrences:</strong> </p>
<ul>
<li>1 or more (optional)</li>
</ul>
<p><strong>Attributes:</strong> </p>
<ul>
-<li><a href="#name"><span style="font-family: Courier New,Courier,monospace">name</span></a></li>
+<li><a href="#prof_name"><span style="font-family: Courier New,Courier,monospace">name</span></a></li>
</ul>
</td>
</tr>
</tbody></table>
-<table border="1" id="name"><tbody>
+<table border="1" id="prof_name"><tbody>
<tr>
<th style="text-align:left;margin-left:auto;margin-right:auto;">
<span style="font-family: Courier New,Courier,monospace">name</span> attribute</th>
</tr>
<tr>
-<td><p>profile name</p>
+<td><p>Profile name.</p>
<p><strong>Expected value:</strong> </p>
<p>For example:</p>
<ul>
<li><span style="font-family: Courier New,Courier,monospace">mobile</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">wearabel</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">wearable</span></li>
</ul>
</td>
</tr>
</tbody></table>
-
<p><strong>For example:</strong></p>
<pre class="prettyprint">
<profile name="mobile"/>
</pre>
+
+<h2 id="widget_app"><widget-application> Element</h2>
+<p>The <span style="font-family: Courier New,Courier,monospace"><widget-application></span> element represents the settings for the widget application.</p>
+
+<table border="1"><tbody>
+<tr>
+<th style="text-align:left;margin-left:auto;margin-right:auto;">
+<span style="font-family: Courier New,Courier,monospace"><widget-application></span> element</th>
+ </tr>
+<tr>
+<td> <p>Settings for the widget application.</p>
+<p>For more information on the relationship between the elements, see the <a href="#hierarchy">element hierarchy</a>.</p>
+<p><strong>Occurrences:</strong> </p>
+ <ul>
+<li>1 (optional)</li>
+ </ul>
+<p><strong>Expected children:</strong> </p>
+ <table border="1"><tbody>
+<tr>
+<th width="50%">Child element</th>
+ <th>Occurrences</th>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace"><a href="#widget_icon"><icon></a></span></td>
+ <td>1</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace"><a href="#widget_label"><label></a></span></td>
+ <td>1</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace"><a href="#widget_supportsize"><support-size></a></span></td>
+ <td>1</td>
+ </tr>
+</tbody></table>
+<p><strong>Attributes:</strong> </p>
+ <ul>
+ <li><span style="font-family: Courier New,Courier,monospace"><a href="#widget_appid">appid</a></span></li>
+ <li><span style="font-family: Courier New,Courier,monospace"><a href="#widget_exec">exec</a></span></li>
+ <li><span style="font-family: Courier New,Courier,monospace"><a href="#widget_main_attribute">main</a></span></li>
+ <li><span style="font-family: Courier New,Courier,monospace"><a href="#widget_updateperiod">update-period</a></span></li>
+ </ul>
+</td>
+ </tr>
+</tbody>
+</table>
+ <table border="1" id="widget_icon"><tbody>
+<tr>
+<th style="text-align:left;margin-left:auto;margin-right:auto;">
+<span style="font-family: Courier New,Courier,monospace"><icon></span> element</th>
+ </tr>
+<tr>
+<td> <p>Widget application icon image.</p>
+<p><strong>Occurrences:</strong> </p>
+ <ul>
+<li>1</li>
+ </ul>
+
+<p><strong>Expected value:</strong> </p>
+ <ul>
+ <li>Icon file name</li>
+ </ul>
+</td>
+ </tr>
+</tbody></table>
+ <table border="1" id="widget_label"><tbody>
+<tr>
+<th style="text-align:left;margin-left:auto;margin-right:auto;">
+<span style="font-family: Courier New,Courier,monospace"><label></span> element</th>
+ </tr>
+<tr>
+<td> <p>Widget application text.</p>
+<p><strong>Occurrences:</strong> </p>
+ <ul>
+<li>1</li>
+ </ul>
+
+<p><strong>Expected value:</strong> </p>
+ <ul>
+ <li>Label value in string</li>
+ </ul>
+</td>
+ </tr>
+</tbody></table>
+ <table border="1" id="widget_supportsize"><tbody>
+<tr>
+<th style="text-align:left;margin-left:auto;margin-right:auto;">
+<span style="font-family: Courier New,Courier,monospace"><support-size></span> element</th>
+ </tr>
+<tr>
+<td> <p>Size supported by the widget application.</p>
+<p><strong>Occurrences:</strong> </p>
+ <ul>
+<li>1</li>
+ </ul>
+<p><strong>Attributes:</strong> </p>
+ <ul>
+ <li><a href="#widget_preview"><span style="font-family: Courier New,Courier,monospace">preview</span></a></li>
+ </ul>
+
+<p><strong>Expected value:</strong> </p>
+ <ul>
+ <li><span style="font-family: Courier New,Courier,monospace">2x2</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">4x4</span></li>
+ </ul>
+</td>
+ </tr>
+</tbody></table>
+
+<table border="1" id="widget_appid"><tbody>
+<tr>
+<th style="text-align:left;margin-left:auto;margin-right:auto;">
+<span style="font-family: Courier New,Courier,monospace">appid</span> attribute</th>
+ </tr>
+<tr>
+<td><p>Widget application unique ID.</p>
+<p><strong>Expected value:</strong></p>
+ <ul>
+ <li><span style="font-family: Courier New,Courier,monospace">String</span></li>
+ </ul>
+</td>
+ </tr>
+</tbody></table>
+
+<table border="1" id="widget_exec"><tbody>
+<tr>
+<th style="text-align:left;margin-left:auto;margin-right:auto;">
+<span style="font-family: Courier New,Courier,monospace">exec</span> attribute</th>
+ </tr>
+<tr>
+<td><p>Widget application executable file path.</p>
+<p><strong>Expected value:</strong></p>
+ <ul>
+ <li><span style="font-family: Courier New,Courier,monospace">String</span></li>
+ </ul>
+</td>
+ </tr>
+</tbody></table>
+
+<table border="1" id="widget_main_attribute"><tbody>
+<tr>
+<th style="text-align:left;margin-left:auto;margin-right:auto;">
+<span style="font-family: Courier New,Courier,monospace">main</span> attribute</th>
+ </tr>
+<tr>
+<td><p>Indicates which widget application is the main application.</p>
+<p><strong>Expected value:</strong></p>
+ <ul>
+ <li><span style="font-family: Courier New,Courier,monospace">true</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">false</span></li>
+ </ul>
+</td>
+ </tr>
+</tbody></table>
+
+<table border="1" id="widget_updateperiod"><tbody>
+<tr>
+<th style="text-align:left;margin-left:auto;margin-right:auto;">
+<span style="font-family: Courier New,Courier,monospace">update-period</span> attribute</th>
+ </tr>
+<tr>
+<td><p>Indicates the update period in seconds.</p>
+<p><strong>Expected value:</strong> </p>
+ <ul>
+<li>Time in seconds</li>
+ </ul>
+</td>
+ </tr>
+</tbody></table>
+
+<table border="1" id="widget_preview"><tbody>
+<tr>
+<th style="text-align:left;margin-left:auto;margin-right:auto;">
+<span style="font-family: Courier New,Courier,monospace">preview</span> attribute</th>
+ </tr>
+<tr>
+<td><p>Relative path to the preview image.</p>
+
+<p><strong>Expected value:</strong> </p>
+ <ul>
+ <li>File name</li>
+ </ul>
+</td>
+ </tr>
+</tbody></table>
+<p><strong>For example:</strong></p>
+<pre class="prettyprint">
+<widget-application appid="org.tizen.widget-test" exec="widget-test" main="true" update-period="0">
+ <icon>widget-test.png</icon>
+ <label>widget-test</label>
+ <support-size preview="widget-test.png">2x2</support-size>
+</widget-application>
+</pre>
<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../scripts/showhide.js"></script>
</script>
</body>
-</html>
+</html>
\ No newline at end of file
<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
</div>
<div id="container"><div id="contents"><div class="content">
<div id="profile">
- <p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../images/mn_icon.png"/> <img alt="Wearable native" src="../images/wn_icon.png"/></p>
</div>
<h1>PO File Editor</h1>
<th class="note">Note</th>
</tr>
<tr>
-<td class="note">There is no specific wizard to create <span style="font-family: Courier New,Courier,monospace">.po</span> files. To create a <span style="font-family: Courier New,Courier,monospace">.po</span> file, go to <strong>New > Other > General > File</strong> and save the file with the extension <span style="font-family: Courier New,Courier,monospace">.po</span>.</td>
+<td class="note">There is no specific wizard to create <span style="font-family: Courier New,Courier,monospace">.po</span> files. To create a <span style="font-family: Courier New,Courier,monospace">.po</span> file, go to <strong>New > Other > General > File</strong> and save the file with the extension <span style="font-family: Courier New,Courier,monospace">.po</span>.
+<p>A <span style="font-family: Courier New,Courier,monospace">.po</span> file name usually has the form <span style="font-family: Courier New,Courier,monospace"><ll>_<CC>.po</span>. Here <span style="font-family: Courier New,Courier,monospace"><ll></span> stands for an <a href="https://www.gnu.org/software/gettext/manual/html_node/Country-Codes.html" target="_blank">ISO 639</a> 2-letter language code, and <span style="font-family: Courier New,Courier,monospace"><CC></span> stands for an <a href="https://www.gnu.org/software/gettext/manual/html_node/Usual-Language-Codes.html" target="blank">ISO 3166</a> 2-letter country code. For example, for German in Germany, the file name is <span style="font-family: Courier New,Courier,monospace">de_DE.po</span>.</p>
+</td>
+
</tr>
</tbody></table>
<p>To open the PO file editor, double-click the <span style="font-family: Courier New,Courier,monospace">.po</span> file in the Project Explorer.</p>
<p class="figure">Figure: PO file editor</p>
-<p
style="text-align:center;"><img alt="PO file editor" src="../images/po_file_editor1.png" /></p>
+<p
align="center"><img alt="PO file editor" src="../images/po_file_editor1.png" /></p>
<p>To add a new message, click <strong>+Msg</strong>. A new row is added in the message table.</p>
<p>To remove a message, click <strong>-Msg</strong>. Select an item to be removed in the <strong>Remove Messages</strong> dialog.</p>
<p class="figure">Figure: Removing messages</p>
-<p
style="text-align:center;"><img alt="Removing messages" src="../images/po_file_editor2.png" /></p>
+<p
align="center"><img alt="Removing messages" src="../images/po_file_editor2.png" /></p>
<p>To add a language, click <strong>+Lang</strong>. Select a language code item in the <strong>Add Languages</strong> dialog.</p>
<p class="figure">Figure: Adding languages</p>
-<p
style="text-align:center;"><img alt="Adding languages" src="../images/po_file_editor3.png" /></p>
+<p
align="center"><img alt="Adding languages" src="../images/po_file_editor3.png" /></p>
<p>To remove a language, click <strong>-Lang</strong>. Select a message ID in the <strong>Remove Languages</strong> dialog.</p>
<p class="figure">Figure: Removing languages</p>
-<p
style="text-align:center;"><img alt="Removing languages" src="../images/po_file_editor4.png" /></p>
+<p
align="center"><img alt="Removing languages" src="../images/po_file_editor4.png" /></p>
<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
</div>
<div id="container"><div id="contents"><div class="content">
<div id="profile">
- <p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../images/mn_icon.png"/> <img alt="Wearable native" src="../images/wn_icon.png"/></p>
</div>
<h1>Project Wizard</h1>
<p>The Tizen native Project Wizard is an IDE tool that is used to create a native application project.
- It allows you to define the application type and requirements and <a href="#comp">components</a>.</p>
+ It allows you to define the application type and requirements and components.</p>
<p>The Tizen IDE provides various project templates that make it easier for you to start coding your application. When you create a new project, you can select a specific template, which the Tizen native Project Wizard uses to automatically create basic functionalities for the native application. The default project files and folders are also created.</p>
<p>The following project templates are available:</p>
<ul>
<p>This template is suitable for creating a UI application with project files. </p></li>
<li><strong>Service Application</strong>
- <p>This template is suitable for creating a service application that does not have an UI and always runs in the background. Service applications can also work with a UI application.</p></li> </ul>
+ <p>This template is suitable for creating a service application that does not have an UI and always runs in the background. Service applications can also work with a UI application.</p></li>
+ <li><strong>Library</strong>
+ <p>This template is suitable for creating a Tizen library module. Multiple application projects can reference the library modules. If a template project is created as a library project, it cannot be installed onto a device.</p></li>
+
+ </ul>
- <h2 name="comp" id="comp">Project Components</h2>
<p>On the main page of the Tizen native Project Wizard, you can set basic properties of a project, such as the project name, package name, location, sample, and template.</p>
- <p class="figure" style="text-align: center;">Figure: Project Components </p>
- <p style="text-align:center;"><img alt="Project Component" src="../images/proj_component.png"/></p>
+ <p class="figure">Figure: Project Wizard</p>
+ <p align="center"><img alt="Project Wizard" src="../images/native_application_wizard.png"/></p>
<p>The options you can set are listed in the following table.</p>
<table border="1">
<caption>
- Table: Project component options
+ Table: Project Wizard options
</caption>
<tbody>
<tr>
<td>If the selected category has samples or templates, they are displayed in the list on the left.</td>
</tr>
<tr>
- <td>Application Type</td>
+ <td>Application type</td>
<td>Select the application type. It can be previewed in the description view on the right.</td>
</tr>
<tr>
</tr>
<tr>
<td>Location</td>
- <td>Manually select the location of the project. If you check Use default location, this option is disabled.</td>
+ <td>Manually select the location of the project. If you check the <strong>Use default location</strong> checkbox, this option is disabled.</td>
</tr>
</tbody>
</table>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../images/mn_icon.png"/> <img alt="Wearable native" src="../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p>To run a static analysis for your application:</p>
<ol>
<li><p>In the <strong>Project Explorer</strong> view, right-click the project and select <strong>Check Potential Bugs with Build</strong>.</p>
-<p
style="text-align:center;"><img alt="Running the Static Analyzer" src="../images/running_tizen_sa.png"/></p></li>
+<p
align="center"><img alt="Running the Static Analyzer" src="../images/running_tizen_sa.png"/></p></li>
<li>View the analysis results in the <strong>Potential Bugs</strong> view on the right side.
-<p
style="text-align:center;"><img alt="Potential Bugs view" src="../images/tizen_sa_result.png"/></p>
+<p
align="center"><img alt="Potential Bugs view" src="../images/tizen_sa_result.png"/></p>
</li>
</ol>
<p>You can also enable the LLVM Static Analyzer to be run during the build process. Change the setting in the project properties: <strong>Tizen SDK > Static Analysis</strong>.</p>
<p class="figure">Figure: Static analysis properties</p>
- <p
style="text-align:center;"><img alt="Static analysis properties" src="../images/sa_property_page.png"/></p>
+ <p
align="center"><img alt="Static analysis properties" src="../images/sa_property_page.png"/></p>
<h2 name="bugs" id="bugs">Detectable Bugs</h2>
</li>
</ol>
<p class="figure">Figure: Opening the Potential Bug view</p>
- <p
style="text-align:center;"><img alt="Opening the Potential Bug view" src="../images/other_view.png"/></p>
- <p
style="text-align:center;"><img alt="Opening the Potential Bug view" src="../images/potential_bug_select.png"/></p>
+ <p
align="center"><img alt="Opening the Potential Bug view" src="../images/other_view.png"/></p>
+ <p
align="center"><img alt="Opening the Potential Bug view" src="../images/potential_bug_select.png"/></p>
<p>In the <strong>Potential Bug</strong> view, you can group the warnings based on type or file. You can also select any particular bug and expand it to see the complete flow, which resulted in the issue.</p>
<p class="figure">Figure: Static Analyzer Results</p>
- <p
style="text-align:center;"><img alt="Static Analyzer Results" src="../images/potential_bug_result.png"/></p>
+ <p
align="center"><img alt="Static Analyzer Results" src="../images/potential_bug_result.png"/></p>
<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
</div>
<div id="container"><div id="contents"><div class="content">
<div id="profile">
- <p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../images/mn_icon.png"/> <img alt="Wearable native" src="../images/wn_icon.png"/></p>
</div>
<h1>Native Tools</h1>
- <p>The Tizen SDK provides the following set of tools for mobile native application development:</p>
+ <p>The Tizen SDK provides the following set of tools for native application development:</p>
<table class="note">
<tbody>
<p>The UI Builder is not only a UI layout code generating tool, it also supports an easy-to-use programming model though the UI Builder project.</p>
<p class="figure">Figure: UI Builder</p>
-<p
style="text-align:center;"><img alt="UI Builder" src="../images/ui_builder_1.png" /></p>
+<p
align="center"><img alt="UI Builder" src="../images/ui_builder_1.png" /></p>
<h2 id="views" name="views">Supported Views and Editors</h2>
<p>The <strong>Navigation</strong> view displays thumbnail images of all the views in the currently selected project. If the <strong>Navigation</strong> view is not visible, open it from <strong>Window > Show View > Other > Tizen > Navigation</strong>.</p>
<p class="figure">Figure: Navigation view</p>
-<p style="text-align:center;"><img src="../images/nuib_navigation_001.png" /></p>
+<p align="center"><img alt="Navigation view" src="../images/nuib_navigation_001.png" /></p>
<p>The <strong>Navigation</strong> view provides the following features:</p>
-
<ul>
-<li>View navigation</li>
- <ul>
- <li>You can see the thumbnails of the views.</li>
- <li>You can select a view to edit on WYSIWYG Editor.</li>
- </ul>
-<li>View management</li>
- <ul>
- <li>You can create / delete the views.</li>
- <ul>
- <li>context menu > New </li>
- <p class="figure">Figure: New View Wizard</p>
- <p style="text-align:center;"><img src="../images/nuib_new_view_wizard.png" /></p>
- <li>context menu > Add Empty View (Ctrl + a) </li>
- <li>context menu > Delete (Delete) </li>
- <ul>
- <li>Startup View & Editing View can not be deleted</li>
- </ul>
- </ul>
- <li>You can copy / cut / paste / move the views.</li>
- <li>You can select startup view.</li>
- </ul>
-<li>View template</li>
- <ul>
- <li>You can create / delete the view templates.</li>
- <ul>
- <li>context menu > Create View Template </li>
- <p class="figure">Figure: New View Template Wizard</p>
- <p style="text-align:center;"><img src="../images/nuib_new_view_template_wizard.png" /></p>
- </ul>
- <li>You can use the view templates to create new view.</li>
- </ul>
+<li>View navigation
+<ul>
+ <li>You can see the view thumbnails.</li>
+ <li>You can select a view to edit in the WYSIWYG Editor.</li>
+</ul></li>
+<li>View management
+<ul>
+ <li>You can create and delete views.
+ <ul>
+ <li>To create a new view, select <strong>New</strong> in the context menu.
+ <p class="figure">Figure: New View Wizard</p>
+ <p align="center"><img alt="New View Wizard" src="../images/nuib_new_view_wizard.png" /></p></li>
+ <li>To add an empty view, select <strong>Add Empty View</strong> (Ctrl + a) in the context menu.</li>
+ <li>To delete a view, select <strong>Delete</strong> (Delete) in the context menu.
+ <p>Startup and Editing views cannot be deleted.</p>
+ </li></ul>
+ </li>
+ <li>You can copy, cut, paste, and move views.</li>
+ <li>You can select a startup view.</li>
+</ul>
+</li>
+<li>View templates
+<ul>
+ <li>You can create and delete view templates.
+ <ul>
+ <li>To create a new view template, select <strong>Create View Template</strong> in the context menu.
+ <p class="figure">Figure: New View Template Wizard</p>
+ <p align="center"><img alt="New View Template Wizard" src="../images/nuib_new_view_template_wizard.png" /></p></li>
+ </ul>
+ </li>
+
+ <li>You can use the view templates to create a new view.</li>
+</ul></li>
</ul>
-
<h3 id="outline" name="outline">Outline View</h3>
-<p>The <strong>Outline</strong> view displays the hierarchical structure of the view currently open in the <strong>WYSIWYG Editor</strong>. If the <strong>Outline</strong> view is not visible, open it from <strong>Window > Show View > Other > General > Outline</strong>.</p>
+<p>The <strong>Outline</strong> view displays the hierarchical structure of the view currently open in the <strong>WYSIWYG Editor</strong> view. If the <strong>Outline</strong> view is not visible, open it from <strong>Window > Show View > Other > General > Outline</strong>.</p>
<p class="figure">Figure: Outline view</p>
-<p style="text-align:center;"><img alt="Outline view" src="../images/nuib_outline_001.png" /></p>
-
+<p align="center"><img alt="Outline view" src="../images/nuib_outline_001.png" /></p>
<p>The <strong>Outline</strong> view provides the following features:</p>
<ul>
-<li>Widget navigation</li>
+<li>Widget navigation
<ul>
- <li>You can see widget hierarchy.</li>
+ <li>You can see the widget hierarchy.</li>
</ul>
-
-<li>Widget management</li>
+</li>
+<li>Widget management
<ul>
- <li>You can copy / cut / paste / delete / rename the widgets.</li>
+ <li>You can copy, cut, paste, delete, and rename widgets.</li>
</ul>
+</li>
</ul>
<h3 id="properties" name="properties">Properties View</h3>
<p>The <strong>Properties</strong> helps you to edit widget and events.</p>
<p class="figure">Figure: Properties view</p>
-<p
style="text-align:center;"><img alt="Properties view" src="../images/properties_1.png" width="420" height="349" /></p>
+<p
align="center"><img alt="Properties view" src="../images/properties_1.png" width="420" height="349" /></p>
<p>The <strong>Properties </strong>view consists of <strong>Attributes</strong>, and <strong>Event</strong> tabs:</p>
<ul>
<p>The <strong>Widget specification</strong> category includes all widget-specific attributes.</p>
</li>
</ul>
-<p
style="text-align:center;"><img alt="Properties specification" src="../images/properties_specification_1.png" /></p>
+<p
align="center"><img alt="Properties specification" src="../images/properties_specification_1.png" /></p>
</li>
<li><strong>Event</strong>
<p>In the <strong>Event</strong> tab, you can create an event handler and bind it. If you click the <img alt="Forward" src="../images/properties_forward_1.png" width="24" height="25" /> button, the C editor opens. When the event handler function is focused, you can start writing code.</p>
-<p
style="text-align:center;"><img alt="Properties view" src="../images/properties_go_to_1.png" /></p>
+<p
align="center"><img alt="Properties view" src="../images/properties_go_to_1.png" /></p>
</li>
</ul>
<p>The <strong>Resources</strong> view displays the resources in the selected project. If the <strong>Resources</strong> view is not visible, open it from <strong>Window > Show View > Other > Tizen > Resources</strong>.</p>
<p class="figure">Figure: Resources view</p>
-<p
style="text-align:center;"><img alt="Resources view" src="../images/nuib_resources.png" width="291" height="424" /></p>
+<p
align="center"><img alt="Resources view" src="../images/nuib_resources.png" width="291" height="424" /></p>
<p>The <strong>Resources</strong> view provides the following features:</p>
<ul>
<li>Resource navigation
<p>The <strong>WYSIWYG Editor</strong> view is a WYSIWYG (What You See Is What You Get) editor for the UI Builder project.</p>
<p class="figure">Figure: WYSIWYG Editor</p>
-<p
style="text-align:center;"><img alt="WYSIWYG Editor" src="../images/nuib_we_editor.png" /></p>
+<p
align="center"><img alt="WYSIWYG Editor" src="../images/nuib_we_editor.png" /></p>
<p>The <strong>WYSIWYG Editor</strong> view consists of the following parts:</p>
<ul>
<li>
<p>Palette</p>
<p>The palette contains EFL widgets, which you can select and add to the design area.</p>
<ul>
-<li>Supported widgets for mobile</li>
-<p>Scroller, Grid, Table, Box, Panes, Panel, Button, Check, Radio, Colorselector, Entry, Spinner, Slider, Naviframe, List, Genlist, Toolbar, Multibuttonentry, Gengrid, Index, Background, Datetime, Icon, Image, Label, Progressbar, Layout</p>
-<li>Supported widgets for wearable</li>
-<p>Scroller, Grid, Table, Box, Panel, Button, Check, Radio, Entry, Spinner, Slider, Naviframe, List, Genlist, Index, Background, Datetime, Icon, Image, Label, Progressbar, Layout</p>
+<li>Supported widgets for mobile applications:
+<p>Scroller, Grid, Table, Box, Panes, Panel, Button, Check, Radio, Colorselector, Entry, Spinner, Slider, Naviframe, List, Genlist, Toolbar, Multibuttonentry, Gengrid, Index, Background, Datetime, Icon, Image, Label, Progressbar, and Layout</p></li>
+<li>Supported widgets for wearable applications:
+<p>Scroller, Grid, Table, Box, Panel, Button, Check, Radio, Entry, Spinner, Slider, Naviframe, List, Genlist, Index, Background, Datetime, Icon, Image, Label, Progressbar, and Layout</p></li>
</ul>
</li>
<li>
</body>
-</html>
+</html>
\ No newline at end of file
</head>
<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
</div>
<div id="container"><div id="contents"><div class="content">
<div id="profile">
- <p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../images/mn_icon.png"/> <img alt="Wearable native" src="../images/wn_icon.png"/></p>
</div>
<h1>Valgrind</h1>
<li><strong>Massif</strong> <p>Heap memory profiler.</p> </li>
</ul>
- <p>Tizen IDE provides the interface for <a href="../../../org.tizen.gettingstarted/html/process/performance_n.htm#running_valgrind">running Valgrind with your application</a> easily. After performance profiling is terminated, you can see the <a href="../../../org.tizen.gettingstarted/html/process/performance_n.htm#valgrind_result">profiling result</a> and use it for improving performance. </p>
+ <p>Tizen IDE provides the interface for <a href="../../../org.tizen.gettingstarted/html/native/process/performance_n.htm#running_valgrind">running Valgrind with your application</a> easily. After performance profiling is terminated, you can see the <a href="../../../org.tizen.gettingstarted/html/native/process/performance_n.htm#valgrind_result">profiling result</a> and use it for improving performance. </p>
<table class="note">
<tbody>
}
$('#contents').scroll();
-
- var updateH = function(){
+ var checkBreadCrumbs = function() {
if (!isScrolledIntoView($('#contents .content h1')))
{
$('a.top.sms').show();
$('.help_breadcrumbs').show();
}
$('#contents').css('padding-top', $('.help_breadcrumbs').outerHeight()*(7/6));
+ }
+
+ var updateH = function(){
+ checkBreadCrumbs();
$('a.top').css('bottom', $('#footer').outerHeight());
-
- if($('#navigation').length) {
- $('a.top').css('left', $('#navigation').position()['left'] + (($('#navigation').outerWidth() - $('a.top').outerWidth())/2));
- } else {
- $('a.top').css('left', $('#toc-navigation').position()['left'] + (($('#toc-navigation').outerWidth() - $('a.top').outerWidth())/2));
- }
+ $('a.top').css('left', $('#toc-navigation').position()['left'] + (($('#toc-navigation').outerWidth() - $('a.top').outerWidth())/2));
+
$('#toc').css('top', $('#toc_border').position()['top'] + 7);
if ($('a.top').is(':visible'))
$('#container #contents').css('margin-bottom', $('#footer').outerHeight());
//$('#toc').css('top', $('#toc_border').position()['top'] + 2);
$('#toc').css('top', $('#toc_border').position()['top'] + 7);
-
- if($('#navigation').length) {
- $('#contents').css('right', $(window).width() - $('#navigation').position()['left'] + 5);
+ $('#contents').css('right', $(window).width() - $('#toc-navigation').position()['left'] + 5);
//$('#toc').css('width', $('#toc_border').width() - 40);
- } else {
- $('#contents').css('right', $(window).width() - $('#toc-navigation').position()['left'] + 5);
- }
-
$('#toc').css('width', $('#toc_border').width() - 49);
};
var updateH_no_toc = function() {
+ checkBreadCrumbs();
if (!isScrolledIntoView($('#contents .content h1')))
{
$('a.top.sms').show();
</head>
<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
</div>
<div id="container"><div id="contents"><div class="content">
<div id="profile">
</head>
<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
</div>
<div id="container"><div id="contents"><div class="content">
<div id="profile">
</head>
<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation"></div>
+ <div id="toc-navigation"></div>
<div id="container"><div id="contents"><div class="content">
<div id="profile">
- <p><img alt="Mobile Web" src="../images/mw_icon.png"/></p>
+ <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/></p>
</div>
<h1>Command Line Interface</h1>
export PATH=$<TIZEN_SDK_HOME>/tools/ide/bin
</pre>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">This tool is supported in mobile applications only.</td>
- </tr>
- </tbody>
- </table>
-
<p>The CLI in the IDE provides the functional commands for:</p>
-<ul class="ul">
+<ul>
<li><a href="#mw_cli_config">Setting CLI configuration options</a></li>
<li><a href="#mw_list">Displaying a sub-command list</a></li>
<li><a href="#mw_create">Creating a project</a></li>
tizen cli-config -l | --list
</pre>
-<ul class="ul">
+<ul>
<li><span style="font-family: Courier New,Courier,monospace;">-l, --list</span>:
<p>Shows the list of all CLI configuration keys and values.</p></li>
<li><span style="font-family: Courier New,Courier,monospace;">-g, --global</span>:
<td>Queries, sets, replaces, and unsets CLI setting options.
<p>The key and the name are separated by an equal sign.</p>
<p>The CLI configuration keys are:</p>
-<ul class="ul">
+<ul>
<li><span style="font-family: Courier New,Courier,monospace;">default.profiles.path=<path of profile.xml></span><p>
Sets the path to the <span style="font-family: Courier New,Courier,monospace;">profile.xml</span> file.</p></li>
</ul>
</td>
<td>
-<ul class="ul">
+<ul>
<li><p>Set the <span style="font-family: Courier New,Courier,monospace;">profile.xml</span> path globally:</p>
<pre class="prettyprint">
$ tizen cli-config -g default.profiles.path=/home/workspace/.metadata/.plugins/org.tizen.common.sign/profiles.xml
<td>Shows what kind of template each profile supports, and the list corresponding with the given sub-command.
</td>
<td>
-<ul class="ul">
+<ul>
<li><p>List all templates:</p>
<pre class="prettyprint">
$ tizen list web-project
<pre class="prettyprint">
tizen create web-project [-p|--profile <profile name>] [-t|--template <predefined template>]
[-n|--name <project name>] [-- <project location>]</pre>
-<ul class="ul">
+<ul>
<li><span style="font-family: Courier New,Courier,monospace;">-p, --profile</span>:
<p>Sets the profile name.</p></li>
<li><span style="font-family: Courier New,Courier,monospace;">-t, --template</span>:
</ul></td>
<td>Creates a Tizen Web project. If an option is empty, the default project is generated from the default template.</td>
<td>
-<ul class="ul">
+<ul>
<li><p>Create the template project based on the basic Tizen mobile UI project:</p>
<pre class="prettyprint">
$ tizen create web-project -p mobile-2.3 -t BasicBasicApplication -n basic -- /home/workspace
<pre class="prettyprint">
tizen build-web [-opt | --optimize] [-euf | --exclude-uifw] [-e | --exclude] [-out | --output] [--]
</pre>
-<ul class="ul">
+<ul>
<li><span style="font-family: Courier New,Courier,monospace;">-opt, --optimize</span>:
<p>Optimizes the application size. The Javascript and CSS files are minimized and the Tizen Web UI framework source is excluded. The related link address is modified to a platform-dependent location instead.
</p></li>
<p>In the Web application, there is no need to build a project. However, you can optimize the application (for example, minimize the JavaScript or CSS file and exclude the Tizen Web UI framework sources).</p>
</td>
<td>
-<ul class="ul">
+<ul>
<li><p>Build the project with default options:</p>
<pre class="prettyprint">
$ tizen build-web -- /home/workspace/basic
<td><span style="font-family: Courier New,Courier,monospace">tizen package</span> </td>
<td>
<pre class="prettyprint">
-tizen package [-t | --type <package type>] [-s | --sign <security profile name>] [--]
+tizen package [-t | --type <package type>] [-s | --sign <security profile name>] [-r | --reference <native package file path>] [--]
</pre>
-<ul class="ul">
+<ul>
<li><span style="font-family: Courier New,Courier,monospace;">-t, --type</span>:
<p>Sets the package type.</p></li>
<li><span style="font-family: Courier New,Courier,monospace;">-s, --sign</span>:
<p>Sets the profile name to use for signing.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace;">-r, --reference</span>:
+<p>Sets the reference of the native package file (tpk) for hybrid application packing. Various options are allowed.</p></li>
<li><span style="font-family: Courier New,Courier,monospace;">--</span>:
-<p>Sets the built project path.</p></li>
+<p>Sets the built project path or package file path with a file name.</p></li>
</ul></td>
- <td>Packages the Tizen application with signing.
+ <td>Packages the Tizen application with signing. If there is a package file path in the options, the package is re-signed. And if a reference option is given, the package is re-signed with the referenced packages.
<p>The Tizen application is signed with a certified profile named <span style="font-family: Courier New,Courier,monospace">profiles.xml</span>. You can create the default profile from the Tizen IDE, which generates the file in a hidden directory in your workspace (<span style="font-family: Courier New,Courier,monospace"><Your workspace directory>/.metadata/.plugins/org.tizen.common.sign/profiles.xml</span>). Set the path of the <span style="font-family: Courier New,Courier,monospace">profile.xml</span> file once before packaging the Tizen application (you can use the <span style="font-family: Courier New,Courier,monospace">tizen cli-config</span> command).</p>
</td>
<td>
-<ul class="ul">
+<ul>
<li><p>Set up the path of the <span style="font-family: Courier New,Courier,monospace;">profile.xml</span> file that you already have:</p>
<pre class="prettyprint">
$ tizen cli-config -g default.profiles.path=/home/workspace/profiles.xml
$ cd /home/workspace/basic/.buildResult
basic.wgt
-</pre></li></ul>
+</pre></li>
+<li><p>Re-sign the package:</p>
+<pre class="prettyprint">
+$ tizen package --type wgt --sign myprofile2 -- /home/workspace/basic/.buildResult/basic.wgt
+</pre></li>
+<li><p>Re-sign a hybrid application package:</p>
+<pre class="prettyprint">
+$ tizen package --type wgt --sign myprofile2 --reference /home/workspace/a.tpk --reference /home/workspace/b.tpk -- /home/workspace/basic/.buildResult/basic.wgt
+</pre></li>
+</ul>
</td>
</tr>
<tr id="mw_install">
<pre class="prettyprint">
tizen install <-t | -target <target name>> <-n | --name <package name>> [--]
</pre>
-<ul class="ul">
+<ul>
<li><span style="font-family: Courier New,Courier,monospace;">-t, --target</span>:
<p>Sets the target, which installs the Tizen package.</p></li>
<li><span style="font-family: Courier New,Courier,monospace;">-n, --name</span>:
<td>Installs a Tizen application to a Tizen device.
</td>
<td>
-<ul class="ul">
+<ul>
<li><p>Install the basic application named <span style="font-family: Courier New,Courier,monospace;">basic.wgt</span> to the emulator-26101:</p>
<pre class="prettyprint">
$ tizen install --target emulator-26101 --name basic.wgt -- /home/workspace/basic/.buildResult
<pre class="prettyprint">
tizen uninstall <-t | --target <target name>> <-p | --pkgid <package id>>
</pre>
-<ul class="ul">
+<ul>
<li><span style="font-family: Courier New,Courier,monospace;">-t, --target</span>:
<p>Sets the target, which uninstalls the Tizen package.</p></li>
<li><span style="font-family: Courier New,Courier,monospace;">-p, --pkgid</span>:
</ul></td>
<td>Uninstalls a Tizen application from a Tizen device.</td>
<td>
-<ul class="ul">
+<ul>
<li><p>Uninstall the basic application whose pkgid is <span style="font-family: Courier New,Courier,monospace">cRG1sLZpWb</span> from the emulator-26101:</p>
<pre class="prettyprint">
$ tizen uninstall --target emulator-26101 --pkgid cRG1sLZpWb
<pre class="prettyprint">
tizen run <-t | --target <target name>> <-p | --pkgid <package id>>
</pre>
-<ul class="ul">
+<ul>
<li><span style="font-family: Courier New,Courier,monospace;">-t, --target</span>:
<p>Sets the target, which runs the Tizen package.</p></li>
<li><span style="font-family: Courier New,Courier,monospace;">-p, --pkgid</span>:
<td>Runs the Tizen application.
</td>
<td>
-<ul class="ul">
+<ul>
<li><p>Run the basic application whose pkgid is <span style="font-family: Courier New,Courier,monospace">org.tizen.basic </span> on the emulator-26101:</p>
<pre class="prettyprint">
$ tizen run --target emulator-26101 --pkgid cRG1sLZpWb
</pre></td>
<td>Prints the CLI version number of the executable and exits.</td>
<td>
-<ul class="ul">
+<ul>
<li><p>Show the version:</p>
<pre class="prettyprint">
$ tizen version
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/></p>
</div>
<h1>Configuration Editor</h1>
- <p>The Tizen Web
widget configuration file is composed of XML elements, including the <span style="font-family: Courier New,Courier,monospace"><widget></span> element as its root and other elements representing the application information, such as <a href="#elements">configuration elements</a> and Tizen extending configuration elements for <a href="#mw_extend">mobile</a> and <a href="#ww_extend">wearable</a> applications. Note that although the <span style="font-family: Courier New,Courier,monospace"><feature></span> element is a W3C element, a modified Tizen extended version of it is used.</p>
- <p>The configuration file can be edited with the <a href="../../../org.tizen.gettingstarted/html/process/setting_properties_w.htm#set_widget">widget configuration editor</a>, or you can modify the XML structure directly using the configuration text editor. To open the widget configuration editor, double-click the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file in the <strong>Project Explorer</strong> view of the IDE. To use the configuration text editor, right-click the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file in the Project Explorer view and select <strong>Open with > Text Editor</strong>.
+ <p>The Tizen Web
application configuration file is composed of XML elements, including the <span style="font-family: Courier New,Courier,monospace"><widget></span> element as its root and other elements representing the application information, such as <a href="#elements">configuration elements</a> and Tizen extending configuration elements for <a href="#mw_extend">mobile</a> and <a href="#ww_extend">wearable</a> applications. Note that although the <span style="font-family: Courier New,Courier,monospace"><feature></span> element is a W3C element, a modified Tizen extended version of it is used.</p>
+ <p>The configuration file can be edited with the <a href="../../../org.tizen.gettingstarted/html/web/process/setting_properties_w.htm#set_widget">Web application configuration editor</a>, or you can modify the XML structure directly using the configuration text editor. To open the Web application configuration editor, double-click the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file in the <strong>Project Explorer</strong> view of the IDE. To use the configuration text editor, right-click the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file in the Project Explorer view and select <strong>Open with > Text Editor</strong>.
</p>
<table class="note">
<tbody>
</tr>
<tr>
<td style="border:none;"></td>
- <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#content"><content></a></span></td>
+ <td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><a href="#content_element"><content></a></span></td>
</tr>
<tr>
<td style="border:none;"></td>
<td style="border:none;"></td>
<td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><tizen:application></span> (in <a href="#mw_application">mobile</a> or <a href="#ww_application">wearable</a>)</td>
</tr>
+
<tr>
<td style="border:none;"></td>
<td colspan="3" style="border:none;"><span style="font-family: Courier New,Courier,monospace"><tizen:content></span> (in <a href="#mw_webapp">mobile</a> or <a href="#ww_tizencontent">wearable</a>)</td>
</tr>
<tr>
<td> <p>Represents the root element of a configuration document.</p> <p><strong>Expected children:</strong> </p>
-
<p><span style="font-family: Courier New,Courier,monospace"><name></span>, <span style="font-family: Courier New,Courier,monospace"><description></span>, <span style="font-family: Courier New,Courier,monospace"><author></span>, <span style="font-family: Courier New,Courier,monospace"><license></span>, <span style="font-family: Courier New,Courier,monospace"><icon></span>, <span style="font-family: Courier New,Courier,monospace"><content></span>, <span style="font-family: Courier New,Courier,monospace"><feature></span>, <span style="font-family: Courier New,Courier,monospace"><preference></span>, <span style="font-family: Courier New,Courier,monospace"><access></span>, <span style="font-family: Courier New,Courier,monospace"><tizen:account></span>, <span style="font-family: Courier New,Courier,monospace"><tizen:app-control></span>, <span style="font-family: Courier New,Courier,monospace"><tizen:application></span>, <span style="font-family: Courier New,Courier,monospace"><tizen:content></span>, <span style="font-family: Courier New,Courier,monospace"><tizen:privilege></span>, <span style="font-family: Courier New,Courier,monospace"><tizen:setting></span>, and <span style="font-family: Courier New,Courier,monospace"><tizen:profile></span></p> <p><strong>Attributes:</strong></p>
+<p><span style="font-family: Courier New,Courier,monospace"><name></span>, <span style="font-family: Courier New,Courier,monospace"><description></span>, <span style="font-family: Courier New,Courier,monospace"><author></span>, <span style="font-family: Courier New,Courier,monospace"><license></span>, <span style="font-family: Courier New,Courier,monospace"><icon></span>, <span style="font-family: Courier New,Courier,monospace"><content></span>, <span style="font-family: Courier New,Courier,monospace"><feature></span>, <span style="font-family: Courier New,Courier,monospace"><preference></span>, <span style="font-family: Courier New,Courier,monospace"><access></span>, <span style="font-family: Courier New,Courier,monospace"><tizen:account></span>, <span style="font-family: Courier New,Courier,monospace"><tizen:app-control></span>, <span style="font-family: Courier New,Courier,monospace"><tizen:application></span>, <span style="font-family: Courier New,Courier,monospace"><tizen:content></span>, <span style="font-family: Courier New,Courier,monospace"><tizen:privilege></span>, <span style="font-family: Courier New,Courier,monospace"><tizen:setting></span>, and <span style="font-family: Courier New,Courier,monospace"><tizen:profile></span></p> <p><strong>Attributes:</strong></p>
<ul><li><span style="font-family: Courier New,Courier,monospace">xml:lang</span></li>
<li><span style="font-family: Courier New,Courier,monospace">dir</span></li>
<li><span style="font-family: Courier New,Courier,monospace">id</span></li>
<th style="text-align:left;margin-left:auto;margin-right:auto;"><span style="font-family: Courier New,Courier,monospace"><name> element</span></th>
</tr>
<tr>
- <td> <p>Represents the
widget name used for example, in the application menu.</p> <p><strong>Expected children:</strong> </p>
+ <td> <p>Represents the
Web application name used for example, in the application menu.</p> <p><strong>Expected children:</strong> </p>
<p><span style="font-family: Courier New,Courier,monospace"><span></span> and <span style="font-family: Courier New,Courier,monospace"><text node></span></p> <p><strong>Attributes:</strong></p>
- <ul class="ul"><li><span style="font-family: Courier New,Courier,monospace">xml:lang</span></li>
+ <ul><li><span style="font-family: Courier New,Courier,monospace">xml:lang</span></li>
<li><span style="font-family: Courier New,Courier,monospace">dir</span></li>
<li><span style="font-family: Courier New,Courier,monospace">short</span></li></ul> </td>
</tr>
<th style="text-align:left;margin-left:auto;margin-right:auto;"><span style="font-family: Courier New,Courier,monospace"><description> element</span></th>
</tr>
<tr>
- <td> <p>Represents text describing the purpose of the
widget.</p> <p><strong>Expected children:</strong> </p>
+ <td> <p>Represents text describing the purpose of the
Web application.</p> <p><strong>Expected children:</strong> </p>
<p><span style="font-family: Courier New,Courier,monospace"><span></span> and <span style="font-family: Courier New,Courier,monospace"><text node></span></p> <p><strong>Attributes:</strong></p>
- <ul class="ul"><li><span style="font-family: Courier New,Courier,monospace">xml:lang</span></li>
+ <ul><li><span style="font-family: Courier New,Courier,monospace">xml:lang</span></li>
<li><span style="font-family: Courier New,Courier,monospace">dir</span></li></ul> </td>
</tr>
</tbody>
<th style="text-align:left;margin-left:auto;margin-right:auto;"><span style="font-family: Courier New,Courier,monospace"><author> element</span></th>
</tr>
<tr>
- <td> <p>Represents the person that created the
widget.</p> <p><strong>Expected children:</strong> </p>
+ <td> <p>Represents the person that created the
Web application.</p> <p><strong>Expected children:</strong> </p>
<p><span style="font-family: Courier New,Courier,monospace"><span></span> and <span style="font-family: Courier New,Courier,monospace"><text node></span></p> <p><strong>Attributes:</strong></p>
-<ul class="ul"><li><span style="font-family: Courier New,Courier,monospace">xml:lang</span></li>
+<ul><li><span style="font-family: Courier New,Courier,monospace">xml:lang</span></li>
<li><span style="font-family: Courier New,Courier,monospace">dir</span></li>
<li><span style="font-family: Courier New,Courier,monospace">href</span></li>
<li><span style="font-family: Courier New,Courier,monospace">email</span></li></ul> </td>
</table>
<table border="1">
<tbody>
- <tr id="content" name="content">
+ <tr id="content_element" name="content_element">
<th style="text-align:left;margin-left:auto;margin-right:auto;"><span style="font-family: Courier New,Courier,monospace"><content> element</span></th>
</tr>
<tr>
- <td> <p>Represents the boot-strapping mechanism used to point to the main file of the
widget.</p> <p><strong>Attributes:</strong></p>
- <ul class="ul"><li><span style="font-family: Courier New,Courier,monospace">xml:lang</span></li>
+ <td> <p>Represents the boot-strapping mechanism used to point to the main file of the
Web application.</p> <p><strong>Attributes:</strong></p>
+ <ul><li><span style="font-family: Courier New,Courier,monospace">xml:lang</span></li>
<li><span style="font-family: Courier New,Courier,monospace">dir</span></li>
<li><span style="font-family: Courier New,Courier,monospace">encoding</span></li>
<li><span style="font-family: Courier New,Courier,monospace">src</span></li>
<th style="text-align:left;margin-left:auto;margin-right:auto;"><span style="font-family: Courier New,Courier,monospace"><icon> element</span></th>
</tr>
<tr>
- <td> <p>Represents the
widget icon.</p> <p><strong>Attributes:</strong></p>
- <ul class="ul"><li><span style="font-family: Courier New,Courier,monospace">xml:lang</span></li>
+ <td> <p>Represents the
Web application icon.</p> <p><strong>Attributes:</strong></p>
+ <ul><li><span style="font-family: Courier New,Courier,monospace">xml:lang</span></li>
<li><span style="font-family: Courier New,Courier,monospace">dir</span></li>
<li><span style="font-family: Courier New,Courier,monospace">src</span></li>
<li><span style="font-family: Courier New,Courier,monospace">width</span></li>
<th style="text-align:left;margin-left:auto;margin-right:auto;"><span style="font-family: Courier New,Courier,monospace"><license> element</span></th>
</tr>
<tr>
- <td> <p>Represents the license under which the
widget is distributed.</p> <p><strong>Expected children:</strong> </p>
+ <td> <p>Represents the license under which the
Web application is distributed.</p> <p><strong>Expected children:</strong> </p>
<p><span style="font-family: Courier New,Courier,monospace"><span></span> and <span style="font-family: Courier New,Courier,monospace"><text node></span></p> <p><strong>Attributes:</strong></p>
- <ul class="ul"><li><span style="font-family: Courier New,Courier,monospace">xml:lang</span></li>
+ <ul><li><span style="font-family: Courier New,Courier,monospace">xml:lang</span></li>
<li><span style="font-family: Courier New,Courier,monospace">dir</span></li>
<li><span style="font-family: Courier New,Courier,monospace">href</span></li></ul></td>
</tr>
<th style="text-align:left;margin-left:auto;margin-right:auto;"><span style="font-family: Courier New,Courier,monospace"><preference> element</span></th>
</tr>
<tr>
- <td> <p>Used to declare preferences as key-value pairs for the
widget for use at runtime.</p> <p><strong>Attributes:</strong></p>
- <ul class="ul">
+ <td> <p>Used to declare preferences as key-value pairs for the
Web application for use at runtime.</p> <p><strong>Attributes:</strong></p>
+ <ul>
<li><span style="font-family: Courier New,Courier,monospace">name</span><p>The maximum length may be limited to 80 bytes. In that case, leftover bytes are ignored.</p></li>
<li><span style="font-family: Courier New,Courier,monospace">value</span><p>The maximum length may be limited to 8192 bytes. In that case, leftover bytes are ignored.</p></li>
<li><span style="font-family: Courier New,Courier,monospace">readonly</span></li>
<th style="text-align:left;margin-left:auto;margin-right:auto;"><span style="font-family: Courier New,Courier,monospace"><access> element</span></th>
</tr>
<tr>
- <td> <p>Used to control network access from within a widget and to request access to certain network resources from the user agent.</p> <p><strong>Attributes:</strong></p> <ul class="ul"><li><span style="font-family: Courier New,Courier,monospace">origin</span></li>
+ <td> <p>Used to control network access from within a Web application and to request access to certain network resources from the user agent.</p> <p><strong>Attributes:</strong></p> <ul><li><span style="font-family: Courier New,Courier,monospace">origin</span></li>
<li><span style="font-family: Courier New,Courier,monospace">subdomains</span></li></ul> </td>
</tr>
</tbody>
<tr>
<td> <p>Represents the generic container used mainly for internationalization.</p> <p><strong>Expected children:</strong> </p>
<p><span style="font-family: Courier New,Courier,monospace"><span></span> and <span style="font-family: Courier New,Courier,monospace"><text node></span></p> <p><strong>Attributes:</strong></p>
- <ul class="ul"><li><span style="font-family: Courier New,Courier,monospace">xml:lang</span></li>
+ <ul><li><span style="font-family: Courier New,Courier,monospace">xml:lang</span></li>
<li><span style="font-family: Courier New,Courier,monospace">dir</span></li></ul></td>
</tr>
</tbody>
</tr>
<tr>
<td> <p>Used to declare parameters to be used with a feature in <a href="#mw_feature">mobile</a> and <a href="#ww_feature">wearable</a> applications.</p> <p><strong>Attributes:</strong></p>
- <ul class="ul"><li><span style="font-family: Courier New,Courier,monospace">xml:lang</span></li>
+ <ul><li><span style="font-family: Courier New,Courier,monospace">xml:lang</span></li>
<li><span style="font-family: Courier New,Courier,monospace">dir</span></li>
<li><span style="font-family: Courier New,Courier,monospace">name</span></li>
<li><span style="font-family: Courier New,Courier,monospace">value</span></li></ul> </td>
<td> <p>Used to register account provider information.</p>
<p><strong>Occurrences:</strong> </p>
- <ul class="ul">
+ <ul>
<li>0 or more</li>
</ul>
<p><strong>Expected children:</strong> </p>
- <ul class="ul">
+ <ul>
<li><span style="font-family: Courier New,Courier,monospace;">icon</span> <p>Mandatory. Since the icons are used in the device under <strong>Settings > Accounts</strong>, place them in a shared directory.</p>
<p>Attributes:</p>
- <ul class="ul"><li><span style="font-family: Courier New,Courier,monospace;">Account</span> - File path of the account provider icon. The icon size is 72 x 72 pixels.</li>
+ <ul><li><span style="font-family: Courier New,Courier,monospace;">Account</span> - File path of the account provider icon. The icon size is 72 x 72 pixels.</li>
<li><span style="font-family: Courier New,Courier,monospace;">AccountSmall</span> - File path of the account provider small icon. The icon size is 45 x 45 pixels. </li></ul></li>
<li><span style="font-family: Courier New,Courier,monospace;">display-name</span> <p>Mandatory; display name of the account provider</p></li>
<li><span style="font-family: Courier New,Courier,monospace;">capability</span><p>Optional; capability of the account provider. Capabilities are defined in the <span style="font-family: Courier New,Courier,monospace;">http://<VENDOR_INFORMATION>/accounts/capability/<NAME></span> IRI format.</p></li>
</ul>
<p><strong>Attributes:</strong> </p>
- <ul class="ul">
+ <ul>
<li><span style="font-family: Courier New,Courier,monospace;">multiple-account-support</span> <p>Mandatory; indicates whether multiple accounts are supported (available values: <span style="font-family: Courier New,Courier,monospace;">true</span>, <span style="font-family: Courier New,Courier,monospace;">false</span>)</p></li>
</ul><p><strong>Example:</strong> </p><pre class="prettyprint"><tizen:account multiple-account-support="false">
<tr>
<td> <p>Used to indicate that the Web application can handle a specific operation with the specified MIME type and URI. For more information, see <a href="../../../org.tizen.guides/html/web/tizen/application/application_w.htm#controls">Application Controls</a>.</p>
<p><strong>Occurrences:</strong> </p>
- <ul class="ul">
+ <ul>
<li>0 or more</li>
</ul>
<p><strong>Expected children:</strong> </p>
- <ul class="ul">
+ <ul>
<li><span style="font-family: Courier New,Courier,monospace;">src</span> <p>Mandatory; page handling the requests</p></li>
<li><span style="font-family: Courier New,Courier,monospace;">operation</span> <p>Mandatory; string that defines the action to be performed</p></li>
<li><span style="font-family: Courier New,Courier,monospace;">uri</span> and <span style="font-family: Courier New,Courier,monospace;">mime</span><p>Optional; additional parameters used for resolving application control requests</p></li>
<tr>
<td> <p>Used to uniquely identify a Tizen application.</p>
<p><strong>Occurrences:</strong> </p>
- <ul class="ul">
+ <ul>
<li>1</li>
</ul>
<p><strong>Attributes:</strong> </p>
- <ul class="ul">
+ <ul>
<li><span style="font-family: Courier New,Courier,monospace;">id</span> <p>Mandatory; Tizen application ID, which is a combination of the Tizen package ID and project name. The application ID is unique in the device.</p><p>The project name is a set of characters (0~9, a~z, A~Z) randomly generated by the SDK. The minimum value is 1 byte and maximum value is 52 bytes.</p></li>
<li><span style="font-family: Courier New,Courier,monospace;">package</span> <p>Mandatory; Tizen package ID generated by the SDK, comprises of 10 characters (0~9, a~z, A~Z). The package ID is unique in the Tizen Store.</p></li>
<li><span style="font-family: Courier New,Courier,monospace;">required_version</span> <p>Mandatory; Tizen API version required for running the Web application</p></li>
</tr>
</tbody>
</table>
+
+
<h3 id="mw_webapp" name="mw_webapp">Tizen-hosted Web Application</h3>
<table border="1">
</tr>
<tr>
<td> <p>Used to point to a document which is hosted on an external server and acts as the Web application start page. The Tizen WRT allows the start page to be hosted on an external server.</p>
- <p>If the start page is contained in the widget package, it is defined with the <a href="#content"><span style="font-family: Courier New,Courier,monospace"><content></span> W3C element</a>. If both <span style="font-family: Courier New,Courier,monospace"><content></span> and <span style="font-family: Courier New,Courier,monospace"><tizen:content /></span> elements are defined, the <span style="font-family: Courier New,Courier,monospace"><tizen:content /></span> element is used.</p>
+ <p>If the start page is contained in the widget package, it is defined with the <a href="#content_element"><span style="font-family: Courier New,Courier,monospace"><content></span> W3C element</a>. If both <span style="font-family: Courier New,Courier,monospace"><content></span> and <span style="font-family: Courier New,Courier,monospace"><tizen:content /></span> elements are defined, the <span style="font-family: Courier New,Courier,monospace"><tizen:content /></span> element is used.</p>
<p><strong>Occurrences:</strong> </p>
- <ul class="ul">
+ <ul>
<li>0 or more
<p>If more than 1 <span style="font-family: Courier New,Courier,monospace"><tizen:content /></span> elements are specified, the first instance of the element is used.</p></li>
</ul>
<p><strong>Attributes:</strong> </p>
- <ul class="ul">
+ <ul>
<li><span style="font-family: Courier New,Courier,monospace;">src</span><p>Mandatory; URI of the external start page</p></li>
</ul>
<tr>
<td> <p>Used to get the required API access privileges for the Web application.</p>
<p><strong>Occurrences:</strong> </p>
- <ul class="ul">
+ <ul>
<li>0 or more (if duplicates, the first occurrence is considered and all others ignored)</li>
</ul>
<p><strong>Attributes:</strong> </p>
- <ul class="ul">
+ <ul>
<li><span style="font-family: Courier New,Courier,monospace;">name</span><p> Mandatory; URI of the Device API privilege</p></li>
</ul><p><strong>Example:</strong> </p><pre class="prettyprint"><tizen:privilege name="http://tizen.org/privilege/application.launch" /></pre><p></p> </td>
</tr>
<tr>
<td> <p>Used to define additional application settings.</p>
<p><strong>Occurrences:</strong> </p>
- <ul class="ul">
+ <ul>
<li>0 or more</li>
</ul>
<p><strong>Attributes:</strong> </p>
- <ul class="ul">
+ <ul>
<li><span style="font-family: Courier New,Courier,monospace;">background-support</span> <p>Optional; application execution continues when it is moved to the background (available values <span style="font-family: Courier New,Courier,monospace;">enable</span>, <span style="font-family: Courier New,Courier,monospace;">disable</span> (default))</p></li>
<li><span style="font-family: Courier New,Courier,monospace;">context-menu</span> <p>Optional; context menu is displayed when the user clicks, for example, an image, text, or link (available values: <span style="font-family: Courier New,Courier,monospace;">enable</span> (default), <span style="font-family: Courier New,Courier,monospace;">disable</span>)</p></li>
<li><span style="font-family: Courier New,Courier,monospace;">encryption</span> <p>Optional; Web application resources (HTML, JavaScript, and CSS files) are stored encrypted (available values: <span style="font-family: Courier New,Courier,monospace;">enable</span>, <span style="font-family: Courier New,Courier,monospace;">disable</span> (default))</p></li>
<li><span style="font-family: Courier New,Courier,monospace;">hwkey-event</span> <p>Optional; a hardware key event is sent to the Web application when the user presses the hardware key (available values: <span style="font-family: Courier New,Courier,monospace;">enable</span> (default), <span style="font-family: Courier New,Courier,monospace;"> disable</span>)</p><p>If this option is enabled, the <span style="font-family: Courier New,Courier,monospace;">tizenhwkey</span> custom event is sent to the Web application. The <span style="font-family: Courier New,Courier,monospace;">tizenhwkey</span> event object has a <span style="font-family: Courier New,Courier,monospace;">keyName</span> attribute (available values: <span style="font-family: Courier New,Courier,monospace;">menu</span> and <span style="font-family: Courier New,Courier,monospace;">back</span>).</p></li>
- </ul><p><strong>Example:</strong> </p><pre class="prettyprint">/* Web application execution is not suspended */
-/* when the application is sent to the background */
+ </ul><p><strong>Example:</strong> </p><pre class="prettyprint"><!--Web application execution is not suspended-->
+<!--when the application is sent to the background-->
<tizen:setting background-support="enable" />
-/* Context menu is not displayed */
+<!--Context menu is not displayed-->
<tizen:setting context-menu="disable" />
-/* Web applications resources are stored encrypted by the WRT */
+<!--Web applications resources are stored encrypted by the WRT-->
<tizen:setting encryption="enable" />
-/* Viewport orientation is locked to "landscape" */
+<!--Viewport orientation is locked to "landscape"-->
<tizen:setting screen-orientation="landscape" />
-/* Installation location is set to "internal-only" */
+<!--Installation location is set to "internal-only"-->
<tizen:setting install-location="internal-only" />
-/* Hardware key event is sent to the Web application when the hardware key is pressed */
+<!--Hardware key event is sent to the Web application when the hardware key is pressed-->
<tizen:setting hwkey-event="enable" /></pre><p></p> </td>
</tr>
</tbody>
</table>
<p><strong>Occurrences:</strong> </p>
- <ul class="ul">
+ <ul>
<li>0 or more</li>
</ul>
<p><strong>Attributes:</strong> </p>
- <ul class="ul">
- <li><span style="font-family: Courier New,Courier,monospace;">name</span> <p>Mandatory; <a class="opensection" href="../../../org.tizen.gettingstarted/html/process/setting_properties_w.htm#feature">feature key</a> URI</p></li>
+ <ul>
+ <li><span style="font-family: Courier New,Courier,monospace;">name</span> <p>Mandatory; <a href="../../../org.tizen.gettingstarted/html/web/process/setting_properties_w.htm#feature">feature key</a> URI</p></li>
</ul><p><strong>Example:</strong> </p><pre class="prettyprint"><feature name="http://tizen.org/feature/network.bluetooth" /></pre><p></p> </td>
</tr>
</tbody>
<tr>
<td> <p>Used to define an additional content security policy for a packaged or hosted application.</p>
<p><strong>Occurrences:</strong> </p>
- <ul class="ul">
+ <ul>
<li>0 or more
<p>If more than 1, the first occurrence is applied.</p></li>
</ul>
<tr>
<td> <p>Used to define an additional content security policy for a packaged or hosted application for monitoring purposes.</p>
<p><strong>Occurrences:</strong> </p>
- <ul class="ul">
+ <ul>
<li>0 or more
<p>If more than 1, the first occurrence is applied.</p></li>
</ul>
<tr>
<td> <p>Used to define a list of URL domains that are allowed to be navigated in using the Web application.</p>
<p><strong>Occurrences:</strong> </p>
- <ul class="ul">
+ <ul>
<li>0 or more
<p>If more than 1, the first occurrence is applied.</p></li>
</ul>
<tr>
<td> <p>Used to define metadata information shared with other Web applications. The defined metadata can be accessed (read-only) through the Tizen <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html">Application</a> API.</p>
<p><strong>Occurrences:</strong> </p>
- <ul class="ul">
+ <ul>
<li>0 or more</li>
</ul>
<p><strong>Attributes:</strong> </p>
- <ul class="ul">
+ <ul>
<li><span style="font-family: Courier New,Courier,monospace;">key</span>
<p>Mandatory; unique key string.</p>
<p>The maximum length can be limited to 80 bytes. In this case, leftover bytes are ignored.</p>
<tr>
<td> <p>Used to define the application profile.</p>
<p><strong>Occurrences:</strong> </p>
- <ul class="ul">
+ <ul>
<li>1</li>
</ul>
<p><strong>Attributes:</strong> </p>
- <ul class="ul">
+ <ul>
<li><span style="font-family: Courier New,Courier,monospace;">name</span> <p>Mandatory; string.</p></li>
</ul><p><strong>Example:</strong> </p><pre class="prettyprint"><tizen:profile name="mobile" /></pre><p></p> </td>
</tr>
<tr>
<td> <p>Used to uniquely identify a Tizen wearable application.</p>
<p><strong>Occurrences:</strong> </p>
- <ul class="ul">
+ <ul>
<li>1</li>
</ul>
<p><strong>Attributes:</strong> </p>
- <ul class="ul">
- <li><span style="font-family: Courier New,Courier,monospace;">id</span> <p>Mandatory; Tizen application ID, which is a combination of the Tizen wearable package ID and project name. The application ID is unique in the device.</p><p>The project name is a set of characters (0~9, a~z, A~Z) randomly generated by the SDK. The minimum value is 1 byte and maximum value is 52 bytes.</p></li>
- <li><span style="font-family: Courier New,Courier,monospace;">package</span> <p>Mandatory; Tizen wearable package ID generated by the SDK, comprises of 10 characters (0~9, a~z, A~Z). The package ID is unique in the Samsung Apps.</p></li>
- <li><span style="font-family: Courier New,Courier,monospace;">required_version</span> <p>Mandatory; Tizen API version required for running the Web application</p></li>
+ <ul>
+ <li><span style="font-family: Courier New,Courier,monospace;">id</span> <p>Mandatory; Tizen application ID, which is a combination of the Tizen wearable package ID and project name. The application ID is unique in the device.</p><p>The project name is a set of characters (0~9, a~z, A~Z) randomly generated by the SDK. The minimum value is 1 byte and maximum value is 52 bytes.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace;">package</span> <p>Mandatory; Tizen wearable package ID generated by the SDK, comprises of 10 characters (0~9, a~z, A~Z). The package ID is unique in the Samsung Apps.</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace;">required_version</span> <p>Mandatory; Tizen API version required for running the Web application</p></li>
+ <li><span style="font-family: Courier New,Courier,monospace;">ambient_support</span> <p>Optional; Sets whether the Web application supports the ambient mode (available values: <span style="font-family: Courier New,Courier,monospace;">enable</span>, <span style="font-family: Courier New,Courier,monospace;">disable</span> (default))</p><p>If this option is enabled, the application can be shown in the ambient mode.</p></li>
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">The <span style="font-family: Courier New,Courier,monospace;">ambient_support</span> option is only used for watch applications, and ignored in all non-watch applications.</td>
+ </tr>
+ </tbody>
+ </table>
+
</ul><p><strong>Example:</strong> </p><pre class="prettyprint"><tizen:application id="1234abcDEF.projectname"
package="1234abcDEF"
- required_version="2.1" /></pre><p></p></td>
+ required_version="2.1"
+ ambient_support="enable" /></pre><p></p></td>
+
</tr>
</tbody>
</table>
<tr>
<td> <p>Used to get the required API access privileges for the Web application.</p>
<p><strong>Occurrences:</strong> </p>
- <ul class="ul">
+ <ul>
<li>0 or more</li>
</ul>
<p><strong>Attributes:</strong> </p>
- <ul class="ul">
+ <ul>
<li><span style="font-family: Courier New,Courier,monospace;">name</span><p> Mandatory; URI of the Device API privilege</p></li>
</ul><p><strong>Example:</strong> </p><pre class="prettyprint"><tizen:privilege name="http://tizen.org/privilege/application.launch" /></pre><p></p> </td>
</tr>
<tr>
<td> <p>Used to indicate that the Web application can handle a specific operation with the specified MIME type and URI. For more information, see <a href="../../../org.tizen.guides/html/web/tizen/application/application_w.htm#controls">Application Controls</a>.</p>
<p><strong>Occurrences:</strong> </p>
- <ul class="ul">
+ <ul>
<li>0 or more</li>
</ul>
<p><strong>Expected children:</strong> </p>
- <ul class="ul">
+ <ul>
<li><span style="font-family: Courier New,Courier,monospace;">src</span> <p>Mandatory; page handling the requests</p></li>
<li><span style="font-family: Courier New,Courier,monospace;">operation</span> <p>Mandatory; string that defines the action to be performed</p></li>
<li><span style="font-family: Courier New,Courier,monospace;">uri</span> and <span style="font-family: Courier New,Courier,monospace;">mime</span><p>Optional; additional parameters used for resolving application control requests</p></li>
<tr>
<td> <p>Used to define additional application settings.</p>
<p><strong>Occurrences:</strong> </p>
- <ul class="ul">
+ <ul>
<li>0 or more</li>
</ul>
<p><strong>Attributes:</strong> </p>
- <ul class="ul">
+ <ul>
<li><span style="font-family: Courier New,Courier,monospace;">background-support</span> <p>Optional; Sets whether Web Application is suspended when it goes to the background (available values: <span style="font-family: Courier New,Courier,monospace;">enable</span> , <span style="font-family: Courier New,Courier,monospace;"> disable</span> (default))</p><p>If this option is enabled, Web Application is not suspended when it goes to the background.</p></li>
<li><span style="font-family: Courier New,Courier,monospace;">context-menu</span> <p>Optional; Sets whether the context menu is shown (available values: <span style="font-family: Courier New,Courier,monospace;">enable</span> (default), <span style="font-family: Courier New,Courier,monospace;"> disable</span>)</p><p>If this option is enabled, the context menu is visible to the user.</p></li>
<tr>
<td> <p>Used to define the start page to be hosted on an external server.</p>
<p><strong>Occurrences:</strong> </p>
- <ul class="ul">
+ <ul>
<li>0 or more<p>If more than 1, the first occurrence is considered and all others ignored.</p></li>
</ul>
<p><strong>Attributes:</strong> </p>
- <ul class="ul">
+ <ul>
<li><span style="font-family: Courier New,Courier,monospace;">src</span> <p>Mandatory; URI of an external start page</p></li>
<tr>
<td> <p>Used to define an additional content security policy for a packaged or hosted application.</p>
<p><strong>Occurrences:</strong> </p>
- <ul class="ul">
+ <ul>
<li>0 or more
<p>If more than 1, the first occurrence is applied.</p></li>
</ul>
<tr>
<td> <p>Used to define an additional content security policy for a packaged or hosted application for monitoring purposes.</p>
<p><strong>Occurrences:</strong> </p>
- <ul class="ul">
+ <ul>
<li>0 or more
<p>If more than 1, the first occurrence is applied.</p></li>
</ul>
<tr>
<td> <p>Used to define a list of URL domains that are allowed to be navigated in using the Web application.</p>
<p><strong>Occurrences:</strong> </p>
- <ul class="ul">
+ <ul>
<li>0 or more
<p>If more than 1, the first occurrence is applied.</p></li>
</ul>
<tr>
<td> <p>Used to define metadata information shared with other Web applications. The defined metadata can be accessed (read-only) through the Tizen <a href="../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html">Application</a> API.</p>
<p><strong>Occurrences:</strong> </p>
- <ul class="ul">
+ <ul>
<li>0 or more</li>
</ul>
<p><strong>Attributes:</strong> </p>
- <ul class="ul">
+ <ul>
<li><span style="font-family: Courier New,Courier,monospace;">key</span>
<p>Mandatory; unique key string.</p>
<p>The maximum length may be limited to 80 bytes. In that case, leftover bytes are ignored.</p>
</tbody>
</table>
<p><strong>Occurrences:</strong> </p>
- <ul class="ul">
+ <ul>
<li>0 or 1</li>
</ul>
<p><strong>Expected children:</strong> </p>
- <ul class="ul">
+ <ul>
<li><span style="font-family: Courier New,Courier,monospace;">uuid</span> <p>Mandatory; universally unique, an unique identifier that distinguishes an IME from each other, displayed in the form of standard UUID (8-4-4-4-12 for a total of 36 characters)</p></li>
<li><span style="font-family: Courier New,Courier,monospace;">languages</span> <p>Mandatory; list of input languages that the current IME supports</p>
<table class="note">
<tr>
<td> <p>Used to define the supported input language of the current IME type application.</p>
<p><strong>Occurrences:</strong> </p>
- <ul class="ul">
+ <ul>
<li>1 or more</li>
</ul>
<p><strong>Example:</strong> </p><pre class="prettyprint"><tizen:languages>
<th style="text-align:left;margin-left:auto;margin-right:auto;"> <p><span style="font-family: Courier New,Courier,monospace"><tizen:category /></span> element</p></th>
</tr>
<tr>
- <td> <p>Used to define the Tizen wearable application type to be watch clock.</p>
+ <td> <p>Used to define the categories to which the service application belongs.</p>
<p><strong>Occurrences:</strong> </p>
- <ul class="ul">
- <li>0 or more
- <p>If omitted, the widget defaults to the watch widget type.</p></li>
+ <ul>
+ <li>0 or more</li>
</ul>
<p><strong>Attributes:</strong> </p>
- <ul class="ul">
+ <ul>
<li><span style="font-family: Courier New,Courier,monospace;">name</span> <p>Mandatory; string</p></li>
</ul><p><strong>Example:</strong> </p><pre class="prettyprint"><tizen:category name="http://tizen.org/category/wearable_clock" /></pre><p></p></td>
</tr>
</tbody>
</table>
+
+
<h3 id="ww_service" name="ww_service">Tizen Service</h3>
<table border="1">
<tbody>
<td> <p>Used to define Web Service Application.</p>
<p><strong>Occurrences:</strong> </p>
- <ul class="ul">
+ <ul>
<li>0 or more</li>
</ul>
<p><strong>Expected Children:</strong> </p>
- <ul class="ul">
+ <ul>
<li><a href="#ww_service-name"><tizen:name /></a></li>
<li><a href="#ww_service-icon"><tizen:icon /></a></li>
<li><a href="#ww_service-content"><tizen:content /></a></li>
<li><a href="#ww_service-category"><tizen:category /></a></li>
</ul>
<p><strong>Attributes:</strong> </p>
- <ul class="ul">
+ <ul>
<li><span style="font-family: Courier New,Courier,monospace;">id</span> <p>Mandatory; Tizen service ID, which is a combination of the Tizen wearable package ID and service name.</p><p>The service ID is a set of characters (0~9, a~z, A~Z) and unique in the device. The minimum value is 1 byte and maximum value is 52 bytes.</p></li>
</ul>
- <ul class="ul">
+ <ul>
<li><span style="font-family: Courier New,Courier,monospace;">auto-restart</span> <p>Optional; Sets whether service application is re-launched automatically when it is terminated. (available values: <span style="font-family: Courier New,Courier,monospace;">true</span> , <span style="font-family: Courier New,Courier,monospace;">false</span> (default))</p></li>
</ul>
- <ul class="ul">
+ <ul>
<li><span style="font-family: Courier New,Courier,monospace;">on-boot</span> <p>Optional; Sets whether service application is launched automatically on device booting time. (available values: <span style="font-family: Courier New,Courier,monospace;">true</span> , <span style="font-family: Courier New,Courier,monospace;">false</span> (default))</p></li>
</ul>
<p><strong>Example:</strong> </p><pre class="prettyprint"><tizen:service id="webService.application" auto-restart="true" on-boot="false">
<tr>
<td> <p>Used to define the name of Web Service Application.</p>
<p><strong>Occurrences:</strong> </p>
- <ul class="ul">
+ <ul>
<li>1 or more</li>
</ul>
<p><strong>Attributes:</strong> </p>
- <ul class="ul">
+ <ul>
<li><span style="font-family: Courier New,Courier,monospace;">xml:lang</span> <p>Optional; specifies the language of the service name (for available values, see <a href="http://www.iana.org/assignments/language-subtag-registry" target="_blank">the IANA Language Subtag</a>)</p></li>
</ul>
</td>
<tr>
<td> <p>Used to define the icon of Web Service Application.</p>
<p><strong>Occurrences:</strong> </p>
- <ul class="ul">
+ <ul>
<li>0 or 1</li>
</ul>
<p><strong>Attributes:</strong> </p>
- <ul class="ul">
+ <ul>
<li><span style="font-family: Courier New,Courier,monospace;">src</span> <p>Mandatory; file path of the Web Service Application icon. The path is relative to the source Web application directory.</p></li>
</ul>
</td>
<tr>
<td> <p>Used to define the start page of the Web Service Application.</p>
<p><strong>Occurrences:</strong> </p>
- <ul class="ul">
+ <ul>
<li>1</li>
</ul>
<p><strong>Attributes:</strong> </p>
- <ul class="ul">
+ <ul>
<li><span style="font-family: Courier New,Courier,monospace;">src</span> <p>Mandatory; start JavaScript file path of the Web Service Application. The path is relative to the source Web application directory.</p></li>
</ul>
</td>
<tr>
<td> <p>Used to define the description of the Web Service Application.</p>
<p><strong>Occurrences:</strong> </p>
- <ul class="ul">
+ <ul>
<li>0 or 1</li>
</ul>
</td>
<tr>
<td> <p>Used to define metadata information shared with other Web Applications. The defined metadata can be accessed (read-only) through the Tizen Application API.</p>
<p><strong>Occurrences:</strong> </p>
- <ul class="ul">
+ <ul>
<li>0 or more</li>
</ul>
<p><strong>Attributes:</strong> </p>
- <ul class="ul">
+ <ul>
<li><span style="font-family: Courier New,Courier,monospace;">key</span> <p>Mandatory; unique key string</p></li>
<li><span style="font-family: Courier New,Courier,monospace;">value</span> <p>Optional; string</p></li>
</ul>
<tr>
<td> <p>Used to define the categories that the service application belongs to.</p>
<p><strong>Occurrences:</strong> </p>
- <ul class="ul">
+ <ul>
<li>0 or more</li>
</ul>
<p><strong>Attributes:</strong> </p>
- <ul class="ul">
+ <ul>
<li><span style="font-family: Courier New,Courier,monospace;">name</span> <p>Mandatory; string.</p></li>
</ul>
</td>
<tr>
<td> <p>Used to define the application profile.</p>
<p><strong>Occurrences:</strong> </p>
- <ul class="ul">
+ <ul>
<li>1</li>
</ul>
<p><strong>Attributes:</strong> </p>
- <ul class="ul">
+ <ul>
<li><span style="font-family: Courier New,Courier,monospace;">name</span> <p>Mandatory; string.</p></li>
</ul><p><strong>Example:</strong> </p><pre class="prettyprint"><tizen:profile name="wearable" /></pre><p></p> </td>
</tr>
</table>
<p><strong>Occurrences:</strong> </p>
- <ul class="ul">
+ <ul>
<li>0 or more</li>
</ul>
<p><strong>Attributes:</strong> </p>
- <ul class="ul">
- <li><span style="font-family: Courier New,Courier,monospace;">name</span> <p>Mandatory; <a class="opensection" href="../../../org.tizen.gettingstarted/html/process/setting_properties_w.htm#feature">feature key</a> URI</p></li>
+ <ul>
+ <li><span style="font-family: Courier New,Courier,monospace;">name</span> <p>Mandatory; <a href="../../../org.tizen.gettingstarted/html/web/process/setting_properties_w.htm#feature">feature key</a> URI</p></li>
</ul><p><strong>Example:</strong> </p><pre class="prettyprint"><feature name="http://tizen.org/feature/network.bluetooth" /></pre><p></p> </td>
</tr>
</tbody>
</script>
</body>
-</html>
+</html>
\ No newline at end of file
<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
</div>
<div id="container"><div id="contents"><div class="content">
<p>Content assist is a functionality provided in parts of the Tizen IDE. It helps you to write quick and efficient code as it completes the names of the APIs automatically on writing the initial part of the API name.</p>
<p>Tizen IDE supports <strong>Web API</strong>, <strong>W3C API</strong>, <strong>jQuery API</strong>, and <strong>jQuery Mobile API</strong>. User-defined and third party APIs can be supported by expanding the content assist functionality.</p>
<p class="figure">Figure: Content assist in the JavaScript editor</p>
- <p
style="text-align: center;"><img alt="Content assist in the JavaScript editor" src="../images/content_assist_java.png" /></p>
+ <p
align="center"><img alt="Content assist in the JavaScript editor" src="../images/content_assist_java.png" /></p>
<p>In the JavaScript editor or HTML editor, press <strong>Ctrl + Space</strong> to complete the code. A list of available code completions opens. To use content assist:</p>
<ol>
<li>Navigate and select lines in the list. This displays the JSDoc information of the selected line.</li>
</tr>
</tbody>
</table>
- <p>For more information, see <a href="../../../org.tizen.gettingstarted/html/process/setting_properties_w.htm#privilege">Specifying Privileges in the Privilege Tab</a>.</p>
+ <p>For more information, see <a href="../../../org.tizen.gettingstarted/html/web/process/setting_properties_w.htm#privilege">Specifying Privileges in the Privilege Tab</a>.</p>
<p>To expand content assist functionality to user-defined and third party APIs:</p>
<ol>
<li>Prepare an API definition document using the WIDL standard. The Tizen IDE supports the <span style="font-family: Courier New,Courier,monospace">.xml</span> and <span style="font-family: Courier New,Courier,monospace">.widlprocxml</span> files.</li>
</head>
<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
</div>
<div id="container"><div id="contents"><div class="content">
<div id="profile">
</table> </li>
<li>Automatic check <p>If you save a file, the project is built and syntax is checked automatically.</p>
<p class="figure">Figure: Checking CSS automatically</p>
- <p
style="text-align: center;"><img alt="Checking CSS automatically" src="../images/checking_css_automatic_check.png" /> </p> </li>
+ <p
align="center"><img alt="Checking CSS automatically" src="../images/checking_css_automatic_check.png" /> </p> </li>
</ul>
<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
</head>
<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
</div>
<div id="container"><div id="contents"><div class="content">
<div id="profile">
<p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/></p>
</div>
- <h1>CSS Preview</h1>
- <p>The Tizen Web IDE provides the <strong>CSS Preview</strong> view for instantly previewing the entire look and feel of the CSS. All the changes made in the CSS file editor are automatically reflected in the CSS preview.</p>
- <p class="figure">Figure: CSS Preview (basic mobile sample)</p>
- <p style="text-align: center;">
- <img width=500 alt="CSS Preview (basic mobile sample)"
- src="../images/css_preview.png" />
- </p>
- <p>The CSS preview view has the following features:</p>
- <ul>
- <li>CSS preview shortcut</li>
- <li>Clear selector representation, such as <span
- style="font-family: Courier New, Courier, monospace">Class
- class1</span> and <span
- style="font-family: Courier New, Courier, monospace">Adjacent
- div+p</span></li>
- <li>Support for the <span
- style="font-family: Courier New, Courier, monospace"><base></span>
- element
- </li>
- <li>Support for <span
- style="font-family: Courier New, Courier, monospace"><!doctype
- html></span></li>
- <li>IE compatibility using <span
- style="font-family: Courier New, Courier, monospace"><meta
- http-equiv="X-UA-Compatible"
- content="IE=EmulateIE7" /></span></li>
- <li>Support for a multi-depth selector</li>
- </ul>
- <p>To preview a CSS file in the <strong>CSS Preview</strong> view, right-click the project in the <strong>Project Explorer</strong> view and select <strong>Preview</strong>, or use the <strong>Ctrl + 4</strong> hotkey.</p>
- <p></p>
- <table class="note">
- <tbody>
+ <h1>CSS Preview</h1>
+
+<p>The Tizen Web IDE provides the <strong>CSS Preview</strong> window for instantly previewing the entire look and feel of the CSS. All the changes made in the CSS file editor are automatically reflected in the CSS preview.</p>
+ <p class="figure">Figure: CSS Preview (basic mobile application)</p>
+ <p align="center">
+ <img alt="CSS Preview (basic mobile application)" src="../images/css_preview.png" /> </p>
+<p>The CSS preview has the following features:</p>
+<ul>
+ <li>CSS preview shortcut</li>
+ <li>Clear selector representation, such as <span style="font-family: Courier New, Courier, monospace">Class class1</span> and <span style="font-family: Courier New, Courier, monospace">Adjacent div+p</span></li>
+ <li>Support for the <span style="font-family: Courier New, Courier, monospace"><base></span> element</li>
+ <li>Support for <span style="font-family: Courier New, Courier, monospace"><!doctype html></span></li>
+ <li>IE compatibility using <span style="font-family: Courier New, Courier, monospace"><meta http-equiv="X-UA-Compatible"content="IE=EmulateIE7" /></span></li>
+ <li>Support for a multi-depth selector</li>
+</ul>
+<p>To preview a CSS file in the <strong>CSS Preview</strong> window, right-click the project in the <strong>Project Explorer</strong> view and select <strong>Preview</strong>, or use the <strong>Ctrl + 4</strong> hotkey.</p>
+<table class="note">
+ <tbody>
<tr>
- <th class="note">Constraint</th>
+ <th class="note">Note</th>
</tr>
<tr>
- <td class="note">
- <p>- The CSS Preview is based on the Google Chrome™ browser.</p>
- <p>- The CSS Preview may show differ from the actual product. It supports to see the overall outline.</p>
- <p>- Some selectors and elements do not work on CSS Preview.</p></td>
+ <td class="note">The following constraints apply to the CSS preview:
+ <ul><li>The CSS preview is based on the Google Chrome™ browser.</li>
+ <li>The CSS preview can differ from the actual product. It allows you to see the overall outline.</li>
+ <li>Some selectors and elements do not work on the CSS preview.</li></ul></td>
</tr>
- </tbody>
- </table>
+ </tbody>
+</table>
+
+
<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/></p>
</div>
<ul>
<li>Edit HTML tag attributes in the <strong>Properties</strong> view
<p class="figure">Figure: Properties view</p>
- <p
style="text-align:center;"><img alt="Properties view" src="../images/properties_html.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
+ <p
align="center"><img alt="Properties view" src="../images/properties_html.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
</li>
<li>Integration with source editor</li>
</ul>
<p>You can toggle the visibility of the breadcrumb control by pressing <strong>Ctrl+8</strong> or the <strong>Breadcrumb</strong> toolbar icon.</p></li>
<li>You can set the visibility of the breadcrumb control.
<p>Select <strong>Window > Preferences > Tizen SDK > Web > Editor > HTML Editor</strong>. By default, the breadcrumb is shown in the HTML editor.</p></li></ul>
-<p class="figure">Figure: Toggle the Breadcrumb icon in the toolbar</p> <p style="text-align:center;"><img alt="Toggle the Breadcrumb icon in the toolbar" src="../images/html_breadcrumb_toggle.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
-<p class="figure">Figure: Breadcrumb in the HTML editor</p> <p style="text-align:center;"><img alt="Breadcrumb in the HTML editor" src="../images/html_breadcrumb.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
+<p class="figure">Figure: Toggle the Breadcrumb icon in the toolbar</p>
+<p align="center"><img alt="Toggle the Breadcrumb icon in the toolbar" src="../images/html_breadcrumb_toggle.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
+<p class="figure">Figure: Breadcrumb in the HTML editor</p>
+<p align="center"><img alt="Breadcrumb in the HTML editor" src="../images/html_breadcrumb.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
<p>To show the child elements, select the arrow button of each element. To navigate to the element, select the element name.</p>
<h2 id="assist" name="assist">Advanced Content Assist in Mobile Applications</h2>
<li>Propose code completion of <span style="font-family: Courier New,Courier,monospace">id</span> or <span style="font-family: Courier New,Courier,monospace">class</span> attribute values of all elements.
<ul><li><span style="font-family: Courier New,Courier,monospace">id</span>: The list of id selectors of linked CSS files.</li>
<li><span style="font-family: Courier New,Courier,monospace">class</span>: The list of class selectors of linked CSS files.</li></ul></li></ul>
-<p class="figure">Figure: Content assist with <span style="font-family: Courier New,Courier,monospace"><img></span> element</p> <p style="text-align:center;"><img alt="Content assist with img element" src="../images/html_assist.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
+<p class="figure">Figure: Content assist with <span style="font-family: Courier New,Courier,monospace"><img></span> element</p>
+<p align="center"><img alt="Content assist with img element" src="../images/html_assist.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
<p>In the HTML editor, press <strong>Ctrl + Space</strong> to complete the code. A list of available code completions opens. To use content assist:</p>
<ol><li>Navigate and select the lines in the list.
<p>Additional information of the selected line is displayed.</p></li>
<li>Supports a preview of the HTML file at the <span style="font-family: Courier New,Courier,monospace">src</span> attribute value of the <span style="font-family: Courier New,Courier,monospace"><iframe></span> element.</li>
<li>Supports a preview of the image file at the <span style="font-family: Courier New,Courier,monospace">src</span> attribute value of the <span style="font-family: Courier New,Courier,monospace"><img></span> element.</li>
<li>Support a preview of the CSS rule at the <span style="font-family: Courier New,Courier,monospace">id</span> or <span style="font-family: Courier New,Courier,monospace">class</span> attribute value of all elements, if the selector (that is made by the <span style="font-family: Courier New,Courier,monospace">id</span> or <span style="font-family: Courier New,Courier,monospace">class</span> value) exists.</li></ul>
-<p class="figure">Figure: Content hover with <span style="font-family: Courier New,Courier,monospace"><link></span> element</p> <p style="text-align:center;"><img alt="Content hover with link element" src="../images/html_hover.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
+<p class="figure">Figure: Content hover with <span style="font-family: Courier New,Courier,monospace"><link></span> element</p>
+<p align="center"><img alt="Content hover with link element" src="../images/html_hover.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
<p>To use the hover feature, in the HTML editor, hover the mouse cursor at the above attributes.</p>
<h2 id="refactoring" name="refactoring">Advanced File Refactoring in Mobile Applications</h2>
<p>When a file is moved, other files to which the moved file belongs are changed at the linked line of codes.</p></li>
<li>File delete refactoring
<p>When a file is deleted, other files to which the deleted file belongs are commented out at the linked line of codes.</p></li></ul>
-<p class="figure">Figure: Before the CSS file rename refactoring</p> <p style="text-align:center;"><img alt="Before the CSS file rename refactoring" src="../images/html_refactor_before.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
-<p class="figure">Figure: After the CSS file rename refactoring</p> <p style="text-align:center;"><img alt="After the CSS file rename refactoring" src="../images/html_refactor_after.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
+<p class="figure">Figure: Before the CSS file rename refactoring</p>
+<p align="center"><img alt="Before the CSS file rename refactoring" src="../images/html_refactor_before.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
+<p class="figure">Figure: After the CSS file rename refactoring</p>
+<p align="center"><img alt="After the CSS file rename refactoring" src="../images/html_refactor_after.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../scripts/showhide.js"></script>
<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
</div>
<div id="container"><div id="contents"><div class="content">
<li>Some network environments do not support live editing. </li>
</ul>
<p>To preview a HTML file in the <strong>HTML Preview</strong> view, right-click the project in the <strong>Project Explorer</strong> view and select <strong>Preview</strong>, click the preview icon in the toolbar, or use the <strong>Ctrl + 4</strong> hotkey. The toolbar icon is shown in the following figure.</p>
- <p class="caption" style="text-align: center;">Figure: Toolbar icon</p>
- <p style="text-align:center;"><img alt="Toolbar icon"
-src="../images/toolbar_icon.png"/></p>
+ <p class="figure">Figure: Toolbar icon</p>
+ <p align="center"><img alt="Toolbar icon" src="../images/toolbar_icon.png"/></p>
<p>Preview acts as your preference as configured by you. You can <a href="set_ide_preference_w.htm#live">set the preview</a> in <strong>Window > Preferences > Tizen SDK > Web > Live Editing</strong>. </p>
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<!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>
<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile Web" src="../images/mw_icon.png"
/> <img alt="Wearable Web" src="../images/ww_icon.png" /></p>
+ <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png" /></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li>
- <a href="#use">Using the JavaScript Analyzer</a>
- <ul>
- <li><a href="">Setting JavaScript Rules</a></li>
- </ul>
- </li>
- <li>
- <a href="#support">Supporting Rules</a>
- <ul>
- <li><a href="#coding">Coding Rules</a></li>
- <li><a href="#api">Web API Usage Rules</a></li>
- </ul>
- </li>
- <li>
- <a href="#stalechecker">Using the Stale Object Checker</a>
- <ul>
- <li><a href="#resultpage">Result Page View</a></li>
- <li><a href="#samplecode">Sample Code</a></li>
- </ul>
- </li>
-
+ <li><a href="#use">Using the JavaScript Analyzer</a></li>
+ <li><a href="#settingrules">Setting JavaScript Rules</a></li>
+ <li><a href="#support">Supported Rules</a></li>
+ <li><a href="#stalechecker">Using the Stale Object Checker</a></li>
</ul>
</div></div>
</div>
<p>The JavaScript Analyzer (JSA) is an analysis tool, which helps to find problems in JavaScript code. When you develop a Web application with a new project in the IDE, you can run JSA to detect potential problems in your JavaScript code.</p>
+<p>JSA supports 2 analyzer types:</p>
<ul>
- <li>
- <strong>JSA supports two types of analyzer</strong>
- <ul>
- <li><strong>Static Analyzer</strong>
- <p>Checkers for a set of pre-defined coding rules. It supports 27 rules, including coding rules and Web API usage rules.</p>
- </li>
- <li><strong>Dynamic Analyzer</strong>
- <p>Checker for stale objects that cause possible memory leak. </p>
- </li>
- </ul>
-
-
- </li>
-
+ <li><strong>Static Analyzer</strong> (Coding Rule Checker)
+ <p>Contains checkers for a set of predefined coding rules. It supports 27 rules, including coding rules and Web API usage rules.</p>
+<p>The Coding Rule Checker is a static analysis tool that evaluates an application by examining the JavaScript code without its execution. This type of checkers examine all possible execution paths and variable values, and then provide its their analysis result.</p>
+ </li>
+ <li><strong>Dynamic Analyzer</strong> (Stale Object Checker)
+ <p>Contains a checker for stale objects that cause possible memory leaks.</p>
+<p>The Stale Object Checker is a dynamic analysis tool that requires executing the application on a runtime environment for its analysis. This checker examines all the JavaScript objects created during its execution and points out relatively critical staled objects.</p>
+ </li>
</ul>
-<p>The Coding Rule Checker is a static analysis tool that evaluates an application by examining the JavaScript code without its execution. This type of checkers examine all possible execution paths and variable values, and then provide its their analysis result.</p>
-
-<p>On the other hand, the Stale Object Checker is a dynamic analysis tool that requires executing the application on a runtime environment for its analysis. This checker examines all the JavaScript objects created during its execution and points out relatively critical staled objects.</p>
-
<h2 id="use" name="use">Using the JavaScript Analyzer</h2>
-<p>To analyze a Web application with the JSA in the IDE, select the target project in the Project Explorer and right-click the project icon. Then, the menu is shown like in Figure 1. and select Run JS Code Analysis.</p>
-
+<p>To analyze a Web application with the JSA in the IDE, right-click the target project in the <strong>Project Explorer</strong> view and select <strong>Check JavaScript Rules</strong>.</p>
-<p class="figure">Figure1 : JavaScript Rule Checker</p>
-<p style="text-align:center;"><img alt="JavaScript Rule Checker" src="../images/js_rule_checker.png" /></p>
+<p class="figure">Figure: JSA in the menu</p>
+<p align="center"><img alt="JSA in the menu" src="../images/js_rule_checker.png" /></p>
-<p>The JSA analyzes JavaScript codes in the selected Web application project after selecting javaScript files and codes segment to analyze. This can be done by parsing the start html file (i.e., index.html, etc) specified in the config.xml.</p>
+<p>The JSA analyzes JavaScript codes in the selected Web application project after selecting JavaScript files and code segments to analyze. This can be done by parsing the start HTML file (such as <span style="font-family: Courier New,Courier,monospace">index.html</span>) specified in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file.</p>
-<p class="figure">Figure2: JavaScript Rule Checker</p>
-<p style="text-align:center;"><img alt="JavaScript Rule Checker" src="../images/js_automatic_analysis.png" /></p>
+<p class="figure">Figure: Checking in progress</p>
+<p align="center"><img alt="Checking in progress" src="../images/js_automatic_analysis.png" /></p>
-<p>If Javascript Analyzer detects the codes which can cause potential problems during its analysis step, the problems are listed up in the JavaScript Problems view. If you want to locate a possibly problematic code line, double-click the alarm in the view.</p>
+<p>If JavaScript Analyzer detects codes that can cause potential problems during its analysis step, the problems are listed up in the <strong>Problems</strong> view. If you want to locate a possibly problematic code line, double-click the alarm in the view.</p>
-<p class="figure">Figure3: JavaScript Problems view</p>
-<p style="text-align:center;"><img alt="JavaScript Rule Checker" src="../images/js_problems_view.png" /></p>
+<p class="figure">Figure: Problems view</p>
+<p align="center"><img alt="Problems view" src="../images/js_problems_view.png" /></p>
<h2 id="settingrules" name="settingrules">Setting JavaScript Rules</h2>
-<p>You can enabled or disable the JavaScript Rules in Preferences of JavaScript Analzer</p>
-<p>To enable or disable the JavaScript Rules :</p>
+<p>You can enable or disable the JavaScript rules in JavaScript Analyzer preferences.</p>
+<p>To enable or disable the rules:</p>
<ol>
- <li>In the Tizen IDE, go to Window > Preferences > JavaScript Analzer</li>
- <li>Select a checkbox of rule items to enable or disable</li>
+ <li>In the Tizen IDE, go to <strong>Window > Preferences > JavaScript Analyzer</strong>.</li>
+ <li>Select or clear a rule checkbox to enable or disable the rule.</li>
</ol>
-<p class="figure">Figure4: Preferences Page</p>
-<p style="text-align:center;"><img alt="JavaScript Rule Checker" src="../images/js_settings_rules.png" /></p>
+<p class="figure">Figure: Preferences</p>
+<p align="center"><img alt="Preferences" src="../images/js_settings_rules.png" /></p>
-<h2 id="support" name="support">Supporting Rules</h2>
+
+<h2 id="support" name="support">Supported Rules</h2>
<h3 id="coding" name="coding">Coding Rules</h3>
<p>This rule is supported by the JSLint and the Google Closure Linter. They say that "When you fail to specify <span style="font-family: Courier New,Courier,monospace">var</span>, the variable gets placed in the global context, potentially clobbering existing values. Also, if there is no declaration, it is hard to tell in what scope a variable lives."</p>
<pre class="prettyprint">function func1() {
- // The foo function is defined without the var keyword
+ /* The foo function is defined without the var keyword */
foo = function() {
alert('func1');
};
- // When the foo function is called, the foo function is not clear
+ /* When the foo function is called, the foo function is not clear */
foo();
}
-
function func2() {
- // The other foo function is defined without var keyword.
+ /* The other foo function is defined without var keyword */
foo = function() {
alert('func2');
};
- // When the foo function is called, the foo function is not clear.
+ /* When the foo function is called, the foo function is not clear */
foo();
}</pre>
<p>In the following example, the statement <span style="font-family: Courier New,Courier,monospace">var arguments = [];</span> in the function overwrites the reserved keyword <span style="font-family: Courier New,Courier,monospace">arguments</span>. As a result, the reserved keyword <span style="font-family: Courier New,Courier,monospace">arguments</span> in functions lose the feature to access the arguments of the function.</p>
<pre class="prettyprint">function func() {
- // 'arguments' has been predefined as a reserved keyword
+ /* 'arguments' has been predefined as a reserved keyword */
var arguments = [];
}</pre>
<p>This rule is introduced in the Google JavaScript Style Guide. They say that "The ability to create closures is perhaps the most useful and often overlooked feature of JS.One thing to keep in mind, however, is that a closure keeps a pointer to its enclosing scope. As a result, attaching a closure to a DOM element can create a circular reference and thus, a memory leak.".</p>
<pre class="prettyprint">var outer = function() {
- // Warning case, be careful
+ /* Warning case, be careful */
var x = 0;
return function() {
- // Variable x of the outer function is captured in the inner function
+ /* Variable x of the outer function is captured in the inner function */
return ++x;
}
}
var x = -1;
-// The inner function of function outer is assigned to variable test outside function outer
+/* The inner function of function outer is assigned to variable test outside function outer */
var test = outer();
-// Whenever the test is called, the result can be different from the expectation
+/* Whenever the test is called, the result can be different from the expectation */
-// 1st return
+/* 1st return */
test();
-// 2nd return
+/* 2nd return */
test();
-// 3rd return
+/* 3rd return */
test();</pre>
<p>The JSA displays the following message:</p>
<p>This rule is described in the Google JavaScript Coding Style Guide. They say that "Extra comma and semicolon can make error.".</p>
<pre class="prettyprint">function func() {
- for(var i = 0; i < 10; i++) {
- // Extra semicolon
+ for (var i = 0; i < 10; i++) {
+ /* Extra semicolon */
x++;;
- // Extra semicolon after the 'for' statement
+ /* Extra semicolon after the 'for' statement */
};
return x;
-// Extra semicolon after the function definition statement
+/* Extra semicolon after the function definition statement */
};
var result = func();</pre>
};
var obj = new Obj();
-// Deleting properties of objects can make the performance of the program worse
+/* Deleting properties of objects can make the performance of the program worse */
delete obj.value;</pre>
<p>The JSA displays the following message:</p>
<p>This rule is introduced by the Google JavaScript Style Guide. They say that "The whitespace at the beginning of each line can't be safely stripped at compile time; whitespace after the slash will result in tricky errors; and while most script engines support this, it is not part of ECMAScript".</p>
-<pre class="prettyprint">// Multi-line string literals can create a problem
+<pre class="prettyprint">/* Multi-line string literals can create a problem */
var str = 'The Test String \
for Positive TC';</pre>
<pre class="prettyprint">var x = 1
-// If the variable x is 1, the array arr1 is the array whose length is 1, not arr[0] is 1
+/* If the variable x is 1, the array arr1 is the array whose length is 1, not arr[0] is 1 */
var arr1 = new Array(x);
-// The array arr2 is the array which has 3 values, 1, 2, and 3
+/* The array arr2 is the array which has 3 values, 1, 2, and 3 */
var arr2 = new Array(1, 2, 3);</pre>
<p>The JSA displays the following message:</p>
<p>This rule is introduced by the Google Javascript Style Guide. They say that "Modifying builtins like Object.prototype and Array.prototype are strictly forbidden. It leads to hard to debug issues in production and should be avoided."</p>
-<pre class="prettyprint">// Modifying the function in prototype of built-in object makes debugging difficult
+<pre class="prettyprint">/* Modifying the function in prototype of built-in object makes debugging difficult */
Object.prototype.create = function() {
alert('Warning!');
};</pre>
<h4>Rule 9. Do Not Convert Wrapper Objects to Primitives</h4>
-<p>Avoid creating primitive typed values using the constructor of a wrapper objects</p>
+<p>Avoid creating primitive typed values using the constructor of a wrapper objects.</p>
<p>If a boolean variable is created by the constructor <span style="font-family: Courier New,Courier,monospace">Boolean</span>, its value is a wrapper object, not <span style="font-family: Courier New,Courier,monospace">true</span> or <span style="font-family: Courier New,Courier,monospace">false</span>. In the following example, the program always prints <span style="font-family: Courier New,Courier,monospace">true</span> because the variable <span style="font-family: Courier New,Courier,monospace">bool</span> is a object that has a value, <span style="font-family: Courier New,Courier,monospace">false</span>.</p>
<p>This rule is introduced by the Google Javascript Style Guide. They say that "There's no reason to use wrapper objects for primitive types, plus they are dangerous". </p>
-<pre class="prettyprint">// The variable bool is not false. It is an object with the value false
+<pre class="prettyprint">/* The variable bool is not false. It is an object with the value false */
var bool = new Boolean(false);
-// bool is always true
-if(bool) {
+/* bool is always true */
+if (bool) {
alert('true');
-} else {
+}
+else {
alert('false');
}</pre>
<pre class="prettyprint">var arr = ['a', 'b', 'c'];
-// The variable key is not 'a', 'b', and 'c'. It is 0, 1, and 2
-for(var key in arr) {
+/* The variable key is not 'a', 'b', and 'c'. It is 0, 1, and 2 */
+for (var key in arr) {
alert(key);
}</pre>
<h4>Rule 11. Do Not Use Unclosed Braces</h4>
-<p>A method, an object , a code block and so on which has opening brace but no closing brace is not correct . The analysis will detect this and be stopped with error message.</p>
-<p>In the below example, function temp needs a closing brace to indicate that the function definition is finished. The JSA detects this and makes an alarm, the analysis is stopped because of this error.</p>
+<p>A method, an object, a code block, or a similar element which has an opening brace but no closing brace is not correct. The analysis detects this and stops with an error message.</p>
+<p>In the following example, the <span style="font-family: Courier New,Courier,monospace">temp()</span> method needs a closing brace to indicate that the method definition is finished. The JSA detects this and creates an alarm, and the analysis is stopped because of the error.</p>
-<pre class="prettyprint">// The function temp needs the closing brace
+<pre class="prettyprint">
+/* The temp function needs the closing brace */
function temp() {
var a = 'ddd';</pre>
<p>The JSA displays the following message:</p>
<pre class="prettyprint">[Syntax Error]Missing closing brace } character.</pre>
-<h4>Rule 12. Do Not use unclosed Comments</h4>
+<h4>Rule 12. Do Not Use Unclosed Comments</h4>
-<p>Writing comment only with begin comment , but no closing comment is not correct. In some scenario, it will affect the implementation of function, code block, and so on. The analysis will detect this and be stopped with error message.</p>
+<p>Writing comment with only the begin comment and no closing comment is not correct. In some scenarios, it affects the implementation of the method or code block. The analysis detects this and stops with an error message.</p>
-<p>In the below example, the comment has no closing comment, which causes the for loop can’t be completed. The JSA detects it and makes an alarm, the analysis is stopped because of this error.</p>
+<p>In the following example, the comment has no closing comment, and the for loop cannot be completed. The JSA detects it and creates an alarm, and the analysis is stopped because of the error.</p>
-<pre class="prettyprint">// The comment has no close comment
+<pre class="prettyprint">
+/* The comment has no close comment */
var a = 10;
var b = 5;
-for(var i = 0; i < b; i++){
+for (var i = 0; i < b; i++) {
a += i;
/* init i;
}</pre>
<h4>Rule 13. Do Not Use Unclosed Strings</h4>
-<p>String needs to be put in the quote, missing single quote is not allowed, analysis will be stopped with error message because of this error.</p>
+<p>String needs to be put in the quotes, and missing a single quote is not allowed. The analysis is stopped with an error message because of this error.</p>
-<p>In the below example, the string misses single quote, which causes the variable definition can’t be completed. The JSA detects it and makes an alarm, the analysis is stopped because of this error.</p>
+<p>In the following example, the string misses a single quote, and the variable definition cannot be completed. The JSA detects it and creates an alarm, and the analysis is stopped because of the error.</p>
-<pre class="prettyprint">// Setting value for MAX is not correct, missing single quote
+<pre class="prettyprint">
+/* Setting value for MAX is not correct, missing single quote */
var MAX = 20;
-for (var i = 0; i < 10; i++) {
+for (var i = 0; i < 10; i++) {
MAX = 'tt;
}</pre>
<p>The JSA displays the following message:</p>
<pre class="prettyprint">[Syntax Error]Missing closing single-quote ' character.</pre>
-
<h4>Rule 14. Do Not Omit Semicolons</h4>
-<p>Semicolon is needed in javascript to indicate that the declaration is finished. Missing Semicolon is not recommened, analysis will detect this, and be proceeded without stopping.</p>
+<p>Semicolon is needed in JavaScript to indicate that the declaration is finished. Missing a semicolon is not recommended, and although the analysis detects this, it proceeds without stopping.</p>
-<p>In the below example, the variable a declared in function tempx without semicolon, the JSA detects it and makes an alarm.</p>
+<p>In the following example, the variable a declared in the <span style="font-family: Courier New,Courier,monospace">tempx()</span> function without a semicolon, and the JSA detects it and creates an alarm.</p>
-<pre class="prettyprint">// The declaration of a need semicolon in the end.
+<pre class="prettyprint">
+/* The declaration of a needed semicolon in the end */
function tempx() {
var a = 'ddd'
}</pre>
<h4>Rule 15. Do Not Begin With Operators</h4>
-<p>Begining a line with the operator is not recommend, analysis will detect this, and be proceeded without stopping.</p>
+<p>Beginning a line with the operator is not recommended, and although the analysis detects this, it proceeds without stopping.</p>
-<p>In the below example, setting value for abc with operator = in the new line, this is not correct, here, operator = shoud be in the same line as abc, the JSA detects it and makes an alarm.</p>
+<p>In the following example, setting the value for the abc with the = operator in the new line is not correct. The operator must be in the same line as abc. The JSA detects it and creates an alarm.</p>
-<pre class="prettyprint">// Setting value for abc is not correct, should not begin with operator=.
+<pre class="prettyprint">/* Setting value for abc is not correct, do no begin with operator = */
var variable_sum = 1;
var b = 2;
var abc
<h4>Rule 16. Do Not Use Double-quoted Strings</h4>
-<p>Invoking a code block with double-quotes instead of single-quotes for string will be notified as CodingRule and the analysis will be proceeded without stopping.</p>
+<p>Invoking a code block with double-quotes instead of single-quotes for a string is noticed, although the analysis proceeds without stopping.</p>
-<p>In the below example, "aa" should be 'aa'. Because of double-quotes being used, the JSA detects it and makes an alarm.</p>
+<p>In the following example, "aa" must be 'aa'. The JSA detects it and creates an alarm.</p>
<pre class="prettyprint">
-if(true) {
+if (true) {
var a = "aa";
}</pre>
<p>The JSA displays the following message:</p>
-<pre class="prettyprint">[[CodingRule] Do not use double-quotes instead of single-quotes for string. </pre>
+<pre class="prettyprint">[[CodingRule] Do not use double-quotes instead of single-quotes for string.</pre>
<h4>Rule 17. Do Not End With Commas In Literals</h4>
-<p>Invoking a code block with extra comma at the end of object/array literals will be notified as CodingRule and the analysis will be proceeded without stopping.</p>
+<p>Invoking a code block with an extra comma at the end of object/array literals is noticed, although the analysis proceeds without stopping.</p>
-<p>In the below example, the last ',' must be removed. Because of extra comma at the end of object/array literals, the JSA detects it and makes an alarm.</p>
+<p>In the following example, the last ',' must be removed. The JSA detects it and creates an alarm.</p>
<pre class="prettyprint">
var abc = [1, 2, 3,];</pre>
<h4>Rule 18. Do Not Use Wrong Opening Brace</h4>
-<p>Invoking a code block with opening brace '{' which does not appear in the same line with the statement will be notified as CodingRule and the analysis will be proceeded without stopping.</p>
+<p>Invoking a code block with an opening brace '{' which does not appear in the same line with the statement is noticed, although the analysis proceeds without stopping.</p>
-<p>In the below example, the opening brace '{' must appear in the same line with the statement. If not, the JSA detects it and makes an alarm. </p>
+<p>In the following example, the opening brace '{' must appear in the same line with the statement. If not, the JSA detects it and creates an alarm. </p>
<pre class="prettyprint">
-if(true) // Do Not Use Wrong Opening Brace
+/* Do Not Use Wrong Opening Brace */
+if (true)
{
- var test = 'test';
+ var test = 'test';
}
</pre>
<p>The JSA displays the following message:</p>
<pre class="prettyprint">[CodingRule] Opening brace '{' character should appear in the same line with the statement. </pre>
+
<h3 id="api" name="api">Web API Usage Rules</h3>
<p>Tizen Web APIs extend JavaScript APIs to enable you using the device capabilities provided by Tizen devices. The Tizen Web APIs are designed to be simple and intuitive. The following rules notify you, when the APIs are used improperly.</p>
<p>In the following example, the <span style="font-family: Courier New,Courier,monospace">tizen.alarm.gett()</span> function does not exist in the Tizen API, so the JSA detects it and creates an alarm.</p>
-<pre class="prettyprint">// Mistyping get as gett
+<pre class="prettyprint">/* Mistyping get as gett */
var alarm = tizen.alarm.gett(abs_alarm.id);</pre>
<p>The JSA displays the following message:</p>
<p>In the following example, the <span style="font-family: Courier New,Courier,monospace">tizen.filesystem.resolve()</span> function needs more than 1 argument. Since the number of arguments is 1, the JSA detects it and creates an alarm.</p>
-<pre class="prettyprint">// The number of arguments is wrong (2 or more arguments required)
+<pre class="prettyprint">/* The number of arguments is wrong (2 or more arguments required) */
tizen.filesystem.resolve('images'
- // Missing error callback arguments);</pre>
+ /* Missing error callback arguments */);</pre>
<p>The JSA displays the following message:</p>
<pre class="prettyprint">tizen.filesystem.resolve('images',
function(dir) {
- console.log('Mount point Name is ' + dir.path);
+ console.log("Mount point Name is " + dir.path);
}
- // Error callback required as the third argument);
-};</pre>
+ /* Error callback required as the third argument */
+);</pre>
<p>The JSA displays the following message:</p>
<p>In the following example, the <span style="font-family: Courier New,Courier,monospace">tizen.calendar.getCalendars()</span> is a method that can throw exceptions, so it must be wrapped by a <span style="font-family: Courier New,Courier,monospace">try-catch</span> statement. Because the <span style="font-family: Courier New,Courier,monospace">try-catch</span> statement does not exist, the JSA detects it and creates an alarm.</p>
-<pre class="prettyprint">// tizen.calendar.getCalendars API can make exceptions, so it should be wrapped in a try-catch statement
+<pre class="prettyprint">/* tizen.calendar.getCalendars API can make exceptions, so it should be wrapped in a try-catch statement */
tizen.calendar.getCalendars('EVENT', calendarListCallback, errorCallback);</pre>
<p>The JSA displays the following message:</p>
<pre class="prettyprint">var addressBooksCB = 'notFucntion';
try {
- // The arguments of tizen.contact.getAddressBooks API must be function types instead of strings and undefined
+ /* The arguments of tizen.contact.getAddressBooks API must be function types instead of strings and undefined */
tizen.contact.getAddressBooks(addressBooksCB, undefined);
-} catch (e) {
- /* ... */
+}
+catch (e) {
+ /* Error handling */
}</pre>
<p>The JSA displays the following message:</p>
var invalidContactObj = new tizen.Contact(
{
- // The first argument, whose type is dictionary, of tizen.Contact API does not have the property 'foo'
+ /* The first argument, whose type is dictionary, of tizen.Contact API does not have the property 'foo' */
foo: 'I'm not an member of Contact'</pre>
<p>The JSA displays the following message:</p>
<h4>Rule 7. API Version Compatibility</h4>
-<p>Invoking API which is not defined in Current API version will be notified as Web API Rule and the analysis will be proceeded without stopping. If these Web API was defined in another API version or platform, notify user these version name.</p>
+<p>Invoking an API which is not defined in the current API version is noticed, although the analysis proceeds without stopping. If the Web API was defined in another API version or platform, the version name is provided in the error message.</p>
-<p>In the below example, Web App is developed for Tizen 2.3 wearable platform, but <span style="font-family: Courier New,Courier,monospace">tizen.archive.open()</span> is defined in mobile-2.3, so the JSA detects it and makes an alarm.</p>
+<p>In the following example, the Web App is developed for the Tizen 2.3 wearable platform, but the <span style="font-family: Courier New,Courier,monospace">tizen.archive.open()</span> method is defined in for the Tizen 2.3 mobile platform, so the JSA detects it and creates an alarm.</p>
<pre class="prettyprint">
function onsuccess() { /* ... */ }
function onerror() { /* ... */ }
try {
- //Source code in Web App for Tizen 2.3 wearable platform, but 'open()' is defined in mobile-2.3
+ /* Source code in Web App for Tizen 2.3 wearable platform, but 'open()' is defined in mobile-2.3 */
tizen.archive.open('downloads/some_archive.zip', 'r', onsuccess, onerror);
} catch (e) {
/* ... */
<h4>Rule 8. API Privilege Missing</h4>
-<p>To use Tizen Device API in target device, the 'config.xml' of Tizen Web App must have corresponding privilege url define. Web API Rule will be notified if not found the privilege in 'config.xml' file.</p>
+<p>To use a privileged Tizen Device API in a target device, the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file of the Tizen Web application must have a corresponding privilege URL defined. An alarm is raised if the privilege is not found in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file.</p>
-<p>In the below example, Web App is using <span style="font-family: Courier New,Courier,monospace">tizen.application.launch()</span>, this API need 'http://tizen.org/privilege/application.launch', which is commented in the config.xml. So an alarm raise.<p>
+<p>In the following example, the Web application is using the <span style="font-family: Courier New,Courier,monospace">tizen.application.launch()</span> method, which requires the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/application.launch</span> privilege, which is commented in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file. So an alarm is raised.</p>
<pre class="prettyprint">
function onsuccess() { /* ... */ }
tizen.application.launch('targetApp0.main', onsuccess);
-/* config.xml File (Privilege commented) */
-<!--tizen:privilege name="http://tizen.org/privilege/application.launch"/-->
+/* config.xml file (privilege commented) */
+<!--tizen:privilege name="http://tizen.org/privilege/application.launch"/-->
</pre>
<p>The JSA displays the following message:</p>
<h2 id="stalechecker" name="support">Using the Stale Object Checker</h2>
-<p>To analyze a web application with the Stale Object Checker in the IDE, select the target project in the Project Explorer and right-click the project icon. In other way, select the project, click Check Stale Object icon on tool bar. After those steps, select the testing platform.</p>
-
-<p class="figure">Figure5 : Stale Object Checker</p>
-<p style="text-align:center;"><img alt="JavaScript Rule Checker" src="../images/js_stale_checker_menu.png" /></p>
-
-<p>On Tizen device mode, it is packaged as a widget first, and then pushed to the Tizen device. At last it is launched automatically. After the application launched, user can follow the steps that designed for testing the application.</p>
-
-<p>On PC Browser mode, the web application will run at <strong>'http://localhost:8888'</strong>.</p>
-
-<p>When all operations are finished on the Tizen Device or PC Browser, click <strong>Stop Rcoding</strong> button on the Console toolbar or enter Alt + Shift + T key on PC Browser. Then a dialog like in figure 7 shows up on the page.</p>
-
+<p>To analyze a Web application with the Stale Object Checker in the IDE:</p>
-<p class="figure">Figure6 : Stop Recording</p>
-<p style="text-align:center;"><img alt="JavaScript Rule Checker" src="../images/js_stale_console.png" /></p>
+<ol><li>Right-click the target project in the <strong>Project Explorer</strong> view and select <strong>Check Stale Object</strong> (or select the project in the <strong>Project Explorer</strong> view and click <strong>Check Stale Object</strong> on the toolbar).
+<p align="center"><img alt="Stale Object Checker in the menu" src="../images/js_stale_checker_menu.png" /></p>
+</li>
-
-<p>After clicking OK button on the dialog in the figure 7, the Stale Object Checker continues to inspect the data collected and launch a result page on <strong>'http://localhost:9000'</strong>. And this result page can be accessed by any web browser in the PC.</p>
+<li>Select the testing platform:
+<ul><li>In the Tizen device mode, the project is packaged as an application first, and then pushed to the Tizen device. Finally, it is launched automatically. After the application is launched, you can test the application.</li>
+<li>In the PC Browser mode, the Web application runs at <span style="font-family: Courier New,Courier,monospace">http://localhost:8888</span>.</li>
+</ul></li>
+<li>When all operations are finished on the Tizen device or PC browser, click <strong>Stop Recoding</strong> on the <strong>Console</strong> view toolbar or enter <strong>Alt+Shift+T</strong> on the keyboard.
+<p align="center"><img alt="Stop recording" src="../images/js_stale_console.png" /></p></li>
-<p class="figure">Figure7 : Stop Dialog Device and Browser mode</p>
-<p style="text-align:center;"><img alt="JavaScript Rule Checker" src="../images/js_stale_stop_alert.png" /></p>
+<li>After you stop recording, a confirmation message os displayed. Click <strong>OK</strong>.
+<p>The Stale Object Checker continues to inspect the data collected and launches a result page at <span style="font-family: Courier New,Courier,monospace">http://localhost:9000</span>. The result page can be accessed by any Web browser in the PC.</p>
+<p align="center"><img alt="Confirmation of the recording stop" src="../images/js_stale_stop_alert.png" /></p></li></ol>
<h3 id="resultpage" name="resultpage">Result Page View</h3>
-<p>The first screen is given like the Figure 8. This analysis result page is composed with two parts. One is the <strong>Issue Table</strong>, and the other is the <strong>All-Sites Timeline</strong>. You can link to these pages by choosing the menu located on the main page.</strong></strong></p>
+<p>The result page opens with the view shown in the following figure. The page is composed of 2 parts: issue table and all-sites timeline. You can switch between the parts using the menu at the top of the page.</p>
-<p class="figure">Figure8 : Issue Table Page</p>
-<p style="text-align:center;"><img alt="JavaScript Rule Checker" src="../images/js_stale_table_view.png" /></p>
+<p class="figure">Figure: Result page with the issue table</p>
+<p align="center"><img alt="Result page with the issue table" src="../images/js_stale_table_view.png" /></p>
-<p>Information of <strong>Site</strong>, <strong>Count</strong>, <strong>Kind</strong>, and <strong>Leak</strong> is provided in the Issue Table:<p>
+<p>The following details are provided in the issue table:</p>
<ul>
- <li><strong>Site</strong> : Source location where allocations took place. Click the site, for more details about the allocation.</li>
- <li><strong>Count</strong> : Number of objects allocated from a particular site during this execution.</li>
- <li><strong>Kind</strong> : A site allocates a DOM object, a FUNCTION, or a regular OBJECT.</li>
- <li><strong>Leak</strong> : Leak means that the count of stale instances is increasing over the life of execution.</li>
- </ul>
-<p>To understand the result from the Stable Object Checker better, following concepts are necessary:</p>
- <ul>
- <li><strong>Stale instance</strong> : Instance whose staleness value is not zero at specific time.</li>
- <li><strong>Staleness for object</strong> : Time interval between last use and unreachable time:</li>
- <li><strong>Exapmle</strong> :
- <ul>
-
- <li>if object was used more than once : unreachable time – last use time</li>
- <li>if object was never used : unreachable time – creation time</li>
- </ul>
- </li>
+ <li><strong>Site</strong>: Source location where the allocations took place. Click the site for more details about the allocation.</li>
+ <li><strong>Count</strong>: Number of objects allocated from a particular site during this execution.</li>
+ <li><strong>Kind</strong>: Site allocates a DOM object, a FUNCTION, or a regular OBJECT.</li>
+ <li><strong>Leak</strong>: Leak means that the count of stale instances is increasing over the execution life time.</li>
</ul>
+<p>A stale instance is any instance whose staleness value is not zero sat a specific time. The object staleness defines the time interval between the last use and the moment when the object is unreachable. For example, if the object has never been used, the staleness is the unreachable moment minus the creation time. If the object has been used, the staleness is the unreachable moment minus the last use time.</p>
-<h4 id="issuetable" name="resultpage">Issue Table</h4>
+<h4 id="issuetable" name="issuetable">Issue Table</h4>
-<p>When clicking the site on the issue table, a set of detail information on a leak occurrence is given. In the source view, a code segment that creates stale objects steadily, which possibly cause memory leak, is marked with a colored box. So that you can find out the code location easiliy.</p>
+<p>When you click a site in the issue table, a set of detailed information on a leak occurrence is shown. In the source view, you can easily find the code segment that steadily creates stale objects (possibly causing a memory leak), since it is marked with a colored box.</p>
-<p class="figure">Figure9 : Detail Information</p>
-<p style="text-align:center;"><img alt="JavaScript Rule Checker" src="../images/js_stale_detail_info.png" /></p>
+<p class="figure">Figure: Detailed information</p>
+<p align="center"><img alt="Detailed information" src="../images/js_stale_detail_info.png" /></p>
-<p>For example, in the Figure 9, this page says that the anonymous event handler function at the line 10 is a stale object that might cause memory leak.</p>
-<p>In the call tree view, a call hierarchy of the method which contains the code that creates stale objects is shown. The name of a node in this call tree view indicates the file name, line number and column number.</p>
-<p>As illustrated in Figure 9, the root element "js/main_orig_.js:10:45" indicates that memory leak occurs at line 10, column 45 in "js/main_orig_.js" file. Click on the root element, the source view will skip to the location.</p>
-<p>Click the child node "js/main_orig_.js:27:5", the source view will skip to line 27 where the method that contains memory leak issue is called and highlight the method.</p>
-<p>In the timeline view, the x axis represents the time elapse and y axis represents the number of created object from this site. Move the mouse to a specific time, the number of stale instance and allocated instance will show on the graph.</p>
-<p>In the access paths view, you can find out the scope of an object at runtime which leads to the location of memory leak.</p>
+<p>In the above figure:</p>
+<ul><li>The anonymous event handler function at the line 10 is identified as a stale object that can cause a memory leak.</li>
+<li>In the call tree view, a call hierarchy is shown for the method which contains the code that creates stale objects. The name of a node in the call tree view indicates the file name, line number, and column number.
+<p>The "js/main_orig_.js:10:45" root element indicates that the memory leak occurs at line 10, column 45 in the <span style="font-family: Courier New,Courier,monospace">js/main_orig_.js</span> file.</p>
+<p>Click the root element to move the source view to the location. Click the "js/main_orig_.js:27:5" child node to move the source view to line 27 where the method that contains the memory leak issue is called, and to highlight the method.</p></li>
+<li>In the timeline view, the x axis represents the time elapse and the y axis represents the number of created objects from this site. Move the mouse to a specific time to show the number of stale and allocated instances on the graph.</li>
+<li>In the access paths view, you can find out the scope of an object at runtime which leads to the location of the memory leak.</li></ul>
-<h4 id="allsites" name="resultpage">All-Sites Timeline</h4>
-<p>In this page, the timeline for all the object created during the execution is given. The timeline graph in Figure 9 shows the diagram for specific diagram while the timeline in Figure 10 indicates the diagram for all sites in the application. The pie charts shows the proportion of each site in all allocated objects and stale objects.</p>
+<h4 id="allsites" name="allsites">All-Sites Timeline</h4>
-<p class="figure">Figure10 : All-Sites Timeline Page</p>
-<p style="text-align:center;"><img alt="JavaScript Rule Checker" src="../images/js_stale_all_site.png" /></p>
+<p>The all-sites time shows the timeline for all the objects created during the execution. The timeline graph in the issue table (figure above) shows the diagram for a specific site while the timeline in the all-sites page (figure below) indicates the diagram for all sites in the application. The pie charts shows the proportion of each site in all allocated and stale objects.</p>
-<ul>
+<p class="figure">Figure: All-sites timeline page</p>
+<p align="center"><img alt="All-sites timeline page" src="../images/js_stale_all_site.png" /></p>
-</ul>
+<h3 id="samplecode" name="samplecode">Timer Sample Code</h3>
-<h3 id="samplecode" name="samplecode">Sample Code</h3>
-
-
-
-<h4 id="allsites" name="resultpage">Example 1. Timer</h4>
-
-
-<p>When click "start" button, the Timer will start the time. If click again, it will stop the time. The "exitApp" function register a event handler for Tizen Back key. In function "runtime()", "exitApp()" function is added by mistake.</p>
+<p>When you click <strong>start</strong>, the Timer starts to run. If you click again, the timer stops. The <span style="font-family: Courier New,Courier,monospace">exitApp()</span> function registers an event handler for the Tizen <strong>Back</strong> key to terminate the application when the <strong>Back</strong> key is pressed. </p>
- <p>So every time click "start" button, "exitApp" will be called, creates an anonymous function and register it to listen Back key event. When test this application with Stale Object Checker, if click "start" button many times, it should be figured out as a memory leak.
-</p>
+<p>In the <span style="font-family: Courier New,Courier,monospace">runtime()</span> function, the <span style="font-family: Courier New,Courier,monospace">exitApp()</span> function is added by mistake. As a result, every time you click <strong>start</strong>, the <span style="font-family: Courier New,Courier,monospace">exitApp()</span> function is called, creates an anonymous function, and registers it to listen to the <strong>Back</strong> key events. When you test this application with the Stale Object Checker, multiple <strong>start</strong> button clicks are shown as a memory leak.</p>
<pre class="prettyprint">
-//Javascript Snippets
-function exitApp( ) {
+/* JavaScript snippets */
+function exitApp() {
document.addEventListener('tizenhwkey', function(e) {
- if(e.keyName == 'back') {
+ if (e.keyName == 'back') {
try {
tizen.application.getCurrentApplication().exit();
} catch (error) {
}
function runtime() {
- exitApp(); // Add the function call for memory leak
- // ...
+ exitApp(); /* Add the function call for memory leak */
}
</pre>
-<p>When testing the souce code, we get the result as the figure 11. It indicates that memory leak occurred at site "js/main_orig_.js:39:42". Clicking this site, detail information is retrieved.</p>
+<p>When testing the source code, the following figure shows the result. It indicates that a memory leak occurred at the "js/main_orig_.js:39:42" site. Clicking this site, the detailed information is retrieved.</p>
-<p class="figure">Figure11 : Example1. Issue Table</p>
-<p style="text-align:center;"><img alt="JavaScript Rule Checker" src="../images/js_stale_example_1_01.png" /></p>
+<p class="figure">Figure: Timer example issue table</p>
+<p align="center"><img alt="Timer example issue table" src="../images/js_stale_example_1_01.png" /></p>
-<p class="figure">Figure12 : Example1. Detailed Information</p>
-<p style="text-align:center;"><img alt="JavaScript Rule Checker" src="../images/js_stale_example_1_02.png" /></p>
+<p class="figure">Figure: Timer example detailed information</p>
+<p align="center"><img alt="Timer example detailed information" src="../images/js_stale_example_1_02.png" /></p>
-<p>Figure 12 shows that function object which is added to listen "tizenhwkey" caused memory leak. Click the "Call Tree" on the right of this page. Figure 3 shows that "exitApp()" function which has the memory leak issue is called in "runtime()" fucntion.</p>
+<p>The detailed information shows that function object added to listen for "tizenhwkey" events caused a memory leak. If you click the "Call Tree" on the page, you can see that the <span style="font-family: Courier New,Courier,monospace">exitApp()</span> function with a memory leak issue is called in the <span style="font-family: Courier New,Courier,monospace">runtime()</span> function.</p>
-<p>This code site is detected as a leak because the handler function objects created from the site have not been used until this application exits. The call tree says that when function "runtime()" is executed, function "exitApp()" will be invoked.</p>
-<p> And every time function "exitApp()" is called, it will create an anonymous function and register it to document object. And you can find out this fact from the "Timeline" graph that the number of stale instances increased steadily.</p>
+<p>This code site is detected as a leak because the handler function objects created from the site have not been used before the application exits. The call tree says that when the <span style="font-family: Courier New,Courier,monospace">runtime()</span> function is executed, the <span style="font-family: Courier New,Courier,monospace">exitApp()</span> function is invoked, every time creates an anonymous function and registers it to a document object.</p>
-<p>This graph show any objects created from this code site have not been used until this application exists.</p>
+<p>In the "Timeline" graph, you can see how the number of stale instances increases steadily. This graph shows any objects created from this code site that have not been used before the application exists.</p>
-<h4 id="allsites" name="resultpage">Example 2. Calculator</h4>
+<h3 id="samplecode2" name="samplecode2">Calculator Sample Code</h3>
-<p>When click number button, "command" function will be executed. "init" function register a event handler for Tizen Back key. In function "command()", "init()" function is added by mistake. So every time click number button, "init()" will be called, creates an anonymous function and register it to listen Tizen Back key event.</p>
-<p>When test this application with Stale Object Checker, if click number button many times, it should be figured out as a memory leak. When testing the souce code, the result is the same as the Example 1.</p>
+<p>When you click a number button, the <span style="font-family: Courier New,Courier,monospace">command()</span> function is executed. The <span style="font-family: Courier New,Courier,monospace">init()</span> function registers an event handler for the Tizen <strong>Back</strong> key.</p>
+
+<p>In the <span style="font-family: Courier New,Courier,monospace">command()</span> function, the <span style="font-family: Courier New,Courier,monospace">init()</span> function is added by mistake. As a result, every time you click a number button, the <span style="font-family: Courier New,Courier,monospace">init()</span> function is called, creates an anonymous function, and registers it to listen to Tizen <strong>Back</strong> key events.</p>
+<p>When you test this application with the Stale Object Checker and click a number button many times, the problem is diagnosed as a memory leak. When testing the source code, the result is the same as in the Timer example above.</p>
<pre class="prettyprint">
-//Javascript Snippets
+/* JavaScript snippets */
var init = function() {
document.addEventListener('tizenhwkey', function(e) {
if (e.keyName == 'back') {
}
function command(num) {
- init(); // Add the function call for memory leak
- // ...
+ init(); /* Add the function call for memory leak */
}
-
</pre>
<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/></p>
</div>
<h2 id="view" name="view">Viewing Editor Ruler</h2>
<p>If the JavaScript syntax is incorrect, the errors are displayed in the editor ruler area and in the <strong>Problems</strong> view.</p>
<p class="figure">Figure: Problems view</p>
- <p
style="text-align:center;"><img alt="Problems view" src="../images/problems_view.png" /></p>
+ <p
align="center"><img alt="Problems view" src="../images/problems_view.png" /></p>
<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../scripts/showhide.js"></script>
</head>
<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
</div>
<div id="container"><div id="contents"><div class="content">
</div>
<h1>JavaScript Log Console View</h1>
- <p>The <strong>JavaScript Log Console</strong> view provides a functionality to view widget JavaScript logs. The <strong>JavaScript Log Console</strong> view is automatically opened when widget is launched.</p>
+ <p>The <strong>JavaScript Log Console</strong> view provides a functionality to view Web application JavaScript logs. The <strong>JavaScript Log Console</strong> view is automatically opened when a Web application is launched.</p>
<table class="note">
<tbody>
<tr>
<p>The JavaScript log methods are shown in the IDE with colors.</p>
<p class="figure">Figure: JavaScript log method colors</p>
-<p
style="text-align:center;"><img alt="JavaScript log method colors"
+<p
align="center"><img alt="JavaScript log method colors"
src="../images/js_colors.png"/></p>
<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
</head>
<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
</div>
<div id="container"><div id="contents"><div class="content">
</head>
<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
</div>
<div id="container"><div id="contents"><div class="content">
</div>
<h1>Privilege Checker</h1>
- <p>The IDE provides the privilege checker tool to identify potential problems in the application code related to <a href="../../../org.tizen.gettingstarted/html/details/sec_privileges.htm#web">privilege usage</a>.</p>
- <p>You can enable the checks in the <a href="../../../org.tizen.gettingstarted/html/process/setting_properties_w.htm">project properties </a> during the <a href="../../../org.tizen.gettingstarted/html/process/app_dev_process_w.htm#build">build process</a> or code editing. You can also perform the checks manually in the IDE by selecting <strong>Project > Check Privilege</strong>.</p>
+ <p>The IDE provides the privilege checker tool to identify potential problems in the application code related to <a href="../../../org.tizen.gettingstarted/html/web/details/sec_privileges_w.htm">privilege usage</a>.</p>
+ <p>You can enable the checks in the <a href="../../../org.tizen.gettingstarted/html/web/process/setting_properties_w.htm">project properties </a> during the <a href="../../../org.tizen.gettingstarted/html/web/process/app_dev_process_w.htm#build">build process</a> or code editing. You can also perform the checks manually in the IDE by selecting <strong>Project > Check Privilege</strong>.</p>
<p>The Privilege Checker tool is based on the <a href="content_assist_w.htm">Content Assist</a> Engine for Tizen IDE. It is used for codes that do not operate Content Assist and cannot perform checks. Therefore, the check results can possibly have missing (unsound) values.</p>
<p>The check results are displayed in the <strong>Problems</strong> view and vertical ruler. To resolve an alarm, click the annotation on the vertical ruler and select an entry from the proposal list. The required privilege is automatically added into <span style="font-family: Courier New,Courier,monospace">config.xml</span> file (for a quick fix, use the <strong>Ctrl+1</strong> keyboard shortcut).</p>
<table border="1">
--- /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>Project Wizard </title>
+ </head>
+
+<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+ <div id="profile">
+ <p><img alt="Mobile web" src="../images/mw_icon.png"/> <img alt="Wearable web" src="../images/ww_icon.png"/></p>
+ </div>
+
+
+ <h1>Project Wizard</h1>
+ <p>The Tizen Web Project Wizard is an IDE tool that is used to create a Web application project.</p>
+ <p>The Tizen IDE provides various project templates that make it easier for you to start coding your application. When you create a new project, you can select a specific template, which the Tizen Web Project Wizard uses to automatically create basic functionalities for the Web application. The default project files and folders are also created.</p>
+ <p>The following table lists the available project templates.</p>
+ <table border="1">
+ <caption>
+ Table: Project templates
+ </caption>
+ <tbody>
+ <tr>
+ <th>Project type</th>
+ <th>Application type</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td>Basic</td>
+ <td>Blank Application</td>
+ <td>Tizen blank application template.</td>
+ </tr>
+ <tr>
+ <td>jQuery Mobile (mobile only)</td>
+ <td>
+ <ul>
+ <li>Single Page Application</li>
+ <li>Multi Page Application</li>
+ <li>Master Detail Application</li>
+ <li>Navigation Application</li>
+ </ul></td>
+ <td>Templates based on <a href="http://jquerymobile.com/" target="_blank">jQuery Mobile</a>. <p>You can alter the application page header, body, and footer based on the following color themes:</p>
+ <ul>
+ <li>A - Black</li>
+ <li>B - Blue</li>
+ <li>C - Grey</li>
+ <li>D - Light grey</li>
+ <li>E - Yellow</li>
+ </ul> </td>
+ </tr>
+ <tr>
+ <td>IME application (wearable only)</td>
+ <td>Web IME Application</td>
+ <td>Web-based IME application template, which lets you create your own IME by only writing HTML, CSS, and JavaScript code.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+
+
+ <p>On the main page of the Tizen Web Project Wizard, you can set basic properties of a project, such as the project name, location, and working sets.</p>
+
+ <p class="figure">Figure: Project Wizard</p>
+ <p align="center"><img alt="Project Wizard" src="../images/web_application_wizard.png"/></p>
+
+ <p>The options you can set are listed in the following table.</p>
+ <table border="1">
+ <caption>
+ Table: Project Wizard options
+ </caption>
+ <tbody>
+ <tr>
+ <th style="text-align:center;margin-left:auto;margin-right:auto;">Option</th>
+ <th style="text-align:center;margin-left:auto;margin-right:auto;">Description</th>
+ </tr>
+ <tr>
+ <td>Tab</td>
+ <td>You can create an application based on a template or sample application.</td>
+ </tr>
+ <tr>
+ <td>Category</td>
+ <td>If the selected category has samples or templates, they are displayed in the list on the left.</td>
+ </tr>
+ <tr>
+ <td>Application type</td>
+ <td>Select the application type. It can be previewed in the description view on the right.</td>
+ </tr>
+ <tr>
+ <td>Project name</td>
+ <td>Enter the name for the project to be created. <p>The project names are restricted to the following regular expression: [a-zA-Z]{1}[a-zA-Z0-9-]{1,24}.</p></td>
+ </tr>
+ <tr>
+ <td>Use default location</td>
+ <td>If you check this option, the project is created in the <span style="font-family: Courier New,Courier,monospace">$<workspace_location>/$<project_name></span> directory.</td>
+ </tr>
+ <tr>
+ <td>Location</td>
+ <td>Manually select the location of the project. If you check the <strong>Use default location</strong> checkbox, this option is disabled.</td>
+ </tr>
+ <tr>
+ <td>Working sets</td>
+ <td>If you want to include your project as a specific working set, select a <a href="http://help.eclipse.org/kepler/index.jsp?topic=%2Forg.eclipse.platform.doc.user%2Fconcepts%2Fcworkset.htm" target="_blank">working set</a>.</td>
+ </tr>
+ </tbody>
+ </table>
+
+
+<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
<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/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>
+<script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
<title>REST Viewer</title>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
<div id="toc-navigation">
<div id="profile">
- <p>
- <img alt="Mobile Web" src="../images/mw_icon.png" /> <img
- alt="Wearable Web" src="../images/ww_icon.png" />
- </p>
+ <p><img alt="Mobile Web" src="../images/mw_icon.png" /> <img alt="Wearable Web" src="../images/ww_icon.png" /></p>
</div>
<div id="toc_border">
<div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a class="opensection" href="#visualize">Visualize the
- WADL document</a></li>
- <li><a class="opensection" href="#management">Management
- for WADL component</a></li>
- <li><a class="opensection" href="#authentication">Authentication</a></li>
- <li><a class="opensection" href="#test">Test and get the
- result</a></li>
- <li><a class="opensection" href="#auto">Auto-generating
- code</a></li>
+ <li><a href="#visualize">Displaying the WADL Document</a></li>
+ <li><a href="#management">Managing WADL Components</a></li>
+ <li><a href="#authentication">Authenticating the Application</a></li>
+ <li><a href="#test">Testing the APIs</a></li>
+ <li><a href="#auto">Auto-generating Code</a></li>
</ul>
</div>
</div>
</div>
- <div id="container">
- <div id="contents">
- <div class="content">
+<div id="container"><div id="contents"><div class="content">
+<h1>REST Viewer</h1>
- <h1>REST Viewer</h1>
+<p>When creating Web applications with REST APIs, the REST Viewer provides the following feature to ease the development process:</p>
+<ul>
+ <li><a href="#visualize">Displaying the WADL document</a>
+ <p>You can display the WADL components with a structure.</p>
+ </li>
+ <li><a href="#management">Managing WADL components</a>
+ <p>You can create, delete, and modify WADL components.</p>
+ </li>
+ <li><a href="#authentication">Authenticating the application</a>
+ <p>You can set the API key and OAuth 2.0.</p>
+ </li>
+ <li><a href="#test">Testing the APIs</a>
+ <p>You can test the APIs and check the result.</p>
+ </li>
+ <li><a href="#auto">Auto-generating code</a>
+ <p>You can use code snippets to send asynchronous requests.</p>
+ </li>
+</ul>
- <p>The REST Viewer in the Tizen SDK IDE provides the following
- functions for Web application development with using REST APIs:</p>
- <ul class="ul">
- <li>Visualize the WADL document
- <ul class="ul">
- <li>Show WADL components with structure</li>
- </ul>
- </li>
- <li>Management for WADL component
- <ul class="ul">
- <li>Create, delete, modify WADL components</li>
- </ul>
- </li>
- <li>Authentication
- <ul class="ul">
- <li>Setting for API Key and OAuth 2.0</li>
- </ul>
- </li>
- <li>Test and get the result
- <ul class="ul">
- <li>Ease to test and check the result</li>
- </ul>
- </li>
- <li>Auto-generating code
- <ul class="ul">
- <li>Support code snippet for sending asynchronous request</li>
- </ul>
- </li>
- </ul>
- <br></br>
- <h2 id="visualize" name="visualize">Visualize the WADL document</h2>
- <p>
- The things what shown on REST Viewer are the <a
- href="http://www.w3.org/Submission/wadl/">WADL(Web Application
- Description Language)</a> documents.
- </p>
- <p>
- This viewer loads them from specific location (Enable to set the
- location at Preferences > Tizen SDK > REST Viewer or [<img
- alt="Preferences icon" src="../images/rest_viewer_preferences.png" />] on toolbar)
- and classifies them as 4 typed WADL components (Application,
- Service, Path, API). It is possible to not only import/export WADL
- components but also handle them.
- </p>
- <p class="figure">Figure: REST Viewer</p>
- <p style="text-align: center;">
- <img alt="REST Viewer" src="../images/rest_viewer_main.png" />
- </p>
- <br></br>
- <h2 id="management" name="management">Management for WADL
- component</h2>
- <p>There are 4 typed WADL components from WADL component:</p>
- <ul class="ul">
- <li>[<img alt="Service icon" src="../images/rest_viewer_service.png" />]
- Service (Application): The application element forms the root of a
- WADL description.
- </li>
- <li>[<img alt="Resources icon" src="../images/rest_viewer_resources.png" />]
- Base URI (Resources): The resources element acts as a container
- for the resources provided by the application.
- </li>
- <li>[<img alt="Resource icon" src="../images/rest_viewer_resource.png" />]
- Path (Resource): A resource element describes a set of resources,
- each identified by URI that follows a common pattern.
- </li>
- <li>[<img alt="Method icon" src="../images/rest_viewer_method.png" />]
- API (Method): This element describes the input to and output form
- an HTTP protocol method that may be applied to a resource.
- </li>
- </ul>
+<h2 id="visualize" name="visualize">Displaying the WADL Document</h2>
+<p>The REST Viewer displays the <a href="http://www.w3.org/Submission/wadl/" target="_blank">WADL (Web Application Description Language)</a> documents.</p>
+<p>The viewer loads the documents from a specific location and classifies them as 4-typed WADL components. You can define the document location in the IDE menu by going to <strong>Preferences > Tizen SDK > REST Viewer</strong>, or by clicking the <img alt="Preferences icon" src="../images/rest_viewer_preferences.png" /> icon on the <strong>REST Viewer</strong> view toolbar.</p>
- <p>This REST Viewer provides way to make new WADL components. It
- also possible to import or export WADL file(s) - You can handle
- only the selected WADL component if you open the dialog to modify
- it. It means that it is impossible to modify its parent or children
- component(s).</p>
+<p class="figure">Figure: REST Viewer</p>
+<p align="center"><img alt="REST Viewer" src="../images/rest_viewer_main.png" /></p>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Constraint: Some attributes are required to
- make structure for tree viewer even if they are optional on WADL
- schema.</td>
- </tr>
- </tbody>
- </table>
- <ul class="ul">
- <li>[<img alt="New icon" src="../images/rest_viewer_new.png" />]New:
- Open dialog to add new WADL component(s).
- <br></br>
- <p class="figure">Figure: The dialog for WADL component</p>
- <p style="text-align: center;">
- <img alt="The dialog for WADL component"
- src="../images/rest_viewer_dialog.png" />
- </p>
- </li>
- <br></br>
- <li>The WADL document has ordered structure.(Service > Base
- URI > Path [> Path] > API)</li>
- <li>Application (Service)
- <ul class="ul">
- <li>Title (required): A short plain text description of the
- element being documented.</li>
- </ul>
- </li>
- <li>Base URI (Resources)
- <ul class="ul">
- <li>Base URI (required): This attribute that provides the
- base URI for each child resource identifier.</li>
- <li>Alias(optional)</li>
- </ul>
- </li>
- <li>Path (Resource)
- <ul class="ul">
- <li>Parent Path: It needs if resource has nested path
- structure.</li>
- <li>Path (required): This provides a relative URI template
- for the identifier of the resource.</li>
- <li>Content Type (default): Defines the media type for the
- query component of the resource URI.</li>
- </ul>
- </li>
- <li>API
- <ul class="ul">
- <li>Id (required): The identifier for the method.</li>
- <li>Method (default): Indicates the HTTP method used.</li>
- <li>Description(optional)</li>
- </ul>
- </li>
- <li>Common Parameter: Describes the input to the method as a
- collection of parameters.
- <ul class="ul">
- <li>Name: Parameter name</li>
- <li>Value</li>
- <li>Style: Indicates the parameter style.
- <ul class="ul">
- <li>Header: Specifies a HTTP header for use in the
- request.</li>
- <li>Query: Specifies a URI query parameter for method.</li>
- <li>File</li>
- </ul>
- </li>
- <li>Type: The type of the parameter as an XML qualified
- name.</li>
- <li>Required: Whether the parameter is required to be
- present or not.</li>
- </ul>
- </li>
- </ul>
- <br></br>
- <p>And it is also possible to import (export) from (to) WADL.</p>
- <ul class="ul">
- <li>[<img alt="Import Wadl icon" src="../images/rest_viewer_import_wadl.png" />]Import
- WADL: The REST Viewer imports WADL file and shows WADL models.
- <ul class="ul">
- <li>From local WADL file or url.</li>
- </ul>
- </li>
- <li>[<img alt="Export Wadl icon" src="../images/rest_viewer_export_wadl.png" />]Export
- WADL: This exports selected WADL model(s) on viewer as a .wadl
- file.
- </li>
- </ul>
- <br></br>
- <h2 id="authentication" name="authentication">Authentication</h2>
+<h2 id="management" name="management">Managing WADL Components</h2>
+<p>The WADL document can contain 4 types of WADL components:</p>
+<ul>
+ <li><img alt="Service icon" src="../images/rest_viewer_service.png" /> Service (Application): The application element forms the root of a WADL description.</li>
+ <li><img alt="Resources icon" src="../images/rest_viewer_resources.png" /> Base URI (Resources): The resources element acts as a container for the resources provided by the application.</li>
+ <li><img alt="Resource icon" src="../images/rest_viewer_resource.png" /> Path (Resource): The resource element describes a set of resources, each identified by a URI that follows a common pattern.</li>
+ <li><img alt="Method icon" src="../images/rest_viewer_method.png" /> API (Method): The method element describes the input to and output from an HTTP protocol method that can be applied to a resource.</li>
+</ul>
- <p>REST Viewer helps when you test the application with
- authentication. (Enable to set the location at Preferences > Tizen
- SDK > REST Viewer > Authentication)</p>
- <ul class="ul">
- <li>API Key
- <ul class="ul">
- <li>API key authentication with header or parameter.</li>
- </ul>
- </li>
- <li>OAuth 2.0
- <ul class="ul">
- <li>OAuth 2.0 authentication information for RESTful API.</li>
- </ul>
- </li>
- </ul>
- <p class="figure">Figure: Authentication</p>
- <p style="text-align: center;">
- <img alt="Authentication" src="../images/rest_viewer_authentication.png" />
- </p>
- <br></br>
- <h2 id="test" name="test">Test and get the result</h2>
+<p>With the REST Viewer, you can make new WADL components, and import and export WADL files. You can handle a selected WADL component only if you open a dialog to modify it. You cannot modify the selected component's parent or child components at the same time.</p>
- <p>You can test selected API on REST Viewer and get the result
- of it. There are three entry points to do it.</p>
- <ul class="ul">
- <li>[<img alt="Run icon" src="../images/rest_viewer_run.png" />]Run:
- This button on the toolbar. And it also shows running history.
- </li>
- <li>Run from context menu on selection</li>
- <li>Save and Run(on Figure: The dialog for WADL component)</li>
- </ul>
+<table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">Some attributes are required to make a structure for the tree viewer even if they are optional in the WADL schema.</td>
+ </tr>
+ </tbody>
+</table>
- <p>The api which works with variables needs specific values for test. Each profile has its own user variables(key and value), you can manage profiles and profile's user variables on Preferences page. You can use them with placeholder after user variables are set to test api.(e.g. ${email})</p>
- <p class="figure">Figure: User Variables</p>
- <p style="text-align: center;">
- <img alt="User Variables" src="../images/rest_viewer_user_variables.png" />
- </p>
- <br></br>
- <p>You can also select active profile in REST Viewer’s user variable toolbar
- menu as below. When you test APIs in REST Viewer, user variables of selected
- profile are used.</p>
- <p class="figure">Figure: Profile Selection</p>
- <p style="text-align: center;">
- <img alt="Profile Selection"
- src="../images/rest_viewer_select_profile.png" />
- </p>
- <br></br>
- <p>The user variables of active profile are shown when you set the values for api.</p>
- <p class="figure">Figure: User Variable Selection</p>
- <p style="text-align: center;">
- <img alt="User Variable Selection"
- src="../images/rest_viewer_select_user_variable.png" />
- </p>
- <br></br>
- <p>Then you can run it and check the response result on Console View after you set the values. And
- it is possible to save response structure.</p>
- <p class="figure">Figure: The response result on Console View</p>
- <p style="text-align: center;">
- <img alt="The response result on Console View"
- src="../images/rest_viewer_result.png" />
- </p>
- <br></br>
- <h2 id="auto" name="auto">Auto-generating code</h2>
- <p>The REST Viewer helps to send asynchronous request with REST
- APIs. There are two ways to generate code to do it.</p>
- <ul class="ul">
- <li>Content assist
- <ul class="ul">
- <li>You can activate content assist with prefix “rest.”.</li>
- </ul>
- </li>
- <li>Drag and drop
- <ul class="ul">
- <li>1. Select API model on REST Viewer, then drag it and
- drop on Web SDK HTML Editor.</li>
- <li>2. Select functions at bottom of dialog then you get the
- code.</li>
- </ul>
- </li>
- </ul>
- <p class="figure">Figure: Function Selection for REST API</p>
- <p style="text-align: center;">
- <img alt="Function Selection for REST API"
- src="../images/rest_viewer_drag_drop.png" />
- </p>
- <script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
- <script type="text/javascript" src="../scripts/showhide.js"></script>
+<p>To manage the WADL components, in the <strong>REST Viewer</strong> view toolbar, click:</p>
- </div>
- </div>
- </div>
+<ul>
+ <li><img alt="New" src="../images/rest_viewer_new.png" /> to add new WADL components.</li>
- <a class="top sms" href="#"><img src="../images/btn_top.gif"
- alt="Go to top" /></a>
+ <li><img alt="Import" src="../images/rest_viewer_import_wadl.png" /> to import a WADL file and show the WADL models from a local WADL file or URL.</li>
- <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>
+ <li><img alt="Export" src="../images/rest_viewer_export_wadl.png" /> to export the selected WADL models as a <span style="font-family: Courier New,Courier,monospace">.wadl</span> file.</li>
+</ul>
+
+<p>When you add a new WADL component, you must define its place in the WADL structure (Service > Base URI > Path [> Path] > API) in the <strong>New</strong> dialog.</p>
+
+ <p class="figure">Figure: Adding a WADL component</p>
+ <p align="center"><img alt="Adding a WADL component" src="../images/rest_viewer_dialog.png" /></p>
+
+<ul>
+ <li>Service
+ <p><strong>Title</strong> (required): Short plain text description of the element being documented.</p>
+ </li>
+ <li>Base URI
+ <p><strong>Base URI</strong> (required): Base URI for each child resource identifier.</p>
+ <p><strong>Alias</strong> (optional)</p>
+ </li>
+ <li>Path
+ <p><strong>Parent Path</strong>: Required, if the resource has a nested path structure.</p>
+ <p><strong>Path</strong> (required): Relative URI template for the resource identifier.</p>
+ <p><strong>Content Type</strong> (default): Media type for the query component of the resource URI.</p>
+ </li>
+ <li>API
+ <p><strong>Id</strong> (required): Method identifier.</p>
+ <p><strong>Method</strong> (default): Used HTTP method.</p>
+ <p><strong>Description</strong> (optional)</p>
+ </li>
+ <li>Common Parameters
+ <p>Describe the input to the method as a collection of parameters.</p>
+ <ul>
+ <li><strong>Name</strong>: Parameter name.</li>
+ <li><strong>Value</strong></li>
+ <li><strong>Style</strong>: Parameter style:
+ <ul>
+ <li><strong>Header</strong>: Specifies a HTTP header for use in the request.</li>
+ <li><strong>Query</strong>: Specifies a URI query parameter for the method.</li>
+ <li><strong>File</strong></li>
+ </ul>
+ </li>
+ <li><strong>Type</strong>: Parameter type as an XML-qualified name.</li>
+ <li><strong>Required</strong>: Whether the parameter is required to be
+ present.</li>
+ </ul>
+ </li>
+</ul>
+
+<h2 id="authentication" name="authentication">Authenticating the Application</h2>
+
+<p>The REST Viewer helps when you test the application with authentication. Enable the authentication in the IDE menu by going to <strong>Preferences > Tizen SDK > REST Viewer > Authentication</strong> and selecting <strong>Use authentication</strong>.</p>
+
+<p>In the same location, you can define the authentication details:</p>
+<ul>
+ <li>API Key authentication with a header or parameter.</li>
+ <li>OAuth 2.0 authentication information for a RESTful API.</li>
+</ul>
+<p class="figure">Figure: Authentication details</p>
+<p align="center"><img alt="Authentication details" src="../images/rest_viewer_authentication.png" /></p>
+
+
+<h2 id="test" name="test">Testing the APIs</h2>
+
+<p>You can test the selected API on the REST Viewer and view the results. To run a test, do one of the following:</p>
+<ul>
+ <li>Click the <img alt="Run icon" src="../images/rest_viewer_run.png" /> icon on the <strong>REST Viewer</strong> view toolbar. The view displays the running history.
+ </li>
+ <li>Right-click the selected API and run the test from the context menu.</li>
+ <li>Click <strong>Save and Run</strong> in the <strong>New</strong> or <strong>Modify</strong> dialog when adding or modifying components.</li>
+</ul>
+
+<p>The API that works with variables needs specific values for the test. Each profile has its own user variables (key and value). You can manage the profiles and profile's user variables in the <strong>Preferences</strong> window. After the user variables are set, you can use them with a placeholder to test the API (fow example, <span style="font-family: Courier New,Courier,monospace">${email}</span>).</p>
+<p class="figure">Figure: User variables</p>
+<p align="center"><img alt="User variables" src="../images/rest_viewer_user_variables.png" /></p>
+
+<p>You can select an active profile in the <strong>REST Viewer</strong> user variable toolbar menu. When you test the APIs in the REST Viewer, user variables of the selected profile are used.</p>
+<p class="figure">Figure: Selecting a profile</p>
+<p align="center"><img alt="Selecting a profile" src="../images/rest_viewer_select_profile.png" /></p>
+<p>The user variables of the active profile are shown when you set the values for an API.</p>
+<p class="figure">Figure: Selecting a user variable</p>
+<p align="center"><img alt="Selecting a user variable" src="../images/rest_viewer_select_user_variable.png" /></p>
+
+<p>After setting the variables and running the test, the result is displayed in the <strong>Console</strong> view. You can save the response structure.</p>
+<p class="figure">Figure: Test result</p>
+<p align="center"><img alt="Test result" src="../images/rest_viewer_result.png" /></p>
+
+
+<h2 id="auto" name="auto">Auto-generating Code</h2>
+<p>You can use the REST Viewer to send asynchronous requests with the REST APIs. To generate code to do this, do one of the following:</p>
+<ul>
+ <li>Use the content assist feature.
+ <p>You can activate the content assist with the prefix "rest.".</p>
+ </li>
+ <li>Drag and drop.
+ <ol>
+ <li>Select the API model in the REST Viewer, and drag and drop it to the Web SDK HTML Editor.</li>
+ <li>Select the functions at bottom of the dialog to get the code.</li>
+ </ol>
+ </li>
+</ul>
+<p class="figure">Figure: Selecting functions for the REST API</p>
+<p align="center"><img alt="Selecting functions for the REST API" src="../images/rest_viewer_drag_drop.png" /></p>
+
+<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+ <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br />For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
- <script type="text/javascript">
- var _gaq = _gaq || [];
- _gaq.push([ '_setAccount', 'UA-25976949-1' ]);
- _gaq.push([ '_trackPageview' ]);
- (function() {
- var ga = document.createElement('script');
- ga.type = 'text/javascript';
- ga.async = true;
- ga.src = ('https:' == document.location.protocol ? 'https://ssl'
- : 'http://www')
- + '.google-analytics.com/ga.js';
- var s = document.getElementsByTagName('script')[0];
- s.parentNode.insertBefore(ga, s);
- })();
- </script>
+<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>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p>
<img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/></p>
<h2 id="wid" name="wid">Widget ID</h2>
<p>To set a customized prefix for the widget ID, enter the value in the <strong>Prefix to the Widget ID</strong> field. The default value of this field is <strong>http://yourdomain/</strong>.</p>
- <p>The value is automatically used in all widget IDs when you create new widgets in the IDE. You can view the widget ID in the <span style="font-family: Courier New,Courier,monospace">config.xml file of the project.</span></p>
+ <p>The value is automatically used in all widget IDs when you create a new Web application in the IDE. You can view the widget ID in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file of the project.</p>
<h2 id="chrome" name="chrome">Chrome™ Browser Path</h2>
<p>In the <strong>Tizen SDK > Web</strong> side menu, go to <strong>Chrome</strong>.</p>
</ul>
<p class="figure">Figure: Live highlight</p>
- <p
style="text-align: center;"><img alt="Live highlight" src="../images/live_highlight.png" /></p>
+ <p
align="center"><img alt="Live highlight" src="../images/live_highlight.png" /></p>
<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../scripts/showhide.js"></script>
<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Web Tools</h1>
-<p>The Tizen SDK provides the following set of features and tools for mobile Web application development:</p>
+<p>The Tizen SDK provides the following set of features and tools for Web application development:</p>
<table class="note">
<tbody>
<ul>
<li><strong>Application generation management tools</strong>
<ul>
+ <li><a href="project_wizard_w.htm">Project Wizard</a> <p>This tool is used to create an application project.</p></li>
<li><a href="config_editor_w.htm">Configuration Editor</a> <p>This tool allows you to configure the application.</p></li>
</ul></li>
<li><strong>Editor tools</strong>
<ul>
+ <li><a href="rest_viewer_w.htm">REST Viewer</a> <p>This tool allows you to view and edit WADL documents.</p></li>
<li><a href="content_assist_w.htm">Content Assist</a> <p>This tool allows you to write quick and efficient code.</p></li>
<li><a href="html_editor_w.htm">HTML Editor</a> <p>This tool makes it easy to write or edit HTML.</p></li>
<li><a href="live_editing_w.htm">Live Editing</a> <p>This tool allows you to apply source changes to the running application immediately (without building, packaging, and relaunching).</p></li>
</ul></li>
- <li><strong>UI building tools</strong>
- <ul>
- <li><a href="uibuilder_w.htm">UI Builder</a> in <span style="color: red">mobile applications only</span> <p>This WYSIWYG (What You See Is What You Get) design environment tool is used to create user interfaces.</p></li>
- </ul></li>
<li><strong>Application running and testing tools</strong>
<ul>
- <li><a href="command_line_interface_w.htm">Command Line Interface</a>
in <span style="color: red">mobile applications only</span> <p>This tool set allows you to develop Tizen Web applications without the Tizen IDE.</p></li>
+ <li><a href="command_line_interface_w.htm">Command Line Interface</a> <p>This tool set allows you to develop Tizen Web applications without the Tizen IDE.</p></li>
<li><a href="web_simulator_w.htm">Web Simulator</a> <p>This tool allows you to run your Web applications to develop and debug them.</p></li>
- <li><a href="web_unit_test_tool_w.htm">Web Unit Test Tool</a>
in <span style="color: red">mobile applications only</span> <p>This tool provides a set of features for testing the source code.</p></li>
+ <li><a href="web_unit_test_tool_w.htm">Web Unit Test Tool</a> <p>This tool provides a set of features for testing the source code.</p></li>
</ul></li>
<li><strong>Analysis and debugging tools</strong>
<ul>
- <li><a href="
remote_inspector_w.htm">Remote Inspector</a> <p>This tool allows you to debug your Web applications.</p></li>
+ <li><a href="
web_inspector_w.htm">Web Inspector</a> <p>This tool allows you to debug your Web applications.</p></li>
- <li><a href="js_analyzer_w.htm">JavaScript Analyzer</a>
in <span style="color: red">mobile applications only</span> <p>This tool makes it easy to find problems in JavaScript code.</p></li>
+ <li><a href="js_analyzer_w.htm">JavaScript Analyzer</a> <p>This tool makes it easy to find problems in JavaScript code.</p></li>
- <li><strong><a href="js_log_console_w.htm">JavaScript Log Console view</a></strong> <p>Shows JavaScript logs for Web widgets.</p></li>
+ <li><a href="js_log_console_w.htm">JavaScript Log Console view</a> <p>Shows JavaScript logs for Web applications.</p></li>
</ul></li>
<li><strong>Tips for tool usage</strong>
+++ /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>UI Builder</title>
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="navigation">
- <div id="profile">
- <p><img alt="Mobile Web" src="../images/mw_icon.png"/></p>
- </div>
- <div id="toc_border"><div id="toc">
- <p class="toc-title">Content</p>
- <ul class="toc">
- <li><a href="#animator">Animator</a></li>
-
- <li><a href="#views">Supported Views and Editors</a></li>
- </ul>
- </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-
-<h1>UI Builder</h1>
-
-<p>The Tizen Web UI Builder is a graphical user interface builder tool that simplifies the creation of Tizen Web UIs by allowing you to arrange widgets using a drag-and-drop WYSIWYG (What You See Is What You Get) editor. The UI Builder supports a variety of <a href="#palette">UI widgets</a>, and <a href="#views">views and editors</a>.</p>
-
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">This tool is supported in mobile applications only.</td>
- </tr>
- </tbody>
- </table>
-
-<p>The UI Builder is not only a UI layout code generating tool, it also supports an easy-to-use programming model though the <a href="../../../org.tizen.gettingstarted/html/process/designing_app_ui_w.htm#project">UI Builder project</a>.</p>
-
-<p class="figure">Figure: UI Builder</p>
-<p style="text-align:center;"><img alt="UI Builder" src="../images/uibuilder.png" /></p>
-
-<h2 id="animator" name="animator">Animator</h2>
-
-<p>The Tizen Animator can apply CSS3 animations to Web applications created by the Tizen Web UI Builder. The Animator can operate seamlessly within a UI Builder project. To access it, simply select the <strong>Animator</strong> tab in the UI Builder editor <strong>Page Designer</strong> view.</p>
-
-<p>The Animator shares several views with the UI Builder, such as <a href="#outline">Outline</a>, <a href="#properties">Properties</a>, and <a href="#pages">Pages</a> views. The Animator supports a variety of predefined animations using CSS3 properties, such as opacity, translation, and rotation and also creates its own KeyFrame in the <a href="#timeline">Timeline</a> view or the <a href="#animator_editor">Animator Editor</a>.</p>
-
-<p class="figure">Figure: Animator</p>
-<p style="text-align:center;"><img alt="Animator" src="../images/animator.png" /></p>
-
-
-
-<h2 id="views" name="views">Supported Views and Editors</h2>
-
-<p>The UI Builder supports the following views and editors:</p>
- <h3 id="animator_editor" name="animator_editor">Animator Editor</h3>
-
-<p>The Animator Editor is a tab in the <strong>Page Designer</strong> view in the Tizen Web UI Builder. You can see widgets in the editor and create KeyFrames with play headers in the <a href="#timeline">Timeline</a> view.</p>
-
-<p>To access the editor, select the <strong>Animator</strong> tab in the <strong>Page Designer</strong> view. The design area changes to the editor area, which has no palette, and the <strong>Timeline</strong> view appears.</p>
-
-<p class="figure">Figure: Changing to the Animator view</p>
-<p style="text-align:center;"><img alt="Changing to the Animator view" src="../images/animator_tab.png" /></p>
-
-<p class="figure">Figure: Editor area in animator mode</p>
-<p style="text-align:center;"><img alt="Editor area in animator mode" src="../images/editor_area.png" /></p>
-
-<p>The Animator Editor consists of a toolbar (same as in the <a href="#page_designer">Page Designer</a> view) and the editor area, which lets you work with widgets and animations visually. </p>
-
-<p>After you create a KeyFrame in the <a href="#timeline">Timeline</a> view, you can see the path and path handler that operate the curve path between KeyFrames in the Animator Editor area. The following figure and table illustrate the elements in the editor area that are used to KeyFrame path.</p>
-
-<p class="figure">Figure: Animator Editor area</p>
-<p style="text-align:center;"><img alt="Animator Editor area" src="../images/animator_editor_area.png" /></p>
-
-<table border="1">
- <caption>
- Table: Animator editor elements
- </caption>
- <colgroup>
- <col />
- <col />
- </colgroup>
- <tbody>
- <tr>
- <th>Icon</th>
- <th>Element</th>
- <th>Description</th>
- </tr>
- <tr>
- <td><img alt="" src="../images/path.png"/></td>
- <td>Path</td>
- <td>Shows the widget moving path, if the animation changes the widget position.</td>
- </tr>
- <tr>
- <td><img alt="" src="../images/path_handler.png"/></td>
- <td>Animator handler</td>
- <td>Sets position-related properties.</td>
- </tr>
- <tr>
- <td><img alt="" src="../images/path_edge.png"/></td>
- <td>Edge</td>
- <td>Creates a new curve.</td>
- </tr>
- <tr>
- <td><img alt="" src="../images/path_controller.png"/></td>
- <td>Curve controller</td>
- <td>Controls the curve angle.</td>
- </tr>
- </tbody>
-</table>
-
- <h3 id="config_editor" name="config_editor">Configuration Editor</h3>
-
-<p>The configuration editor can be used to configure the settings of the UI Builder project. You can define which devices are available in the Web UI Builder and can be selected from the toolbar in the <a href="#page_designer">Page Designer</a> editor. Based on the detail information of the selected devices, the UI Builder creates a feature list to be used in the <a href="#nscreen">N-Screen view</a>.</p>
-
-<p>To open the configuration editor, double-click the <span style="font-family: Courier New,Courier,monospace;">index.config.xml</span> file in the <strong>Project Explorer</strong> view.</p>
-
- <p class="figure">Figure: Configuration editor</p>
- <p style="text-align:center;"><img alt="Configuration editor" src="../images/ui_builder_config.png" /></p>
-
-
-<p>The configuration editor consists of the following parts:</p>
-<ul class="ul"><li>Device List
-<p>Defines the devices available in the <strong>Page Designer</strong> editor. You can only use the selected devices in the <strong>Page Designer</strong> editor.</p></li>
-<li>Device Info
-<p>Includes detail information of the device selected in the Device List. For example, the device name, orientation, device-pixel-ratio, device-width, device-height, width, and height.</p></li>
-<li>Device Feature
-<p>Shows the feature list for the <strong>N-Screen</strong> view:</p>
-<ul class="ul">
-<li>Common
-<p>Contains all devices.</p></li>
-<li>Orientation
-<p>Contains either portrait or landscape.</p></li>
-<li>Pixel-ratio
-<p>Indicates the density of pixels per unit. </p></li>
-<li>Resolution
-<p>Indicates the combination of device-width and device-height. </p></li>
-</ul></li></ul>
-
- <h3 id="databinding" name="databinding" class="items-tit-h2">DataBinding View</h3>
-
-
-<p>Data binding is a way to bind data and UI at runtime, so when the data changes, the UI updates automatically.</p>
-
-<p>The <strong>DataBinding</strong> view helps you to manage the data source and model easily and show the binding information between data model and UI widgets. If the <strong>DataBinding</strong> view is not visible, open it from <strong>Window > Show View > Other > Tizen > DataBinding</strong>.</p>
-
-<p>The <strong>DataBinding</strong> view consists of a data source panel, data model panel, and binding information panel.</p>
-
-<p class="figure">Figure: DataBinding view</p>
-<p style="text-align:center;"><img alt="DataBinding view" src="../images/databinding_view.png" /></p>
-
-<p>To bind data between your HTML file in the <strong>Page Designer</strong> editor and the <strong>Data Model</strong> panel, you can:</p>
-
-<ul class="ul">
- <li>Select the data model item in the <strong>DataBinding</strong> view, and then drag and drop the item to the widget on the <strong>Page Designer</strong> editor.</li>
- <li>Use the <strong>Set Target</strong> dialog to select the HTML element and bindings.</li>
-</ul>
-
-<h4>Data Source Panel</h4>
-
-<p>The data source panel displays the hierarchical structure of all data sources.</p>
-
-<p class="figure">Figure: Data source panel</p>
-<p style="text-align:center;"><img alt="Data source panel" src="../images/data_source_panel.png" /></p>
-
-<p>The following tables describe the data source panel function buttons and available data source types.</p>
-
-<table border="1">
- <caption>
- Table: Data source Panel functions
- </caption>
- <colgroup>
- <col />
- <col />
- </colgroup>
- <tbody>
- <tr>
- <th>Button</th>
- <th>Name</th>
- <th>Description</th>
- </tr>
- <tr>
- <td><img alt="" src="../images/data_source_set.png" /></td>
- <td>Set data source</td>
- <td>Set the selected data source.</td>
- </tr>
- <tr>
- <td><img alt="" src="../images/data_source_create.png" /></td>
- <td>Create</td>
- <td>Create a new data source.</td>
- </tr>
- <tr>
- <td><img alt="" src="../images/data_source_delete.png" /></td>
- <td>Delete</td>
- <td>Remove the selected data source.</td>
- </tr>
- </tbody>
-</table>
-
-<table border="1">
- <caption>
- Table: Data source icons
- </caption>
- <colgroup>
- <col />
- <col />
- </colgroup>
- <tbody>
- <tr>
- <th>Type icon</th>
- <th>Description</th>
- </tr>
- <tr>
- <td><img alt="" src="../images/data_source_empty.png" /></td>
- <td>Empty data source</td>
- </tr>
- <tr>
- <td><img alt="" src="../images/data_source_static.png" /></td>
- <td>Static data source</td>
- </tr>
- <tr>
- <td><img alt="" src="../images/data_source_remote.png" /></td>
- <td>Remote call data source</td>
- </tr>
- <tr>
- <td><img alt="" src="../images/data_source_api.png" /></td>
- <td>System API call data source (Contact, Calendar, and Call History that use the Tizen Web Device API)</td>
- </tr>
- <tr>
- <td><img alt="" src="../images/data_source_file.png" /></td>
- <td>File data source</td>
- </tr>
- </tbody>
-</table>
-
-<p>After you create a new data source by clicking the <img alt="" src="../images/data_source_create.png" /> button, select the new source, and click the <img alt="" src="../images/data_source_set.png" /> button, the Set Source window is shown. In the window, you can set data source configurations and show structured data schema:</p>
-
-<ul class="ul">
- <li>In the data type section, select the data source type.</li>
- <li>In the settings section, view and set the properties for a specific data source.</li>
- <li>In the data model section, view the structured data schema, and create, remove, and move items within the schema.</li>
-</ul>
-
-<p class="figure">Figure: Set Source window</p>
-<p style="text-align:center;"><img alt="Set Source window" src="../images/data_source_dialog.png" /></p>
-
-<h5>Data Types</h5>
-
-<p>Each data type provides different options:</p>
-
-<ul class="ul">
-
-<li><strong>Static</strong>
-
-<p>You can easily make a JSON or XML type data with the static data type. You can fill the text box from the input directly, or open the file.</p>
-
-<p>The data model section displays a manageable data schema.</p>
-
-<p style="text-align:center;"><img alt="Static" src="../images/databinding_static.png" /></p>
-
-<table border="1">
- <caption>
- Table: Static data source icons
- </caption>
- <colgroup>
- <col />
- <col />
- </colgroup>
- <tbody>
- <tr>
- <th>Icon</th>
- <th>Description</th>
- </tr>
- <tr>
- <td><img alt="" src="../images/data_model_formatted.png" /></td>
- <td>Show the data in the formatted manner.</td>
- </tr>
- <tr>
- <td><img alt="" src="../images/data_model_compacted.png" /></td>
- <td>Show the data in the compacted manner.</td>
- </tr>
- <tr>
- <td><img alt="" src="../images/data_model_open.png" /></td>
- <td>Open a file (XML or JSON data file).
- <p>Open the file and fill in the textbox.</p></td>
- </tr>
- <tr>
- <td><img alt="" src="../images/data_model_reload.png" /></td>
- <td>Reload the opened file.</td>
- </tr>
- <tr>
- <td><img alt="" src="../images/data_model_clear.png" /></td>
- <td>Clear the textbox.</td>
- </tr>
- </tbody>
-</table>
-
-<table border="1">
- <caption>
- Table: Data model section icons
- </caption>
- <colgroup>
- <col />
- <col />
- </colgroup>
- <tbody>
- <tr>
- <th>Icon</th>
- <th>Description</th>
- </tr>
- <tr>
- <td><img alt="" src="../images/data_model_expand.png" /></td>
- <td>Expand all fields.</td>
- </tr>
- <tr>
- <td><img alt="" src="../images/data_model_collapse.png" /></td>
- <td>Collapse all fields.</td>
- </tr>
- <tr>
- <td><img alt="" src="../images/data_model_add.png" /></td>
- <td>Add a new field.</td>
- </tr>
- <tr>
- <td><img alt="" src="../images/data_model_remove.png" /></td>
- <td>Remove the selected field.</td>
- </tr>
- <tr>
- <td><img alt="" src="../images/data_model_remove_all.png" /></td>
- <td>Remove all fields.</td>
- </tr>
- <tr>
- <td><img alt="" src="../images/data_model_up.png" /></td>
- <td>Move the selected field upwards.</td>
- </tr>
- <tr>
- <td><img alt="" src="../images/data_model_down.png" /></td>
- <td>Move the selected field downwards.</td>
- </tr>
- </tbody>
-</table>
-
-<p>The same data model section icons are available for all data types.</p>
-
-</li>
-
-<li><strong>Remote Call</strong>
-
-<p>You can easily request data from a remote server using the remote call data type.</p>
-
-<p style="text-align:center;"><img alt="Remote call" src="../images/databinding_remote.png" /></p>
-
-<table border="1">
- <caption>
- Table: Properties of the remote data source
- </caption>
- <colgroup>
- <col />
- <col />
- </colgroup>
- <tbody>
- <tr>
- <th>Property</th>
- <th>Description</th>
- </tr>
- <tr>
- <td>URL</td>
- <td>URL to which the request is sent.</td>
- </tr>
- <tr>
- <td>METHOD</td>
- <td>Type of request, at the moment only GET-requests are supported.</td>
- </tr>
- <tr>
- <td>Proxy</td>
- <td>Protocol of the data.</td>
- </tr>
- <tr>
- <td>Source Type</td>
- <td>Type of data that is received from the server.</td>
- </tr>
- <tr>
- <td>Timeout</td>
- <td>Timeout (in milliseconds) for the request.</td>
- </tr>
- <tr>
- <td>Request Parameters</td>
- <td>Query string for requests.</td>
- </tr>
- </tbody>
-</table>
-
-</li>
-
-<li><strong>Contact</strong>
-
-<p>You can easily request data from Tizen address books using the contact data type:</p>
-
-<ul class="ul">
- <li>Get an array of contacts by selecting an appropriate value in the <strong>AddressBook Type</strong> drop-down menu.</li>
- <li>If you select "Select addressBook ID" in the <strong>AddressBook Type</strong> drop-down menu, input the ID value in the <strong>Addressbook ID</strong> field.</li>
-</ul>
-
-<p style="text-align:center;"><img alt="Contact" src="../images/databinding_contact.png" /></p>
-
-</li>
-
-<li><strong>Calendar</strong>
-
-<p>You can easily request data from the Tizen calendar using the calendar data type:</p>
-
-<ul class="ul">
- <li>Get an array of calendar items by selecting an appropriate value in the <strong>Calendar</strong> drop-down menu.</li>
- <li>Define the calendar type (EVENT or TASK), in the <strong>Calendar Type</strong> field.</li>
- <li>If you select "Type a Calendar ID" in the <strong>Calendar</strong> drop-down menu, input the ID value in the <strong>Calendar ID</strong> field.</li>
-</ul>
-
-<p style="text-align:center;"><img alt="Calendar" src="../images/databinding_calendar.png" /></p>
-
-</li>
-
-<li><strong>Call History</strong>
-
-<p>You can easily request data from the Tizen call history using the call history data type:</p>
-
-<ul class="ul">
- <li>Set the service type of the call in the <strong>Type</strong> drop-down menu.</li>
- <li>Indicate whether the call was dialed, received, missed, blocked, or rejected in the <strong>Direction</strong> drop-down menu.</li>
- <li>Define the sort order in the <strong>StartTime Order</strong> drop-down menu.</li>
-</ul>
-
-<p style="text-align:center;"><img alt="Call history" src="../images/databinding_call_history.png" /></p>
-
-</li>
-
-<li><strong>File System</strong>
-
-<p>You can easily request data from a file on runtime using the file data type:</p>
-
-<ul class="ul">
- <li>Select the file in the project using the <strong>Path</strong> field.</li>
- <li>Define the file content type (JSON or XML) in the <strong>Type</strong> drop-down menu.</li>
-</ul>
-
-<p style="text-align:center;"><img alt="File system" src="../images/databinding_file_system.png" /></p>
-
-</li>
-
-</ul>
-
-<h4>Data Model Panel</h4>
-
-<p>The data model panel displays the data schema. It is used to bind data to widgets on the <strong>Page Designer</strong> editor with drag and drop.</p>
-
-<p>To create the data model, first create a data source in the data source panel, and then drag the data source from the data source panel to the data model panel.</p>
-
-<p class="figure">Figure: Data model panel</p>
-<p style="text-align:center;"><img alt="Data model panel" src="../images/data_model_panel.png" /></p>
-
-<p>The following tables describe the data model panel function buttons and available data model types.</p>
-
-<table border="1">
- <caption>
- Table: Data model panel function buttons
- </caption>
- <colgroup>
- <col />
- <col />
- </colgroup>
- <tbody>
- <tr>
- <th>Button</th>
- <th>Name</th>
- <th>Description</th>
- </tr>
- <tr>
- <td><img alt="" src="../images/data_model_item.png" /></td>
- <td>Create Item</td>
- <td>Create a new data model item.</td>
- </tr>
- <tr>
- <td><img alt="" src="../images/data_model_create.png" /></td>
- <td>Create Model</td>
- <td>Create a new data model.</td>
- </tr>
- <tr>
- <td><img alt="" src="../images/data_model_delete.png" /></td>
- <td>Delete</td>
- <td>Remove the selected data model or selected data model item.</td>
- </tr>
- </tbody>
-</table>
-
-<table border="1">
- <caption>
- Table: Data model types
- </caption>
- <colgroup>
- <col />
- <col />
- </colgroup>
- <tbody>
- <tr>
- <th>Type icon</th>
- <th>Description</th>
- </tr>
- <tr>
- <td><img alt="" src="../images/data_source1.png" /></td>
- <td>There is no data source.</td>
- </tr>
- <tr>
- <td><img alt="" src="../images/data_source2.png" /></td>
- <td>There is a data source.</td>
- </tr>
- </tbody>
-</table>
-
-<h4>Binding Information Panel</h4>
-
-<p>When the binding is successful, the binding information panel is displayed:</p>
-
-<ul class="ul">
- <li>The <strong>Data</strong> column displays the data model item name.</li>
- <li>The <strong>Widget</strong> column displays the page ID and the binding widget ID.</li>
- <li>The <strong>Binding</strong> column displays the binding format.</li>
-</ul>
-
-<p class="figure">Figure: Binding information panel</p>
-<p style="text-align:center;"><img alt="Binding information panel" src="../images/binding_info_panel.png" /></p>
-
-<p>The following table describes the binding information panel function buttons.</p>
-
-<table border="1">
- <caption>
- Table: Binding information Panel function buttons
- </caption>
- <colgroup>
- <col />
- <col />
- </colgroup>
- <tbody>
- <tr>
- <th>Button</th>
- <th>Name</th>
- <th>Description</th>
- </tr>
- <tr>
- <td><img alt="" src="../images/binding_info_toggle.png" /></td>
- <td>Toggle</td>
- <td>Show or hide the binding format message on the tooltip of the widget in the <strong>Page Designer</strong> editor. The message appears when the binding is successful.</td>
- </tr>
- <tr>
- <td><img alt="" src="../images/binding_info_toggle_delete.png" /></td>
- <td>Delete</td>
- <td>Remove the selected binding information.</td>
- </tr>
- </tbody>
-</table>
-
-<p>If a widget is bound, it has the <img alt="" src="../images/binding_link.png" /> icon in the <strong>Page Designer</strong> editor. To see the binding format, move the cursor on the widget.</p>
-
-<p class="figure">Figure: Binding information in Page Designer</p>
-<p style="text-align:center;"><img alt="Binding information in Page Designer" src="../images/binding_info_designer.png" /></p>
-
-
- <h3 id="nscreen" name="nscreen" class="items-tit-h2">N-Screen Views</h3>
-
-
-<p>The <strong>N-Screen</strong> views define how to use content in multiple screens and allows you to change content in other screens easily.</p>
-
-<p>If the <strong>N-Screen</strong> views are not visible, open them from <strong>Window > Show View > Other > Tizen > NScreen</strong>.</p>
-
- <p class="figure">Figure: N-Screen views and devices</p>
- <p style="text-align:center;"><img alt="N-Screen views and devices" src="../images/nscreen_view_devices.png" /></p>
-
-<p>The N-Screen views consist of the <a href="#nscr">N-Screen view</a> and <a href="#device">Devices</a>.</p>
-
- <h4 id="nscr" name="nscr">N-Screen View</h4>
-
- <p>The N-Screen view consists of <a href="#css">CSS Layers</a> and <a href="#screen">screen features</a>.</p>
-
- <p class="figure">Figure: N-Screen view</p>
- <p style="text-align:center;"><img alt="N-Screen view" src="../images/nscreen_view.png" /></p>
-
-<h5 id="css" name="css">CSS Layers</h5>
-<p>The CSS layer section of the <strong>N-Screen</strong> view displays the CSS layers of the page currently selected in the <strong>Page Designer</strong> view. Enable and disable CSS files in CSS Layers.</p>
-
-<p>When you enable or disable a CSS file, you can see an added or deleted CSS style of the selected page in the <strong>Page Designer</strong>.</p>
-
- <p class="figure">Figure: CSS Layers</p>
- <p style="text-align:center;"><img alt="CSS Layers" src="../images/css_layers.png" /></p>
-
-<p>The following images show how to enable and disable a CSS file in CSS layers.</p>
-
-
- <p class="figure">Figure: Enable "index_page1_common.css" only and show its CSS style in Page Designer</p>
- <p style="text-align:center;"><img alt="Enable index_page1_common.css only and show its CSS style in Page Designer" src="../images/css_layer1.png" /></p>
-
- <p class="figure">Figure: Enable "index_page1_320X533.css" only and show its CSS style in Page Designer</p>
- <p style="text-align:center;"><img alt="Enable index_page1_320X533.css only and show its CSS style in Page Designer" src="../images/css_layer2.png" /></p>
-
- <p class="figure">Figure: Enable both and show all CSS styles in Page Designer</p>
- <p style="text-align:center;"><img alt="Enable both and show all CSS styles in Page Designer" src="../images/css_layer3.png" /></p>
-
-<h5 id="screen" name="screen">Screen Features</h5>
-
-<p>The screen features consist of the detail information of the selected devices in the configuration editor.</p>
-<p>You can select, enable, and disable predefined screen features.</p>
-
- <p class="figure">Figure: Screen features</p>
- <p style="text-align:center;"><img alt="Screen features" src="../images/nscreen_feature.png" /></p>
-
-<p>Screen features consist of the following features.</p>
-<table>
-<caption>Table: Screen features</caption>
-<tbody>
-<tr>
- <th>Name</th>
- <th>Description</th>
-</tr>
-<tr>
- <td>Common</td>
- <td>Consists of the default screen only, and cannot be disabled.
- <p>When a CSS style is added to the Common screen, it is applied to all devices.</p>
-</td>
-</tr>
-<tr>
- <td>Orientation</td>
- <td>Consists of portrait and landscape screens, and can be enabled or disabled.
-<p>When a CSS style is added to the portrait screen, it is applied to the portrait view of the screen only.</p>
-</td>
-</tr>
-<tr>
- <td>Pixel Ratio</td>
- <td>Consists of various screens, and can be enabled or disabled.
-<p>When a CSS style is added to any screen, it is applied only to the device with an equal screen pixel ratio (density of pixels per unit).</p>
-</td>
-</tr>
-<tr>
- <td>Resolution</td>
- <td>Consists of various screens, and can be enabled or disabled.
-<p>When a CSS style is added to any screen, it is applied only to the device with an equal screen size.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
-<p>To enable a screen:</p>
-<ol>
- <li>Right-click the desired screen size and select <strong>Enable</strong>.</li>
-<li>Define the content of the new style sheet (such as <span style="font-family: Courier New,Courier,monospace">index_page1_320x320.css</span>) in the <strong>Project Explorer</strong> view.</li>
-</ol>
-
- <p class="figure">Figure: Enabling a screen</p>
- <p style="text-align:center;"><img alt="Enabling a screen" src="../images/screen_enable.png" /></p>
-
- <h4 id="device" name="device">Devices</h4>
-
-<p>The <strong>Devices</strong> menu consists of a selected device list in the configuration editor.</p>
-<p>When you select a screen in the screen features, <strong>Devices</strong> shows a supported device list. If you selected a device in the <strong>Page Designer</strong> view, it is shown with a screen where all CSS styles are applied. The shown screen is the same size as a real device screen.</p>
-
- <p class="figure">Figure: Device page of the configuration editor</p>
- <p style="text-align:center;"><img alt="Device page of the configuration editor" src="../images/devices_page.png" /></p>
- <p class="figure">Figure: Devices</p>
- <p style="text-align:center;"><img alt="Devices" src="../images/devices.png" /></p>
-<table>
- <caption>Table: Devices information</caption>
- <tbody>
- <tr>
- <th>Name</th>
- <th>Description</th>
- </tr>
- <tr>
- <td>W 320x320 [320x320] x1.0 (1:1)</td>
- <td>Orientation: Portrait
-<p>Pixel ratio: 1.0</p>
-<p>Resolution: 320x320</p>
-</td>
- </tr>
- <tr>
- <td>W 312x496 [312x496] x1.0 (10:16)</td>
- <td>Orientation: Portrait
-<p>Pixel ratio: 1.0</p>
-<p>Resolution: 312X496</p>
-</td>
- </tr>
- <tr>
- <td>W 360x480 [360x480] x1.0 (3:4)</td>
- <td>Orientation: Portrait
-<p>Pixel ratio: 1.0</p>
-<p>Resolution: 360x480</p>
-</td>
- </tr>
- <tr>
- <td>M 480x800 [320x533] x1.5 (3:5)</td>
- <td>Orientation: Portrait
-<p>Pixel ratio: 1.5</p>
-<p>Resolution: 320x533</p>
-</td>
- </tr>
- <tr>
- <td>M 800x480 [533X320] x1.5 (5:3)</td>
- <td>Orientation: Landscape
-<p>Pixel ratio: 1.5</p>
-<p>Resolution: 533x360</p>
-</td>
- </tr>
- <tr>
- <td>M 540x960 [360x640] x1.5 (9:16)</td>
- <td>Orientation: Portrait
-<p>Pixel ratio: 1.5</p>
-<p>Resolution: 360x640</p>
-</td>
- </tr>
- <tr>
- <td>M 960X540 [640X360] x1.5 (16:9)</td>
- <td>Orientation: Landscape
-<p>Pixel ratio: 1.5</p>
-<p>Resolution: 640x360</p>
-</td>
- </tr>
- <tr>
- <td>M 720x1280 [360x640] x2.0 (9:16)</td>
- <td>Orientation: Portrait
-<p>Pixel ratio: 2.0</p>
-<p>Resolution: 360x640</p>
-</td>
- </tr>
- <tr>
- <td>M 1280X720 [640x360] x2.0 (16:9)</td>
- <td>Orientation: Landscape
-<p>Pixel ratio: 2.0</p>
-<p>Resolution: 640x360</p>
-</td>
- </tr>
- <tr>
- <td>M 1080x1920 [360x640] x2.0 (9:16)</td>
- <td>Orientation: Portrait
-<p>Pixel ratio: 2.0</p>
-<p>Resolution: 360x640</p>
-</td>
- </tr>
- <tr>
- <td>M 1920x1080 [640x360] x2.0 (16:9)</td>
- <td>Orientation: Landscape
-<p>Pixel ratio: 2.0</p>
-<p>Resolution: 640x360</p>
-</td>
- </tr>
- <tr>
- <td>M 800x1280 [800x1280] x1.0 (10:16)</td>
- <td>Orientation: Portrait
-<p>Pixel ratio: 1.0</p>
-<p>Resolution: 800x1280</p>
-</td>
- </tr>
- <tr>
- <td>M 1280x800 [1280x800] x1.0 (16:10)</td>
- <td>Orientation: Landscape
-<p>Pixel ratio: 1.0</p>
-<p>Resolution: 1280x800</p>
-</td>
- </tr>
- <tr>
- <td>M 1600x2560 [800x1280] x2.0 (10:16)</td>
- <td>Orientation: Portrait
-<p>Pixel ratio: 2.0</p>
-<p>Resolution: 800x1280</p>
-</td>
- </tr>
- <tr>
- <td>M 2560x1600 [1280x800] x2.0 (16:10))</td>
- <td>Orientation: Landscape
-<p>Pixel ratio: 2.0</p>
-<p>Resolution: 1280x800</p>
-</td>
- </tr>
- </tbody>
-</table>
-
-<p>To select a device:</p>
-<ol>
- <li>Click the <strong>Common</strong> screen in the <strong>N-Screen</strong> view.</li>
- <li>Open the <strong>Devices</strong> drop-down menu.</li>
- <li>Select the desired device.
- <p style="text-align:center;"><img alt="" src="../images/device_select.png" /></p></li>
- <li>Change the text in the <strong>Page Designer</strong> toolbar.
-<p>You can view the change in the <strong>Page Designer</strong> view.</p>
- <p style="text-align:center;"><img alt="" src="../images/device_change.png" /></p></li>
- </ol>
-
- <h3 id="outline" name="outline">Outline View</h3>
-
-<p>The <strong>Outline</strong> view displays the hierarchical structure of the page currently open in the <strong>Page Designer</strong> view. If the <strong>Outline</strong> view is not visible, open it from <strong>Window > Show View > Other > General > Outline</strong>.</p>
-
-<p class="figure">Figure: Outline view</p>
-<p style="text-align:center;"><img alt="Outline view" src="../images/outline_view.png" /></p>
-
-<p>You can manage widgets in the <strong>Outline</strong> view:</p>
-
-<ul class="ul">
- <li>Create a widget by dragging it from the <strong>Palette</strong> to the <strong>Outline</strong> view.</li>
- <li>Move a widget by dragging it to a new position.</li>
- <li>Change the widget ID in the context menu or by pressing the <strong>F2</strong> key.</li>
- <li>Manage selected widgets by cutting, copying, pasting, and deleting them.</li>
-</ul>
-
-
- <h3 id="pages" name="pages">Pages View</h3>
-
-
-<p>The <strong>Pages</strong> view displays a thumbnail image of all the pages in the currently selected project. If the <strong>Pages</strong> view is not visible, open it from <strong>Window > Show View > Other > Tizen > Pages</strong>.</p>
-
-<p class="figure">Figure: Pages view</p>
-<p style="text-align:center;"><img alt="Pages view" src="../images/pages.png" /></p>
-
-<p>You can re-order pages by dragging them to the selected position in the <strong>Pages</strong> view.</p>
-<p>You can create and delete page templates and pages in the <strong>Pages</strong> view. Most actions are provided through the context menu:</p>
-<ul class="ul">
-<li><p>To add a basic page:</p>
-<p>Go to <strong>Common > Add Basic Page</strong>.</p></li>
-<li>To add a new page through a page template:
-<ol>
-<li>Right-click the view and select <strong>New Page</strong>.</li>
-<li>Select a group.</li>
-<li>Select a page template.
-<p>5 page templates are provided by default.</p>
-<p style="text-align:center;"><img alt="Pages view" src="../images/pages_template.png" /></p></li>
-<li>Insert a page ID.</li>
-<li>Click <strong>Finish</strong>.</li>
-</ol></li>
-
-<li>To delete a selected page:
-<p>Right-click the page and select <strong>Delete</strong>.</p></li>
-
-<li>To create a new page template:
-<ol>
-<li>Right-click the view and select <strong>Create Template</strong>.</li>
-<li>Select a group.</li>
-<li>Insert a page template name.</li>
-<li>Click <strong>Finish</strong>.</li>
-</ol></li>
-
-<li>To import a page template:
-<ol>
-<li>Right-click the view and select <strong>Import Template</strong>.</li>
-<li>Select a page template.</li>
-<li>Select a group.</li>
-<li>Insert a page template name.</li>
-<li>Click <strong>Finish</strong>.</li>
-</ol></li>
-
-<li>To export a page template:
-<ol>
-<li>Right-click the page and select <strong>Export Template</strong>.</li>
-<li>Select a group.</li>
-<li>Select a page template.</li>
-<li>Select the export location.</li>
-<li>Insert the exported template name.</li>
-</ol>
-</li></ul>
-
-
- <h3 id="page_designer" name="page_designer">Page Designer Editor</h3>
-
-
-<p>The <strong>Page Designer</strong> editor is a WYSIWYG editor for the UI Builder project.</p>
-
-<p class="figure">Figure: Page Designer</p>
-<p style="text-align:center;"><img alt="Page Designer" src="../images/page_designer.png" /></p>
-
-<p>The <strong>Page Designer</strong> editor consists of the following parts:</p>
-
-<ul class="ul"><li><a href="#palette">Palette</a>
-
-<p>The palette contains all the TAU widgets and some useful HTML widgets, which you can select and add to the design area.</p></li>
-
-<li>Toolbar
-
-<p>The toolbar supports the following functions:</p>
-<ul class="ul">
-
-<li>Select the page you want to edit using the page combo.
-<table>
-<tbody>
-<tr>
-<th>Page button</th>
-<th>Description</th>
-</tr>
-<tr>
-<td><img alt="" src="../images/designer_previous.png" /></td>
-<td>Move to the previous page.</td>
-</tr>
-<tr>
-<td><img alt="" src="../images/designer_next.png" /></td>
-<td>Move to the next page.</td>
-</tr>
-</tbody>
-</table></li>
-
-
-<li>Select the resolution of the design area using the <img alt="" src="../images/designer_resolution.png" /> drop-down menu.</li>
-<li>Zoom within the design area.
-<table>
-<tbody>
-<tr>
-<th>Zoom button</th>
-<th>Description</th>
-</tr>
-<tr>
-<td><img alt="" src="../images/designer_zoomout.png" /></td>
-<td>Zoom out.</td>
-</tr>
-<tr>
-<td><img alt="" src="../images/designer_zoomin.png" /></td>
-<td>Zoom in.</td>
-</tr>
-<tr>
-<td><img alt="" src="../images/designer_max.png" /></td>
-<td>Maximize the design area on the screen.</td>
-</tr>
-<tr>
-<td><img alt="" src="../images/designer_areasize.png" /></td>
-<td>Change the design area size to a predefined percentage value.</td>
-</tr>
-</tbody>
-</table></li>
-</ul>
-</li>
-<li><p>Design area</p>
-<p>You can work with widgets visually so that you can see what your application looks like as you build it.</p></li>
-</ul>
-
-<h4 id="palette" name="palette">Palette</h4>
-
-<p>The Palette contains all the TAU widgets and some useful HTML widgets. You can select and add a widget to your application screen by dragging it from the palette to the design area.</p>
-
-<p>When you hover on a widget, a description of the widget is displayed.</p>
-
-<h5>Supported Widgets</h5>
-<p>The following table defines the TAU and HTML widget support in the UI Builder.</p>
-
-
-<table style="width: 100%" border="1">
- <caption>Table: Components supported by the UI Builder</caption>
- <tbody>
- <tr>
- <th style="text-align:center;margin-left:auto;margin-right:auto;">
- Group</th>
-
-
- <th style="text-align:center;margin-left:auto;margin-right:auto;">
- Component</th>
-
- <th style="text-align:center;margin-left:auto;margin-right:auto;">
- Description</th>
- <th style="text-align:center;margin-left:auto;margin-right:auto;">
- Support</th>
- </tr>
-
-<tr>
-<td rowspan="2">Buttons</td>
-<td>Controlgroup</td>
-<td>Used to group a set of buttons.</td>
-<td rowspan="2">Yes</td>
-</tr>
-<tr>
-<td>Button</td>
-<td>Shows a control that you can use to generate an action event when pressed and released.</td>
-
-</tr>
-
-<tr>
-<td rowspan="9">Toolbars</td>
-<td>Footer</td>
-<td>Sets the default bar at the bottom of the page.</td>
-<td rowspan="5">Yes</td>
-
-</tr>
-<tr>
-<td>Header</td>
-<td>Sets the default bar at the top of the page.</td>
-
-</tr>
-<tr>
-<td>Search Filter Bar</td>
-<td>Used to search for page content. This widget can be placed in the header.</td>
-
-</tr>
-<tr>
-<td>Tabbar</td>
-<td>Supports the grouped button style in the header.</td>
-
-</tr>
-<tr>
-<td>Tabbar Item</td>
-<td>Used only in the tabbar widget.</td>
-
-</tr>
-<tr>
-<td>Image</td>
-<td>Standard HTML widget.</td>
-<td>Not yet</td>
-
-</tr>
-
-<tr>
-<td>Button</td>
-<td>Shows a control that you can use to generate an action event when pressed and released.</td>
-<td rowspan="3">Yes</td>
-
-</tr>
-<tr>
-<td>Header Button</td>
-<td>Used only in the header widget.</td>
-
-</tr>
-<tr>
-<td>Multiline Text</td>
-<td>Used in the header widget.</td>
-
-</tr>
-<tr>
-<td rowspan="10">Content</td>
-<td>Audio</td>
-<td>Shows a player control that you can use to view and handle multimedia content.</td>
-<td rowspan="3">Not yet</td>
-</tr>
-<tr>
-<td>Gallery</td>
-<td>Shows images in a gallery.</td>
-
-</tr>
-<tr>
-<td>Map</td>
-<td>Shows a map on the screen.</td>
-
-</tr>
-<tr>
-<td>Progress Bar</td>
-<td>Shows a control that indicates the progress percentage of an on-going operation.</td>
-<td>Yes</td>
-</tr>
-<tr>
-<td>Progress</td>
-<td>Shows that an operation is in progress.</td>
-<td>Not yet</td>
-</tr>
-<tr>
-<td>Token Text Area</td>
-<td>Changes a text item to a button.</td>
-<td>Yes</td>
-</tr>
-<tr>
-<td>Video</td>
-<td>Shows a player control that you can use to view and handle multimedia content.</td>
-<td rowspan="2">Not yet</td>
-</tr>
-<tr>
-<td>Virtual Grid</td>
-<td>Used to display a list of unlimited data elements on the screen for better performance.
-<p>This widget displays the data in the grid format by reusing the existing grid control space.</p>
-</td>
-</tr>
-<tr>
-<td>Collapsible set</td>
-<td>Used to create a set of collapsibles.</td>
-<td rowspan="2">Not yet</td>
-</tr>
-<tr>
-<td>Collapsible</td>
-<td>Used to create a collapsible block of content.</td>
-
-</tr>
-<tr>
-<td rowspan="16">List</td>
-<td>Color Bar</td>
-<td>Used only in the list item widget.</td>
-<td>Not yet</td>
-
-</tr>
-<tr>
-<td>List</td>
-<td>Used to display, for example, navigation data, results, and data entries.</td>
-<td rowspan="6">Yes</td>
-
-</tr>
-<tr>
-<td>List Divider</td>
-<td>Used as a list separator for grouping lists. This widget can be used only in the list widget.</td>
-
-</tr>
-<tr>
-<td>List Item</td>
-<td>Used only in the list widget.</td>
-
-</tr>
-<tr>
-<td>List Action Item</td>
-<td>Used only in the list widget.</td>
-
-</tr>
-<tr>
-<td>Button</td>
-<td>Shows a control that you can use to generate an action event when pressed and released.</td>
-
-</tr>
-<tr>
-<td>Check Box Item</td>
-<td>Used only in the check boxes and list item widget.</td>
-
-</tr>
-<tr>
-<td>Flip Toggle Switch</td>
-<td>Shows a 2-state switch on the list item widget.</td>
-<td>Not yet</td>
-
-</tr>
-<tr>
-<td>Maintext Icon1</td>
-<td>Used only in the list item widget.</td>
-<td rowspan="8">Yes</td>
-
-</tr>
-<tr>
-<td>Maintext Icon2</td>
-<td>Used in the list item widget.</td>
-
-</tr>
-<tr>
-<td>Subtext Icon</td>
-<td>Used only in the list item subtext1 widget.</td>
-
-</tr>
-<tr>
-<td>Subtext1</td>
-<td>Used in the list item widget.</td>
-
-</tr>
-<tr>
-<td>Subtext2</td>
-<td>Used in the multiline list item.</td>
-
-</tr>
-<tr>
-<td>Thumbnail</td>
-<td>Used in the list item widget.</td>
-
-</tr>
-<tr>
-<td>Progress Bar</td>
-<td>Shows a control that indicates the progress percentage of an on-going operation.</td>
-
-</tr>
-<tr>
-<td>Radio Button Item</td>
-<td>Used only in the radio button and list item widgets.</td>
-
-</tr>
-<tr>
-<td rowspan="2">Dynamic List</td>
-
-<td>Extendable List</td>
-<td>Used to display a list of unlimited data elements on the screen for better performance.
-<p>The list is extended if you click the button at the bottom of the list to load more data elements.</p>
-</td>
-<td rowspan="2">Not yet</td>
-</tr>
-
-<tr>
-
-<td>Virtual List</td>
-<td>Used to display a list of unlimited data elements on the screen for better performance.
-<p>This widget provides easy access to databases to retrieve and display data.</p>
-</td>
-</tr>
-
-<tr>
-<td rowspan="16">Form Elements</td>
-<td>Form Control</td>
-<td rowspan="6">Standard HTML widget.</td>
-<td rowspan="8">Yes</td>
-</tr>
-<tr>
-<td>Label</td>
-
-</tr>
-<tr>
-<td>Legend</td>
-
-</tr>
-<tr>
-<td>Submit Button</td>
-
-</tr>
-<tr>
-<td>Text Area</td>
-
-</tr>
-<tr>
-<td>Text Input</td>
-
-</tr>
-<tr>
-<td>Check Boxes</td>
-<td>Shows a list of options where 1 or more can be selected.</td>
-
-</tr>
-<tr>
-<td>Check Box Item</td>
-<td>Used only in the check boxes and list item widget.</td>
-
-</tr>
-<tr>
-<td>Date Time Picker</td>
-<td>Enables users to select a date and a time.</td>
-<td>Not yet</td>
-</tr>
-<tr>
-<td>Radio Buttons</td>
-<td>Used to display a list of options of which only 1 can be selected.</td>
-<td rowspan="3">Yes</td>
-</tr>
-<tr>
-<td>Radio Button Item</td>
-<td>Used only in the radio button and list item widget.</td>
-
-</tr>
-<tr>
-<td>Slider</td>
-<td>Used to change values by dragging a handle.</td>
-
-</tr>
-<tr>
-<td>Select Menu</td>
-<td>Used to select a value in the menu.</td>
-<td rowspan="3">Not yet</td>
-
-</tr>
-<tr>
-<td>Select Menu Item Group</td>
-<td>Used only in the select menu widget.</td>
-
-</tr>
-<tr>
-<td>Select Menu Item</td>
-<td>Used only in the select menu and select menu item group widget.</td>
-
-</tr>
-<tr>
-<td>Flip Toggle Switch</td>
-<td>Shows a 2-state switch on the screen.</td>
-<td>Yes</td>
-
-</tr>
-<tr>
-<td rowspan="11">HTML</td>
-<td>Canvas</td>
-<td rowspan="11">Standard HTML widget.</td>
-<td rowspan="11">Yes</td>
-
-</tr>
-<tr>
-<td>Div Control</td>
-
-</tr>
-<tr>
-<td>Form Control</td>
-
-</tr>
-<tr>
-<td>Heading</td>
-
-</tr>
-<tr>
-<td>Image</td>
-
-</tr>
-<tr>
-<td>Label</td>
-
-</tr>
-<tr>
-<td>Link</td>
-
-</tr>
-<tr>
-<td>Submit Button</td>
-
-</tr>
-<tr>
-<td>Text</td>
-
-</tr>
-<tr>
-<td>Text Area</td>
-
-</tr>
-<tr>
-<td>Text Input</td>
-
-</tr>
-</tbody>
-</table>
-
-<h5>Snippets</h5>
-
-<p>To use snippets:</p>
-
-<ul class="ul">
-
-<li>To create a snippet for a widget in the <strong>Page Designer</strong> view:
- <ol>
- <li>Right-click a widget and select <strong>Create Snippet</strong>.</li>
- <li>Select an image file.</li>
- <li>Insert a snippet name.</li>
- <li>Click <strong>Finish</strong>.</li>
- </ol>
-</li>
-
-<li>To rename a snippet in the Snippet palette:
- <ol>
- <li>Click the Snippet palette.</li>
- <li>Right-click a snippet and select <strong>Rename Snippet</strong>. </li>
- </ol>
-</li>
-
-<li>To import a snippet into the Snippet palette:
- <ol>
- <li>Click the Snippet palette.</li>
- <li>Right-click and select <strong>Import Snippet</strong>.</li>
- <li>Select the import location.</li>
- <li>Insert a snippet name.</li>
- <li>Click <strong>Finish</strong>.</li>
- </ol>
-</li>
-
-<li>To export a snippet from the Snippet palette:
- <ol>
- <li>Click the Snippet palette.</li>
- <li>Right-click and select <strong>Export Snippet</strong>.</li>
- <li>Select a snippet.</li>
- <li>Select the export location.</li>
- <li>Insert a snippet name.</li>
- <li>Click <strong>Finish</strong>.</li>
- </ol>
-</li>
-
-<li>To delete a snippet in the Snippet palette:
- <ol>
- <li>Click the Snippet palette.</li>
- <li>Right-click a snippet and select <strong>Delete Snippet</strong>.</li>
- </ol>
-</li>
-
-</ul>
-
- <h3 id="properties" name="properties" class="items-tit-h2">Properties View</h3>
-
-
-<p>The <strong>Properties</strong> view displays the properties of the widget selected in the <strong>Page Designer</strong> view. If the <strong>Properties</strong> view is not visible, open it from <strong>Window > Show View > Other > General > Properties</strong>.</p>
-<p>The <strong>Properties</strong> helps you to edit widget and CSS properties, and events.</p>
-
- <p class="figure">Figure: Properties view</p>
- <p style="text-align:center;"><img alt="Properties view" src="../images/properties.png" /></p>
-
-<p>The <strong>Properties View</strong> consists of <strong>Attributes</strong>, <strong>Style</strong>, and <strong>Event</strong> tabs:</p>
-
-<ul class="ul">
- <li><strong>Attributes</strong>
- <p>In the <strong>Attributes</strong> tab, you can edit widget attributes. Attributes are categorized into Common and Widget specification. In the Common category, you can edit common widget properties, and in the Widget specification category, you can edit widget-specific properties. The Widget specification category can be divided into categories in accordance with the widget attributes.</p>
- <ul class="ul">
- <li>Common
- <p>The Common category only includes the ID attribute, which is the default widget identifier in the HTML and JavaScript.</p></li>
- <li>Widget specification
- <p style="text-align:center;"><img alt="" src="../images/properties_specification.png" /></p></li>
- </ul>
- </li>
-
- <li><strong>Style</strong>
- <p>In the <strong>Style</strong> tab, you can edit the CSS properties of the selected widget. These properties include, for example, position, size, text, background, and border. If you select a widget in the <strong>Page Designer</strong> view, the <strong>Style</strong> tab shows an ID selector of a selected widget. The ID selector is the default CSS selector. You can create or remove the CSS selector of a selected widget.</p>
- <ul class="ul">
- <li>You can edit the CSS properties, such as the left, top, width, and height styles. The <strong>Page Designer</strong> view reflects the applied style.
- <p style="text-align:center;"><img alt="Properties view" src="../images/properties_style.png" /></p></li>
-
- <li>CSS selector
- <p>To create a CSS selector, click the <img alt="" src="../images/properties_add.png" /> button, and the CSS Selector dialog opens. The dialog shows the live DOM hierarchy and class of the selected widget, and you can select the selector you want.</p>
- <p style="text-align:center;"><img alt="Properties view" src="../images/properties_add_selector.png" /></p>
- <p>To remove a CSS selector, click the <img alt="" src="../images/properties_delete.png" /> button. If you remove the default CSS selector, the CSS selector itself is not removed, only the CSS style.</p>
- <p style="text-align:center;"><img alt="Properties view" src="../images/properties_remove.png" /></p>
- </li>
- </ul>
- </li>
-
- <li><strong>Action</strong>
- <p>In the <strong>Action</strong> tab, you can create custom actions and create and bind predefined widget actions with JavaScript functions. Under the applicable event section (such as <strong>Tap</strong>), select the action you want from the <strong>Action</strong> drop-down menu, and define the additional action details.</p>
-
- <p style="text-align:center;"><img alt="Properties view" src="../images/properties_go_to.png" /></p>
-
- <p>The following actions are available:</p>
-
- <ul class="ul">
- <li><strong>Run Java Script Function</strong>: Create an event handler and bind it with a JavaScript function defined in the <strong>Function</strong> field. If you click the <img alt="" src="../images/properties_forward.png" /> button next to the <strong>Function</strong> field, the JavaScript editor opens. When the JavaScript function is focused, you can start writing code.</li>
- <li><strong>Go to Page</strong>: Select the page to move to in the <strong>Page</strong> field (<strong>Next Page</strong>, <strong>Previous Page</strong>, or any of the pages that are already created). You can also select a transition effect.
-</li>
- <li><strong>Open URL</strong>: When an event occurs, move to the defined URL.</li>
- <li><strong>Start Animation Group</strong>: When an event occurs, start the selected animation group.</li>
- <li><strong>Pause Animation Group</strong>: When an event occurs, pause the selected animation group.</li>
- <li><strong>Go to Time in Animation Group</strong>: When an event occurs, move the selected animation group to the animation time defined in the <strong>Time</strong> field.</li>
-</ul> </li></ul>
-
-
- <h3 id="resources" name="resources">Resources View</h3>
-
-<p>The <strong>Resources</strong> view displays the resources in the selected project. If the <strong>Resources</strong> view is not visible, open it from <strong>Window > Show View > Other > Tizen > Resources</strong>.</p>
-
-<p class="figure">Figure: Resources view</p>
-<p style="text-align:center;"><img alt="Resources view" src="../images/resources_view.png" /></p>
-
-<p>The <strong>Resources</strong> view provides the following features:</p>
-
-<ul class="ul">
-<li>Resource management
-<p>You can copy, paste, delete, and rename resources.</p></li>
-<li>Resource navigation
-<p>You can move files to child and parent folders.</p></li>
-<li>Resource filter
-<p>You can filter the view to show resources of a particular name or extension.</p></li>
-<li>Resource import
-<p>You can import files or folders.</p></li>
-<li>Easy editing
-<p>You can edit the resource property of the widgets using drag and drop.</p></li>
-</ul>
-
-
- <h3 id="timeline" name="timeline">Timeline View</h3>
-
-
-<p>The <strong>Timeline</strong> view is part of the <a href="#animator">Animator</a> feature. You can add, delete, and edit animations about HTML widgets on the Animator Editor. In addition, you can preview the animations while making them. In the <strong>Timeline</strong> view, you can create KeyFrames for the animations. If the <strong>Timeline</strong> view is not visible, open it from <strong>Window > Show View > Other > Tizen > Timeline</strong>.</p>
-
-<p>The <strong>Timeline</strong> view consists of a toolbar, outline, and timeline components.</p>
-
- <p class="figure">Figure: Timeline view</p>
- <p style="text-align:center;"><img alt="Timeline view" src="../images/animator_timeline.png" /></p>
-
-
-
-<h4>Toolbar Component</h4>
-
-<p>You can use the toolbar to add, edit, and preview animations, and use filter-related tools.</p>
-
- <p class="figure">Figure: Timeline toolbar</p>
- <p style="text-align:center;"><img alt="Timeline toolbar" src="../images/animator_timeline_toolbar.png" /></p>
-
- <table border="1">
- <caption>
- Table: Toolbar functions
- </caption>
- <colgroup>
- <col />
- <col />
- </colgroup>
- <tbody>
- <tr>
- <th>Function</th>
- <th>Name</th>
- <th>Description</th>
- </tr>
- <tr>
- <td><img alt="" src="../images/animator_toolbar_backward_normal.png"/></td>
- <td>Backward</td>
- <td>Move time back towards the beginning of the animation group.</td>
- </tr>
- <tr>
- <td><img alt="" src="../images/animator_toolbar_play_normal.png"/></td>
- <td>Play</td>
- <td>Play the animation group.</td>
- </tr>
- <tr>
- <td><img alt="" src="../images/animator_toolbar_forward_normal.png"/></td>
- <td>Forward</td>
- <td>Move time forward towards the end of the animation group.</td>
- </tr>
- <tr>
- <td><img alt="" src="../images/animator_toolbar_repeat_normal.png"/></td>
- <td>Repeat</td>
- <td>Repeat the animation group.</td>
- </tr>
- <tr>
- <td><img alt="" src="../images/animator_timeline_timeTextBox.png"/></td>
- <td>Time Edit Box</td>
- <td>Show the current time. You can change the time.</td>
- </tr>
- <tr>
- <td><img alt="" src="../images/animator_toolbar_ease_inout.png"/></td>
- <td>Ease</td>
- <td>Adjust the playback speed of the animation.</td>
- </tr>
- <tr>
- <td><img alt="" src="../images/animator_toolbar_dropdown_predefined_keyframe.png"/></td>
- <td>Predefined KeyFrame</td>
- <td>Add a widget to predefined animations.</td>
- </tr>
- <tr>
- <td><img alt="" src="../images/animator_toolbar_filter_normal.png"/></td>
- <td>Filter</td>
- <td>Show only animated widgets.</td>
- </tr>
- <tr>
- <td><img alt="" src="../images/animator_timeline_zooml.png"/></td>
- <td>Zoom In/Out</td>
- <td>Zoom in and out in the timeline ruler.</td>
- </tr>
- </tbody>
- </table>
-
-<h4>Outline Component</h4>
-
-<p>You can use the outline to add and edit animation groups and widget HTML and CSS selector lists.</p>
-
- <p class="figure">Figure: Timeline outline</p>
- <p style="text-align:center;"><img alt="Timeline outline" src="../images/animator_timeline_outline.png" /></p>
-
-<p>The following tables describe the outline functions for animation groups and HTML and CSS selector lists.</p>
- <table border="1">
- <caption>
- Table: Timeline animation group functions
- </caption>
- <colgroup>
- <col />
- <col />
- </colgroup>
- <tbody>
- <tr>
- <th>Function</th>
- <th>Name</th>
- <th>Description</th>
- </tr>
- <tr>
- <td><img alt="" src="../images/animator_GroupName1.png"/></td>
- <td>Animation Group Name</td>
- <td>Name of the current animation group.</td>
- </tr>
- <tr>
- <td><img alt="" src="../images/animator_timeline_animationGroupMenu.png"/></td>
- <td>Animation group drop-down menu</td>
- <td>Add, delete, and edit animation groups.</td>
- </tr>
- </tbody>
- </table>
-
- <table border="1">
- <caption>
- Table: Timeline HTML and CSS list functions
- </caption>
- <colgroup>
- <col />
- <col />
- </colgroup>
- <tbody>
- <tr>
- <th>Function</th>
- <th>Name</th>
- <th>Description</th>
- </tr>
- <tr>
- <td><img alt="" src="../images/animator_timeline_WidgetList.png"/></td>
- <td>HTML Widget and CSS Selector List</td>
- <td>Shows a list of widgets and selectors on the <strong>Animator Editor</strong> view.</td>
- </tr>
- <tr>
- <td><img alt="" src="../images/animator_outline_lock_off.png"/></td>
- <td>Un/Lock</td>
- <td>Prevent or allow the editing of widgets.</td>
- </tr>
- <tr>
- <td><img alt="" src="../images/animator_outline_view_off.png"/></td>
- <td>In/Visible</td>
- <td>Hide or show the widget on the <strong>Animator Editor</strong> view.</td>
- </tr>
- <tr>
- <td><img alt="" src="../images/animator_outline_add_frame_normal.png"/></td>
- <td>Add KeyFrame</td>
- <td>Add the widget to the KeyFrame.</td>
- </tr>
- </tbody>
- </table>
-
-
-<h4>Timeline Component</h4>
-
-
-<p>You can use the timeline to edit KeyFrames and KeyFrame units.</p>
-
- <p class="figure">Figure: Timeline</p>
- <p style="text-align:center;"><img alt="Timeline" src="../images/animator_timeline_timeline.png" /></p>
-
- <table border="1">
- <caption>
- Table: Timeline KeyFrame and unit functions
- </caption>
- <colgroup>
- <col />
- <col />
- </colgroup>
- <tbody>
- <tr>
- <th>Function</th>
- <th>Name</th>
- <th>Description</th>
- </tr>
- <tr>
- <td><img alt="" src="../images/animator_timeline_ruler.png"/></td>
- <td>Time ruler</td>
- <td>Shows the time in microseconds.</td>
- </tr>
- <tr>
- <td><img alt="" src="../images/animator_timeline_timeBar.png"/></td>
- <td>Time bar</td>
- <td>Shows the current time.</td>
- </tr>
- <tr>
- <td><img alt="" src="../images/animator_timeline_animationState.png"/></td>
- <td>Animation state</td>
- <td>State of the HTML widget animation, shows the play, start, or end time.</td>
- </tr>
- <tr>
- <td><img alt="" src="../images/animator_timeline_keyframe.png"/></td>
- <td>KeyFrame</td>
- <td>Minimum unit for animation.</td>
- </tr>
- <tr>
- <td><img alt="" src="../images/animator_timeline_keyframeUnit.png"/></td>
- <td>KeyFrame Unit</td>
- <td>Bundle 2 or more KeyFrames.</td>
- </tr>
- </tbody>
- </table>
-
-
-<h4>Timeline View Operations</h4>
-
-<p>The following operations are possible in the <strong>Timeline</strong> view:</p>
-<ul class="ul">
-<li>Add an animation group:
-<ol>
-<li>Open the animation group drop-down menu.</li>
-<li>Select <strong>New animation group</strong>.</li>
-<li>In the New animation group window, define the new animation group name and attributes, and click <strong>OK</strong>.
- <p><img alt="" src="../images/animator_timeline_newAnimationGroup.png" /></p>
-<p>The new animation group is now shown in the outline.</p></li>
-</ol>
-</li>
-
-<li>Delete an animation group:
-<ol>
-<li>Open the animation group drop-down menu.</li>
-<li>Select <strong>Delete animation group</strong>.
-<p>If there is only 1 animation group, it cannot be deleted. If there are 2 or more animation groups, select the ones you want to delete and click <strong>OK</strong>.</p>
-</li>
-</ol>
- </li>
-<li>Add a predefined KeyFrame unit:
-<ul class="ul">
-<li>Use the toolbar:
- <ol>
-<li>Drag the timeline ruler to the point you want.
- <p><img alt="" src="../images/animator_timeline_addPreKeyFrame1.png" /></p>
- </li>
-
-<li>Click <img alt="" src="../images/animator_toolbar_dropdown_predefined_keyframe.png" /><img alt="" src="../images/animator_toolbar_dropdown_normal.png" /> on the toolbar and select <strong>emphasis > flash</strong>.
- <p><img alt="" src="../images/animator_timeline_addPreKeyFrame3.png" /></p>
-
- <p>The flash KeyFrame unit is now visible on the timeline.</p></li>
- </ol>
-</li>
-<li>Use the context menu:
-<ol>
-<li>Drag the timeline ruler to the point you want.</li>
-<li>Right-click the desired line on the timeline and select <strong>Add PredefinedKeyFrame > emphasis > flash</strong>.
- <p>The flash KeyFrame unit is now visible on the timeline.</p></li>
-</ol>
-</li>
-</ul>
-</li>
-
-<li>Add a KeyFrame or a KeyFrame unit:
-<ol>
-<li>Drag the timeline ruler to the point you want.
- <p><img alt="" src="../images/animator_timeline_addKeyFrame1.png" /></p></li>
-<li>From the selector list in the outline, select the desired selector and click the <img alt="" src="../images/animator_outline_add_frame_normal.png"/> button.
- <p><img alt="" src="../images/animator_timeline_addKeyFrame2.png" /></p>
-<p>The KeyFrame is now visible on the timeline.</p>
- <p><img alt="" src="../images/animator_timeline_addKeyFrame3.png" /></p></li>
-<li>Drag the timeline ruler to a new point.</li>
-<li>Move the widget in the Animator Editor.
-<p>Or perform the move by entering "100" to the top property field in the <strong>Properties</strong> view.</p>
-<p>The KeyFrame unit is now visible on the timeline.</p></li>
-</ol>
-</li>
-
-<li>Delete a KeyFrame or a KeyFrame unit:
-<ol>
-<li>Click the timeline ruler, or enter the desired time to Time Edit Box.</li>
-<li>Right-click the KeyFrame or KeyFrame unit you want to delete, and select <strong>Delete</strong>.
-<p><img alt="" src="../images/animator_timeline_delete.png" /></p></li>
-</ol>
-</li>
-
-<li>Preview an animation:
-<ol>
-<li>Move the timeline ruler to the desired time and click the <img alt="" src="../images/animator_toolbar_play_normal.png"/> button on the toolbar.<p><img alt="" src="../images/animator_timeline_preview.png" /></p>
-<p>To play an animation group repeatedly, click the <img alt="" src="../images/animator_toolbar_repeat_normal.png"/> button.</p></li>
-<li>To stop the preview, click the <img alt="" src="../images/animator_toolbar_stop.png"/> button.</li>
-</ol>
-</li>
-
-<li>Copy, cut and paste KeyFrames or KeyFrame units:
-<ol>
-<li>After adding it, click the desired KeyFrame or KeyFrame unit.
- <p><img alt="" src="../images/animator_timeline_copy.png" /></p></li>
-
-<li>Right-click the KeyFrame or KeyFrame Unit you want to copy or cut, and select <strong>Copy</strong> or <strong>Cut</strong>.
- <p><img alt="" src="../images/animator_timeline_paste.png" /></p></li>
-<li>Move the timeline ruler to the wanted time, right-click it and select <strong>Paste</strong>.</li>
-</ol>
-</li>
-
-<li>Filter animations:
-<p>Click the <img alt="" src="../images/animator_toolbar_filter_normal.png" /> button on the toolbar to see only animated HTML widgets in the outline animation group.</p></li>
-
-<li>Ease animations:
-<ol>
-<li>Click the KeyFrame.
- </li>
-<li>Click the <img alt="" src="../images/animator_toolbar_ease_inout.png"/><img alt="" src="../images/animator_toolbar_dropdown_normal.png" /> button and select <strong>linear</strong>.
-<p><img alt="" src="../images/animator_timeline_ease.png" /></p>
-<p>The applied linear KeyFrame is now visible in the preview.</p></li></ol></li>
-
-<li>Create a custom animation:
-<ol><li>Add the KeyFrame unit for which you want to create a custom animation.</li>
-<li>Right-click the KeyFrame unit, and select <strong>Create Custom Animation</strong>.
-<p><img alt="" src="../images/animator_custom_create.png" /></p></li>
-
-<li>Select the icon, and define the category and custom animation name.
-<p><img alt="" src="../images/animator_custom_data.png" /></p></li>
-
-<li>Click <strong>Finish</strong>.</li>
-<li>Add the custom animation like a predefined KeyFrame unit.
-<p><img alt="" src="../images/animator_custom_add.png" /></p></li>
- </ol></li>
-<li>Delete a custom animation:
-<ol><li>Right-click the timeline and select <strong>Delete Custom Animation</strong>.
-<p><img alt="" src="../images/animator_custom_delete.png" /></p></li>
-
-<li>Select the custom animations that you want to delete.</li>
-<li>Click <strong>Finish</strong> and confirm the deletion by clicking <strong>OK</strong>.
-<p><img alt="" src="../images/animator_custom_confirm.png" /></p>
-<p>You can check that the selected custom animations have been removed from the predefined list.</p></li>
-
-</ol></li>
-
-</ul>
-
-
-<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
<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>Remote Inspector</title>
+ <title>Web Inspector</title>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/></p>
</div>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a href="../../../org.tizen.gettingstarted/html/process/run_debug_app_w.htm">Running and Debugging Applications</a></li>
+ <li><a href="../../../org.tizen.gettingstarted/html/web/process/run_debug_app_w.htm">Running and Debugging Applications</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
- <h1>Remote Inspector</h1>
- <p>You can <a href="../../../org.tizen.gettingstarted/html/process/run_debug_app_w.htm">debug Web applications</a> using the JavaScript Debugger tool. The JavaScript Debugger is based on Webkit Web Inspector, and has been modified to support remote debugging. </p>
+ <h1>Web Inspector</h1>
+ <p>You can <a href="../../../org.tizen.gettingstarted/html/web/process/run_debug_app_w.htm">debug Web applications</a> using the JavaScript Debugger tool. The JavaScript Debugger is based on Webkit Web Inspector, and has been modified to support remote debugging. </p>
<p>The JavaScript Debugger supports the following panels:</p>
<ul>
<li><a href="#element">Elements Panel</a></li>
<li><a href="#console">Console Panel</a></li>
</ul>
<p class="figure">Figure: JavaScript Debugger panels</p>
- <p
style="text-align:center;"><img alt="JavaScript Debugger panels" src="../images/jsdebugger_panels.png" /></p>
+ <p
align="center"><img alt="JavaScript Debugger panels" src="../images/jsdebugger_panels.png" /></p>
<p>When debugging with the <a href="../common_tools/emulator.htm">Emulator</a>, the Emulator communicates with the Google Chrome™ browser through the HTTP protocol.</p>
<p>When the JavaScript Debugger is started, the <strong>Network</strong> panel is off. To enable the <strong>Network</strong> panel and start monitoring the resource loading status, press the F5 key. This reloads the current page and displays the load time on the <strong>Network</strong> panel.</p>
<h2 id="element" name="element">Elements Panel</h2>
<p>The <strong>Elements</strong> panel of the JavaScript Debugger allows you to see the Web page components (the DOM tree, CSS style, and Document Object Model).</p>
<p class="figure">Figure: Elements panel</p>
- <p
style="text-align:center;"><img alt="Elements panel" src="../images/remote_inspector_elements.png" /></p>
+ <p
align="center"><img alt="Elements panel" src="../images/remote_inspector_elements.png" /></p>
<h2 id="resource" name="resource">Resources Panel</h2>
<p>The <strong>Resources</strong> panel of the JavaScript Debugger allows you to inspect resources. You can interact with frames containing resources, such as HTML, JavaScript, CSS, images, and fonts. You can also inspect HTML5 databases, local storage, cookies, and application cache.</p>
<p class="figure">Figure: Resources panel</p>
- <p
style="text-align:center;"><img alt="Resources panel" src="../images/remote_inspector_resources.png" /></p>
+ <p
align="center"><img alt="Resources panel" src="../images/remote_inspector_resources.png" /></p>
<h2 id="network" name="network">Network Panel</h2>
<p>The <strong>Network</strong> panel of the JavaScript Debugger allows you to inspect resources downloaded over the network. You can also inspect the HTTP header, response, cookies, and preview.</p>
<p class="figure">Figure: Network panel</p>
- <p
style="text-align:center;"><img alt="Network panel" src="../images/remote_inspector_network.png" /></p>
+ <p
align="center"><img alt="Network panel" src="../images/remote_inspector_network.png" /></p>
<h2 id="source" name="source">Sources Panel</h2>
<p>The <strong>Sources</strong> panel of the JavaScript Debugger allows you to inspect the JavaScript source page. You can debug your JavaScript code. This panel supports watch expressions, callstack, scope variables, and break point operation. In addition, it supports basic debugging operations: continue, step over, step into, and step out.</p>
<p class="figure">Figure: Sources panel</p>
- <p
style="text-align:center;"><img alt="Sources panel" src="../images/remote_inspector_sources.png" /></p>
+ <p
align="center"><img alt="Sources panel" src="../images/remote_inspector_sources.png" /></p>
<h2 id="time" name="time">Timeline Panel</h2>
<p>The <strong>Timeline</strong> panel of the JavaScript Debugger allows you to perform advanced timing and speed analysis. You can see how long the browser takes to handle DOM events, and rendering and painting windows.</p>
<p class="figure">Figure: Timeline panel</p>
- <p
style="text-align:center;"><img alt="Timeline panel" src="../images/remote_inspector_timeline.png" /></p>
+ <p
align="center"><img alt="Timeline panel" src="../images/remote_inspector_timeline.png" /></p>
<h2 id="profile_panel" name="profile_panel">Profiles Panel</h2>
<p>The <strong>Profiles</strong> panel of the JavaScript Debugger allows you to inspect the JavaScript performance analyses. You can inspect CPU profiles or CSS Select profiles.</p>
<p class="figure">Figure: Profiles panel</p>
- <p
style="text-align:center;"><img alt="Profiles panel" src="../images/remote_inspector_profiles.png" /></p>
+ <p
align="center"><img alt="Profiles panel" src="../images/remote_inspector_profiles.png" /></p>
<h2 id="console" name="console">Console Panel</h2>
<p>The <strong>Console</strong> panel of the JavaScript Debugger allows you to inspect the JavaScript console operation. You can interact with your page programmatically. Any errors or warnings on your page are shown in the console.</p>
<p class="figure">Figure: Console panel</p>
- <p
style="text-align:center;"><img alt="Console panel" src="../images/remote_inspector_console.png" /></p>
+ <p
align="center"><img alt="Console panel" src="../images/remote_inspector_console.png" /></p>
<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/></p>
</div>
<p>The Web Simulator has several features for developing Web applications.</p>
<h2 id="basic" name="basic">Basic Panel Operation</h2>
<p>The Web Simulator provides the following panel operations:</p>
- <ul class="ul">
+ <ul>
<li>Expand/Collapse <p>Each panel can be opened or closed by clicking the small arrow on the left side of the panel bar.</p> </li>
<li>Reorder <p>Each panel can be moved and reordered by dragging the items on the drag area on the right side of the panel bar.</p> </li>
<li>Show/Hide <p>Each panel can be displayed or hidden by clicking the panel-setting button on the right side of the application address bar.</p> </li>
<p>You can also set the zoom level of your application to view specific areas of the application. Zooming is a visual aid and does not trigger application notifications.</p>
<p class="figure">Figure: Orientation and Zooming panel (mobile app on the left, wearable on the right)</p>
- <p
style="text-align:center;"><img alt="Orientation and Zooming panel" src="../images/simulator_panel_resolution_orientation.png" /></p>
+ <p
align="center"><img alt="Orientation and Zooming panel" src="../images/simulator_panel_resolution_orientation.png" /></p>
<h3 id="system" name="system">System Summary</h3>
<p>The <strong>System Summary</strong> panel displays generic information and settings about the application, system, device, and platform.</p>
<p class="figure">Figure: System Summary panel (mobile app on the left, wearable on the right)</p>
- <p
style="text-align:center;"><img alt="System Summary panel" src="../images/simulator_panel_system_summary.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
+ <p
align="center"><img alt="System Summary panel" src="../images/simulator_panel_system_summary.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
<h3 id="geo" name="geo">Geolocation</h3>
<p>The <strong>Geolocation</strong> panel contains location-related settings. You can set the local time zone to test whether your application reacts properly when the target device is located in different geographical areas.</p>
<p class="figure">Figure: Geolocation panel</p>
- <p
style="text-align:center;"><img alt="Geolocation panel" src="../images/simulator_panel_geolocation.png" /></p>
+ <p
align="center"><img alt="Geolocation panel" src="../images/simulator_panel_geolocation.png" /></p>
<p>The panel also provides an input area to configure geographical data being sent from the device. Additionally, a map is displayed and updated in accordance to the changing of data.</p>
<p>To simulate a custom, multi-point route:</p>
<ol>
<p>The <strong>Application Configuration</strong> panel displays a graphical representation of the <span style="font-family: Courier New,Courier,monospace;">config.xml</span> file. You can use it to ensure the validity of your application configuration.</p>
<p>For more information about the configuration details, see <a href="web_simulator_w.htm#spec">W3C/HTML5 Specifications</a>.</p>
<p class="figure">Figure: Application Configuration panel</p>
- <p
style="text-align:center;"><img alt="Application Configuration panel" src="../images/simulator_panel_feature_configuration.png" /></p>
+ <p
align="center"><img alt="Application Configuration panel" src="../images/simulator_panel_feature_configuration.png" /></p>
<h3 id="sensor" name="sensor">Sensors</h3>
<p>The <strong>Sensors</strong> panel provides slide bars to configure the ambient, accelerometer, and magnetic field sensors.</p>
<p>To change the accelerometer value, either drag the simulator image, or enter a degree value along each axis.</p>
<p>The following buttons can be used to simulate the accelerometer sensor:</p>
- <ul class="ul">
+ <ul>
<li><strong>FaceDown</strong> simulates placing the device with the screen facing down.</li>
<li><strong>Shake</strong> simulates shaking the device along the X axis.</li>
<li><strong>ResetAll</strong> simulates returning the device to its default position.</li>
</ul>
<p class="figure">Figure: Accelerometer sensor (mobile app on the left, wearable on the right)</p>
- <p
style="text-align:center;"><img alt="Accelerometer sensor" src="../images/simulator_panel_accelerometer.png" /></p>
+ <p
align="center"><img alt="Accelerometer sensor" src="../images/simulator_panel_accelerometer.png" /></p>
<p>To set the magnetic field, enter the X, Y, and Z axis values.</p>
<p class="figure">Figure: Accelerometer and gyro sensors</p>
- <p
style="text-align:center;"><img alt="Accelerometer and gyro sensors" src="../images/simulator_panel_accelerometer_gyro.png" /></p>
+ <p
align="center"><img alt="Accelerometer and gyro sensors" src="../images/simulator_panel_accelerometer_gyro.png" /></p>
<table class="note">
<tbody>
<tr>
<tr>
<td class="note"><p>If the computer does not fully support WebGL, the simulated device in the <strong>Sensors</strong> panel looks like in the following figure.</p>
<p class="figure">Figure: Sensor without WebGL</p>
- <p
style="text-align:center;"><img alt="Sensor without WebGL" src="../images/simulator_sensor_webgl.png" /></p> </td>
+ <p
align="center"><img alt="Sensor without WebGL" src="../images/simulator_sensor_webgl.png" /></p> </td>
</tr>
</tbody>
</table>
<p>The <strong>Packages and Applications</strong> panel provides a simulated packages and applications management center on a device. It lists available and installed packages and applications on a device:</p>
- <ul class="ul">
+ <ul>
<li>On the <strong>Packages</strong> tab, the available packages list provides INSTALL and UPDATE operations. The operations generate events, such as INSTALLED and UPDATED, and call the required callback functions.</li>
<li>On the <strong>Applications</strong> tab, the installed packages list shows the installed packages and applications on the device. You can simulate the UNINSTALL operation, which generates an UNINSTALLED event and calls the required callback function.</li>
</ul>
<p>You can use the <strong>Packages and Applications</strong> panel to verify created operations and operation details.</p>
<p class="figure">Figure: Packages and Applications panel</p>
- <p
style="text-align:center;"><img alt="Packages and Applications panel" src="../images/simulator_panel_package.png" /></p>
+ <p
align="center"><img alt="Packages and Applications panel" src="../images/simulator_panel_package.png" /></p>
<br></br>
<p>The following sample code demonstrates how to receive the INSTALLED, UPDATED, and UNINSTALLED events for changes in the installed packages list. If you select <strong>Sample Package</strong> from the available packages list and click <strong>Install</strong>, the "The package "Sample Package" is installed" message is displayed in the console, and for each application in the package, the <span style="font-family: Courier New,Courier,monospace">oninstalled</span> event is generated. You can subscribe to these application events by registering the <span style="font-family: Courier New,Courier,monospace">tizen.application.addAppInfoEventListener</span> interface.</p>
<pre class="prettyprint">var packageEventCallback =
});</pre>
<p class="figure">Figure: Providing application callback data</p>
- <p
style="text-align:center;"><img alt="Providing application callback data" src="../images/simulator_panel_package_callback.png" /></p>
+ <p
align="center"><img alt="Providing application callback data" src="../images/simulator_panel_package_callback.png" /></p>
<p>The Web Simulator does not have a home screen. Therefore, when the <span style="font-family: Courier New,Courier,monospace">application.exit()</span> method is called, you cannot navigate to another application or to the home screen. In this situation, a message is displayed stating that the application tried to exit and can be launched again.</p>
<p class="figure">Figure: Launch an application again</p>
- <p
style="text-align:center;"><img alt="Launch an application again" src="../images/app_exit.png" /></p>
+ <p
align="center"><img alt="Launch an application again" src="../images/app_exit.png" /></p>
<h3 id="communication" name="communication">Communications in Mobile Applications</h3>
<p><strong>Calls</strong></p>
<p>The <strong>Calls</strong> tab provides controls for simulating incoming calls made to the application. The calls can be tracked by call history-related methods using the Tizen <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/callhistory.html">Call History</a> API.</p>
<p class="figure">Figure: Calls tab</p>
- <p
style="text-align:center;"><img alt="Calls tab" src="../images/simulator_panel_call.png" /></p>
+ <p
align="center"><img alt="Calls tab" src="../images/simulator_panel_call.png" /></p>
<p>Click <strong>Call</strong> to display the calling screen. Click <strong>Answer</strong> to simulate a received call, and <strong>Ignore</strong> to simulate a rejected call.</p>
<p class="figure">Figure: Calling screen</p>
- <p
style="text-align:center;"><img alt="Calling screen" src="../images/simulator_panel_callscreen.png" /></p>
+ <p
align="center"><img alt="Calling screen" src="../images/simulator_panel_callscreen.png" /></p>
<p><strong>Messages</strong></p>
<p>The <strong>Messages</strong> tab provides controls for simulating SMS, MMS, and email message exchange between the panel and a target application. To send a message from the panel to the application:</p>
<ol>
<p>The application receives messages using the Tizen <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html">Messaging</a> API.</p>
<p>The <strong>Message Thread</strong> section shows the message history of the current session.</p>
<p class="figure">Figure: Messages tab</p>
- <p
style="text-align:center;"><img alt="Messages tab" src="../images/simulator_panel_messaging.png" /></p>
+ <p
align="center"><img alt="Messages tab" src="../images/simulator_panel_messaging.png" /></p>
<p><strong>Push Service</strong></p>
<p>The <strong>Push</strong> tab provides controls for delivering push notifications to your application. The applications table (on the <strong>Packages and Applications</strong> panel) lists registered applications for receiving push notifications and connectivity status. If an application is connected, the push service sends the push notification data directly to the application. If an application is not connected, the push service posts a UI notification on the Notification panel.</p>
<p>For the application to receive push messages, it has to register itself with the <span style="font-family: Courier New,Courier,monospace">tizen.push.registerService()</span> method. If the registration is successful, a red pause button is shown at the <strong>Application</strong> section under <strong>Status</strong>. During this status, notification messages pushed by the service server are posted on the Notification panel.</p>
<p class="figure">Figure: Registered for the push service</p>
- <p
style="text-align:center;"><img alt="Registered for the push service" src="../images/simulator_panel_push_register.png" /></p>
+ <p
align="center"><img alt="Registered for the push service" src="../images/simulator_panel_push_register.png" /></p>
<p>After the registration, the application must connect to the push service with the <span style="font-family: Courier New,Courier,monospace">tizen.push.connectService()</span> method. When the application is connected, a callback provided by the application is called whenever a notification message arrives.</p>
<p class="figure">Figure: Connected to the push service</p>
- <p
style="text-align:center;"><img alt="Connected to the push service" src="../images/simulator_panel_push_connect.png" /></p>
+ <p
align="center"><img alt="Connected to the push service" src="../images/simulator_panel_push_connect.png" /></p>
<p>To push a message from the panel to the application:</p>
<ol>
</ol>
<p>The application receives push notifications using the Tizen <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/push.html">Push</a> API.</p>
<p class="figure">Figure: Push tab</p>
- <p
style="text-align:center;"><img alt="Push tab" src="../images/simulator_panel_push.png" /></p>
+ <p
align="center"><img alt="Push tab" src="../images/simulator_panel_push.png" /></p>
<h3 id="network" name="network">Network Management in Mobile Applications</h3>
<p>The <strong>Network Management</strong> panel is used to manage network capabilities, such as Wi-Fi, cellular network (2G, 3G, and 4G), NFC, Bluetooth, and bearer selection. </p>
<p class="figure">Figure: Network Management panel</p>
- <p
style="text-align:center;"><img alt="Network Management panel" src="../images/simulator_panel_network.png" /></p>
+ <p
align="center"><img alt="Network Management panel" src="../images/simulator_panel_network.png" /></p>
<p>You can also set additional parameters for the NFC and Bluetooth functionalities, such as NFC tag and target type, Bluetooth adapter information, and the simulated devices.</p>
<p class="figure">Figure: NFC parameters</p>
- <p
style="text-align:center;"><img alt="NFC parameters" src="../images/simulator_panel_nfc.png" /></p>
+ <p
align="center"><img alt="NFC parameters" src="../images/simulator_panel_nfc.png" /></p>
<p class="figure">Figure: Bluetooth parameters</p>
- <p
style="text-align:center;"><img alt="Bluetooth parameters" src="../images/simulator_panel_bluetooth.png" /></p>
+ <p
align="center"><img alt="Bluetooth parameters" src="../images/simulator_panel_bluetooth.png" /></p>
<p>The <strong>Bearer Selection</strong> section provides network bearer selection management by listing supported network devices and their current availability status. You can request and release specific network connections from this section.</p>
<p class="figure">Figure: Network bearer selection</p>
- <p
style="text-align:center;"><img alt="Network bearer selection" src="../images/simulator_panel_bearer.png" /></p>
+ <p
align="center"><img alt="Network bearer selection" src="../images/simulator_panel_bearer.png" /></p>
<p>Your application can manage network devices and network status using the Tizen <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html">NFC</a>, <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html">Bluetooth</a>, and <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/networkbearerselection.html">Network Bearer Selection</a> APIs.</p>
<h3 id="power" name="power">Power Manager in Mobile Applications</h3>
<p>The <strong>Power Manager</strong> panel provides controls for managing the state of the battery and power resources.</p>
- <p class="caption" style="text-align: center;">Figure: Power Manager panel</p>
- <p
style="text-align: center; margin-left: auto; margin-right: auto;"><img alt="Power Manager panel" src="../images/power_manager_simulator.png" /></p>
+ <p class="figure">Figure: Power Manager panel</p>
+ <p
align="center"><img alt="Power Manager panel" src="../images/power_manager_simulator.png" /></p>
<p>The <strong>BATTERY</strong> section simulates the device battery level. Your application can retrieve the current battery status using the Tizen <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html">System Information</a> API.</p>
</pre>
<p class="figure">Figure: Download panel</p>
<p> </p>
- <p
style="text-align:center;"><img alt="Download panel" src="../images/simulator_panel_download.png" /></p>
+ <p
align="center"><img alt="Download panel" src="../images/simulator_panel_download.png" /></p>
<h3 id="noti" name="noti">Notification in Mobile Applications</h3>
<p>The <strong>Notification</strong> panel provides a notification center administrating system notifications. As the Simulator has no real desktop UI components, such as status bar or notification tray, the panel serves as the final rendering place of all the notifications. You can easily verify that the notification details you created with the Tizen <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/notification.html">Notification</a> API are correct.</p>
<p class="figure">Figure: Notification panel with empty notification</p>
- <p
style="text-align:center;"><img alt="Notification panel with empty notification" src="../images/simulator_panel_notification_none.png" /></p>
+ <p
align="center"><img alt="Notification panel with empty notification" src="../images/simulator_panel_notification_none.png" /></p>
<p>The following sample code demonstrates how to create a status notification. When it is posted with the <span style="font-family: Courier New,Courier,monospace">post()</span> method, the details of the notification are displayed on the panel, as shown in the figure below.</p>
<pre class="prettyprint">
notification = new tizen.StatusNotification("PROGRESS", "Notification Sample",
</pre>
<p class="figure">Figure: Notification panel with a notification</p>
<p> </p>
- <p
style="text-align:center;"><img alt="Notification panel with a notification" src="../images/simulator_panel_notification.png" /></p>
+ <p
align="center"><img alt="Notification panel with a notification" src="../images/simulator_panel_notification.png" /></p>
<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/></p>
</div>
<h1>Web Simulator</h1>
<p>The Tizen Web Simulator is a light-weight tool that provides many <a href="#setting">settings</a> and <a href="web_simulator_features_w.htm">features</a> to develop Web applications. You can use the simulator features to debug your applications.</p>
<p class="figure">Figure: Tizen Web Simulator</p>
- <p
style="text-align:center;"><img alt="Tizen Web Simulator" src="../images/tizen_web_simulator.png" /></p>
+ <p
align="center"><img alt="Tizen Web Simulator" src="../images/tizen_web_simulator.png" /></p>
<p>The Tizen Web Simulator:</p>
<ul>
<li>Supports running and debugging modern HTML5 Web applications.</li>
</ul>
<p>The Tizen Web Simulator is based on the <a href="https://github.com/blackberry-webworks/Ripple-UI" target="_blank">Ripple-UI Framework</a> and is licensed under Apache Software License v.2.0. </p>
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">The Web Simulator does not support a wearable circular UI.</td>
+ </tr>
+ </tbody>
+ </table>
+
+
<h2 id="setting" name="setting">Web Simulator Settings</h2>
<p>The Web Simulator has several settings for developing Web applications.</p>
<h3 id="bar">Application Navigation Bar</h3>
<p>The application navigation bar is used to load an application, view the browsing history, and modify the Web Simulator configuration and visibility settings.</p>
<p>The navigation bar has the following options:</p>
<ul>
- <li>Address bar <p>When the Web Simulator is launched from the Tizen IDE, the file path of your application main file is displayed in the address bar. You can edit this field for changing the file or project to run.</p> <p style="text-align:left;"><img alt="Address bar" src="../images/simulator_address_bar.png" /></p></li>
- <li>Reload button <p>Reloads the current application.</p> <p style="text-align:left;"><img alt="Reload button" src="../images/simulator_reload_button.png" /></p></li>
- <li>Browsing history <p>Click the history button to view the previously launched applications.</p> <p style="text-align:left;"><img alt="Browsing history" src="../images/simulator_browsing_history.png" /></p></li>
- <li>Configuration button <p>Opens the Web Simulator configuration window.</p> <p style="text-align:left;"><img alt="Web Simulator configuration" src="../images/simulator_config_button.png" /></p></li>
- <li>Panel visibility button <p>Opens the panel visibility window.</p> <p style="text-align:left;"><img alt="Web Simulator panel visibility" src="../images/simulator_panel_button.png" /></p></li>
- <li>Information button <p>Opens the Web Simulator information window.</p> <p style="text-align:left;"><img alt="Web Simulator information" src="../images/simulator_info_button.png" /></p></li>
+ <li>Address bar <p>When the Web Simulator is launched from the Tizen IDE, the file path of your application main file is displayed in the address bar. You can edit this field for changing the file or project to run.</p>
+<p align="left"><img alt="Address bar" src="../images/simulator_address_bar.png" /></p></li>
+ <li>Reload button <p>Reloads the current application.</p>
+<p align="left"><img alt="Reload button" src="../images/simulator_reload_button.png" /></p></li>
+ <li>Browsing history <p>Click the history button to view the previously launched applications.</p>
+<p align="left"><img alt="Browsing history" src="../images/simulator_browsing_history.png" /></p></li>
+ <li>Configuration button <p>Opens the Web Simulator configuration window.</p>
+<p align="left"><img alt="Web Simulator configuration" src="../images/simulator_config_button.png" /></p></li>
+ <li>Panel visibility button <p>Opens the panel visibility window.</p>
+<p align="left"><img alt="Web Simulator panel visibility" src="../images/simulator_panel_button.png" /></p></li>
+ <li>Information button <p>Opens the Web Simulator information window.</p>
+<p align="left"><img alt="Web Simulator information" src="../images/simulator_info_button.png" /></p></li>
</ul>
<h3 id="simu">Simulator Configuration Settings</h3>
<p>You can modify the following configuration settings in the Web Simulator configuration window:</p>
<ul>
- <li>Configuration management <p>Save your configuration settings to the local storage and restore the settings at a later time.</p> <p style="text-align:left;"><img alt="Configuration settings save and load buttons" src="../images/simulator_save_button.png" /></p></li>
+ <li>Configuration management <p>Save your configuration settings to the local storage and restore the settings at a later time.</p>
+<p align="left"><img alt="Configuration settings save and load buttons" src="../images/simulator_save_button.png" /></p></li>
<li>Device settings <p>Set the device API and device resolution to simulate the device resolution of the target device on the <strong>DEVICE</strong> tab.</p>
<table class="note">
<tbody>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile Web" src="../images/mw_icon.png"/></p>
+ <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png" /></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a class="opensection" href="#generate">Generating Test Stubs</a></li>
- <li><a class="opensection" href="#edit">Editing a Test</a></li>
- <li><a class="opensection" href="#run">Running Tests</a></li>
+ <li><a href="#generate">Generating Test Stubs</a></li>
+ <li><a href="#edit">Editing a Test</a></li>
+ <li><a href="#run">Running Tests</a></li>
</ul>
</div></div>
</div>
<h1>Web Unit Testing Tool</h1>
<p>The Web unit testing tool provides a set of features for testing the source code. The tool uses the <a href="http://qunitjs.com" target="_blank">QUnit test framework</a> to write and run tests.</p>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">This tool is supported in mobile applications only.</td>
- </tr>
- </tbody>
- </table>
-
<p>To unit test your application:</p>
<ul>
<li><a href="#generate">Generate test stubs</a> </li>
</ol>
<p class="figure">Figure: Generating a test stub</p>
-<p
style="text-align:center;"><img alt="Generating a test stub" src="../images/test_stubs1.png" /></p>
+<p
align="center"><img alt="Generating a test stub" src="../images/test_stubs1.png" /></p>
<p>The test stubs are generated in the <span style="font-family: Courier New,Courier,monospace;">webUnitTest</span> folder.</p>
<p class="figure">Figure: Test stub location</p>
-<p style="text-align:center;"><img alt="Test stub location" src="../images/test_stubs2.png" /></p>
+<p align="center"><img alt="Test stub location" src="../images/test_stubs2.png" /></p>
<h2 id="edit" name="edit">Editing a Test</h2>
<p>The <strong>Web Unit Test Result</strong> view shows the test results in a tree format. It shows the passed tests with a green icon and failed tests with a red icon. You can use the <strong>Show failed only</strong> button to only display the failed tests.</p>
<p class="figure">Figure: Test result</p>
-<p
style="text-align:center;"><img alt="Test result" src="../images/run_test2.png" /></p>
+<p
align="center"><img alt="Test result" src="../images/run_test2.png" /></p>
<p>To repeat the test, select a checkbox and click the <strong>Run checked</strong> button.</p>
<p class="figure">Figure: Repeating a test</p>
-<p
style="text-align:center;"><img alt="Repeating a test" src="../images/run_test3.png" /></p>
+<p
align="center"><img alt="Repeating a test" src="../images/run_test3.png" /></p>
<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
<topic href="html/common_tools/emulator_features.htm" label="Extended Emulator Features"></topic>
</topic>
<topic href="html/common_tools/log_view.htm" label="Log View"></topic>
+ <topic href="html/common_tools/t_trace.htm" label="T-trace"></topic>
<topic href="html/common_tools/keyboard_shortcuts.htm" label="Keyboard Shortcuts"></topic>
</topic>
<topic href="html/web_tools/tools_w.htm" label="Web Tools">
+ <topic href="html/web_tools/project_wizard_w.htm" label="Project Wizard"></topic>
<topic href="html/web_tools/config_editor_w.htm" label="Configuration Editor"></topic>
<topic href="html/web_tools/privilege_checker_w.htm" label="Privilege Checker"></topic>
+ <topic href="html/web_tools/rest_viewer_w.htm" label="REST Viewer"></topic>
<topic href="html/web_tools/content_assist_w.htm" label="Content Assist"></topic>
<topic href="html/web_tools/html_editor_w.htm" label="HTML Editor"></topic>
<topic href="html/web_tools/html_preview_w.htm" label="HTML Preview"></topic>
<topic href="html/web_tools/code_beautifier_w.htm" label="Code Beautifier"></topic>
<topic href="html/web_tools/code_minifier_w.htm" label="Code Minifier"></topic>
<topic href="html/web_tools/live_editing_w.htm" label="Live Editing"></topic>
- <topic href="html/web_tools/uibuilder_w.htm" label="UI Builder"></topic>
<topic href="html/web_tools/command_line_interface_w.htm" label="Command Line Interface"></topic>
<topic href="html/web_tools/web_simulator_w.htm" label="Web Simulator">
<topic href="html/web_tools/web_simulator_features_w.htm" label="Web Simulator Features"></topic>
</topic>
<topic href="html/web_tools/web_unit_test_tool_w.htm" label="Web Unit Test Tool"></topic>
- <topic href="html/web_tools/remote_inspector_w.htm" label="Remote Inspector"></topic>
+ <topic href="html/web_tools/web_inspector_w.htm" label="Web Inspector"></topic>
<topic href="html/web_tools/js_analyzer_w.htm" label="JavaScript Analyzer"></topic>
<topic href="html/web_tools/js_log_console_w.htm" label="JavaScript Log Console View"></topic>
<topic href="html/web_tools/set_ide_preference_w.htm" label="IDE Preferences"></topic>
Bundle-ManifestVersion: 1
Bundle-Name: Getting Started with Tizen
Bundle-SymbolicName: org.tizen.gettingstarted;singleton=true
-Bundle-Version: 2.3.1
+Bundle-Version: 2.4.0
Bundle-Vendor: The Linux Foundation
<body onload="prettyPrint()">
<h1><a name="Creating2" id="Creating2">About This Content</a></h1>
- <p>Tizen 2.3.0</p>
+ <p>Tizen 2.4.0</p>
<h1>License</h1>
<p>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>
<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
</div>
<div id="container"><div id="contents"><div class="content">
<div id="profile">
- <p><img alt="Mobile Web" src="images/mw_icon.png"/> <img alt="Wearable Web" src="images/ww_icon.png"/> <img alt="Mobile native" src="images/mn_icon.png"/></p>
+ <p><img alt="Mobile Web" src="images/mw_icon.png"/> <img alt="Wearable Web" src="images/ww_icon.png"/> <img alt="Mobile native" src="images/mn_icon.png"/> <img alt="Wearable native" src="images/wn_icon.png"/></p>
</div>
<h1 style="text-align:left;"> <font color="#000000">Tizen</font><br/>
<p>The getting started with Tizen documentation provides overall information you need to become familiar with Tizen programming and application model:</p>
<ul>
-<li><a href="preface/preface.htm">Preface</a>
+<li><a href="preface.htm">Preface</a>
<p>Provides information about the Tizen documentation to help you understand it.</p></li>
-<li><a href="first_app/first_app.htm">Creating Your First Tizen Application</a>
-<p>Demonstrates how you can create a simple HelloWorld application - thus helping you to get more familiar with the Tizen application development process and using the Tizen SDK.</p></li>
+<li><a href="web/cover_page_w.htm">Introduction to Web Applications</a>
+<p>Demonstrates various details related to creating and managing Tizen Web applications.</p></li>
-<li><a href="process/app_dev_process.htm">Application Development Process</a>
-<p>Teaches you how to create a Tizen application from the initial application planning stage to the end stages where you are ready to run and package your application.</p></li>
+<li><a href="native/cover_page_n.htm">Introduction to Native Applications</a>
+<p>Demonstrates various details related to creating and managing Tizen native applications.</p></li>
-<li><a href="app_model/application_model.htm">Tizen Application Model</a>
-<p>Provides an introduction to the Tizen application life-cycle and package contents.</p></li>
-
-<li><a href="details/details.htm">Understanding Tizen Programming</a>
-<p>Introduces the Tizen platform, its architecture, and some useful programming concepts you need to take into account when designing Tizen applications.</p>
-</li>
-
-<li><a href="details/tizen_websites.htm">Tizen Web Sites</a>
+<li><a href="tizen_websites.htm">Tizen Web Sites</a>
<p>Introduces the various Web sites that you can use in the application development tasks.</p>
</li>
</ul>
<li><a href="../../org.tizen.tutorials/html/cover_page.htm">Tizen Tutorials</a></li>
<li><a href="../../org.tizen.guides/html/cover_page.htm">Tizen Guides</a></li>
<li><a href="../../org.tizen.web.apireference/html/cover_page.htm">Tizen API References</a></li>
+<li><a href="../../org.tizen.sampledescriptions/html/cover_page.htm">Tizen Sample Descriptions</a></li>
</ul>
+
<p>Before using Tizen development tools and documentation, make sure you are familiar with the license details.</p>
<script type="text/javascript" src="scripts/jquery.zclip.min.js"></script>
color: #ffffff;
}
-#navigation {width: 20%; position: fixed; right: 17px; top: 0; bottom: 51px; /* overflow: auto; *//* min-width: 200px; *//* background: white; */z-index: 100;padding-top: 10px;/* padding-bottom: 88px; */margin-bottom: 89px;}
#toc-navigation {width: 20%; position: fixed; right: 17px; top: 0; bottom: 51px; /* overflow: auto; *//* min-width: 200px; *//* background: white; */z-index: 100;padding-top: 10px;/* padding-bottom: 88px; */margin-bottom: 89px;}
#toc {padding: 0px 20px 5px 20px; /* border: 2px solid #567a9c; */ border-radius: 15px;position: absolute;top: 78px;bottom: 9px;overflow: auto;/* margin-bottom: 5px; */padding-bottom: 5px;border-bottom: 3px transparent solid;margin-left: 5px;}
#main {width: 75%; height: 90%;}
#container {width:100%;}
#container #contents {padding:0px 0 20px; overflow: auto;position: fixed;top: 0;bottom: 0;margin-bottom: 64px;right: 200px;left: 20px;}
body.no-toc #container #contents {right: 0;padding-right:30px;}
-body.no-toc #navigation {width: auto;}
body.no-toc #toc-navigation {width: auto;}
body.no-toc .top {right: 19px; /* float:none; */ width: 28px;}
body.no-toc #profile {float: right;right: -32px;}
ul.devicespecifications li div.devicespec-tit .items-tit-h3 { /*float:left;*/ margin:0 0 0 14px; padding:0; line-height: 22px; font-size: 14pt; color: #1C1C1C; font-style:normal; font-weight: bold;}
ul.devicespecifications li div.devicespec-tit .items-tit-h4 { /*float:left;*/ margin:0 0 0 14px; padding:0; line-height: 22px; font-size: 12pt; color: #1C1C1C; font-style:normal; font-weight: bold;}
- ul.devicespecifications li div.devicespec-tit span {position: absolute; top: 0; right:0;background:#416cbb; display:block; height:22px; margin-right:0; border-left: solid 1px #7a9bd4; }
- ul.devicespecifications li div.devicespec-tit span a.bt-arr {display:block; width: 55px; height:15px; margin-left:0; padding-top:5px; padding-left: 14px; text-align:left; background: url('../images/ico_arr_hidden.gif') 46px 9px no-repeat;}
- ul.devicespecifications li div.devicespec-tit span a.bt-arr em {display:inline-block; height: 14px; line-height:11px; font-size:11px; color:#fff; font-style:normal; margin-right: 8px;}
- ul.devicespecifications li div.devicespec-tit span * {vertical-align:middle;}
+ ul.devicespecifications li div.devicespec-tit > span {position: absolute; top: 0; right:0;background:#416cbb; display:block; height:22px; margin-right:0; border-left: solid 1px #7a9bd4; }
+ ul.devicespecifications li div.devicespec-tit > span a.bt-arr {display:block; width: 55px; height:15px; margin-left:0; padding-top:5px; padding-left: 14px; text-align:left; background: url('../images/ico_arr_hidden.gif') 46px 9px no-repeat;}
+ ul.devicespecifications li div.devicespec-tit > span a.bt-arr em {display:inline-block; height: 14px; line-height:11px; font-size:11px; color:#fff; font-style:normal; margin-right: 8px;}
+ ul.devicespecifications li div.devicespec-tit > span * {vertical-align:middle;}
ul.devicespecifications li div.devicespec-con ul.con-list { width:100%; }
ul.devicespecifications li div.devicespec-con ul.con-list li {line-height: 18px; margin:0; padding:0 0 0 7px; background: url("../images/ico_bullet_2_7.gif") 0 8px no-repeat; }
+++ /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>Security and API Privileges</title>
-<style>
-td.key { font-family: Courier New,Courier,monospace }
-tr.partner-level, tr.platform-level { background-color: #cff }
-</style>
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="toc-navigation">
- <div id="profile">
- <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/> <img alt="Mobile native" src="../images/mn_icon.png"/></p>
- </div>
- <div id="toc_border"><div id="toc">
- <p class="toc-title">Content</p>
- <ul class="toc">
- <li><a href="#web">Security and API Privileges for Web Applications</a></li>
- <li><a href="#native">Security and API Privileges for Native Applications</a></li>
- </ul>
- </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Security and API Privileges</h1>
-
-<div class="cont"><div class="static-cont">
-
- <!-- Show / Hide all links -->
- <div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
- <!-- Folds -->
- <ul class="devicespecifications">
-<li>
- <div class="devicespec-tit">
- <h2 id="web" name="web" class="items-tit-h2"><img alt="Web application" src="../images/w_fold.png"/> Security and API Privileges for Web Applications</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
-
-<p>To effectively protect the mobile device system and user private data, the Tizen security architecture is based on privileges and application signing of the Linux basic security model, which includes process isolation and mandatory access control. Since Tizen, as an open mobile platform, provides a wide range of features and experiences for users with a variety of applications, the users must be able to grant privileges for security-sensitive operations.</p>
-
-<p>Tizen provides API-level access control for security-sensitive operations which, if not used correctly, can harm user privacy and system stability. Therefore, applications that use such sensitive APIs must declare the required privileges in the <a href="../process/setting_properties_w.htm#privilege">config.xml</a> file.</p>
-
-<p>If an application invokes a privileged API, the Tizen system checks whether the privilege is present in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file. If the privilege is not present in the file, the system prohibits the application execution.</p>
-<p>The Tizen IDE also provides privilege checker tools to check whether the Tizen application source code contains any privilege violations. For more information, see <a href="../../../org.tizen.devtools/html/web_tools/privilege_checker_w.htm">Privilege Checker</a>.</p>
-
-<p>The following tables list the API privileges, which you must to declare when using security-sensitive API modules.</p>
-
-<table id="privileges">
-<caption>Table: Mobile Web Device API privileges</caption>
-<tbody>
-<tr>
- <th>Privilege</th>
- <th>Level</th>
- <th>Display name</th>
- <th>Description</th>
-</tr>
-<tr>
- <td class="key">http://tizen.org/privilege/account.read</td>
- <td>public</td>
- <td>Reading accounts</td>
- <td>The application can read accounts.</td>
-</tr>
-<tr>
- <td class="key">http://tizen.org/privilege/account.write</td>
- <td>public</td>
- <td>Managing accounts</td>
- <td>The application can create, edit, and delete accounts.</td>
-</tr>
-<tr>
- <td class="key">http://tizen.org/privilege/alarm</td>
- <td>public</td>
- <td>Setting alarms</td>
- <td>The application can set alarms and wake up the device at scheduled times.</td>
-</tr>
-<tr>
- <td class="key">http://tizen.org/privilege/application.info</td>
- <td>public</td>
- <td>Retrieving application information</td>
- <td>The application can retrieve information related to other applications.</td>
-</tr>
-<tr>
- <td class="key">http://tizen.org/privilege/application.launch</td>
- <td>public</td>
- <td>Opening applications</td>
- <td>The application can open other applications using the application ID or application control.</td>
-</tr>
-<tr class="partner-level">
- <td class="key">http://tizen.org/privilege/appmanager.certificate</td>
- <td>partner</td>
- <td>Getting application certificates</td>
- <td>The application can retrieve specified application certificates.</td>
-</tr>
-<tr class="partner-level">
- <td class="key">http://tizen.org/privilege/appmanager.kill</td>
- <td>partner</td>
- <td>Closing applications</td>
- <td>The application can close other applications.</td>
-</tr>
-<tr>
- <td class="key">http://tizen.org/privilege/bluetooth.admin</td>
- <td>public</td>
- <td>Managing Bluetooth general settings</td>
- <td>The application can change Bluetooth settings, such as turning Bluetooth on or off and setting the device name.</td>
-</tr>
-<tr>
- <td class="key">http://tizen.org/privilege/bluetooth.gap</td>
- <td>public</td>
- <td>Using Bluetooth GAP</td>
- <td>The application can use the Bluetooth Generic Access Profile (GAP) to, for example, scan for and pair with devices.</td>
-</tr>
-<tr>
- <td class="key">http://tizen.org/privilege/bluetooth.health</td>
- <td>public</td>
- <td>Using Bluetooth HDP</td>
- <td>The application can use the Bluetooth Health Device Profile (HDP) to, for example, send health information.</td>
-</tr>
-<tr>
- <td class="key">http://tizen.org/privilege/bluetooth.spp</td>
- <td>public</td>
- <td>Using Bluetooth SPP</td>
- <td>The application can use the Bluetooth Serial Port Profile (SPP) to, for example, send serial data.</td>
-</tr>
-<tr class="platform-level">
- <td class="key">http://tizen.org/privilege/bluetoothmanager</td>
- <td>platform</td>
- <td>Managing Bluetooth system settings</td>
- <td>The application can change Bluetooth system settings related to privacy and security, such as the visibility mode.</td>
-</tr>
-<tr class="platform-level">
- <td class="key">http://tizen.org/privilege/bookmark.read</td>
- <td>platform</td>
- <td>Reading bookmarks</td>
- <td>The application can read bookmarks.</td>
-</tr>
-<tr class="platform-level">
- <td class="key">http://tizen.org/privilege/bookmark.write</td>
- <td>platform</td>
- <td>Managing bookmarks</td>
- <td>The application can create, edit, and delete bookmarks.</td>
-</tr>
-<tr>
- <td class="key">http://tizen.org/privilege/calendar.read</td>
- <td>public</td>
- <td>Reading calendar</td>
- <td>The application can read events and tasks.</td>
-</tr>
-<tr>
- <td class="key">http://tizen.org/privilege/calendar.write</td>
- <td>public</td>
- <td>Managing calendar</td>
- <td>The application can create, update, and delete events and tasks.</td>
-</tr>
-<tr>
- <td class="key">http://tizen.org/privilege/call</td>
- <td>public</td>
- <td>Making phone calls</td>
- <td>The application can make phone calls to numbers when they are tapped without further confirmation.</td>
-</tr>
-<tr>
- <td class="key">http://tizen.org/privilege/callhistory.read</td>
- <td>public</td>
- <td>Reading call logs</td>
- <td>The application can read call log items.</td>
-</tr>
-<tr>
- <td class="key">http://tizen.org/privilege/callhistory.write</td>
- <td>public</td>
- <td>Managing call logs</td>
- <td>The application can create, update, and delete call log items.</td>
-</tr>
-<tr>
- <td class="key">http://tizen.org/privilege/contact.read</td>
- <td>public</td>
- <td>Reading contacts</td>
- <td>The application can read your profile, contacts, and contact history. Contact history can include social network activity.</td>
-</tr>
-<tr>
- <td class="key">http://tizen.org/privilege/contact.write</td>
- <td>public</td>
- <td>Managing contacts</td>
- <td>The application can create, update, and delete your profile, contacts, and any contact history that is related to this application. Contact history can include social network activity.</td>
-</tr>
-<tr>
- <td class="key">http://tizen.org/privilege/content.read</td>
- <td>public</td>
- <td>Reading contents</td>
- <td>The application can read media content information.</td>
-</tr>
-<tr>
- <td class="key">http://tizen.org/privilege/content.write</td>
- <td>public</td>
- <td>Managing contents</td>
- <td>The application can create, update, and delete media content information.</td>
-</tr>
-<tr>
- <td class="key">http://tizen.org/privilege/datacontrol.consumer</td>
- <td>public</td>
- <td>Accessing exported data</td>
- <td>The application can read data exported by data control providers.</td>
-</tr>
-<tr>
- <td class="key">http://tizen.org/privilege/datasync</td>
- <td>public</td>
- <td>Syncing device data</td>
- <td>The application can synchronize device data, such as contacts and calendar events, using the OMA DS 1.2 protocol.</td>
-</tr>
-<tr>
- <td class="key">http://tizen.org/privilege/download</td>
- <td>public</td>
- <td>Downloading via HTTP</td>
- <td>The application can manage HTTP downloads.</td>
-</tr>
-<tr>
- <td class="key">http://tizen.org/privilege/filesystem.read</td>
- <td>public</td>
- <td>Reading file systems</td>
- <td>The application can read file systems.</td>
-</tr>
-<tr>
- <td class="key">http://tizen.org/privilege/filesystem.write</td>
- <td>public</td>
- <td>Writing to file systems</td>
- <td>The application can write to file systems.</td>
-</tr>
-<tr>
- <td class="key">http://tizen.org/privilege/healthinfo</td>
- <td>public</td>
- <td>Reading health related information</td>
- <td>The application can read the user's health information gathered by device sensors, such as pedometer or heart rate monitor.</td>
-</tr>
-<tr>
- <td class="key">http://tizen.org/privilege/internet</td>
- <td>public</td>
- <td>Accessing Internet</td>
- <td>The application can access the Internet.This can result in additional charges depending on the user's payment plan.</td>
-</tr>
-<tr>
- <td class="key">http://tizen.org/privilege/location</td>
- <td>public</td>
- <td>Using user location</td>
- <td>The application can read the user's location information.</td>
-</tr>
-<tr>
- <td class="key">http://tizen.org/privilege/messaging.read</td>
- <td>public</td>
- <td>Accessing messages</td>
- <td>The application can retrieve messages from message boxes or receive messages.</td>
-</tr>
-<tr>
- <td class="key">http://tizen.org/privilege/messaging.write</td>
- <td>public</td>
- <td>Writing messages</td>
- <td>The application can write, send, sync, and remove text messages, multimedia messages, and emails.</td>
-</tr>
-<tr class="partner-level">
- <td class="key">http://tizen.org/privilege/networkbearerselection</td>
- <td>partner</td>
- <td>Selecting network connection</td>
- <td>The application can request and release a specific network connection.</td>
-</tr>
-<tr>
- <td class="key">http://tizen.org/privilege/nfc.admin</td>
- <td>public</td>
- <td>Managing NFC general settings</td>
- <td>The application can change NFC settings, such as turning NFC on or off.</td>
-</tr>
-<tr>
- <td class="key">http://tizen.org/privilege/nfc.cardemulation</td>
- <td>public</td>
- <td>Using NFC card emulation mode</td>
- <td>The application can access smart card details, such as credit card details, and allow users to make payments via NFC.</td>
-</tr>
-<tr>
- <td class="key">http://tizen.org/privilege/nfc.common</td>
- <td>public</td>
- <td>Using NFC common features</td>
- <td>The application can use NFC common features.</td>
-</tr>
-<tr>
- <td class="key">http://tizen.org/privilege/nfc.p2p</td>
- <td>public</td>
- <td>Pushing NFC messages</td>
- <td>The application can push NFC messages to other devices.</td>
-</tr>
-<tr>
- <td class="key">http://tizen.org/privilege/nfc.tag</td>
- <td>public</td>
- <td>Reading/writing to NFC tags</td>
- <td>The application can read and write NFC tag information.</td>
-</tr>
-<tr>
- <td class="key">http://tizen.org/privilege/notification</td>
- <td>public</td>
- <td>Providing notifications</td>
- <td>The application can show and hide its own notifications and badges.</td>
-</tr>
-<tr>
- <td class="key">http://tizen.org/privilege/package.info</td>
- <td>public</td>
- <td>Receiving package information</td>
- <td>The application can retrieve information about installed packages.</td>
-</tr>
-<tr class="platform-level">
- <td class="key">http://tizen.org/privilege/packagemanager.install</td>
- <td>platform</td>
- <td>Managing packages</td>
- <td>The application can install or uninstall application packages.</td>
-</tr>
-<tr>
- <td class="key">http://tizen.org/privilege/power</td>
- <td>public</td>
- <td>Managing power</td>
- <td>The application can control power-related settings, such as dimming the screen.</td>
-</tr>
-<tr>
- <td class="key">http://tizen.org/privilege/push</td>
- <td>public</td>
- <td>Receiving push notifications</td>
- <td>The application can receive notifications from the Internet.</td>
-</tr>
-<tr>
- <td class="key">http://tizen.org/privilege/secureelement</td>
- <td>public</td>
- <td>Accessing secure elements</td>
- <td>The application can access secure smart card chips, such as UICC/SIM, embedded secure elements, and secure SD cards.</td>
-</tr>
-<tr>
- <td class="key">http://tizen.org/privilege/setting</td>
- <td>public</td>
- <td>Accessing user settings</td>
- <td>The application can change and read user settings.</td>
-</tr>
-<tr>
- <td class="key">http://tizen.org/privilege/system</td>
- <td>public</td>
- <td>Reading system information</td>
- <td>The application can read system information.</td>
-</tr>
-<tr class="partner-level">
- <td class="key">http://tizen.org/privilege/systemmanager</td>
- <td>partner</td>
- <td>Reading secure system information</td>
- <td>The application can read secure system information.</td>
-</tr>
-<tr>
- <td class="key">http://tizen.org/privilege/volume.set</td>
- <td>public</td>
- <td>Adjusting volume</td>
- <td>The application can adjust the volume for different features, such as notification alerts, ringtones, and media.</td>
-</tr>
-<tr>
- <td class="key">http://tizen.org/privilege/websetting</td>
- <td>public</td>
- <td>Managing web application settings</td>
- <td>The application can change its Web application settings, including deleting cookies.</td>
-</tr>
-</tbody>
-</table>
-
-<table id="privileges">
-<caption>Table: Mobile Web W3C/HTML5 API privileges</caption>
-<tbody>
-<tr>
- <th>Privilege</th>
- <th>Level</th>
- <th>Description</th>
-</tr>
-<tr>
- <td class="key">http://tizen.org/privilege/internet</td>
- <td>public</td>
- <td>The application can access the Internet using the <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#websocket">WebSocket</a>, <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#httpreq">XMLHttpRequest Level 2</a>, <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#serversent">Server-Sent Events</a>, <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#cache">HTML5 Application caches</a>, and <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#cross">Cross-Origin Resource Sharing</a> APIs.</td>
-</tr>
-<tr>
- <td class="key">http://tizen.org/privilege/mediacapture</td>
- <td>public</td>
- <td>The application can manipulate streams from cameras and microphones using the <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#getusermedia">getUserMedia</a> API.
- <p><strong>Privilege behavior:</strong></p>
- <ul class="ul"><li>In the local domain, if this privilege is defined, permission is granted. Otherwise, execution is blocked.</li>
-<li>In the remote domain, if this privilege is defined, pop-up user prompt is used. Otherwise, execution is blocked.</li></ul></td>
-</tr>
-<tr>
- <td class="key">http://tizen.org/privilege/unlimitedstorage</td>
- <td>public</td>
- <td>The application can use the storage with unlimited size with the <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#directory">File API: Directories and System</a>, <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#writer">File API: Writer</a>, <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#database">Indexed Database</a>, and <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#sql">Web SQL Database</a> APIs.
- <p><strong>Privilege behavior:</strong></p>
- <ul class="ul"><li>In the local domain, if this privilege is defined, permission is granted. Otherwise, pop-up user prompt is used.</li>
-<li>In the remote domain, pop-up user prompt is used.</li></ul></td>
-</tr>
-<tr>
- <td class="key">http://tizen.org/privilege/notification</td>
- <td>public</td>
- <td>The application can display simple notifications using the <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#webnoti">Web Notifications</a> API.
- <p><strong>Privilege behavior:</strong></p>
- <ul class="ul"><li>In the local domain, if this privilege is defined, permission is granted. Otherwise, pop-up user prompt is used.</li>
-<li>In the remote domain, pop-up user prompt is used.</li></ul></td>
-</tr>
-<tr>
- <td class="key">http://tizen.org/privilege/location </td>
- <td>public</td>
- <td>The application can access geographic locations using the <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#geo">Geolocation</a> API.
- <p><strong>Privilege behavior:</strong></p>
- <ul class="ul"><li>In the local domain, if this privilege is defined, permission is granted. Otherwise, execution is blocked.</li>
-<li>In the remote domain, if this privilege is defined, pop-up user prompt is used. Otherwise, execution is blocked.</li></ul></td>
-</tr>
-</tbody>
-</table>
-
-<table id="privileges">
-<caption>Table: Mobile Web Supplementary API privileges</caption>
-<tbody>
-<tr>
- <th>Privilege</th>
- <th>Level</th>
- <th>Description</th>
-</tr>
-<tr>
- <td class="key">http://tizen.org/privilege/fullscreen</td>
- <td>public</td>
- <td>The application can display in the full-screen mode using the <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#fullscreen">FullScreen API - Mozilla</a> API.
- <p><strong>Privilege behavior:</strong></p>
-<ul class="ul"><li>If this privilege is defined, permission is granted without user interaction. Otherwise, permission is granted by user interaction.</li></ul></td>
-</tr>
-</tbody>
-</table>
-
-<table id="privileges">
-<caption>Table: Wearable Web Device API privileges</caption>
-<tbody>
-<tr>
- <th>Privilege</th>
- <th>Level</th>
- <th>Display name</th>
- <th>Description</th>
-</tr>
-<tr>
- <td class="key">http://tizen.org/privilege/alarm</td>
- <td>public</td>
- <td>Setting alarms</td>
- <td>The application can set alarms and wake up the device at scheduled times.</td>
-</tr>
-<tr>
- <td class="key">http://tizen.org/privilege/application.info</td>
- <td>public</td>
- <td>Retrieving application information</td>
- <td>The application can retrieve information related to other applications.</td>
-</tr>
-<tr>
- <td class="key">http://tizen.org/privilege/application.launch</td>
- <td>public</td>
- <td>Opening applications</td>
- <td>The application can open other applications using the application ID or application control.</td>
-</tr>
-<tr class="partner-level">
- <td class="key">http://tizen.org/privilege/appmanager.certificate</td>
- <td>partner</td>
- <td>Getting application certificates</td>
- <td>The application can retrieve specified application certificates.</td>
-</tr>
-<tr class="partner-level">
- <td class="key">http://tizen.org/privilege/appmanager.kill</td>
- <td>partner</td>
- <td>Closing applications</td>
- <td>The application can close other applications.</td>
-</tr>
-<tr>
- <td class="key">http://tizen.org/privilege/call</td>
- <td>public</td>
- <td>Making phone calls</td>
- <td>The application can make phone calls to numbers when they are tapped without further confirmation.</td>
-</tr>
-<tr>
- <td class="key">http://tizen.org/privilege/content.read</td>
- <td>public</td>
- <td>Reading contents</td>
- <td>The application can read media content information.</td>
-</tr>
-<tr>
- <td class="key">http://tizen.org/privilege/content.write</td>
- <td>public</td>
- <td>Managing contents</td>
- <td>The application can create, update, and delete media content information.</td>
-</tr>
-<tr>
- <td class="key">http://tizen.org/privilege/download</td>
- <td>public</td>
- <td>Downloading via HTTP</td>
- <td>The application can manage HTTP downloads.</td>
-</tr>
-<tr>
- <td class="key">http://tizen.org/privilege/filesystem.read</td>
- <td>public</td>
- <td>Reading file systems</td>
- <td>The application can read file systems.</td>
-</tr>
-<tr>
- <td class="key">http://tizen.org/privilege/filesystem.write</td>
- <td>public</td>
- <td>Writing to file systems</td>
- <td>The application can write to file systems.</td>
-</tr>
-<tr>
- <td class="key">http://tizen.org/privilege/healthinfo</td>
- <td>public</td>
- <td>Reading health related information</td>
- <td>The application can read the user's health information gathered by device sensors, such as pedometer or heart rate monitor.</td>
-</tr>
-<tr>
- <td class="key">http://tizen.org/privilege/location</td>
- <td>public</td>
- <td>Using user location</td>
- <td>The application can read the user's location information.</td>
-</tr>
-<tr>
- <td class="key">http://tizen.org/privilege/nfc.admin</td>
- <td>public</td>
- <td>Managing NFC general settings</td>
- <td>The application can change NFC settings, such as turning NFC on or off.</td>
-</tr>
-<tr>
- <td class="key">http://tizen.org/privilege/nfc.cardemulation</td>
- <td>public</td>
- <td>Using NFC card emulation mode</td>
- <td>The application can access smart card details, such as credit card details, and allow users to make payments via NFC.</td>
-</tr>
-<tr>
- <td class="key">http://tizen.org/privilege/nfc.common</td>
- <td>public</td>
- <td>Using NFC common features</td>
- <td>The application can use NFC common features.</td>
-</tr>
-<tr>
- <td class="key">http://tizen.org/privilege/nfc.p2p</td>
- <td>public</td>
- <td>Pushing NFC messages</td>
- <td>The application can push NFC messages to other devices.</td>
-</tr>
-<tr>
- <td class="key">http://tizen.org/privilege/nfc.tag</td>
- <td>public</td>
- <td>Reading/writing to NFC tags</td>
- <td>The application can read and write NFC tag information.</td>
-</tr>
-<tr>
- <td class="key">http://tizen.org/privilege/notification</td>
- <td>public</td>
- <td>Providing notifications</td>
- <td>The application can show and hide its own notifications and badges.</td>
-</tr>
-<tr>
- <td class="key">http://tizen.org/privilege/package.info</td>
- <td>public</td>
- <td>Receiving package information</td>
- <td>The application can retrieve information about installed packages.</td>
-</tr>
-<tr class="platform-level">
- <td class="key">http://tizen.org/privilege/packagemanager.install</td>
- <td>platform</td>
- <td>Managing packages</td>
- <td>The application can install or uninstall application packages.</td>
-</tr>
-<tr>
- <td class="key">http://tizen.org/privilege/power</td>
- <td>public</td>
- <td>Managing power</td>
- <td>The application can control power-related settings, such as dimming the screen.</td>
-</tr>
-<tr>
- <td class="key">http://tizen.org/privilege/push</td>
- <td>public</td>
- <td>Receiving push notifications</td>
- <td>The application can receive notifications from the Internet.</td>
-</tr>
-<tr>
- <td class="key">http://tizen.org/privilege/secureelement</td>
- <td>public</td>
- <td>Accessing secure elements</td>
- <td>The application can access secure smart card chips, such as UICC/SIM, embedded secure elements, and secure SD cards.</td>
-</tr>
-<tr>
- <td class="key">http://tizen.org/privilege/setting</td>
- <td>public</td>
- <td>Accessing user settings</td>
- <td>The application can change and read user settings.</td>
-</tr>
-<tr>
- <td class="key">http://tizen.org/privilege/system</td>
- <td>public</td>
- <td>Reading system information</td>
- <td>The application can read system information.</td>
-</tr>
-<tr class="partner-level">
- <td class="key">http://tizen.org/privilege/systemmanager</td>
- <td>partner</td>
- <td>Reading secure system information</td>
- <td>The application can read secure system information.</td>
-</tr>
-<tr>
- <td class="key">http://tizen.org/privilege/volume.set</td>
- <td>public</td>
- <td>Adjusting volume</td>
- <td>The application can adjust the volume for different features, such as notification alerts, ringtones, and media.</td>
-</tr>
-</tbody>
-</table>
-
-<table id="privileges">
-<caption>Table: Wearable Web W3C/HTML5 API privileges</caption>
-<tbody>
-<tr>
- <th>Privilege</th>
- <th>Level</th>
- <th>Description</th>
-</tr>
-<tr>
- <td class="key">http://tizen.org/privilege/internet</td>
- <td>public</td>
- <td>The application can access the Internet using the <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#websocket">WebSocket</a>, <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#httpreq">XMLHttpRequest Level 1</a>, and <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#cross">Cross-Origin Resource Sharing</a> APIs.</td>
-</tr>
-<tr>
- <td class="key">http://tizen.org/privilege/mediacapture</td>
- <td>public</td>
- <td>The application can manipulate streams from cameras and microphones using the <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#getusermedia">getUserMedia</a> API.
- <p><strong>Privilege behavior:</strong></p>
- <ul class="ul"><li>In the local domain, if this privilege is defined, permission is granted. Otherwise, execution is blocked.</li>
-<li>In the remote domain, if this privilege is defined, pop-up user prompt is used. Otherwise, execution is blocked.</li></ul></td>
-</tr>
-<tr>
- <td class="key">http://tizen.org/privilege/unlimitedstorage</td>
- <td>public</td>
- <td>The application can use the storage with unlimited size with the <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#database">Indexed Database</a> API.
- <p><strong>Privilege behavior:</strong></p>
- <ul class="ul"><li>In the local domain, if this privilege is defined, permission is granted. Otherwise, pop-up user prompt is used.</li>
-<li>In the remote domain, pop-up user prompt is used.</li></ul></td>
-</tr>
-<tr>
- <td class="key">http://tizen.org/privilege/location </td>
- <td>public</td>
- <td>The application can access geographic locations using the <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#geo">Geolocation</a> API.
- <p><strong>Privilege behavior:</strong></p>
- <ul class="ul"><li>In the local domain, if this privilege is defined, permission is granted. Otherwise, execution is blocked.</li>
-<li>In the remote domain, if this privilege is defined, pop-up user prompt is used. Otherwise, execution is blocked.</li></ul></td>
-</tr>
-</tbody>
-</table>
-
-<table id="privileges">
-<caption>Table: Wearable Web Supplementary API privileges</caption>
-<tbody>
-<tr>
- <th>Privilege</th>
- <th>Level</th>
- <th>Description</th>
-</tr>
-<tr>
- <td class="key">http://tizen.org/privilege/camera</td>
- <td>public</td>
- <td>The application can capture video and image on a target device using the <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#camera">Camera API (Tizen Extension)</a> (Video Recording and Image Capture) API.
- <p><strong>Privilege behavior:</strong></p>
- <ul class="ul"><li>In the local domain, if this privilege is defined, permission is granted. Otherwise, execution is blocked.</li>
-<li>In the remote domain, execution is blocked.</li></ul></td>
-</tr>
-<tr>
- <td class="key">http://tizen.org/privilege/audiorecorder</td>
- <td>public</td>
- <td>The application can record an audio stream on a target device using the <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#camera">Camera API (Tizen Extension)</a> (Audio Recording) API.
- <p><strong>Privilege behavior:</strong></p>
- <ul class="ul"><li>In the local domain, if this privilege is defined, permission is granted. Otherwise, execution is blocked.</li>
-<li>In the remote domain, execution is blocked.</li></ul></td>
-</tr>
-</tbody>
-</table>
-
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="native" name="native" class="items-tit-h2"><img alt="Native application" src="../images/n_fold.png"/> Security and API Privileges for Native Applications</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
-
-<p>To effectively protect the mobile device system and user private data, the Tizen security architecture is based on privileges and application signing of the Linux basic security model, which includes process isolation and mandatory access control. Since Tizen, as an open mobile platform, provides a wide range of features and experiences for users with a variety of applications, the users must be able to grant privileges for security-sensitive operations.</p>
-
-<p>Tizen provides API-level access control for security-sensitive operations which, if not used correctly, can harm user privacy and system stability. Therefore, applications that use such sensitive APIs must declare the required privileges in the <a href="../process/setting_properties_n.htm#manifest">manifest.xml</a> file.</p>
-
-<p>If an application invokes a privileged API, the Tizen system checks whether the privilege is present in the <span style="font-family: Courier New,Courier,monospace">manifest.xml</span> file. If the privilege is not present in the file, the system prohibits the application execution.</p>
-<p>The Tizen IDE also provides privilege checker tools to check whether the Tizen application source code contains any privilege violations. For more information, see <a href="../../../org.tizen.devtools/html/native_tools/api_privilege_checker_n.htm">API and Privilege Checker</a>.</p>
-
-<p>The following table lists the API privileges, which you must to declare when using security-sensitive API modules.</p>
-
-<table>
-<caption>Table: API privileges</caption>
-<tbody>
-<tr>
-<th>Privilege</th>
-<th>Display name</th>
-<th>Description</th>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/account.read</span></p></td>
-<td rowspan="1" colspan="1"><p>Reading accounts</p></td>
-<td rowspan="1" colspan="1"><p>The application can read accounts.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/account.write</span></p></td>
-<td rowspan="1" colspan="1"><p>Managing accounts</p></td>
-<td rowspan="1" colspan="1"><p>The application can create, edit, and delete accounts.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/alarm.get</span></p></td>
-<td rowspan="1" colspan="1"><p>Retrieving alarms</p></td>
-<td rowspan="1" colspan="1"><p>The application can read information about the saved alarms.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/alarm.set</span></p></td>
-<td rowspan="1" colspan="1"><p>Setting alarms</p></td>
-<td rowspan="1" colspan="1"><p>The application can set alarms and wake the device up at scheduled times.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/appmanager.launch</span></p></td>
-<td rowspan="1" colspan="1"><p>Launching application</p></td>
-<td rowspan="1" colspan="1"><p>The application can open other applications.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/bluetooth</span></p></td>
-<td rowspan="1" colspan="1"><p>Using unrestricted Bluetooth services</p></td>
-<td rowspan="1" colspan="1"><p>The application can perform unrestricted actions using Bluetooth, such as scanning for and connecting to other devices.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/calendar.read</span></p></td>
-<td rowspan="1" colspan="1"><p>Reading calendar</p></td>
-<td rowspan="1" colspan="1"><p>The application can read events and tasks.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/calendar.write</span></p></td>
-<td rowspan="1" colspan="1"><p>Managing calendar</p></td>
-<td rowspan="1" colspan="1"><p>The application can create, update, and delete events and tasks.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/call</span></p></td>
-<td rowspan="1" colspan="1"><p>Making phone calls</p></td>
-<td rowspan="1" colspan="1"><p>The application can make phone calls to numbers when they are tapped without further confirmation.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/callhistory.read</span></p></td>
-<td rowspan="1" colspan="1"><p>Reading call logs</p></td>
-<td rowspan="1" colspan="1"><p>The application can read call log items.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/callhistory.write</span></p></td>
-<td rowspan="1" colspan="1"><p>Managing call logs</p></td>
-<td rowspan="1" colspan="1"><p>The application can create, update, and delete call log items.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/camera</span></p></td>
-<td rowspan="1" colspan="1"><p>Using camera</p></td>
-<td rowspan="1" colspan="1"><p>The application can take and preview pictures.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/contact.read</span></p></td>
-<td rowspan="1" colspan="1"><p>Reading contacts</p></td>
-<td rowspan="1" colspan="1"><p>The application can read your profile, contacts, and contact history. Contact history can include social network activity.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/contact.write</span></p></td>
-<td rowspan="1" colspan="1"><p>Managing contacts</p></td>
-<td rowspan="1" colspan="1"><p>The application can create, update, and delete your profile, contacts, and any contact history that is related to this application. The contact history can include social network activity.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/content.write</span></p></td>
-<td rowspan="1" colspan="1"><p>Managing content</p></td>
-<td rowspan="1" colspan="1"><p>This application can change media information. This information can be used by other applications.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/datasharing</span></p></td>
-<td rowspan="1" colspan="1"><p>Sharing data between applications</p></td>
-<td rowspan="1" colspan="1"><p>The application can share data with other applications.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/display</span></p></td>
-<td rowspan="1" colspan="1"><p>Managing display settings</p></td>
-<td rowspan="1" colspan="1"><p>The application can manage display settings, such as the brightness. This can increase battery consumption.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/download</span></p></td>
-<td rowspan="1" colspan="1"><p>Downloading through HTTP</p></td>
-<td rowspan="1" colspan="1"><p>The application can manage HTTP downloads. This can result in additional charges depending on the user's payment plan.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/email</span></p></td>
-<td rowspan="1" colspan="1"><p>Managing email accounts, mailboxes, and emails</p></td>
-<td rowspan="1" colspan="1"><p>The application can manage your email accounts, including your folders and emails.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/externalstorage</span></p></td>
-<td rowspan="1" colspan="1"><p>Accessing external storage</p></td>
-<td rowspan="1" colspan="1"><p>The application can read and write files that are saved to external storage, such as SD cards.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/externalstorage.appdata</span></p></td>
-<td rowspan="1" colspan="1"><p>Accessing application data in external storage</p></td>
-<td rowspan="1" colspan="1"><p>The application can read and write its own files in external storage, such as SD cards.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/haptic</span></p></td>
-<td rowspan="1" colspan="1"><p>Managing vibration feedback</p></td>
-<td rowspan="1" colspan="1"><p>The application can control vibration feedback.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/internet</span></p></td>
-<td rowspan="1" colspan="1"><p>Accessing Internet</p></td>
-<td rowspan="1" colspan="1"><p>The application can access the Internet. This can result in additional charges depending on your payment plan.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/keymanager</span></p></td>
-<td rowspan="1" colspan="1"><p>Using secure repository</p></td>
-<td rowspan="1" colspan="1"><p>The application can save keys, certificates, and data to, and retrieve and delete them from password-protected storage.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/led</span></p></td>
-<td rowspan="1" colspan="1"><p>Managing LEDs</p></td>
-<td rowspan="1" colspan="1"><p>The application can turn LEDs on or off, such as the LED on the front of the device and the camera flash.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/location</span></p></td>
-<td rowspan="1" colspan="1"><p>Using user location</p></td>
-<td rowspan="1" colspan="1"><p>The application can read your location information.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/mediastorage</span></p></td>
-<td rowspan="1" colspan="1"><p>Accessing media folders</p></td>
-<td rowspan="1" colspan="1"><p>The application can read and write files in media folders.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/message.read</span></p></td>
-<td rowspan="1" colspan="1"><p>Reading text and multimedia messages and related information</p></td>
-<td rowspan="1" colspan="1"><p>The application can read text and multimedia messages, and any information related to them.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/message.write</span></p></td>
-<td rowspan="1" colspan="1"><p>Sending text and multimedia messages and updating their statuses</p></td>
-<td rowspan="1" colspan="1"><p>The application can write, send, delete, and move text and multimedia messages, and change the settings and statuses of the messages, such as read or unread.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/network.get</span></p></td>
-<td rowspan="1" colspan="1"><p>Reading network information</p></td>
-<td rowspan="1" colspan="1"><p>The application can retrieve network information such as the status of each network, its type, and detailed network profile information.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/network.profile</span></p></td>
-<td rowspan="1" colspan="1"><p>Managing network profiles</p></td>
-<td rowspan="1" colspan="1"><p>The application can add, remove, and edit network profiles.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/network.set</span></p></td>
-<td rowspan="1" colspan="1"><p>Managing network connections</p></td>
-<td rowspan="1" colspan="1"><p>The application can turn Wi-Fi on and off, and connect to and disconnect from Wi-Fi and mobile networks.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/nfc</span></p></td>
-<td rowspan="1" colspan="1"><p>Using basic NFC services</p></td>
-<td rowspan="1" colspan="1"><p>The application can read and write NFC tag information, and send NFC messages to other devices.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/nfc.cardemulation</span></p></td>
-<td rowspan="1" colspan="1"><p>Using NFC card emulation mode</p></td>
-<td rowspan="1" colspan="1"><p>The application can access smart card details, such as credit card details, and allow users to make payments via NFC.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/notification</span></p></td>
-<td rowspan="1" colspan="1"><p>Providing notifications</p></td>
-<td rowspan="1" colspan="1"><p>The application can show and hide its own notifications and badges.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/packagemanager.info</span></p></td>
-<td rowspan="1" colspan="1"><p>Retrieving detailed package information</p></td>
-<td rowspan="1" colspan="1"><p>The application can retrieve detailed application package information.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/power</span></p></td>
-<td rowspan="1" colspan="1"><p>Managing power</p></td>
-<td rowspan="1" colspan="1"><p>The application can control power-related settings, such as dimming the screen.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/push</span></p></td>
-<td rowspan="1" colspan="1"><p>Receiving push notifications</p></td>
-<td rowspan="1" colspan="1"><p>The application can receive notifications from the Internet.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/recorder</span></p></td>
-<td rowspan="1" colspan="1"><p>Recording video and audio</p></td>
-<td rowspan="1" colspan="1"><p>The application can record video and audio.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/shortcut</span></p></td>
-<td rowspan="1" colspan="1"><p>Managing shortcuts</p></td>
-<td rowspan="1" colspan="1"><p>The application can create and delete shortcuts.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/systemsettings</span></p></td>
-<td rowspan="1" colspan="1"><p>Managing unrestricted system settings</p></td>
-<td rowspan="1" colspan="1"><p>The application can read and write unrestricted system settings.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/telephony</span></p></td>
-<td rowspan="1" colspan="1"><p>Accessing telephony information</p></td>
-<td rowspan="1" colspan="1"><p>The application can retrieve telephony information, such as the network and SIM card used, the IMEI, and the statuses of calls.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/volume.set</span></p></td>
-<td rowspan="1" colspan="1"><p>Adjusting volume</p></td>
-<td rowspan="1" colspan="1"><p>The application can adjust the volume for different features, such as notification alerts, ringtones, and media.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/wifidirect</span></p></td>
-<td rowspan="1" colspan="1"><p>Managing Wi-Fi Direct information</p></td>
-<td rowspan="1" colspan="1"><p>The application can enable and disable Wi-Fi Direct, manage Wi-Fi Direct connections, and change Wi-Fi Direct settings.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/window.priority.set</span></p></td>
-<td rowspan="1" colspan="1"><p>Displaying windows on top of other applications and screen</p></td>
-<td rowspan="1" colspan="1"><p>The application can appear on top of other windows and screens, including the lock screen, according to the order of priority of the windows. This may prevent you from interacting with other applications or screens until the window for the application is closed.</p></td>
-</tr>
-</tbody>
-</table>
-
-<h3 name="nonAPI" id="nonAPI">Non-API Bound Privileges</h3>
-
-<p>Tizen application privileges are loosely bound to APIs, so most of the privileges can be identified by the APIs that the application calls. However, there are some privileges that are not coupled with the Tizen APIs. To allow easy identification, those privileges are mapped to corresponding system resources - same as other privileges.</p>
-
-<p>The following table lists the non-API bound privileges.</p>
-
-<table>
-<caption>Table: Non-API bound privileges</caption>
-
-<tbody>
-<tr>
-<th>Privilege</th>
-<th>Display name</th>
-<th>Description</th>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/internet</span></p></td>
-<td rowspan="1" colspan="1"><p>Internet</p></td>
-<td rowspan="1" colspan="1"><p>Most of the mobile devices use a cellular network for IP communication. However, the cellular network can cause data costs and an application that sends data through the internet can be crucial for user privacy. Due to the importance of the functionality, a privilege for controlling application internet access has been added.</p>
-<p>The new privilege is coupled with IP addresses of the destination and source of the IP packets. If your socket is connecting to or listening for any IP address except 127.0.0.1, this privilege is required to communicate properly. If your application does not have this privilege, the connection is blocked in the kernel layer and returns an error in the <span style="font-family: Courier New,Courier,monospace;">connect()</span> function as the permission is denied. If you are listening to a socket, you never receive any packets from the outside without errors on the socket functions.</p>
-<p>If you are using the <span style="font-family: Courier New,Courier,monospace;">listen()</span> and <span style="font-family: Courier New,Courier,monospace;">connect()</span> functions between the local loopback interface (127.0.0.1), you cannot connect to a random application (due to sandboxing) no matter how you add this privilege. However, you can connect between multiple processes of the same application binary.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/mediastorage</span></p></td>
-<td rowspan="1" colspan="1"><p>Media storage</p></td>
-<td rowspan="1" colspan="1"><p>When you connect the device to a computer (Windows or Mac) through USB, you can access a dedicated media storage area shown as massive media storage. This region of the storage is called media storage and is usually used for multimedia files, such as photos, videos, and music files. Since this storage area is used for user private data, access to it must be protected with a privilege.</p>
-<p>If your application does not have this privilege, no file operations into the media storage area (<span style="font-family: Courier New,Courier,monospace;">/opt/usr/media/</span>) succeed and you receive a permission denied error. If you have this privilege, you can read and write directories and files, create new files, and delete files in the storage area.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/externalstorage</span></p></td>
-<td rowspan="1" colspan="1"><p>External storage</p></td>
-<td rowspan="1" colspan="1"><p>Similar to the media storage, many devices support external storages, such as MicroSD card or USB memory. As with the media storage, the access to an external storage (usually <span style="font-family: Courier New,Courier,monospace;">/opt/storage/sdcard</span>) must be protected with a privilege.</p>
-<p>If your application does not have this privilege, all file operations fail with a permission denied error. If you have this privilege, you have full access to the external storage.</p></td>
-</tr>
-</tbody>
-</table>
- </div>
- </li>
- </ul>
-</div>
-
-</div>
-
-<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>Tizen APIs</title>
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="navigation">
- <div id="profile">
- <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/> <img alt="Mobile native" src="../images/mn_icon.png"/></p>
- </div>
-
- <div id="toc_border"><div id="toc">
- <p class="toc-title">Content</p>
- <ul class="toc">
- <li><a href="#wapi">Tizen APIs for Web Applications</a></li>
- <li><a href="#napi">Tizen APIs for Native Applications</a></li>
- </ul>
- </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Tizen APIs</h1>
-
-<div class="cont"><div class="static-cont">
-
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
-
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="wapi" name="wapi" class="items-tit-h2"><img alt="Web application" src="../images/w_fold.png"/> Tizen APIs for Web Applications</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
-
-<p>Using the Tizen Web API modules, you can develop rich Web applications and build great application experiences with well-known Web programming languages: HTML, CSS, and JavaScript. Just like every major browser in the market, the Tizen Web API modules support the latest HTML5 capabilities, such as animation, offline, audio, and video. By utilizing the standard HTML5 capabilities, your Web applications are ready to run across various devices and platforms with minimal customization. In addition to the JavaScript-based Tizen Device API, you can also enable advanced device access from your mobile Web applications, such as Bluetooth and NFC.</p>
-
-<p>The Tizen platform supports hybrid applications (1 mobile Web application and 1 or more mobile native applications). A hybrid application package is very useful to mobile Web applications that need background processing or monitoring. With a hybrid application package, you can register the included applications in the Tizen Store and install, upgrade, and uninstall them using a single hybrid package. For more information on developing hybrid Web applications with Tizen mobile devices, see <a href="../process/app_dev_process_w.htm#hybrid">Packaging Hybrid Applications</a>.</p>
-
-<p>Tizen provides a wide range of Web API modules that allow you to take full advantage of various Tizen features.</p>
- <p>The following table lists the features provided by the <a href="../../../org.tizen.web.apireference/html/device_api/mobile/index.html">Mobile Web Device API Reference</a>.</p>
- <table border="1">
- <caption>
- Table: Device API features provided for mobile applications
- </caption>
- <colgroup>
- <col width="20%" />
- <col width="40%" />
- <col width="40%" />
- </colgroup>
- <tbody>
- <tr>
- <th>Feature</th>
- <th>Purpose</th>
- <th>Documentation</th>
- </tr>
- <tr>
- <td>Tizen</td>
- <td>This API contain classes and interfaces that provide a set of basic definitions and interfaces that are used in the Tizen Device API.
- <p>You can use filters and sorting modes for query methods, generic success and error event handlers, a generic error interface, and a simple coordinate interface for defining location information.</p></td>
- <td>
- <ul class="ul">
- <li>Guides: <a href="../../../org.tizen.guides/html/web/tizen/tizen/tizen_guide_w.htm">Tizen</a></li>
- <li>Tutorials: <a href="../../../org.tizen.tutorials/html/web/tizen/tizen/tizen_tutorials_w.htm">Tizen</a></li>
- <li>API Reference: <a href="../../../org.tizen.web.apireference/html/device_api/mobile/index.html#Tizen">Tizen</a></li>
- </ul></td>
- </tr>
- <tr>
- <td>Application</td>
- <td>These APIs contain classes and interfaces that enable you to manage alarm, application, and package features.
- <p>You can schedule an application to be run at a specific time, retrieve information about the applications installed or running on the device, and enable package management.</p></td>
- <td>
- <ul class="ul">
- <li>Guides: <a href="../../../org.tizen.guides/html/web/tizen/application/app_guide_w.htm">Application</a></li>
- <li>Tutorials: <a href="../../../org.tizen.tutorials/html/web/tizen/application/app_tutorials_w.htm">Application</a></li>
- <li>API Reference: <a href="../../../org.tizen.web.apireference/html/device_api/mobile/index.html#Application">Application</a></li>
- </ul></td>
- </tr>
- <tr>
- <td>Communication</td>
- <td>These APIs contain classes and interfaces that enable you to manage Bluetooth, messaging, NFC (Near Field Communication), push, and secure element features.
- <p>You can use transfer data over a Bluetooth connection, send and receive messages, share contacts, photos, and videos using NFC, receive push notifications from a push server, and access secure elements, such as SIM card and secure SD card, in a device.</p></td>
- <td>
- <ul class="ul">
- <li>Guides: <a href="../../../org.tizen.guides/html/web/tizen/communication/comm_guide_w.htm">Communication</a></li>
- <li>Tutorials: <a href="../../../org.tizen.tutorials/html/web/tizen/communication/comm_tutorials_w.htm">Communication</a></li>
- <li>API Reference: <a href="../../../org.tizen.web.apireference/html/device_api/mobile/index.html#Communication">Communication</a></li>
- </ul></td>
- </tr>
- <tr>
- <td>Content</td>
- <td>These APIs contain classes and interfaces that enable you to manage content and download features.
- <p>You can search and manage multimedia content locally, download files from the Internet, and monitor the download progress and status.</p></td>
- <td>
- <ul class="ul">
- <li>Guides: <a href="../../../org.tizen.guides/html/web/tizen/content/content_guide_w.htm">Content</a></li>
- <li>Tutorials: <a href="../../../org.tizen.tutorials/html/web/tizen/content/content_tutorials_w.htm">Content</a></li>
- <li>API Reference: <a href="../../../org.tizen.web.apireference/html/device_api/mobile/index.html#Contents">Content</a></li>
- </ul></td>
- </tr>
- <tr>
- <td>Input/Output</td>
- <td>These APIs contain classes and interfaces that enable you to manage file system and message port features.
- <p>You can access specific parts of the device file system, archive files, and send and receive messages through message ports.</p></td>
- <td>
- <ul class="ul">
- <li>Guides: <a href="../../../org.tizen.guides/html/web/tizen/input_output/io_guide_w.htm">Input/Output</a></li>
- <li>Tutorials: <a href="../../../org.tizen.tutorials/html/web/tizen/input_output/io_tutorials_w.htm">Input/Output</a></li>
- <li>API Reference: <a href="../../../org.tizen.web.apireference/html/device_api/mobile/index.html#I/O">Input/Output</a></li>
- </ul></td>
- </tr>
- <tr>
- <td>Multimedia</td>
- <td>These APIs contain classes and interfaces that enable you to manage multimedia-related features.
- <p>You can change and monitor playback volume level, and react to dedicated multimedia key presses.</p></td>
- <td>
- <ul class="ul">
- <li>Guides: <a href="../../../org.tizen.guides/html/web/tizen/multimedia/multimedia_guide_w.htm">Multimedia</a></li>
- <li>Tutorials: <a href="../../../org.tizen.tutorials/html/web/tizen/multimedia/multimedia_tutorials_w.htm">Multimedia</a></li>
- <li>API Reference: <a href="../../../org.tizen.web.apireference/html/device_api/mobile/index.html#Multimedia">Multimedia</a></li>
- </ul></td>
- </tr>
-
- <tr>
- <td>Social</td>
- <td>These APIs contain classes and interfaces that enable you to manage bookmark, calendar, call history, contact, and data synchronization features.
- <p>You can manage the Tizen Web browser bookmark list, calendar events and tasks, call history, and address books and contacts on a device, and you can synchronize device data, such as contacts and calendar events, with the OMA DS server.</p></td>
- <td>
- <ul class="ul">
- <li>Guides: <a href="../../../org.tizen.guides/html/web/tizen/social/social_guide_w.htm">Social</a></li>
- <li>Tutorials: <a href="../../../org.tizen.tutorials/html/web/tizen/social/social_tutorials_w.htm">Social</a></li>
- <li>API Reference: <a href="../../../org.tizen.web.apireference/html/device_api/mobile/index.html#Social">Social</a></li>
- </ul></td>
- </tr>
- <tr>
- <td>System</td>
- <td>These APIs contain classes and interfaces that enable you to manage power, system information and setting, time, and Web setting features.
- <p>You can access the state of the device power resource, device system information, and device wallpaper settings, and you can use locale-specific calendar features by retrieving date and time information. You can manage time features, and set Web view properties, such as setting Web view user agents and deleting Web view cookies.</p></td>
- <td>
- <ul class="ul">
- <li>Guides: <a href="../../../org.tizen.guides/html/web/tizen/system/system_guide_w.htm">System</a></li>
- <li>Tutorials: <a href="../../../org.tizen.tutorials/html/web/tizen/system/system_tutorials_w.htm">System</a></li>
- <li>API Reference: <a href="../../../org.tizen.web.apireference/html/device_api/mobile/index.html#System">System</a></li>
- </ul></td>
- </tr>
- <tr>
- <td>User Interface</td>
- <td>These APIs contain classes and interfaces that enable you to manage badge and notification features.
- <p>You can manage and monitor badge numbers, and create and manage notifications about application events.</p></td>
- <td>
- <ul class="ul">
- <li>Guides: <a href="../../../org.tizen.guides/html/web/tizen/ui/ui_guide_w.htm">User Interface</a></li>
- <li>Tutorials: <a href="../../../org.tizen.tutorials/html/web/tizen/ui/ui_tutorials_w.htm">User Interface</a></li>
- <li>API Reference: <a href="../../../org.tizen.web.apireference/html/device_api/mobile/index.html#User Interface">User Interface</a></li>
- </ul></td>
- </tr>
- <tr>
- <td>Web UI Framework</td>
- <td>These APIs contain classes and interfaces that enable you to manage the Tizen Advanced UI (TAU) features.
- <p>You can create and manage various kinds of UI widgets.</p></td>
- <td>
- <ul class="ul">
- <li>Guides: <a href="../../../org.tizen.guides/html/web/tizen/uifw/uifw_guide_w.htm">Web UI Framework (UIFW)</a></li>
- <li>Tutorials: <a href="../../../org.tizen.tutorials/html/web/tizen/uifw/uifw_tutorial_w.htm">Web UI Framework (UIFW)</a></li>
- <li>API Reference: <a href="../../../org.tizen.web.apireference/html/ui_fw_api/mobile/index.htm">Web UI Framework</a></li>
- </ul></td>
- </tr>
- </tbody>
- </table>
-
-<p>The following table lists the features provided by the <a href="../../../org.tizen.web.apireference/html/device_api/wearable/index.html">Wearable Web Device API Reference</a>.</p>
- <table border="1">
- <caption>
- Table: Device API features provided for wearable applications
- </caption>
- <colgroup>
- <col width="20%" />
- <col width="40%" />
- <col width="40%" />
- </colgroup>
- <tbody>
- <tr>
- <th>Feature</th>
- <th>Purpose</th>
- <th>Documentation</th>
- </tr>
- <tr>
- <td>Tizen</td>
- <td>This API contain classes and interfaces that provide a set of basic definitions and interfaces that are used in the Tizen Device API.
- <p>You can use filters and sorting modes for query methods, generic success and error event handlers, a generic error interface, and a simple coordinate interface for defining location information.</p></td>
- <td>
- <ul class="ul">
- <li>Guides: <a href="../../../org.tizen.guides/html/web/tizen/tizen/tizen_guide_w.htm">Tizen</a></li>
- <li>Tutorials: <a href="../../../org.tizen.tutorials/html/web/tizen/tizen/tizen_tutorials_w.htm">Tizen</a></li>
- <li>API Reference: <a href="../../../org.tizen.web.apireference/html/device_api/wearable/index.html#Tizen">Tizen</a></li>
- </ul></td>
- </tr>
- <tr>
- <td>Application</td>
- <td>These APIs contain classes and interfaces that enable you to manage alarm, application, and package features.
- <p>You can schedule an application to be run at a specific time, retrieve information about the applications installed or running on the device, and enable package management.</p></td>
- <td>
- <ul class="ul">
- <li>Guides: <a href="../../../org.tizen.guides/html/web/tizen/application/app_guide_w.htm">Application</a></li>
- <li>Tutorials: <a href="../../../org.tizen.tutorials/html/web/tizen/application/app_tutorials_w.htm">Application</a></li>
- <li>API Reference: <a href="../../../org.tizen.web.apireference/html/device_api/wearable/index.html#Application">Application</a></li>
- </ul></td>
- </tr>
- <tr>
- <td>Content</td>
- <td>These APIs contain classes and interfaces that enable you to manage content and download features.
- <p>You can search and manage multimedia content locally, download files from the Internet, and monitor the download progress and status.</p></td>
- <td>
- <ul class="ul">
- <li>Guides: <a href="../../../org.tizen.guides/html/web/tizen/content/content_guide_w.htm">Content</a></li>
- <li>Tutorials: <a href="../../../org.tizen.tutorials/html/web/tizen/content/content_tutorials_w.htm">Content</a></li>
- <li>API Reference: <a href="../../../org.tizen.web.apireference/html/device_api/wearable/index.html#Contents">Content</a></li>
- </ul></td>
- </tr>
- <tr>
- <td>Input/Output</td>
- <td>These APIs contain classes and interfaces that enable you to manage file system and message port features.
- <p>You can access specific parts of the device file system, and send and receive messages through message ports.</p></td>
- <td>
- <ul class="ul">
- <li>Guides: <a href="../../../org.tizen.guides/html/web/tizen/input_output/io_guide_w.htm">Input/Output</a></li>
- <li>Tutorials: <a href="../../../org.tizen.tutorials/html/web/tizen/input_output/io_tutorials_w.htm">Input/Output</a></li>
- <li>API Reference: <a href="../../../org.tizen.web.apireference/html/device_api/wearable/index.html#I/O">Input/Output</a></li>
- </ul></td>
- </tr>
- <tr>
- <td>Multimedia</td>
- <td>These APIs contain classes and interfaces that enable you to manage multimedia-related features.
- <p>You can change and monitor playback volume level, and react to dedicated multimedia key presses.</p></td>
- <td>
- <ul class="ul">
- <li>Guides: <a href="../../../org.tizen.guides/html/web/tizen/multimedia/multimedia_guide_w.htm">Multimedia</a></li>
- <li>Tutorials: <a href="../../../org.tizen.tutorials/html/web/tizen/multimedia/multimedia_tutorials_w.htm">Multimedia</a></li>
- <li>API Reference: <a href="../../../org.tizen.web.apireference/html/device_api/wearable/index.html#Multimedia">Multimedia</a></li>
- </ul></td>
- </tr>
- <tr>
- <td>System</td>
- <td>These APIs contain classes and interfaces that enable you to manage power, system information and setting, and time features.
- <p>You can access the state of the device power resource, device system information, and device wallpaper settings, and you can use locale-specific calendar features by retrieving date and time information. You can also manage time features.</p></td>
- <td>
- <ul class="ul">
- <li>Guides: <a href="../../../org.tizen.guides/html/web/tizen/system/system_guide_w.htm">System</a></li>
- <li>Tutorials: <a href="../../../org.tizen.tutorials/html/web/tizen/system/system_tutorials_w.htm">System</a></li>
- <li>API Reference: <a href="../../../org.tizen.web.apireference/html/device_api/wearable/index.html#System">System</a></li>
- </ul></td>
- </tr>
- <tr>
- <td>User Interface</td>
- <td>These APIs contain classes and interfaces that enable you to manage badge features.
- <p>You can manage and monitor badge numbers.</p></td>
- <td>
- <ul class="ul">
- <li>Guides: <a href="../../../org.tizen.guides/html/web/tizen/ui/ui_guide_w.htm">User Interface</a></li>
- <li>Tutorials: <a href="../../../org.tizen.tutorials/html/web/tizen/ui/ui_tutorials_w.htm">User Interface</a></li>
- <li>API Reference: <a href="../../../org.tizen.web.apireference/html/device_api/wearable/index.html#User Interface">User Interface</a></li>
- </ul></td>
- </tr>
- <tr>
- <td>Web UI Framework</td>
- <td>These APIs contain classes and interfaces that enable you to manage the Tizen Advanced UI (TAU) features.
- <p>You can create and manage various kinds of UI widgets.</p></td>
- <td>
- <ul class="ul">
- <li>Guides: <a href="../../../org.tizen.guides/html/web/tizen/uifw/uifw_guide_w.htm">Web UI Framework (UIFW)</a></li>
- <li>Tutorials: <a href="../../../org.tizen.tutorials/html/web/tizen/uifw/uifw_tutorial_w.htm">Web UI Framework (UIFW)</a></li>
- <li>API Reference: <a href="../../../org.tizen.web.apireference/html/ui_fw_api/wearable/index.htm">Web UI Framework</a></li>
- </ul></td>
- </tr>
- </tbody>
- </table>
-
-<p>The following table lists the features provided by the <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html" shape="rect">Mobile Web W3C/HTML5 and Supplementaries API Reference</a>.</p>
- <table border="1">
- <caption>
- Table: W3C/HTML5 and some supplementary API features provided for mobile applications
- </caption>
- <colgroup>
- <col width="20%" />
- <col width="40%" />
- <col width="40%" />
- </colgroup>
- <tbody>
- <tr>
- <th>Feature</th>
- <th>Purpose</th>
- <th>Documentation</th>
- </tr>
- <tr>
- <td>DOM, Forms and Styles</td>
- <td>These APIs enable you to create animations, specify the border and background styles of HTML elements, apply styles to HTML documents, specify the color and opacity of HTML elements, create flexible and multi-column layouts for Web applications, move, rotate, stretch, and scale elements, and add effects using the CSS3 properties. They also enable you to use CSS and JavaScript code effectively with HTML elements, implement Web forms for user input, define media features for specific output devices, select element nodes in the DOM tre, and store the information of the page that the user has viewed.</td>
- <td>
- <ul class="ul">
- <li>Guides: <a href="../../../org.tizen.guides/html/web/w3c/dom/dom_guide_w.htm">DOM, Forms and Styles</a></li>
- <li>Tutorials: <a href="../../../org.tizen.tutorials/html/web/w3c/dom/dom_tutorials_w.htm">DOM, Forms and Styles</a></li>
- <li>API Reference: <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#dom">DOM, Forms and Styles</a></li>
- </ul></td>
- </tr>
- <tr>
- <td>Device</td>
- <td>These APIs enable you to retrieve the battery status and detect changes in it, detect rotation and acceleration motions, manage screen orientation, implement and control various types of touch events, and implement different vibration patterns on a Tizen device.</td>
- <td>
- <ul class="ul">
- <li>Guides: <a href="../../../org.tizen.guides/html/web/w3c/device/device_guide_w.htm">Device</a></li>
- <li>Tutorials: <a href="../../../org.tizen.tutorials/html/web/w3c/device/device_tutorials_w.htm">Device</a></li>
- <li>API Reference: <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#device">Device</a></li>
- </ul></td>
- </tr>
- <tr>
- <td>Graphics</td>
- <td>These APIs enable you to create images, shapes, and text using the HTML5 canvas element and HTML canvas 2D context, and create and modify SVG elements in your application.</td>
- <td>
- <ul class="ul">
- <li>Guides: <a href="../../../org.tizen.guides/html/web/w3c/graphics/graphics_guide_w.htm">Graphics</a></li>
- <li>Tutorials: <a href="../../../org.tizen.tutorials/html/web/w3c/graphics/graphics_tutorials_w.htm">Graphics</a></li>
- <li>API Reference: <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#graphics">Graphics</a></li>
- </ul></td>
- </tr>
- <tr>
- <td>Media</td>
- <td>These APIs enable you to access a local device to generate a multimedia stream, access the media capture capabilities based on their type, control multimedia playback and check supported media formats, and play audio content.</td>
- <td>
- <ul class="ul">
- <li>Guides: <a href="../../../org.tizen.guides/html/web/w3c/media/media_guide_w.htm">Media</a></li>
- <li>Tutorials: <a href="../../../org.tizen.tutorials/html/web/w3c/media/media_tutorials_w.htm">Media</a></li>
- <li>API Reference: <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#media">Media</a></li>
- </ul></td>
- </tr>
- <tr>
- <td>Communication</td>
- <td>These APIs enable you to send and receive data between Web sites and through a message channel, exchange push data with the server, connect to the socket server to send and receive data, and use cross-origin resource sharing (CORS) to request and send data of various content types.</td>
- <td>
- <ul class="ul">
- <li>Guides: <a href="../../../org.tizen.guides/html/web/w3c/communication/comm_guide_w.htm">Communication</a></li>
- <li>Tutorials: <a href="../../../org.tizen.tutorials/html/web/w3c/communication/comm_tutorials_w.htm">Communication</a></li>
- <li>API Reference: <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#communication">Communication</a></li>
- </ul></td>
- </tr>
- <tr>
- <td>Storage</td>
- <td>These APIs enable you to retrieve file content and information, slice data objects, manage sandboxed file systems, activate project resource caching and manage the cached resources, create an object store and save data in it, create databases and access them using SQL statements, and use session storage and local storage.</td>
- <td>
- <ul class="ul">
- <li>Guides: <a href="../../../org.tizen.guides/html/web/w3c/storage/storage_guide_w.htm">Storage</a></li>
- <li>Tutorials: <a href="../../../org.tizen.tutorials/html/web/w3c/storage/storage_tutorials_w.htm">Storage</a></li>
- <li>API Reference: <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#storage">Storage</a></li>
- </ul></td>
- </tr>
- <tr>
- <td>Security</td>
- <td>These APIs enable you to allow or block specific HTML elements on a Web page, and make cross-origin requests to resources, allowing a client-side Web application to obtain data retrieved from another origin.</td>
- <td>
- <ul class="ul">
- <li>Guides: <a href="../../../org.tizen.guides/html/web/w3c/security/security_guide_w.htm">Security</a></li>
- <li>Tutorials: <a href="../../../org.tizen.tutorials/html/web/w3c/security/security_tutorials_w.htm">Security</a></li>
- <li>API Reference: <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#security">Security</a></li>
- </ul></td>
- </tr>
- <tr>
- <td>UI</td>
- <td>These APIs enable you to copy content and paste it in an editable area, create and manage draggable elements, and implement drag events.</td>
- <td>
- <ul class="ul">
- <li>Guides: <a href="../../../org.tizen.guides/html/web/w3c/ui/ui_guide_w.htm">UI</a></li>
- <li>Tutorials: <a href="../../../org.tizen.tutorials/html/web/w3c/ui/ui_tutorials_w.htm">UI</a></li>
- <li>API Reference: <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#ui">UI</a></li>
- </ul></td>
- </tr>
- <tr>
- <td>Performance and Optimization</td>
- <td>These APIs enable you to retrieve the visibility status of a Web document and detect changes in it, control animation frame rate, and create and manage HTML5 Web Workers to run an independent JavaScript thread on the background.</td>
- <td>
- <ul class="ul">
- <li>Guides: <a href="../../../org.tizen.guides/html/web/w3c/perf_opt/performance_guide_w.htm">Performance and Optimization</a></li>
- <li>Tutorials: <a href="../../../org.tizen.tutorials/html/web/w3c/perf_opt/performance_tutorials_w.htm">Performance and Optimization</a></li>
- <li>API Reference: <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#performance">Performance and Optimization</a></li>
- </ul></td>
- </tr>
- <tr>
- <td>Location</td>
- <td>These APIs enable you to retrieve and update position information.</td>
- <td>
- <ul class="ul">
- <li>Guides: <a href="../../../org.tizen.guides/html/web/w3c/location/location_guide_w.htm">Location</a></li>
- <li>Tutorials: <a href="../../../org.tizen.tutorials/html/web/w3c/location/location_tutorials_w.htm">Location</a></li>
- <li>API Reference: <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#location">Location</a></li>
- </ul></td>
- </tr>
- <tr>
- <td>Supplementary</td>
- <td>These APIs enable you to manage some supplementary features, such as displaying an element on full screen, accessing binary data in JavaScript, and using the WebGL graphics library to create 3D visual elements.</td>
- <td>
- <ul class="ul">
- <li>Guides: <a href="../../../org.tizen.guides/html/web/w3c/supplement/supplement_guide_w.htm">Supplementary Features</a></li>
- <li>Tutorials: <a href="../../../org.tizen.tutorials/html/web/w3c/supplement/supplement_tutorials_w.htm">Supplementary Features</a></li>
- <li>API Reference: <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#Supplementary">Supplementary</a></li>
- </ul></td>
- </tr>
- </tbody>
- </table>
-
-
-<p>The following table lists the features provided by the <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html">Wearable Web W3C/HTML5 and Supplementaries API Reference</a>.</p>
- <table border="1">
- <caption>
- Table: W3C/HTML5 and some supplementary API features provided for wearable applications
- </caption>
- <colgroup>
- <col width="20%" />
- <col width="40%" />
- <col width="40%" />
- </colgroup>
- <tbody>
- <tr>
- <th>Feature</th>
- <th>Purpose</th>
- <th>Documentation</th>
- </tr>
- <tr>
- <td>DOM, Forms and Styles</td>
- <td>These APIs enable you to create animations, specify the border and background styles of HTML elements, apply styles to HTML documents, specify the color and opacity of HTML elements, create flexible layouts for Web applications, move, rotate, stretch, and scale elements, and add effects using the CSS3 properties. They also enable you to use CSS and JavaScript code effectively with HTML elements, implement Web forms for user input, define media features for specific output devices, select element nodes in the DOM tree, and store the information of the page that the user has viewed.</td>
- <td>
- <ul class="ul">
- <li>Guides: <a href="../../../org.tizen.guides/html/web/w3c/dom/dom_guide_w.htm">DOM, Forms and Styles</a></li>
- <li>Tutorials: <a href="../../../org.tizen.tutorials/html/web/w3c/dom/dom_tutorials_w.htm">DOM, Forms and Styles</a></li>
- <li>API Reference: <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#dom">DOM, Forms and Styles</a></li>
- </ul></td>
- </tr>
- <tr>
- <td>Device</td>
- <td>These APIs enable you to retrieve the battery status and detect changes in it, detect rotation and acceleration motions, implement and control various types of touch events, and implement different vibration patterns on a Tizen wearable device.</td>
- <td>
- <ul class="ul">
- <li>Guides: <a href="../../../org.tizen.guides/html/web/w3c/device/device_guide_w.htm">Device</a></li>
- <li>Tutorials: <a href="../../../org.tizen.tutorials/html/web/w3c/device/device_tutorials_w.htm">Device</a></li>
- <li>API Reference: <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#device">Device</a></li>
- </ul></td>
- </tr>
- <tr>
- <td>Graphics</td>
- <td>These APIs enable you to create images, shapes, and text using the HTML5 canvas element and HTML canvas 2D context.</td>
- <td>
- <ul class="ul">
- <li>Guides: <a href="../../../org.tizen.guides/html/web/w3c/graphics/graphics_guide_w.htm">Graphics</a></li>
- <li>Tutorials: <a href="../../../org.tizen.tutorials/html/web/w3c/graphics/graphics_tutorials_w.htm">Graphics</a></li>
- <li>API Reference: <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#graphics">Graphics</a></li>
- </ul></td>
- </tr>
- <tr>
- <td>Media</td>
- <td>These APIs enable you to access a local device to generate a multimedia stream, control multimedia playback and check supported media formats, and play audio content.</td>
- <td>
- <ul class="ul">
- <li>Guides: <a href="../../../org.tizen.guides/html/web/w3c/media/media_guide_w.htm">Media</a></li>
- <li>Tutorials: <a href="../../../org.tizen.tutorials/html/web/w3c/media/media_tutorials_w.htm">Media</a></li>
- <li>API Reference: <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#media">Media</a></li>
- </ul></td>
- </tr>
- <tr>
- <td>Communication</td>
- <td>These APIs enable you to send and receive data between Web sites and through a message channel, and connect to the socket server to send and receive data.</td>
- <td>
- <ul class="ul">
- <li>Guides: <a href="../../../org.tizen.guides/html/web/w3c/communication/comm_guide_w.htm">Communication</a></li>
- <li>Tutorials: <a href="../../../org.tizen.tutorials/html/web/w3c/communication/comm_tutorials_w.htm">Communication</a></li>
- <li>API Reference: <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#communication">Communication</a></li>
- </ul></td>
- </tr>
- <tr>
- <td>Storage</td>
- <td>These APIs enable you to retrieve file content and information, create an object store and save data in it, and use session storage and local storage.</td>
- <td>
- <ul class="ul">
- <li>Guides: <a href="../../../org.tizen.guides/html/web/w3c/storage/storage_guide_w.htm">Storage</a></li>
- <li>Tutorials: <a href="../../../org.tizen.tutorials/html/web/w3c/storage/storage_tutorials_w.htm">Storage</a></li>
- <li>API Reference: <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#storage">Storage</a></li>
- </ul></td>
- </tr>
- <tr>
- <td>Security</td>
- <td>These APIs enable you to allow or block specific HTML elements on a Web page.</td>
- <td>
- <ul class="ul">
- <li>Guides: <a href="../../../org.tizen.guides/html/web/w3c/security/security_guide_w.htm">Security</a></li>
- <li>Tutorials: <a href="../../../org.tizen.tutorials/html/web/w3c/security/security_tutorials_w.htm">Security</a></li>
- <li>API Reference: <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#security">Security</a></li>
- </ul></td>
- </tr>
- <tr>
- <td>Performance and Optimization</td>
- <td>These APIs enable you to retrieve the visibility status of a Web document and detect changes in it, control animation frame rate, and create and manage HTML5 Web Workers to run an independent JavaScript thread on the background.</td>
- <td>
- <ul class="ul">
- <li>Guides: <a href="../../../org.tizen.guides/html/web/w3c/perf_opt/performance_guide_w.htm">Performance and Optimization</a></li>
- <li>Tutorials: <a href="../../../org.tizen.tutorials/html/web/w3c/perf_opt/performance_tutorials_w.htm">Performance and Optimization</a></li>
- <li>API Reference: <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#performance">Performance and Optimization</a></li>
- </ul></td>
- </tr>
- <tr>
- <td>Location</td>
- <td>These APIs enable you to retrieve and update position information.</td>
- <td>
- <ul class="ul">
- <li>Guides: <a href="../../../org.tizen.guides/html/web/w3c/location/location_guide_w.htm">Location</a></li>
- <li>Tutorials: <a href="../../../org.tizen.tutorials/html/web/w3c/location/location_tutorials_w.htm">Location</a></li>
- <li>API Reference: <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#location">Location</a></li>
- </ul></td>
- </tr>
- <tr>
- <td>Supplementary</td>
- <td>These APIs enable you to manage some supplementary features, such as managing the device camera, accessing binary data in JavaScript, and using the WebGL graphics library to create 3D visual elements.</td>
- <td>
- <ul class="ul">
- <li>Guides: <a href="../../../org.tizen.guides/html/web/w3c/supplement/supplement_guide_w.htm">Supplementary Features</a></li>
- <li>Tutorials: <a href="../../../org.tizen.tutorials/html/web/w3c/supplement/supplement_tutorials_w.htm">Supplementary Features</a></li>
- <li>API Reference: <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#Supplementary">Supplementary</a></li>
- </ul></td>
- </tr>
- </tbody>
- </table>
- </div>
- </li>
- <li>
-
- <div class="devicespec-tit">
- <h2 id="napi" name="napi" class="items-tit-h2"><img alt="Native application" src="../images/n_fold.png"/> Tizen APIs for Native Applications</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
-
-<p>You can develop native applications using the native API modules. You can create diverse applications with a variety of features, and design versatile applications and intriguing user interfaces with text and graphics while taking advantage of many device functionalities, such as sensors and call operations. In addition, you can, for example, manage content and media files, use network and social services, and provide messaging and embedded Web browsing functionality.</p>
-
-<p>The Tizen platform also provides a special kind of native application model, which consists of 1 UI native application and 1 or more native service applications.</p>
-
-<p>The following figure illustrates the native API layout. The native API specification consists of multiple API modules that represent the versatility and wide variety of features that you can implement in your native application. Each API module represents a set of logically similar submodule APIs which can be grouped into the same category. This structure was designed to make it easier for you to narrow down and find the specific methods that you require to implement a feature in your native application.</p>
-
-<p>The following figure shows 2 types of submodules - Tizen native modules and open source modules. The integration of open source modules in the native API structure allows you to add additional features by using well-known open source libraries. This is particularly advantageous for developers who are familiar with certain libraries because they can quickly add features and use previously written code in certain cases.</p>
-
-<p class="figure" id="layout">Figure: Native API layout</p>
-<p style="text-align:center;"> <img alt="Native API layout" src="../images/native_api_layout.png" /></p>
-
-<p>The following table describes each API module and the functionality of all the submodule APIs within that module. The table also acts as a reference source for when you are planning a new feature for your application and need a way to efficiently compare different API modules to decide which APIs to use. </p>
-
-<table border="1" style="width: 100%">
- <caption>Table: Mobile native API modules</caption>
- <tbody>
- <tr>
- <th>API module</th>
- <th>Description</th>
- <th>API submodule</th>
- <th>Functionality</th>
- </tr>
- <tr>
- <td rowspan="10"><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__APPLICATION__FRAMEWORK.html">Application Framework</a></td>
- <td rowspan="10">The Application Framework API contains submodule APIs for application development. The submodule APIs enable application life-cycle management, usage of functionality that is exported by other applications, and access to a user's application preferences.
- <p>Documentation:</p>
- <ul class="ul">
- <li>Guides: <a href="../../../org.tizen.guides/html/native/app/app_guide_n.htm">Application Framework</a></li>
- <li>Tutorials: <a href="../../../org.tizen.tutorials/html/native/app_framework/app_framework_tutorials_n.htm">Application Framework</a></li></ul>
- </td>
- <td><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__APPLICATION__MODULE.html">Application</a></td>
- <td>Manages the application's main event loop, state change events, and basic system events, and gets information about the application. It is also used to launch other applications.
- </td>
- </tr>
- <tr>
- <td><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__SERVICE__APP__MODULE.html">Service Application</a></td>
- <td>Handles Tizen <a href="../../../org.tizen.guides/html/native/app/service_app_n.htm">service application</a> (non-UI application) state changes and system events. It is also used to start and exit the main event loop of service applications.</td>
- </tr>
- <tr>
- <td><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__APPLICATION__MANAGER__MODULE.html">Application Manager</a></td>
- <td>Gets information, such as the application ID and path to the shared data directory, of the current application and other installed or running applications.</td>
- </tr>
- <tr>
- <td><a href="../../../org.tizen.native.mobile.apireference/group__BADGE__MODULE.html">Badge</a></td>
- <td>Creates and removes <a href="../../../org.tizen.guides/html/native/app/badge_n.htm">badges</a> on the application's home screen icon. A badge is an image displayed on the application icon, which informs the user about notifications and events. This submodule can also be used to set and get the badge value and visibility.</td>
- </tr>
- <tr>
- <td><a href="../../../org.tizen.native.mobile.apireference/group__CORE__LIB__BUNDLE__MODULE.html">Bundle</a></td>
- <td>A bundle is a string-based dictionary abstract data type (ADT). A dictionary is an ordered or unordered list of key-element pairs. Keys are used to locate elements in the list. This submodule can be used to create and manage a dictionary.</td>
- </tr>
- <tr>
- <td><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__DATA__CONTROL__MODULE.html">Data Control</a></td>
- <td>Exchanges data between applications by allowing an application to query the public database of another application that has opted to be a data provider.</td>
- </tr>
- <tr>
- <td><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__MESSAGE__PORT__MODULE.html">Message Port</a></td>
- <td>Sends and receives small messages between applications without interference from other applications and processes. Each message is a bundle.</td>
- </tr>
- <tr>
- <td><a href="../../../org.tizen.native.mobile.apireference/group__NOTIFICATION__MODULE.html">Notification</a></td>
- <td>Creates, inserts, and updates notifications so that applications can relay information to users. Visuals, sounds, or vibrations can be used as notifications. </td>
- </tr>
- <tr>
- <td><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__PACKAGE__MANAGER__MODULE.html">Package Manager</a></td>
- <td>Stores and receives information related to packages installed on the device. This is information can be, for example, the package name, path to the icon image, or the application version. It can also be used to check whether 2 package certificates match. If they match, they have been created by the same developer and can share resources securely. </td>
- </tr>
- <tr>
- <td><a href="../../../org.tizen.native.mobile.apireference/group__SHORTCUT__MODULE.html">Shortcut</a></td>
- <td>Adds application shortcuts to the device home screen, which is the main landing screen of the device.
-</td>
- </tr>
- <tr>
- <td rowspan="8"><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__FRAMEWORK.html">Base</a></td>
- <td rowspan="8">The Base API contains submodule APIs for internationalization support and contains various open source libraries.
- <p>Documentation:</p>
- <ul class="ul">
- <li>Guides: <a href="../../../org.tizen.guides/html/native/base/base_guide_n.htm">Base</a></li>
- <li>Tutorials: <a href="../../../org.tizen.tutorials/html/native/base/base_tutorials_n.htm">Base</a></li>
- </ul></td>
- <td><a href="../../../org.tizen.native.mobile.apireference/group__OPENSRC__STL__GCC__FRAMEWORK.html">C++ Standard Library</a></td>
- <td>Standard C++ library.</td>
- </tr>
- <tr>
- <td><a href="../../../org.tizen.native.mobile.apireference/group__OPENSRC__EGLIBC__FRAMEWORK.html">EGlibc</a></td>
- <td>Standard C library.</td>
- </tr>
- <tr>
- <td><a href="../../../org.tizen.native.mobile.apireference/group__OPENSRC__GLIB__FRAMEWORK.html">Glib</a></td>
- <td>Provides low-level libraries and advanced data structures, such as linked lists and hash tables, for use in application development.</td>
- </tr>
- <tr>
- <td><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__MODULE.html">i18n</a></td>
- <td> Provides internationalization (i18n) support, such as flexibly generating date formats and numbers, depending on the locale setting of the device.</td>
- </tr>
- <tr>
- <td><a href="../../../org.tizen.native.mobile.apireference/group__OPENSRC__LIBXML__FRAMEWORK.html">LibXML</a></td>
- <td>This library can be used to parse XML documents such as the <a href="../app_model/application_model_n.htm#appmanifest">Application Manifest</a>.</td>
- </tr>
- <tr>
- <td><a href="../../../org.tizen.native.mobile.apireference/group__OPENSRC__MINIZIP__FRAMEWORK.html">Minizip</a></td>
- <td>Provides a library to process files in the <span style="font-family: Courier New,Courier,monospace">.zip</span> format. It can be used to zip, unzip and compress files.</td>
- </tr>
- <tr>
- <td><a href="../../../org.tizen.native.mobile.apireference/group__OPENSRC__OPENMP__FRAMEWORK.html">OpenMP</a></td>
- <td>Supports shared memory multiprocessing. This can be used for complex tasks on multicore processors. </td>
- </tr>
- <tr>
- <td><a href="../../../org.tizen.native.mobile.apireference/group__OPENSRC__SQLITE__FRAMEWORK.html">Sqlite</a></td>
- <td>Implements a lightweight SQL relational database. This is widely used for embedded client or local storage.</td>
- </tr>
- <tr>
- <td rowspan="3"><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__CONTENT__FRAMEWORK.html">Content</a></td>
- <td rowspan="3">The Content API module contains submodule APIs for managing the most common device media data types, such as image, audio, and video files. It provides operations to search for content, search for content information stored on the device, create playlists, download content from servers through an HTTP connection, and access the EXIF information of an image file.
- <p>Documentation:</p>
- <ul class="ul">
- <li>Guides: <a href="../../../org.tizen.guides/html/native/content/content_guide_n.htm">Content</a></li>
- <li>Tutorials: <a href="../../../org.tizen.tutorials/html/native/content/content_tutorials_n.htm">Content</a></li></ul></td>
- <td><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__WEB__DOWNLOAD__MODULE.html">Download</a></td>
- <td>Creates and manages one or more download requests. Content is downloaded from servers through an HTTP connection.</td>
- </tr>
- <tr>
- <td><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__CONTENT__MIME__TYPE__MODULE.html">MIME Type</a></td>
- <td>Maps MIME types to file extensions and vice versa. For example, the <span style="font-family: Courier New,Courier,monospace;">.jpeg</span> file extension is mapped to the <span style="font-family: Courier New,Courier,monospace;">image/jpeg</span> MIME type, which is required when using other API modules, such as the AppControl API in the Application submodule API, because it operates with MIME types.</td>
- </tr>
- <tr>
- <td><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CONTENT__MODULE.html">Media Content</a></td>
- <td>Connects and disconnects from the media content service. This connection is required to insert, update and remove media file information in the media content database. Common media data types, such as image, audio, and video can be managed through the database. Other queries, such as searching for content and content information and accessing EXIF information from image files, are also possible.</td>
- </tr>
- <tr>
- <td rowspan="2"><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__CONTEXT__FRAMEWORK.html">Context</a></td>
- <td rowspan="2">The Context API module contains submodule APIs to detect user information such as when a user is running with a device and device information such as gestures when a device is tilted.
- <p>Documentation:</p>
- <ul class="ul">
- <li>Guides: <a href="../../../org.tizen.guides/html/native/context/context_guide_n.htm">Context</a></li>
- <li>Tutorials: <a href="../../../org.tizen.tutorials/html/native/context/context_tutorials_n.htm">Context</a></li> </ul></td>
- <td><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__CONTEXT__ACTIVITY__MODULE.html">Activity Recognition</a></td>
- <td>Detects user activities, such as walking, running, and being in a moving vehicle with a device.</td>
- </tr>
- <tr>
- <td><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__CONTEXT__GESTURE__MODULE.html">Gesture Recognition</a></td>
- <td>Detects user gestures on devices, such as tilt, snap, and double-tap.</td>
- </tr>
- <tr>
- <td rowspan="1"><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__LOCATION__FRAMEWORK.html">Location</a></td>
- <td rowspan="1">The Location API module allows the geographical position of a device to be determined for use with location-based services.
- <p>Documentation:</p>
- <ul class="ul">
- <li>Guides: <a href="../../../org.tizen.guides/html/native/location/location_guide_n.htm">Location</a></li>
- <li>Tutorials: <a href="../../../org.tizen.tutorials/html/native/location/location_tutorials_n.htm">Location</a></li></ul></td>
- <td><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__LOCATION__MANAGER__MODULE.html">Location Manager</a></td>
- <td>Acquires information about the geographical location of the device. It also allows the receiving of notifications about position changes, velocity changes, and when a given geographical area is left.</td>
- </tr>
- <tr>
- <td rowspan="3"><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__MESSAGING__FRAMEWORK.html">Messaging</a></td>
- <td rowspan="3">The Messaging API module contains submodule APIs which grant access to the messaging capabilities, such as SMS, MMS and email, of the device.
- <p>Documentation:</p>
- <ul class="ul">
- <li>Guides: <a href="../../../org.tizen.guides/html/native/messaging/messaging_guide_n.htm">Messaging</a></li>
- <li>Tutorials: <a href="../../../org.tizen.tutorials/html/native/messaging/messaging_tutorials_n.htm">Messaging</a></li></ul>
-
-</td>
- <td><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__MESSAGING__EMAIL__MODULE.html">Email</a></td>
- <td>Allows composing, sending, and receiving of email messages.</td>
- </tr>
- <tr>
- <td><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__MESSAGING__MESSAGES__MODULE.html">Messages</a></td>
- <td>Allows composing, sending, and receiving of SMS, MMS, and WAP push messages.</td>
- </tr>
- <tr>
- <td><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__MESSAGING__PUSH__PUBLIC__MODULE.html">Push</a></td>
- <td>Allows receiving of push notifications from a push server.</td>
- </tr>
-
- <tr>
- <td rowspan="15"><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__FRAMEWORK.html">Multimedia</a></td>
- <td rowspan="15">The Multimedia API module contains submodule APIs for easily integrating an application with audio, image, and video files. It can also be used for image editing.
-<p>Documentation:</p>
- <ul class="ul">
- <li>Guides: <a href="../../../org.tizen.guides/html/native/multimedia/multimedia_guide_n.htm">Multimedia</a></li>
- <li>Tutorials: <a href="../../../org.tizen.tutorials/html/native/multimedia/multimedia_tutorials_n.htm">Multimedia</a></li></ul></td>
- <td><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__AUDIO__IO__MODULE.html">Audio I/O</a></td>
- <td>Manages the system audio devices by granting access to the hardware layer of the sound card. This API must be used for tasks that require raw audio data buffers in PCM format.</td>
- </tr>
- <tr>
- <td><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html">Camera</a></td>
- <td>Accesses the camera preview to display photo previews, focuses images, and captures images.</td>
- </tr>
- <tr>
- <td><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__IMAGE__UTIL__MODULE.html">Image Util</a></td>
- <td>Encodes and decodes JPEG images. It also provides tools, such as crop, resize, and rotate, to transform images.</td>
- </tr>
- <tr>
- <td><a href="../../../org.tizen.native.mobile.apireference/group__OPENSRC__LIBEXIF__FRAMEWORK.html">libEXIF</a></td>
- <td>EXIF is an image file format that extends existing formats, such as JPEG and TIFF. Many Tizen devices have a camera and use this format, and libEXIF can be used to read and write EXIF metainformation to and from image files.</td>
- </tr>
- <tr>
- <td><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CODEC__MODULE.html">Media Codec</a></td>
- <td>Provides interfaces for encoding and decoding audio and video data, such as AAC audio or MPEG-4 AVC video.</td>
- </tr>
- <tr>
- <td><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__TOOL__MODULE.html">Media Tool</a></td>
- <td>Handles audio and video packet buffers. These buffers are utilized by the other Multimedia submodule APIs.</td>
- </tr>
- <tr>
- <td><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__METADATA__EXTRACTOR__MODULE.html">Metadata Extractor</a></td>
- <td>Extracts metadata information from an input media file.</td>
- </tr>
- <tr>
- <td><a href="../../../org.tizen.native.mobile.apireference/group__OPENSRC__OPENAL__FRAMEWORK.html">OpenAL</a></td>
- <td>Efficiently renders multichannel 3D audio.</td>
- </tr>
- <tr>
- <td><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__PLAYER__MODULE.html">Player</a></td>
- <td>Provides functions for media playback and can be used to control media playback attributes.</td>
- </tr>
- <tr>
- <td><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__RADIO__MODULE.html">Radio</a></td>
- <td>Supports radio usage. This submodule API can be used for tasks, such as starting and stopping the radio and scanning for radio channels.</td>
- </tr>
- <tr>
- <td><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__RECORDER__MODULE.html">Recorder</a></td>
- <td>Controls the recording of multimedia content. Recording process attributes, such as setting the recording filename and file format, can also be configured with this API submodule.</td>
- </tr>
- <tr>
- <td><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__MODULE.html">Sound Manager</a></td>
- <td>Provides functions to get and set sound parameters, such as output sound volume. Session policy, such as the handling of sound session interrupts, can also be configured with this API submodule.</td>
- </tr>
- <tr>
- <td><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__TONE__PLAYER__MODULE.html">Tone Player</a></td>
- <td>Plays and stops tones.</td>
- </tr>
- <tr>
- <td><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__VIDEO__UTIL__MODULE.html">Video Util</a></td>
- <td>Transcodes or converts media files from one encoding to another. This API supports certain video codecs, audio codecs, and file formats.</td>
- </tr>
- <tr>
- <td><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__WAV__PLAYER__MODULE.html">WAV Player</a></td>
- <td>Plays and stops Waveform Audio File (WAV) format files.</td>
- </tr>
-
- <tr>
- <td rowspan="6"><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__FRAMEWORK.html">Network</a></td>
- <td rowspan="6">The Network API module contains submodule APIs, which can be used for data communication. It is responsible for managing connections, maintaining IP addresses, and connecting to the system through Bluetooth, Hypertext Transfer Protocol (HTTP), Near Field Communication (NFC), Sockets, and Wi-Fi. It also provides methods for retrieving information about a specific host from the Internet Domain Name System (DNS).
- <p>Documentation:</p>
- <ul class="ul">
- <li>Guides: <a href="../../../org.tizen.guides/html/native/network/network_guide_n.htm">Network</a></li>
- <li>Tutorials: <a href="../../../org.tizen.tutorials/html/native/network/network_tutorials_n.htm">Network</a></li></ul>
-</td>
- <td><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__BLUETOOTH__MODULE.html">Bluetooth</a></td>
- <td>Manages Bluetooth devices. This involves launching the Bluetooth adapter and discovering, connecting, and bonding with other Bluetooth devices. </td>
- </tr>
- <tr>
- <td><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__CONNECTION__MODULE.html">Connection</a></td>
- <td>Gets network connection information, such as IP address, proxy information, gateway information, connection state, and data transfer statistics.</td>
- </tr>
- <tr>
- <td><a href="../../../org.tizen.native.mobile.apireference/group__OPENSRC__CURL__FRAMEWORK.html">Curl</a></td>
- <td>A client-side URL data transfer library supporting http, https, ftp, file URIs, and many other protocols. Allows applications to perform URL-related activities without a Web browser.</td>
- </tr>
- <tr>
- <td><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__NFC__MODULE.html">NFC</a></td>
- <td>Allows management, such as registering and deregistering event listeners, of short-range wireless near field communication (NFC). This submodule API must also be used to read, write, receive, and send NFC messages.</td>
- </tr>
- <tr>
- <td><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__WIFI__MODULE.html">Wi-Fi</a></td>
- <td>Manages Wi-Fi connections and monitors the state of Wi-Fi connections.</td>
- </tr>
- <tr>
- <td><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__WIFI__DIRECT__MODULE.html">Wi-Fi Direct</a></td>
- <td>Manages the settings of Wi-Fi Direct™. This submodule API also provides functions to connect and disconnect remote devices that use Wi-Fi Direct™.</td>
- </tr>
- <tr>
- <td rowspan="3"><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__SECURITY__FRAMEWORK.html">Security</a></td>
- <td rowspan="3">The Security API module contains submodule APIs which provide basic cryptographic functions, various utility functions through the OpenSSL open source library, and a secure password-protected repository for keys, certificates, and sensitive data.
- <p>Documentation:</p>
- <ul class="ul">
- <li>Guides: <a href="../../../org.tizen.guides/html/native/security/security_guide_n.htm">Security</a></li>
- <li>Tutorials: <a href="../../../org.tizen.tutorials/html/native/security/security_tutorials_n.htm">Security</a></li> </ul></td>
- <td><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__KEY__MANAGER__MODULE.html">Key Manager</a></td>
- <td>Provides functions to store keys, certificates, and sensitive data related to users and their password-protected applications in a secure repository. It also provides cryptographic operations to prevent key value names from being revealed to clients.</td>
- </tr>
- <tr>
- <td><a href="../../../org.tizen.native.mobile.apireference/group__OPENSRC__OPENSSL__FRAMEWORK.html">OpenSSL</a></td>
- <td>An open source library that provides basic cryptographic functions and various utility functions.</td>
- </tr>
- <tr>
- <td><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__SECURITY__FRAMEWORK__PRIVILEGE__INFO__MODULE.html">Privilege Info</a></td>
- <td>Retrieves and displays privilege information. This can be used to show a user the privileges that an application contains when they are downloading it onto their device. This is so that they are aware of the resources which the application may access. </td>
- </tr>
- <tr>
- <td rowspan="3"><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__FRAMEWORK.html">Social</a></td>
- <td rowspan="3">The Social API module contains submodule APIs to manage personal data, such as contacts and calendars on a device.
- <p>Documentation:</p>
- <ul class="ul">
- <li>Guides: <a href="../../../org.tizen.guides/html/native/social/social_guide_n.htm">Social</a></li>
- <li>Tutorials: <a href="../../../org.tizen.tutorials/html/native/social/social_tutorials_n.htm">Social</a></li> </ul></td>
- <td><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__ACCOUNT__MANAGER__MODULE.html">Account Manager</a></td>
- <td>An account is a collection of information representing the user of a specific account provider. This API submodule creates and manages accounts, retrieves account information, and receives account change notifications.</td>
- </tr>
- <tr>
- <td><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CALENDAR__SVC__MODULE.html">Calendar</a></td>
- <td>Manages calendars, including events and tasks. It also stores and queries calendar information.</td>
- </tr>
- <tr>
- <td><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__MODULE.html">Contacts</a></td>
- <td>Manages phone contact information, such as address books, persons, and phone logs.</td>
- </tr>
- <tr>
- <td rowspan="8"><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__FRAMEWORK.html">System</a></td>
- <td rowspan="8">The System API module contains submodule APIs for system management.
- <p>Documentation:</p>
- <ul class="ul">
- <li>Guides: <a href="../../../org.tizen.guides/html/native/system/system_guide_n.htm">System</a></li>
- <li>Tutorials: <a href="../../../org.tizen.tutorials/html/native/system/system_tutorials_n.htm">System</a></li> </ul>
-</td>
- <td><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__MODULE.html">Device</a></td>
- <td>Controls devices and monitors their status. For example, this submodule API can be used to control and monitor the device battery, display, and LED.</td>
- </tr>
-<tr>
- <td><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__MEDIA__KEY__MODULE.html">Media key</a></td>
- <td>Provides methods to handle media keys from external devices that are connected to the Tizen device, such as the volume control buttons on a headset.</td>
- </tr>
- <tr>
- <td><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__RUNTIME__INFO__MODULE.html">Runtime information</a></td>
- <td>Obtains runtime information of a mobile device. For example, this submodule API can obtain information about the device's GPS.</td>
- </tr>
- <tr>
- <td><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__SENSOR__MODULE.html">Sensor</a></td>
- <td>Starts and stops sensors and receives sensor data.</td>
- </tr>
- <tr>
- <td><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__STORAGE__MODULE.html">Storage</a></td>
- <td>Obtains storage information, such as root directory, storage type (internal or external), storage status, and total available space size.</td>
- </tr>
- <tr>
- <td><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__SYSTEM__INFO__MODULE.html">System Information</a></td>
- <td>Obtains information about the device, such as the platform and API version, device model, supported device features, and screen dimensions.</td>
- </tr>
- <tr>
- <td><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__SYSTEM__SETTINGS__MODULE.html">System Settings</a></td>
- <td>Manages system settings, such as the lock screen settings.</td>
- </tr>
- <tr>
- <td><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DLOG.html">dlog</a></td>
- <td>Sends log output and filters log messages from the dlog logging service.</td>
- </tr>
-
- <tr>
- <td rowspan="1"><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__FRAMEWORK.html">Telephony</a></td>
- <td rowspan="1">The Telephony API module contains a submodule API to enable an application to access the telephony capabilities of the device, such as the call facility (call information and status), the network query services, and the SIM module.
- <p>Documentation:</p>
- <ul class="ul">
- <li>Guides: <a href="../../../org.tizen.guides/html/native/telephony/telephony_guide_n.htm">Telephony</a></li>
- <li>Tutorials: <a href="../../../org.tizen.tutorials/html/native/telephony/telephony_tutorials_n.htm">Telephony</a></li></ul></td>
- <td><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION.html">Telephony Information</a></td>
- <td>Obtains call, network, and SIM information.</td>
- </tr>
-<tr>
- <td rowspan="6"><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__UI__FRAMEWORK.html">UI</a></td>
- <td rowspan="6">The UI API module contains submodule APIs and open source libraries for 2D and 3D graphics and text.
- <p>Documentation:</p>
- <ul class="ul">
- <li>Guides: <a href="../../../org.tizen.guides/html/native/graphics/graphics_guide_n.htm">Graphics</a> and <a href="../../../org.tizen.guides/html/native/ui/ui_guide_n.htm">UI</a></li>
- <li>Tutorials: <a href="../../../org.tizen.tutorials/html/native/graphics/graphics_tutorials_n.htm">Graphics</a> and <a href="../../../org.tizen.tutorials/html/native/ui/ui_tutorials_n.htm">UI</a></li></ul></td>
- <td><a href="../../../org.tizen.native.mobile.apireference/group__OPENSRC__CAIRO__FRAMEWORK.html">Cairo</a></td>
- <td>A library for 2D vector graphics drawing. Vector graphics are advantageous because they have small file sizes and can be scaled to any size without any loss of image quality.</td>
- </tr>
-<tr>
-<td><a href="../../../org.tizen.native.mobile.apireference/group__EFL__Group.html">EFL</a></td>
- <td>EFL is a collection of libraries that are independent and can be built on top of each other to provide useful features that complement the existing environment.</td>
-</tr>
- <tr>
- <td><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__EFL__UTIL__MODULE.html">EFL UTIL</a></td>
- <td>Gets and sets the priority order of notification windows.</td>
- </tr>
-<tr>
- <td><a href="../../../org.tizen.native.mobile.apireference/group__OPENSRC__FONTCONFIG__FRAMEWORK.html">Fontconfig</a> and <a href="../../../org.tizen.native.mobile.apireference/group__OPENSRC__FREETYPE__FRAMEWORK.html">Freetype</a></td>
- <td>A text rendering library and font-handling library to let applications find a font or closely matching font.</td>
- </tr>
- <tr>
- <td><a href="../../../org.tizen.native.mobile.apireference/group__OPENSRC__OPENGL__ES__FRAMEWORK.html">OpenGL ES 1.1 and 2.0</a></td>
- <td>Library for rendering 3D and 2D graphics in embedded systems.</td>
- </tr>
- <tr>
- <td><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__UI__TBM__SURFACE__MODULE.html">TBM Surface</a></td>
- <td>The Tizen Buffer Manager (TBM) surface provides functions for the graphics buffer.</td>
- </tr>
-
- <tr>
- <td rowspan="2"><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__FRAMEWORK.html">UIX</a></td>
- <td rowspan="2">The UIX API module contains submodule APIs for managing sound data, such as voice commands.
- <p>Documentation:</p>
- <ul class="ul">
- <li>Guides: <a href="../../../org.tizen.guides/html/native/uix/uix_guide_n.htm">UIX</a></li>
- <li>Tutorials: <a href="../../../org.tizen.tutorials/html/native/uix/uix_tutorials_n.htm">UIX</a></li></ul></td>
- <td><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__STT__MODULE.html">STT</a></td>
- <td>This API submodule provides functions to recognize speech.</td>
- </tr>
- <tr>
- <td><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__TTS__MODULE.html">TTS</a></td>
- <td>This API submodule provides functions for synthesizing voice from text and playing synthesized sound data.</td>
- </tr>
- <tr>
- <td rowspan="3"><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__WEB__FRAMEWORK.html">Web</a></td>
- <td rowspan="3">The Web API module contains submodule APIs for browsing the Internet, tracking browsing history, downloading Web content, and manipulating JavaScript Object Notation (JSON) documents.
- <p>Documentation:</p>
- <ul class="ul">
- <li>Guides: <a href="../../../org.tizen.guides/html/native/web/web_guide_n.htm">Web</a></li>
- <li>Tutorials: <a href="../../../org.tizen.tutorials/html/native/web/web_tutorials_n.htm">Web</a></li></ul></td>
- <td><a href="../../../org.tizen.native.mobile.apireference/group__OPENSRC__JSONGLIB__FRAMEWORK.html">Json-Glib</a></td>
- <td>This library allows reading and parsing of JavaScript Object Notation (JSON) documents.</td>
- </tr>
- <tr>
- <td><a href="../../../org.tizen.native.mobile.apireference/group__OPENSRC__LIB__OAUTH__FRAMEK.html">libOAuth</a></td>
- <td>Library for using an open standard for secure authorization. This library enables users to securely log into an account on an application by using their logon credentials from another secondary account that they may have with another account provider or application. </td>
- </tr>
-<tr>
- <td><a href="../../../org.tizen.native.mobile.apireference/group__WEBVIEW.html">WebView</a></td>
- <td>Displays and controls Web pages. This submodule API contains interfaces for browsing, tracking browsing history, and downloading Web content.</td>
-</tr>
- </tbody>
- </table>
- </div>
- </li>
- </ul>
-
- </div>
-
-</div>
-
-<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>
-
<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
</div>
<div id="container"><div id="contents"><div class="content">
<h1><a href="cover_page.htm">Getting Started with Tizen</a></h1>
- <h2><a href="preface/preface.htm">Preface</a></h2>
-
- <h2><a href="first_app/first_app.htm">Creating Your First Tizen Application</a></h2>
-
- <h2><a href="process/app_dev_process.htm">Application Development Process</a></h2>
-
+ <h2><a href="preface.htm">Preface</a></h2>
+ <h2><a href="web/cover_page_w.htm">Web Application</a></h2>
+
<ul>
- <li><a href="process/app_dev_process_w.htm">Web Application</a>
+ <li><a href="web/first_app/first_app_w.htm">Creating Your First Tizen Application</a></li>
+ <li><a href="web/process/app_dev_process_w.htm">Application Development Process</a>
<ul>
- <li><a href="process/creating_app_project_w.htm">Creating the Application Project</a></li>
- <li><a href="process/setting_properties_w.htm">Setting Project Properties</a></li>
- <li><a href="process/designing_app_ui_w.htm">Creating Application UIs with UI Builder</a></li>
- <li><a href="process/coding_app_w.htm">Coding Applications</a></li>
- <li><a href="process/run_debug_app_w.htm">Running and Debugging Applications</a></li>
+ <li><a href="web/process/creating_app_project_w.htm">Creating the Application Project</a></li>
+ <li><a href="web/process/setting_properties_w.htm">Setting Project Properties</a></li>
+ <li><a href="web/process/coding_app_w.htm">Coding Applications</a></li>
+ <li><a href="web/process/run_debug_app_w.htm">Running and Debugging Applications</a></li>
</ul>
</li>
- <li><a href="process/app_dev_process_n.htm">Native Application</a>
+ <li><a href="web/app_model/application_model_w.htm">Tizen Application Model</a></li>
+ <li><a href="web/details/details_w.htm">Understanding Tizen Programming</a>
<ul>
- <li><a href="process/setting_properties_n.htm">Setting Project Properties</a></li>
- <li><a href="process/designing_app_ui_n.htm">Creating Application UIs with UI Builder</a></li>
- <li><a href="process/building_app_n.htm">Building Applications</a></li>
- <li><a href="process/running_app_n.htm">Running Applications</a></li>
- <li><a href="process/debugging_app_n.htm">Debugging Applications</a></li>
- <li><a href="process/performance_n.htm">Optimizing Application Performance</a></li>
+ <li><a href="web/details/tizen_apis_w.htm">Tizen APIs</a></li>
+ <li><a href="web/details/sec_privileges_w.htm">Security and API Privileges</a></li>
+ <li><a href="web/details/app_filtering_w.htm">Application Filtering</a></li>
+ <li><a href="web/details/web_runtime_w.htm">Web Runtime</a></li>
+ <li><a href="web/details/event_handling_w.htm">Event Handling</a></li>
</ul>
</li>
</ul>
-
- <h2><a href="app_model/application_model.htm">Tizen Application Model</a></h2>
+
+ <h2><a href="native/cover_page_n.htm">Native Application</a></h2>
+
<ul>
- <li><a href="app_model/application_model_w.htm">Web Application</a></li>
- <li><a href="app_model/application_model_n.htm">Native Application</a></li>
- </ul>
-
- <h2><a href="details/details.htm">Understanding Tizen Programming</a></h2>
- <ul>
- <li><a href="details/tizen_apis.htm">Tizen APIs</a></li>
- <li><a href="details/sec_privileges.htm">Security and API Privileges</a></li>
- <li><a href="details/app_filtering.htm">Application Filtering</a></li>
- <li><a href="details/web_runtime_w.htm">Web Runtime</a></li>
- <li><a href="details/key_events.htm">Key Event Handling</a></li>
- <li><a href="details/io_overview.htm">File System Directory Hierarchy</a></li>
- <li><a href="details/error_handling.htm">Error Handling</a></li>
+ <li><a href="native/first_app/first_app_n.htm">Creating Your First Tizen Application</a></li>
+ <li><a href="native/process/app_dev_process_n.htm">Application Development Process</a>
+ <ul>
+ <li><a href="native/process/setting_properties_n.htm">Setting Project Properties</a></li>
+ <li><a href="native/process/designing_app_ui_n.htm">Creating Application UIs with UI Builder</a></li>
+ <li><a href="native/process/building_app_n.htm">Building Applications</a></li>
+ <li><a href="native/process/running_app_n.htm">Running Applications</a></li>
+ <li><a href="native/process/debugging_app_n.htm">Debugging Applications</a></li>
+ <li><a href="native/process/performance_n.htm">Optimizing Application Performance</a></li>
+ </ul>
+ </li>
+ <li><a href="native/app_model/application_model_n.htm">Tizen Application Model</a></li>
+ <li><a href="native/details/details_n.htm">Understanding Tizen Programming</a>
+ <ul>
+ <li><a href="native/details/tizen_apis_n.htm">Tizen APIs</a></li>
+ <li><a href="native/details/sec_privileges_n.htm">Security and API Privileges</a></li>
+ <li><a href="native/details/app_filtering_n.htm">Application Filtering</a></li>
+ <li><a href="native/details/event_handling_n.htm">Event Handling</a></li>
+ <li><a href="native/details/io_overview_n.htm">File System Directory Hierarchy</a></li>
+ <li><a href="native/details/error_handling_n.htm">Error Handling</a></li>
+ </ul>
+ </li>
</ul>
- <h2><a href="details/tizen_websites.htm">Tizen Web Sites</a></h2>
+
+ <h2><a href="tizen_websites.htm">Tizen Web Sites</a></h2>
<script type="text/javascript" src="scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="scripts/showhide.js"></script>
<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>
+ <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>Tizen Native Application Model</title>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a href="../details/details.htm">Understanding Tizen Programming</a></li>
+ <li><a href="../details/details_n.htm">Understanding Tizen Programming</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Tizen Native Application Model</h1>
-<p>The Tizen native application model handles application life-cycle and system events. Tizen native application life-cycle is handled by the <a href="../../../org.tizen.native.mobile.apireference/group__CAPI__APPLICATION__MODULE.html">Application</a> API. It provides functions to manage the main event loop, the application state change events, and basic system events.</p>
+<p>The Tizen native application model handles application life-cycle and system events. Tizen native application life-cycle is handled by the Application API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APPLICATION__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__APPLICATION__MODULE.html">wearable</a> applications). It provides functions to manage the main event loop, the application state change events, and basic system events.</p>
<p>Tizen supports both UI applications (which have a graphical user interface) and service applications (which have no graphical user interface). The UI and service applications can be packaged together, if necessary; however, a combined application package must contain only 1 UI application, while it can have several service applications. </p>
<p>Applications in the same package follow the same installation life-cycle, which is handled by the application package manager. Each application in the package follows its own application life-cycle. Each application (UI application or service application) in an application package can be identified by its own ID.</p>
<p>The following figure shows the UI and service application life-cycle.</p>
<p class="figure">Figure: UI and service application life-cycle</p>
- <p><img src="../images/multiple_apps.png" alt="UI and service application life-cycle" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
+ <p align="center"><img src="../../images/multiple_apps.png" alt="UI and service application life-cycle" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
-<p>A Tizen native application is similar to a conventional Linux application, with some additional features optimized for mobile devices.
+<p>A Tizen native application is similar to a conventional Linux application, with some additional features optimized for mobile and wearable devices.
These devices have constraints, such as relatively small screen sizes and lack of system resources compared to a larger system.</p>
<p>For example, for power management reasons, well-designed applications reduce resource usage when they detect that their display window is covered by another application window. State change events make the detection possible.</p>
<ul>
<li><p>A new application is launched based on a request from your application.</p></li>
- <li><p>The user requests to go to Home screen.</p></li>
+ <li><p>The user requests to go to the home screen.</p></li>
<li><p>A system event (such as an incoming phone call) occurs and causes a resident application with a higher priority to become active and temporarily hide your application.</p></li>
<li><p>An alarm is triggered for another application, which becomes the top-most window and hides your application.</p> </li>
</ul>
<p>Since the service application has no UI, sit also has no pause state.</p>
<p>Application state changes are managed by the underlying framework.
- For more information about application state transitions, see <a href="../../../org.tizen.guides/html/native/app/application_n.htm#state_trans">Managing Application States and Transitions</a>.</p>
+ For more information about application state transitions, see <a href="../../../../org.tizen.guides/html/native/app/application_n.htm#state_trans">Managing Application States and Transitions</a>.</p>
<h2 id="start" name="start">Starting the Tizen Native Application</h2>
-<p>An application can be launched by the user from the Launcher or by another application. Either way, the Application Framework starts the application by creating a new process and calling the application entry point. Like in a conventional Linux application, the application main function is the entry point. For more information about launching native applications, see <a href="../../../org.tizen.guides/html/native/app/application_n.htm#app_controls">Launching Applications</a>.</p>
+<p>An application can be launched by the user from the Launcher or by another application. Either way, the Application Framework starts the application by creating a new process and calling the application entry point. Like in a conventional Linux application, the application main function is the entry point. For more information about launching native applications, see <a href="../../../../org.tizen.guides/html/native/app/application_n.htm#app_controls">Launching Applications</a>.</p>
<h2 id="packageID" name="packageID">Package ID and Application ID</h2>
<p>The following figure shows how to use the package and application ID.</p>
<p class="figure">Figure: Package ID and application ID</p>
- <p><img src="../images/package_id.png" alt="Package ID and application ID" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
+ <p align="center"><img src="../../images/package_id.png" alt="Package ID and application ID" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
<h2 id="appdirectory" name="appdirectory">Application Directory Policy</h2>
<p>The installed packages have a user ID, a group ID, permissions, and a smack label.</p>
<p class="figure">Figure: Permissions</p>
- <p><img src="../images/permissions.png" alt="Permissions" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
+ <p align="center"><img src="../../images/permissions.png" alt="Permissions" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
<p>The following table shows the details of files and directories.</p>
<p class="figure">Figure: Signature</p>
- <p><img src="../images/signature.png" alt="Signature" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
+ <p align="center"><img src="../../images/signature.png" alt="Signature" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
<h2 id="installer" name="installer">Installer and SMACK</h2>
<p>The following figure describes how the application installer works.</p>
<p class="figure">Figure: Installer</p>
- <p><img src="../images/installer.png" alt="Installer" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
+ <p align="center"><img src="../../images/installer.png" alt="Installer" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
<p>The installer applies smack according to the privileges that are specified in the <span style="font-family: Courier New,Courier,monospace;">tizen-manifest.xml</span> file.</p>
<p>An application can only access the resources that are allowed by the privileges. The privileges are used in Tizen Store to show the permissions and receive user consent.</p>
<p>You can use shell commands to install, uninstall, update, and launch applications.</p>
<p class="figure">Figure: IDE interactions</p>
- <p><img src="../images/ide_interactions.png" alt="IDE interactions" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
+ <p align="center"><img src="../../images/ide_interactions.png" alt="IDE interactions" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
-<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../scripts/showhide.js"></script>
+<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>
+<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>
<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>Application Development Process</title>
+ <title>Introduction to Native Applications</title>
</head>
-<body onload="prettyPrint()" style="overflow: auto;">
+<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
-<h1>Application Development Process</h1>
+<div id="toc-navigation">
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+ <div id="profile">
+ <p><img alt="Mobile native" src="../images/mn_icon.png"/> <img alt="Wearable native" src="../images/wn_icon.png"/></p>
+ </div>
+
+<h1>Introduction to Native Applications</h1>
+
+
+<p>The introduction to native applications documentation provides overall information you need to become familiar with native-specific Tizen programming and application model:</p>
+
+<ul>
+
+<li><a href="first_app/first_app_n.htm">Creating Your First Tizen Application</a>
+<p>Demonstrates how you can create a simple HelloWorld application - thus helping you to get more familiar with the Tizen application development process and using the Tizen SDK.</p></li>
+
+<li><a href="process/app_dev_process_n.htm">Application Development Process</a>
+<p>Teaches you how to create a Tizen application from the initial application planning stage to the end stages where you are ready to run and package your application.</p></li>
+
+<li><a href="app_model/application_model_n.htm">Tizen Application Model</a>
+<p>Provides an introduction to the Tizen application life-cycle and package contents.</p></li>
+
+<li><a href="details/details_n.htm">Understanding Tizen Programming</a>
+<p>Introduces the Tizen platform, its architecture, and some useful programming concepts you need to take into account when designing Tizen applications.</p>
+</li>
+
+</ul>
-<p>Click the application type you want:</p>
-<p><a href="app_dev_process_w.htm"><img alt="Web Application" src="../images/w_division.png"/></a> <a href="app_dev_process_n.htm"><img alt="Native Application" src="../images/n_division.png"/></a></p>
-
<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
<div id="footer">
<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
<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>
+ <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>Application Filtering</title>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/> <img alt="Mobile native" src="../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a href="#web">Feature-based Filtering for Web Applications</a></li>
- <li><a href="#native">Feature Filtering for Native Applications</a></li>
+ <li><a href="#filter_n">Feature-based Filtering</a></li>
+ <li><a href="#profile_n">Profile-based Filtering</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Application Filtering</h1>
-<div class="cont"><div class="static-cont">
-
-
- <!-- Show / Hide all links -->
- <div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
- <!-- Folds -->
- <ul class="devicespecifications">
-<li>
- <div class="devicespec-tit">
- <h2 id="web" name="web" class="items-tit-h2"><img alt="Web application" src="../images/w_fold.png"/> Feature Filtering for Web Applications</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
<p>The Tizen platform provides a wide range of features across a variety of hardware and software components. Among the features, there are some that can be selectively supported by the Tizen device manufacturer. For application stores to correctly select your application for installation on an appropriate device, the feature and profile information must be correctly declared in your application.</p>
- <h3 id="filter_w" name="filter_w">Feature-based Filtering</h3>
+ <h2 id="filter_n" name="filter_n">Feature-based Filtering</h2>
<p>Some features can be selectively supported by the Tizen device manufacturer. To prevent problems when the user is trying to run your application on a device that does not support all the features your application is using, do one of the following:</p>
-<ul class="ul">
+<ul>
<li>When the application is running, check whether the device supports the needed features. If not, the application can use other features, which are supported by the device, as a workaround.
-<p>For example, if an application wants to use location information, it can check the device capability by using the <span style="font-family: Courier New,Courier,monospace">getCapability()</span> method of the <span style="font-family: Courier New,Courier,monospace">SystemInfo</span> interface (in <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfo">mobile</a> and <a href="../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html#SystemInfo">wearable</a> applications). If the device supports GPS, the application uses GPS information, and if the device supports WPS only, the application uses WPS information instead of GPS.</p>
+<p>For example, if an application wants to use location information, it can check the device capability by using the <span style="font-family: Courier New,Courier,monospace">system_info_get_*()</span> method of the System Information API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__SYSTEM__INFO__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__SYSTEM__INFO__MODULE.html">wearable</a> applications). If the device supports GPS, the application uses GPS information, and if the device supports WPS only, the application uses WPS information instead of GPS.</p>
</li>
<li>Use feature-based filtering to prevent your application from being shown in the application list on the Tizen Store, if the user's device does not support all the features of your application. This way you can prevent the application from being installed on an unsupportive device in the first place.
<p>Be careful when defining the feature list for feature-based filtering. The feature list can dramatically reduce your chances of getting the application downloaded by reducing the number of devices which can support the application.</p></li>
</ul>
-<p>If the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file of the application package includes a feature list, the Tizen Store compares the capabilities of the device with the required feature conditions of the application. The store only lists the applications whose conditions match the capabilities of the device, and thus prevents unsupported applications from being installed.</p>
+<p>If the <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> file of the application package includes a feature list, the Tizen Store compares the capabilities of the device with the required feature conditions of the application. The store only lists the applications whose conditions match the capabilities of the device, and thus prevents unsupported applications from being installed.</p>
<p class="figure">Figure: Feature-based filtering</p>
- <p style="text-align:center;"><img align="center" alt="Feature-based filtering" src="../images/app_filtering_basic_flow.png" /></p>
+ <p align="center"><img align="center" alt="Feature-based filtering" src="../../images/app_filtering_basic_flow.png" /></p>
<p>When multiple features are defined in the feature list for feature-based filtering, the Tizen Store creates the filtering condition for all using the "AND" operation. For example, if there are <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc</span> and <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth</span> features in the feature list of the application package, only a device that has both those features can show the application on the Tizen Store application list for downloading.</p>
-<h4 id="screen_size" name="screen_size">Screen Size Feature</h4>
+<h3 id="screen_size" name="screen_size">Screen Size Feature</h3>
<p>The screen size feature is the only exception to the normal feature handling process described above. When the screen size is defined in the feature list, the Tizen Store creates the filtering condition with the "OR" operation. For example, if the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.480.800</span> and <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.720.1280</span> features are defined in your application feature list, a device that supports one or the other of those features can show the application on the Tizen Store application list.</p>
- <p>If you do not specify a proper screen size in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file, your application can be rejected from the Tizen store.</p>
- <p>The following tables list the available screen size features. </p>
+ <p>If you do not specify a proper screen size in the <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> file, your application can be rejected from the Tizen store.</p>
+ <p>The following table lists the available screen size features. </p>
<table>
- <caption>Table: Available screen size features for mobile applications</caption>
+ <caption>Table: Available screen size features</caption>
<tbody>
<tr>
<th>Feature key</th>
</tbody>
</table>
- <table>
- <caption>Table: Available screen size features for wearable applications</caption>
- <tbody>
- <tr>
- <th>Feature key</th>
- <th>Description</th>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal</span></td>
- <td>Specify this key, if the application supports all possible current and future resolutions on the normal screen size.
- <p>You cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously. If you do, only the most specific resolution key is considered and the less specific resolution keys are ignored. For example, if you specify both <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal</span> and <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.480</span> keys, only the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.480</span> key is applied.</p> <p>If no screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p>
- </td>
- </tr>
-
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.320</span></td>
- <td>Specify this key, if the application supports the 320 x 320 resolution on the normal screen size.
- <p>You can specify multiple <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.*</span> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously.</p><p>If no screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p>
- </td>
- </tr>
-
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.360.480</span></td>
- <td>Specify this key, if the application supports the 360 x 480 resolution on the normal screen size.
- <p>You can specify multiple <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.*</span> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously.</p><p>If no screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p></td>
- </tr>
-
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.all</span></td>
- <td>Specify this key, if the application supports all possible current and future screen sizes and all possible current and future resolutions per screen size.
- <p>You cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously. If you do, only the most specific resolution key is considered and the less specific resolution keys are ignored. For example, if you specify both <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.all</span> and <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.480</span> keys, only the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.480</span> key is applied.</p><p>If no screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p></td>
- </tr>
- </tbody>
- </table>
-
-<h4 id="hierarchy" name="hierarchy">Feature Hierarchy</h4>
+<h3 id="hierarchy" name="hierarchy">Feature Hierarchy</h3>
<p>The feature keys have a hierarchy. For example, consider the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location</span>, <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.gps</span>, and <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.wps</span> features:</p>
-<ul class="ul">
+<ul>
<li>If the feature list includes the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.gps</span> feature, only a device which has the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.gps</span> feature can show the application on the Tizen Store application list.</li>
<li>If the feature list includes the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location</span> feature, a device which has the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.gps</span>, <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.wps</span>, or <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location</span> feature can show the application on the Tizen Store application list.
<p>This means that the Tizen Store considers the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location</span> feature as the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.gps OR http://tizen.org/feature/location.wps</span> feature. (If the feature list includes the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.gps</span> and <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.wps</span> features together, only a device which supports both those features can show the application.)</p></li></ul>
-<h4 id="adding" name="adding">Adding the Feature List</h4>
+<h3 id="adding" name="adding">Adding the Feature List</h3>
- <p>To enable filtering for your Web application, add the feature list for the application <span style="font-family: Courier New,Courier,monospace">config.xml</span> file:</p>
+<p>To enable filtering for your native application, add the feature list for the application <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> file:</p>
<ol>
- <li>To open the widget configuration editor in the IDE, double-click the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file in the <strong>Project Explorer</strong> view. </li>
- <li>In the <strong>Feature</strong> tab, click <strong>Add</strong>.</li>
- <li>Select a feature from the list.</li>
- <li>Click <strong>Save</strong>.</li>
+ <li>To open the manifest editor in the IDE, double-click the <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> file in the <strong>Project Explorer</strong> view. </li>
+<li>In the <strong>Features</strong> tab, click <strong>Add</strong> and set the mandatory features for the application package. <p>The manifest file (<span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span>) is updated automatically.</p>
+</li>
+ <li>Upload and publish the application package on the Tizen Store.</li>
+ <li>If a Tizen-powered device requests applications, the store displays a list containing only applications compatible with the user's device.</li>
</ol>
-
- <p>After setting the feature information with the widget configuration editor, you can see the added code in the <strong>Source</strong> tab.</p>
-
- <p> The following example shows the setting in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file code:</p>
- <pre class="prettyprint">
-<tizen:feature name="http://tizen.org/feature/network.nfc"/>
-</pre>
-
-<p>The following tables show the available requirements for Tizen Web application package.</p>
-<table border="1" id="features">
-<caption>Table: Available requirements for mobile Web Device APIs</caption>
+<p>The following tables show the available requirements for an application package. If you want to check which features are necessary for using a specific API, see the related feature in the native <a href="../../../../org.tizen.native.mobile.apireference/index.html">API Reference</a>.</p>
+ <table border="1">
+<caption>
+ Table: Available mobile native requirements
+ </caption>
<tbody>
<tr>
- <th>Feature key</th>
- <th>Description</th>
+<th>Feature key</th>
+ <th>Description</th>
</tr>
-
<tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/datasync</span></td>
- <td>Specify this key, if the application requires the DataSync feature.</td>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/camera</span></td>
+ <td>Specify this key, if the application requires any kind of a camera.</td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/fmradio</span></td>
- <td>Specify this key, if the application requires an FM radio.</td>
- </tr>
- <tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/humanactivitymonitor</span></td>
- <td>Specify this key, if the application requires any of the Human Activity Monitor features.</td>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/camera.back</span></td>
+ <td>Specify this key, if the application requires a back-facing camera.</td>
</tr>
-<tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.batch</span></td>
- <td>Specify this key, if the application requires the location tracking with a position batch information feature for using the <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/humanactivitymonitor.html">Human Activity Monitor</a> (GPS Type) API.</td>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/camera.back.flash</span></td>
+ <td>Specify this key, if the application requires a back-facing camera with a flash.</td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth</span></td>
- <td>Specify this key, if the application requires the Bluetooth feature.</td>
- </tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/camera.front</span></td>
+ <td>Specify this key, if the application requires a front-facing camera.</td>
+ </tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.audio.media</span></td>
- <td>Specify this key, if the application requires the Bluetooth Advanced Audio feature (A2DP).</td>
- </tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/camera.front.flash</span></td>
+ <td>Specify this key, if the application requires a front-facing camera with a flash.</td>
+ </tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.health</span></td>
- <td>Specify this key, if the application requires the Bluetooth Health feature (HDP).</td>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/fmradio</span></td>
+ <td>Specify this key, if the application requires an FM radio.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/graphics.acceleration</span></td>
+ <td>Specify this key, if the application requires hardware acceleration for both 2D and 3D graphics.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/input.keyboard</span></td>
+ <td>Specify this key, if the application requires a built-in physical keyboard.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/input.keyboard.layout</span></td>
+ <td>Specify this key with a specific keyboard layout (<span style="font-family: Courier New,Courier,monospace">string</span> type), if the application requires a built-in physical keyboard supporting the specified keyboard layout.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/led</span></td>
+ <td>Specify this key, if the application requires a LED.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location</span></td>
+ <td>Specify this key, if the application requires any location positioning features.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.gps</span></td>
+ <td>Specify this key, if the application requires the Global Positioning System (GPS) feature.</td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc</span></td>
- <td>Specify this key, if the application requires the use of any API that, in turn, requires the Near Field Communication (NFC) feature.</td>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.wps</span></td>
+ <td>Specify this key, if the application requires the Wi-Fi-based Positioning System (WPS) feature.</td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc.card_emulation</span></td>
- <td>Specify this key, if the application requires the NFC card emulation feature.</td>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/microphone</span></td>
+ <td>Specify this key, if the application requires a microphone.</td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.push</span></td>
- <td>Specify this key, if the application requires the network-based push service.</td>
- </tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/multimedia.transcoder</span></td>
+ <td>Specify this key, if the application requires the multimedia transcoder feature.</td>
+ </tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.secure_element</span></td>
- <td>Specify this key, if the application requires the secure element feature.</td>
- </tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/multi_point_touch.pinch_zoom</span></td>
+ <td>Specify this key, if the application requires a pinch-zoom gesture feature.</td>
+ </tr>
+ <tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/multi_point_touch.point_count</span></td>
+ <td>Specify this key with a specific number (<span style="font-family: Courier New,Courier,monospace">int</span> type), if the application requires the minimum of specified number of simultaneous touches in a multi-point touch.</td>
+ </tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.telephony</span></td>
- <td>Specify this key, if the application requires the use of any API that, in turn, requires the telephony feature.</td>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth</span></td>
+ <td>Specify this key, if the application requires the Bluetooth feature.</td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.telephony.mms</span></td>
- <td>Specify this key, if the application requires the MMS feature.</td>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.audio.call</span></td>
+ <td>Specify this key, if the application requires the Bluetooth Handsfree feature (HFP).</td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.wifi</span></td>
- <td>Specify this key, if the application requires the use of any API that, in turn, requires the Wi-Fi feature.</td>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.audio.media</span></td>
+ <td>Specify this key, if the application requires the Bluetooth Advanced Audio feature (A2DP).</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.health</span></td>
+ <td>Specify this key, if the application requires the Bluetooth Health feature (HDP).</td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.barometer</span></td>
- <td>Specify this key, if the application requires a barometer sensor for using the <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/sensor.html">Sensor</a> (Pressure Type) API.</td>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.hid</span></td>
+ <td>Specify this key, if the application requires the Bluetooth Human Input Device feature (HID).</td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.heart_rate_monitor</span></td>
- <td>Specify this key, if the application requires a heart rate monitor sensor for using the Human Activity Monitor (HRM Type) API.</td>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.le</span></td>
+ <td>Specify this key, if the application requires the Bluetooth LE feature.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.opp</span></td>
+ <td>Specify this key, if the application requires the Bluetooth Object Push feature (OPP).</td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.magnetometer</span></td>
- <td>Specify this key, if the application requires a magnetic sensor for using the Sensor (MAGNETIC Type) API.</td>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc</span></td>
+ <td>Specify this key, if the application requires the use of any API that, in turn, requires the Near Field Communication (NFC) feature.</td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.pedometer</span></td>
- <td>Specify this key, if the application requires a pedometer sensor for using the Human Activity Monitor (PEDOMETER Type) API.</td>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc.card_emulation</span></td>
+ <td>Specify this key, if the application requires the NFC card emulation feature.</td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.proximity</span></td>
- <td>Specify this key, if the application requires a proximity sensor for using the Sensor (PROXIMITY Type) API.</td>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc.card_emulation.hce</span></td>
+ <td>Specify this key, if the application requires the NFC host-based card emulation feature.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc.reserved_push</span></td>
+ <td>Specify this key, if the application requires the NFC reserved push feature.</td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.ultraviolet</span></td>
- <td>Specify this key, if the application requires a ultraviolet sensor for using the Sensor (ULTRAVIOLET Type) API.</td>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.push</span></td>
+ <td>Specify this key, if the application requires the network-based push service.</td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.wrist_up</span></td>
- <td>Specify this key, if the application requires a wrist up sensor for using the Human Activity Monitor (WRIST_UP Type) API.</td>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.secure_element</span></td>
+ <td>Specify this key, if the application requires the secure element feature.</td>
</tr>
-</tbody>
-</table>
-
-<table border="1" id="features">
-<caption>Table: Available requirements for mobile Web W3C/HTML5 APIs</caption>
- <tbody>
<tr>
- <th>Feature key</th>
- <th>Description</th>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.secure_element.ese</span></td>
+ <td>Specify this key, if the application requires the ESE secure element feature.</td>
</tr>
-
<tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/camera</span></td>
- <td>Specify this key, if the application requires any kind of a camera for using the <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#getusermedia">getUserMedia</a> or <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#mediacapture">HTML Media Capture</a> API.</td>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.secure_element.uicc</span></td>
+ <td>Specify this key, if the application requires the UICC secure element feature.</td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.gps</span></td>
- <td>Specify this key, if the application requires the Global Positioning System (GPS) feature for using the <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#geo">GeoLocation</a> API.</td>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.telephony</span></td>
+ <td>Specify this key, if the application requires the use of any API that, in turn, requires the telephony feature.</td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/microphone</span></td>
- <td>Specify this key, if the application requires a microphone for using the getUserMedia or HTML Media Capture API.</td>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.telephony.mms</span></td>
+ <td>Specify this key, if the application requires the MMS feature.</td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.internet</span></td>
- <td>Specify this key, if the application requires Internet access for using the <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#cache">HTML5 Application caches</a>, <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#websocket">WebSocket API</a>, <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#httpreq">XMLHttpRequest Level 2</a>, <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#serversent">Server-Sent Events</a>, or <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#cross">Cross-Origin Resource Sharing</a> API.</td>
- </tr>
-<tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.accelerometer</span></td>
- <td>Specify this key, if the application requires an acceleration sensor for using the <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#orientation">DeviceOrientation Event Specification</a> API.</td>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.tethering</span></td>
+ <td>Specify this key, if the application requires any kind of tethering feature.</td>
+</tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.tethering.bluetooth</span></td>
+ <td>Specify this key, if the application requires the tethering over Bluetooth feature.</td>
+</tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.tethering.usb</span></td>
+ <td>Specify this key, if the application requires the tethering over USB connection feature.</td>
+</tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.tethering.wifi</span></td>
+ <td>Specify this key, if the application requires the tethering over Wi-Fi feature.</td>
+</tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.wifi</span></td>
+ <td>Specify this key, if the application requires the use of any API that, in turn, requires the Wi-Fi feature.</td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.gyroscope</span></td>
- <td>Specify this key, if the application requires a gyro sensor for using the DeviceOrientation Event API.</td>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.wifi.direct</span></td>
+ <td>Specify this key, if the application requires the Wi-Fi Direct™ feature.</td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.magnetometer</span></td>
- <td>Specify this key, if the application requires a magnetic sensor for using the DeviceOrientation Event Specification or <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#sceenori">Screen Orientation</a> API.</td>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.wifi.direct.display</span></td>
+ <td>Specify this key, if the application requires the Wi-Fi Direct™ display feature.</td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/speech.synthesis</span></td>
- <td>Specify this key, if the application requires the speech synthesis (text-to-speech, TTS) feature for using the <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#webspeech">Web Speech</a> API.</td>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.wifi.direct.service_discovery</span></td>
+ <td>Specify this key, if the application requires the Wi-Fi Direct™ service discovery feature.</td>
</tr>
-</tbody>
-</table>
-
- <table border="1" id="features">
-<caption>Table: Available requirements for wearable Web Device APIs</caption>
- <tbody>
<tr>
- <th>Feature key</th>
- <th>Description</th>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles.texture_format.3dc</span></td>
+ <td>Specify this key, if the application requires the 3DC texture format for OpenGL® ES.</td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/download</span></td>
- <td>Specify this key, if the application requires the network connection to access the Internet for using the <a href="../../../org.tizen.web.apireference/html/device_api/wearable/tizen/download.html">Download</a> API.</td>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles.texture_format.atc</span></td>
+ <td>Specify this key, if the application requires the ATC texture format for OpenGL® ES.</td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/humanactivitymonitor</span></td>
- <td><p>Specify this key, if the application requires the <a href="../../../org.tizen.web.apireference/html/device_api/wearable/tizen/humanactivitymonitor.html">Human Activity Monitor</a> API.</p>
- <p>If the key is declared in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file, the application can be installed on the device with any of the Human Activity Monitor features:</p>
- <ul class="ul">
- <li>HRM: <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.heart_rate_monitor</span></li>
- <li>PEDOMETER: <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.pedometer</span></li>
- <li>WRIST_UP: <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.wrist_up</span></li>
- <li>GPS: <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.batch</span></li>
- </ul>
- </td>
- </tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles.texture_format.etc</span></td>
+ <td>Specify this key, if the application requires the ETC texture format for OpenGL® ES.</td>
+ </tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.batch</span></td>
- <td>Specify this key, if the application requires the location tracking with a position batch information feature.</td>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles.texture_format.ptc</span></td>
+ <td>Specify this key, if the application requires the PTC texture format for OpenGL® ES.</td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.audio.media</span></td>
- <td>Specify this key, if the application requires the Bluetooth Advanced Audio feature (A2DP) feature for using the <a href="../../../org.tizen.web.apireference/html/device_api/wearable/tizen/mediakey.html">Media Key</a> API.</td>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles.texture_format.pvrtc</span></td>
+ <td>Specify this key, if the application requires the PVRTC texture format for OpenGL® ES.</td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.telephony</span></td>
- <td>Specify this key, if the application requires the use of any API that, in turn, requires the telephony feature.</td>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles.texture_format.utc</span></td>
+ <td>Specify this key, if the application requires the UTC texture format for OpenGL® ES.</td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.wifi</span></td>
- <td>Specify this key, if the application requires the use of any API that, in turn, requires the Wi-Fi feature (for example, the Download API).</td>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles.version.1_1</span></td>
+ <td>Specify this key, if the application requires OpenGL® ES version 1.1 at minimum.
+ <p>You can specify at most 1 openGL® ES version. If you specify multiple versions, only the highest one is considered.</p>
+</td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.barometer</span></td>
- <td>Specify this key, if the application requires a barometer sensor.</td>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/opengles.version.2_0</span></td>
+ <td>Specify this key, if the application requires OpenGL® ES version 2.0.
+ <p>You can specify at most 1 openGL® ES version. If you specify multiple versions, only the highest one is considered.</p>
+</td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.heart_rate_monitor</span></td>
- <td>Specify this key, if the application requires a heart rate monitor sensor.</td>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.core.cpu.arch.armv7</span></td>
+ <td>Specify this key, if the application requires the ARMv7 CPU architecture.</td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.magnetometer</span></td>
- <td>Specify this key, if the application requires a magnetic sensor.</td>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.core.fpu.arch.sse2</span></td>
+ <td>Specify this key, if the application requires the SSE2 Floating Point Unit (FPU) architecture.</td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.pedometer</span></td>
- <td>Specify this key, if the application requires a pedometer sensor.</td>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.core.fpu.arch.sse3</span></td>
+ <td>Specify this key, if the application requires the SSE3 FPU architecture.</td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.photometer</span></td>
- <td>Specify this key, if the application requires a photometer sensor.</td>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.core.fpu.arch.ssse3</span></td>
+ <td>Specify this key, if the application requires the SSSE3 FPU architecture.</td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.proximity</span></td>
- <td>Specify this key, if the application requires a proximity sensor.</td>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.core.fpu.arch.vfpv3</span></td>
+ <td>Specify this key, if the application requires the VFPv3 FPU architecture.</td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.ultraviolet</span></td>
- <td>Specify this key, if the application requires an ultraviolet sensor.</td>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/platform.core.cpu.arch.x86</span></td>
+ <td>Specify this key, if the application requires the x86 CPU architecture.</td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.wrist_up</span></td>
- <td>Specify this key, if the application requires a wrist up sensor.</td>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.auto_rotation</span></td>
+ <td>Specify this key, if the application requires the automatic screen rotation feature.</td>
</tr>
-</tbody>
-</table>
-
-<table border="1" id="features">
-<caption>Table: Available requirements for wearable Web W3C/HTML5 APIs</caption>
- <tbody>
<tr>
- <th>Feature key</th>
- <th>Description</th>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.all</span></td>
+ <td>Specify this key, if the application supports all possible current and future screen sizes and all possible current and future resolutions per screen size.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal</span></td>
+ <td>Specify this key, if the application supports all possible current and future resolutions on the normal screen size.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.240.400</span></td>
+ <td>Specify this key, if the application supports the 240 x 400 resolution on the normal screen size.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.320</span></td>
+ <td>Specify this key, if the application supports the 320 x 320 resolution on the normal screen size.</td>
</tr>
-
<tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/camera</span></td>
- <td>Specify this key, if the application requires any kind of a camera for using the <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#getusermedia">getUserMedia</a> API.</td>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.480</span></td>
+ <td>Specify this key, if the application supports the 320 x 480 resolution on the normal screen size.</td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.gps</span></td>
- <td>Specify this key, if the application requires the Global Positioning System (GPS) feature for using the <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#geo">GeoLocation</a> API.</td>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.360.480</span></td>
+ <td>Specify this key, if the application supports the 360 x 480 resolution on the normal screen size.</td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/microphone</span></td>
- <td>Specify this key, if the application requires a microphone for using the getUserMedia API.</td>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.480.800</span></td>
+ <td>Specify this key, if the application supports the 480 x 800 resolution on the normal screen size.</td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.internet</span></td>
- <td>Specify this key, if the application requires Internet access for using the <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#websocket">WebSocket API</a>, <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#httpreq">XMLHttpRequest Level 1</a>, or <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#cross">Cross-Origin Resource Sharing</a> API.</td>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.540.960</span></td>
+ <td>Specify this key, if the application supports the 540 x 960 resolution on the normal screen size.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.600.1024</span></td>
+ <td>Specify this key, if the application supports the 600 x 1024 resolution on the normal screen size.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.720.1280</span></td>
+ <td>Specify this key, if the application supports the 720 x 1280 resolution on the normal screen size.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.1080.1920</span></td>
+ <td>Specify this key, if the application supports the 1080 x 1920 resolution on the normal screen size.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.accelerometer</span></td>
+ <td>Specify this key, if the application requires an acceleration sensor.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.accelerometer.wakeup</span></td>
+ <td>Specify this key, if the application requires the acceleration sensor wake-up feature.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.activity_recognition</span></td>
+ <td>Specify this key, if the application requires an activity recognition sensor.</td>
</tr>
-<tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.accelerometer</span></td>
- <td>Specify this key, if the application requires an acceleration sensor for using the <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#orientation">DeviceOrientation Event Specification</a> API.</td>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.barometer</span></td>
+ <td>Specify this key, if the application requires a barometer sensor.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.barometer.wakeup</span></td>
+ <td>Specify this key, if the application requires the barometer sensor wake-up feature.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.gesture_recognition</span></td>
+ <td>Specify this key, if the application requires a gesture recognition sensor.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.gravity</span></td>
+ <td>Specify this key, if the application requires a gravity sensor.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.gyroscope</span></td>
+ <td>Specify this key, if the application requires a gyro sensor.</td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.gyroscope</span></td>
- <td>Specify this key, if the application requires a gyro sensor for using the DeviceOrientation Event API.</td>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.gyroscope.wakeup</span></td>
+ <td>Specify this key, if the application requires the gyro sensor wake-up feature.</td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.magnetometer</span></td>
- <td>Specify this key, if the application requires a magnetic sensor for using the DeviceOrientation Event Specification API.</td>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.heart_rate_monitor</span></td>
+ <td>Specify this key, if the application requires a heart rate monitor sensor.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.humidity</span></td>
+ <td>Specify this key, if the application requires a humidity sensor.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.linear_acceleration</span></td>
+ <td>Specify this key, if the application requires a linear acceleration sensor.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.magnetometer</span></td>
+ <td>Specify this key, if the application requires a magnetic sensor.</td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/speech.synthesis</span></td>
- <td>Specify this key, if the application requires the speech synthesis (text-to-speech, TTS) feature for using the <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#webspeech">Web Speech</a> API.</td>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.magnetometer.wakeup</span></td>
+ <td>Specify this key, if the application requires the magnetic sensor wake-up feature.</td>
</tr>
-</tbody>
-</table>
-
-<table border="1" id="features">
-<caption>Table: Available requirements for wearable Web Supplementary APIs</caption>
- <tbody>
<tr>
- <th>Feature key</th>
- <th>Description</th>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.pedometer</span></td>
+ <td>Specify this key, if the application requires a pedometer sensor.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.photometer</span></td>
+ <td>Specify this key, if the application requires a photometer sensor.</td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/media.audio_recording</span></td>
- <td>Specify this key, if the application requires the audio recording functionality of the device for using the <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#camera">Camera API (Tizen Extension)</a> (Audio Recording) API.</td>
- </tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.photometer.wakeup</span></td>
+ <td>Specify this key, if the application requires the photometer sensor wake-up feature.</td>
+ </tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/media.image_capture</span></td>
- <td>Specify this key, if the application requires the image capture functionality of the device for using the <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#camera">Camera API (Tizen Extension)</a> (Image Recording) API.</td>
- </tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.proximity</span></td>
+ <td>Specify this key, if the application requires a proximity sensor.</td>
+ </tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/media.video_recording</span></td>
- <td>Specify this key, if the application requires the video recording functionality of the device for using the <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#camera">Camera API (Tizen Extension)</a> (Video Recording) API.</td>
- </tr>
-</tbody>
-</table>
-
-<h3 id="profile_w" name="profile_w">Profile-based Filtering</h3>
-<p>A Tizen profile describes the requirements for a category of Tizen devices that have a common application execution environment. Applications are created for a single specific target profile, such as mobile, wearable, or TV, and can run on devices compliant to that profile.</p>
-
-<p>Use profile-based filtering to ensure that your application is only downloaded on the appropriate device profile. To ensure this, declare the intended profile by adding the <span style="font-family: Courier New,Courier,monospace">profile name</span> element in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file.</p>
-
-<p>The following table lists the Tizen profiles and related profile name attributes.</p>
- <table border="1" id="feature">
-<caption>Table: Tizen profiles and profile name attributes</caption>
-<tbody>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.proximity.wakeup</span></td>
+ <td>Specify this key, if the application requires the proximity sensor wake-up feature.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.rotation_vector</span></td>
+ <td>Specify this key, if the application requires a rotation vector sensor.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.temperature</span></td>
+ <td>Specify this key, if the application requires a temperature sensor.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.tiltmeter</span></td>
+ <td>Specify this key, if the application requires a tilt sensor.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.tiltmeter.wakeup</span></td>
+ <td>Specify this key, if the application requires the tilt sensor wake-up feature.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.ultraviolet</span></td>
+ <td>Specify this key, if the application requires a ultraviolet sensor.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.wrist_up</span></td>
+ <td>Specify this key, if the application requires a wrist up sensor.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sip.voip</span></td>
+ <td>Specify this key, if the application requires the Voice Over Internet Protocol (VOIP) feature.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/speech.recognition</span></td>
+ <td>Specify this key, if the application requires the speech recognition (STT) feature.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/speech.synthesis</span></td>
+ <td>Specify this key, if the application requires the speech synthesis (text to speech, TTS) feature.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/usb.accessory</span></td>
+ <td>Specify this key, if the application requires the USB client (or accessory) feature.</td>
+ </tr>
<tr>
-<th width="50%">Tizen profile</th>
- <th>Profile name attribute</th>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/usb.host</span></td>
+ <td>Specify this key, if the application requires the USB host feature.</td>
</tr>
<tr>
-<td>Mobile</td>
- <td><span style="font-family: Courier New,Courier,monospace">mobile</span></td>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/vision.face_recognition</span></td>
+ <td>Specify this key, if the application requires the face recognition feature.</td>
</tr>
<tr>
-<td>Wearable</td>
- <td><span style="font-family: Courier New,Courier,monospace">wearable</span></td>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/vision.image_recognition</span></td>
+ <td>Specify this key, if the application requires the image recognition feature.</td>
</tr>
<tr>
-<td>TV</td>
- <td><span style="font-family: Courier New,Courier,monospace">TV</span></td>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/vision.qrcode_generation</span></td>
+ <td>Specify this key, if the application requires the QR code generation feature.</td>
</tr>
-</tbody></table>
-
-<p>In a Web application, the profile name element can be added to the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file as follows:</p>
-<pre class="prettyprint">
-<widget xmlns="http://www.w3.org/ns/widgets" xmlns:tizen="http://tizen.org/ns/widgets" ... >
-<tizen:profile name="mobile"/>
-<!--OR-->
-<tizen:profile name="wearable"/>
-</pre>
-
-<p>The Tizen Store compares the device profile and the <span style="font-family: Courier New,Courier,monospace">profile name</span> element in an application. The store only shows the applications with a profile name matching the device profile to prevent unsupported applications from being installed.</p>
-
-<h3 id="multi_profile" name="multi_profile">Single Web Application for Multiple Profiles</h3>
-<p>Applications are created for a single specific target profile and can only run on devices compliant to that profile. However, it is easily possible to develop a Web application on one profile and make it work on another profile if you use Web APIs that are common to both the profiles. You just modify the <span style="font-family: Courier New,Courier,monospace"> <tizen:profile></span> tag to switch profiles. You may also have to make other changes, like adapting your application to different screen sizes and input events. It is recommended that you test this modified application to ensure it performs as desired.</p>
-
-</div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="native" name="native" class="items-tit-h2"><img alt="Native application" src="../images/n_fold.png"/> Feature Filtering for Native Applications</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
-
-<p>The Tizen platform provides a wide range of features across a variety of hardware and software components. Among the features, there are some that can be selectively supported by the Tizen device manufacturer. For application stores to correctly select your application for installation on an appropriate device, the feature and profile information must be correctly declared in your application.</p>
-
- <h3 id="filter_n" name="filter_n">Feature-based Filtering</h3>
- <p>Some features can be selectively supported by the Tizen device manufacturer. To prevent problems when the user is trying to run your application on a device that does not support all the features your application is using, do one of the following:</p>
-<ul class="ul">
-<li>When the application is running, check whether the device supports the needed features. If not, the application can use other features, which are supported by the device, as a workaround.
-<p>For example, if an application wants to use location information, it can check the device capability by using the <span style="font-family: Courier New,Courier,monospace">system_info_get_*()</span> method of the <a href="../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__SYSTEM__INFO__MODULE.html">System Information</a> API. If the device supports GPS, the application uses GPS information, and if the device supports WPS only, the application uses WPS information instead of GPS.</p>
-</li>
-<li>Use feature-based filtering to prevent your application from being shown in the application list on the Tizen Store, if the user's device does not support all the features of your application. This way you can prevent the application from being installed on an unsupportive device in the first place.
-<p>Be careful when defining the feature list for feature-based filtering. The feature list can dramatically reduce your chances of getting the application downloaded by reducing the number of devices which can support the application.</p></li>
-</ul>
-
-<p>If the <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> file of the application package includes a feature list, the Tizen Store compares the capabilities of the device with the required feature conditions of the application. The store only lists the applications whose conditions match the capabilities of the device, and thus prevents unsupported applications from being installed.</p>
-
- <p class="figure">Figure: Feature-based filtering</p>
- <p style="text-align:center;"><img align="center" alt="Feature-based filtering" src="../images/app_filtering_basic_flow.png" /></p>
-
-<p>When multiple features are defined in the feature list for feature-based filtering, the Tizen Store creates the filtering condition for all using the "AND" operation. For example, if there are <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc</span> and <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth</span> features in the feature list of the application package, only a device that has both those features can show the application on the Tizen Store application list for downloading.</p>
-
-<h4 id="screen_size" name="screen_size">Screen Size Feature</h4>
-<p>The screen size feature is the only exception to the normal feature handling process described above. When the screen size is defined in the feature list, the Tizen Store creates the filtering condition with the "OR" operation. For example, if the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.480.800</span> and <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.720.1280</span> features are defined in your application feature list, a device that supports one or the other of those features can show the application on the Tizen Store application list.</p>
- <p>If you do not specify a proper screen size in the <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> file, your application can be rejected from the Tizen store.</p>
- <p>The following table lists the available screen size features. </p>
- <table>
- <caption>Table: Available screen size features</caption>
- <tbody>
- <tr>
- <th>Feature key</th>
- <th>Description</th>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal</span></td>
- <td>Specify this key, if the application supports all possible current and future resolutions on the normal screen size.
- <p>You cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously. If you do, only the most specific resolution key is considered and the less specific resolution keys are ignored. For example, if you specify both <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal</span> and <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.480</span> keys, only the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.480</span> key is applied.</p> <p>If no screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p>
- </td>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.240.400</span></td>
- <td>Specify this key, if the application supports the 240 x 400 resolution on the normal screen size.
- <p>You can specify multiple <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.*</span> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously.</p><p>If no screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p>
- </td>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.320</span></td>
- <td>Specify this key, if the application supports the 320 x 320 resolution on the normal screen size.
- <p>You can specify multiple <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.*</span> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously.</p><p>If no screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p>
- </td>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.480</span></td>
- <td>Specify this key, if the application supports the 320 x 480 resolution on the normal screen size.
- <p>You can specify multiple <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.*</span> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously.</p><p>If no screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p></td>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.360.480</span></td>
- <td>Specify this key, if the application supports the 360 x 480 resolution on the normal screen size.
- <p>You can specify multiple <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.*</span> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously.</p><p>If no screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p></td>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.480.800</span></td>
- <td>Specify this key, if the application supports the 480 x 800 resolution on the normal screen size.
- <p>You can specify multiple <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.*</span> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously.</p><p>If no screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p></td>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.540.960</span></td>
- <td>Specify this key, if the application supports the 540 x 960 resolution on the normal screen size.
- <p>You can specify multiple <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.*</span> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously.</p><p>If no screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p></td>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.600.1024</span></td>
- <td>Specify this key, if the application supports the 600 x 1024 resolution on the normal screen size.
- <p>You can specify multiple <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.*</span> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously.</p><p>If no screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p></td>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.720.1280</span></td>
- <td>Specify this key, if the application supports the 720 x 1280 resolution on the normal screen size.
- <p>You can specify multiple <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.*</span> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously.</p><p>If no screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p></td>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.1080.1920</span></td>
- <td>Specify this key, if the application supports the 1080 x 1920 resolution on the normal screen size.
- <p>You can specify multiple <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.*</span> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously.</p><p>If no screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p></td>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.all</span></td>
- <td>Specify this key, if the application supports all possible current and future screen sizes and all possible current and future resolutions per screen size.
- <p>You cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously. If you do, only the most specific resolution key is considered and the less specific resolution keys are ignored. For example, if you specify both <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.all</span> and <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.480</span> keys, only the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.480</span> key is applied.</p><p>If no screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p></td>
- </tr>
- </tbody>
- </table>
-
-
-<h4 id="hierarchy" name="hierarchy">Feature Hierarchy</h4>
-
-<p>The feature keys have a hierarchy. For example, consider the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location</span>, <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.gps</span>, and <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.wps</span> features:</p>
-<ul class="ul">
-<li>If the feature list includes the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.gps</span> feature, only a device which has the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.gps</span> feature can show the application on the Tizen Store application list.</li>
-<li>If the feature list includes the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location</span> feature, a device which has the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.gps</span>, <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.wps</span>, or <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location</span> feature can show the application on the Tizen Store application list.
-<p>This means that the Tizen Store considers the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location</span> feature as the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.gps OR http://tizen.org/feature/location.wps</span> feature. (If the feature list includes the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.gps</span> and <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.wps</span> features together, only a device which supports both those features can show the application.)</p></li></ul>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/vision.qrcode_recognition</span></td>
+ <td>Specify this key, if the application requires the QR code recognition feature.</td>
+ </tr>
+</tbody>
+</table>
-<h4 id="adding" name="adding">Adding the Feature List</h4>
-
-<p>To enable filtering for your mobile native application, add the feature list for the application <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> file:</p>
- <ol>
- <li>To open the manifest editor in the IDE, double-click the <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> file in the <strong>Project Explorer</strong> view. </li>
-<li>In the <strong>Features</strong> tab, click <strong>Add</strong> and set the mandatory features for the application package. <p>The manifest file (<span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span>) is updated automatically.</p>
-</li>
- <li>Upload and publish the application package on the Tizen Store.</li>
- <li>If a Tizen-powered device requests applications, the store displays a list containing only applications compatible with the user's device.</li>
- </ol>
-<p>The following table shows the available requirements for an application package. If you want to check which features are necessary for using a specific API, see the related feature in the native <a href="../../../org.tizen.native.mobile.apireference/index.html">API Reference</a>.</p>
- <table border="1">
+<table border="1">
<caption>
- Table: Available requirements
+ Table: Available wearable native requirements
</caption>
<tbody>
<tr>
<td>Specify this key with a specific keyboard layout (<span style="font-family: Courier New,Courier,monospace">string</span> type), if the application requires a built-in physical keyboard supporting the specified keyboard layout.</td>
</tr>
<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/input.rotating_bezel</span></td>
+ <td>Specify this key, if the application requires rotating bezel input.</td>
+ </tr>
+<tr>
<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/led</span></td>
<td>Specify this key, if the application requires a LED.</td>
</tr>
<td>Specify this key, if the application requires the multimedia transcoder feature.</td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/multi_point_touch.point_count</span></td>
- <td>Specify this key with a specific number (<span style="font-family: Courier New,Courier,monospace">int</span> type), if the application requires the minimum of specified number of simultaneous touches in a multi-point touch.</td>
- </tr>
-<tr>
<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/multi_point_touch.pinch_zoom</span></td>
<td>Specify this key, if the application requires a pinch-zoom gesture feature.</td>
</tr>
+ <tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/multi_point_touch.point_count</span></td>
+ <td>Specify this key with a specific number (<span style="font-family: Courier New,Courier,monospace">int</span> type), if the application requires the minimum of specified number of simultaneous touches in a multi-point touch.</td>
+ </tr>
<tr>
<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth</span></td>
<td>Specify this key, if the application requires the Bluetooth feature.</td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.le</span></td>
- <td>Specify this key, if the application requires the Bluetooth LE feature.</td>
- </tr>
-<tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.health</span></td>
- <td>Specify this key, if the application requires the Bluetooth Health feature (HDP).</td>
- </tr>
-<tr>
<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.audio.call</span></td>
<td>Specify this key, if the application requires the Bluetooth Handsfree feature (HFP).</td>
</tr>
<tr>
<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.audio.media</span></td>
<td>Specify this key, if the application requires the Bluetooth Advanced Audio feature (A2DP).</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.health</span></td>
+ <td>Specify this key, if the application requires the Bluetooth Health feature (HDP).</td>
</tr>
<tr>
<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.hid</span></td>
<td>Specify this key, if the application requires the Bluetooth Human Input Device feature (HID).</td>
</tr>
<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.le</span></td>
+ <td>Specify this key, if the application requires the Bluetooth LE feature.</td>
+ </tr>
+<tr>
<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.opp</span></td>
<td>Specify this key, if the application requires the Bluetooth Object Push feature (OPP).</td>
</tr>
<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.internet</span></td>
+ <td>Specify this key, if the application requires Internet access.</td>
+ </tr>
+<tr>
<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc</span></td>
<td>Specify this key, if the application requires the use of any API that, in turn, requires the Near Field Communication (NFC) feature.</td>
</tr>
<td>Specify this key, if the application requires the NFC card emulation feature.</td>
</tr>
<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc.card_emulation.hce</span></td>
+ <td>Specify this key, if the application requires the NFC host-based card emulation feature.</td>
+ </tr>
+<tr>
<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc.reserved_push</span></td>
<td>Specify this key, if the application requires the NFC reserved push feature.</td>
</tr>
<td>Specify this key, if the application requires the secure element feature.</td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.secure_element.uicc</span></td>
- <td>Specify this key, if the application requires the UICC secure element feature.</td>
- </tr>
-<tr>
<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.secure_element.ese</span></td>
<td>Specify this key, if the application requires the ESE secure element feature.</td>
</tr>
<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.secure_element.uicc</span></td>
+ <td>Specify this key, if the application requires the UICC secure element feature.</td>
+ </tr>
+<tr>
<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.telephony</span></td>
<td>Specify this key, if the application requires the use of any API that, in turn, requires the telephony feature.</td>
</tr>
<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.auto_rotation</span></td>
<td>Specify this key, if the application requires the automatic screen rotation feature.</td>
</tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.shape.circle</span></td>
+ <td>Specify this key, if the application requires a circle-shaped screen.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.shape.rectangle</span></td>
+ <td>Specify this key, if the application requires a rectangle-shaped screen.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.all</span></td>
+ <td>Specify this key, if the application supports all possible current and future screen sizes and all possible current and future resolutions per screen size.</td>
+ </tr>
<tr>
<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal</span></td>
<td>Specify this key, if the application supports all possible current and future resolutions on the normal screen size.</td>
<td>Specify this key, if the application supports the 1080 x 1920 resolution on the normal screen size.</td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.all</span></td>
- <td>Specify this key, if the application supports all possible current and future screen sizes and all possible current and future resolutions per screen size.</td>
- </tr>
-<tr>
<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.accelerometer</span></td>
<td>Specify this key, if the application requires an acceleration sensor.</td>
</tr>
<td>Specify this key, if the application requires the acceleration sensor wake-up feature.</td>
</tr>
<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.activity_recognition</span></td>
+ <td>Specify this key, if the application requires an activity recognition sensor.</td>
+ </tr>
+<tr>
<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.barometer</span></td>
<td>Specify this key, if the application requires a barometer sensor.</td>
</tr>
<td>Specify this key, if the application requires the barometer sensor wake-up feature.</td>
</tr>
<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.gesture_recognition</span></td>
+ <td>Specify this key, if the application requires a gesture recognition sensor.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.gravity</span></td>
+ <td>Specify this key, if the application requires a gravity sensor.</td>
+ </tr>
+<tr>
<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.gyroscope</span></td>
<td>Specify this key, if the application requires a gyro sensor.</td>
</tr>
<td>Specify this key, if the application requires the gyro sensor wake-up feature.</td>
</tr>
<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.heart_rate_monitor</span></td>
+ <td>Specify this key, if the application requires a heart rate monitor sensor.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.humidity</span></td>
+ <td>Specify this key, if the application requires a humidity sensor.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.linear_acceleration</span></td>
+ <td>Specify this key, if the application requires a linear acceleration sensor.</td>
+ </tr>
+<tr>
<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.magnetometer</span></td>
<td>Specify this key, if the application requires a magnetic sensor.</td>
</tr>
<td>Specify this key, if the application requires the magnetic sensor wake-up feature.</td>
</tr>
<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.pedometer</span></td>
+ <td>Specify this key, if the application requires a pedometer sensor.</td>
+ </tr>
+<tr>
<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.photometer</span></td>
<td>Specify this key, if the application requires a photometer sensor.</td>
</tr>
<td>Specify this key, if the application requires the proximity sensor wake-up feature.</td>
</tr>
<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.rotation_vector</span></td>
+ <td>Specify this key, if the application requires a rotation vector sensor.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.temperature</span></td>
+ <td>Specify this key, if the application requires a temperature sensor.</td>
+ </tr>
+<tr>
<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.tiltmeter</span></td>
<td>Specify this key, if the application requires a tilt sensor.</td>
</tr>
<td>Specify this key, if the application requires a wrist up sensor.</td>
</tr>
<tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.pedometer</span></td>
- <td>Specify this key, if the application requires a pedometer sensor.</td>
- </tr>
-<tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.heart_rate_monitor</span></td>
- <td>Specify this key, if the application requires a heart rate monitor sensor.</td>
- </tr>
-<tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.temperature</span></td>
- <td>Specify this key, if the application requires a temperature sensor.</td>
- </tr>
-<tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.humidity</span></td>
- <td>Specify this key, if the application requires a humidity sensor.</td>
- </tr>
-<tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.linear_acceleration</span></td>
- <td>Specify this key, if the application requires a linear acceleration sensor.</td>
- </tr>
-<tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.rotation_vector</span></td>
- <td>Specify this key, if the application requires a rotation vector sensor.</td>
- </tr>
-<tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.gesture_recognition</span></td>
- <td>Specify this key, if the application requires a gesture recognition sensor.</td>
- </tr>
-<tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.activity_recognition</span></td>
- <td>Specify this key, if the application requires an activity recognition sensor.</td>
- </tr>
-<tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.gravitiy</span></td>
- <td>Specify this key, if the application requires a gravity sensor.</td>
- </tr>
-<tr>
-<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/shell.appwidget</span></td>
- <td>Specify this key, if the application requires the AppWidget (Dynamic Box) feature.</td>
- </tr>
-<tr>
<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sip.voip</span></td>
<td>Specify this key, if the application requires the Voice Over Internet Protocol (VOIP) feature.</td>
</tr>
</tbody>
</table>
-
-<h3 id="profile_n" name="profile_n">Profile-based Filtering</h3>
+<h2 id="profile_n" name="profile_n">Profile-based Filtering</h2>
<p>A Tizen profile describes the requirements for a category of Tizen devices that have a common application execution environment. Applications are created for a single specific target profile, such as mobile, wearable, or TV, and can run on devices compliant to that profile.</p>
<p>Use profile-based filtering to ensure that your application is only downloaded on the appropriate device profile. To ensure this, declare the intended profile by adding the <span style="font-family: Courier New,Courier,monospace">profile name</span> element in the <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> file.</p>
</tr>
</tbody></table>
-<p>In a native application, the mobile profile name element can be added to the <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> file as follows:</p>
+<p>In a native application, the profile name element can be added to the <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> file as follows:</p>
<pre class="prettyprint">
-<manifest xmlns="http://tizen.org/ns/packages" api-version="2.3.0" ... >
+<manifest xmlns="http://tizen.org/ns/packages" api-version="2.3.1" ... >
<profile name="mobile"/>
</pre>
<p>The Tizen Store compares the device profile and the <span style="font-family: Courier New,Courier,monospace">profile name</span> element in an application. The store only shows the applications with a profile name matching the device profile to prevent unsupported applications from being installed.</p>
- </div>
- </li>
- </ul>
-</div>
-</div>
-
-<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../scripts/showhide.js"></script>
+<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>
+<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>
<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>
+ <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>Understanding Tizen Programming</title>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/> <img alt="Mobile native" src="../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a href="../app_model/application_model.htm">Tizen Application Model</a></li>
+ <li><a href="../app_model/application_model_n.htm">Tizen Application Model</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Understanding Tizen Programming</h1>
-<p>When designing Tizen Web applications, you need to take into account the following programming concepts:</p>
-<ul>
- <li><a href="tizen_apis.htm#wapi">Tizen APIs</a></li>
- <li><a href="sec_privileges.htm#web">Security and API Privileges</a></li>
- <li><a href="app_filtering.htm#web">Application Filtering</a></li>
- <li><a href="web_runtime_w.htm">Web Runtime</a></li>
-</ul>
-
<p>Tizen native applications can utilize a greater range of device features and can provide better performance than other applications. This is because native applications use a wide range of device APIs and are particularly lightweight. However, creating native applications can initially be complex if you are not familiar with the native API layout, application architecture, and life-cycle. In addition, you must become familiar with the Enlightenment Foundation Libraries (EFL) that are required to make scalable and fast graphics.</p>
<p>When designing Tizen native applications, you need to take into account the following programming concepts:</p>
<ul>
- <li><a href="tizen_apis.htm#napi">Tizen APIs</a></li>
- <li><a href="sec_privileges.htm#native">Security and API Privileges</a></li>
- <li><a href="app_filtering.htm#native">Application Filtering</a></li>
- <li><a href="key_events.htm">Key Event Handling</a></li>
- <li><a href="io_overview.htm">File System Directory Hierarchy</a></li>
- <li><a href="error_handling.htm">Error Handling</a></li>
+ <li><a href="tizen_apis_n.htm">Tizen APIs</a></li>
+ <li><a href="sec_privileges_n.htm">Security and API Privileges</a></li>
+ <li><a href="app_filtering_n.htm">Application Filtering</a></li>
+ <li><a href="event_handling_n.htm">Event Handling</a> (in <span style="color: red">mobile applications only</span>)</li>
+ <li><a href="io_overview_n.htm">File System Directory Hierarchy</a></li>
+ <li><a href="error_handling_n.htm">Error Handling</a></li>
</ul>
<h2 id="platform" name="platform">Tizen Platform Introduction</h2>
-<p>Tizen is a user-interactive and service-oriented open-source project that allows you to create feature-rich applications for multiple device categories, such as smartphones, tablets and wearable devices (for example, smartwatches), using various APIs. The Tizen platform allows you to create a wide range of applications for Tizen devices, customized with the common <a href="#architecture">Tizen architecture</a> as its basis. Tizen also provides <a href="tizen_websites.htm">Web sites</a> with tools for creating, distributing, and managing mobile applications efficiently.</p>
+<p>Tizen is a user-interactive and service-oriented open-source project that allows you to create feature-rich applications for multiple device categories, such as smartphones, tablets and wearable devices (for example, smartwatches), using various APIs. The Tizen platform allows you to create a wide range of applications for Tizen devices, customized with the common <a href="#architecture">Tizen architecture</a> as its basis. Tizen also provides <a href="../../tizen_websites.htm">Web sites</a> with tools for creating, distributing, and managing applications efficiently.</p>
<p>The Tizen platform supports 2 different application types: the Web application and the native application. The Tizen platform also allows you to develop a hybrid application package where Web and native applications are packaged together to make more powerful applications. The Tizen platform ensures that all Tizen applications have consistent look and feel, regardless of whether you are creating a Web or native application.</p>
<p>Tizen is a standards-based platform that provides Web and native APIs for developing applications for multiple device categories. Tizen is currently targeted for smart phones, tablet devices (mobile profile), and wearable devices (wearable profile), though planned to cover more device categories in the future. The following figure illustrates the Tizen architecture.</p>
<p class="figure">Figure: Tizen architecture</p>
-<p
style="text-align:center;"><img alt="Tizen architecture"
-src="../images/what_is_tizen_architecture.png" /></p>
+<p
align="center"><img alt="Tizen architecture"
+src="../../images/what_is_tizen_architecture.png" /></p>
<p>The Tizen architecture consists of the following subsystems:</p>
<th class="note">Note</th>
</tr>
<tr>
- <td class="note">Only a selected set of APIs in the native framework are native APIs. This means that native applications must use the listed native APIs in the <a href="../../../org.tizen.native.mobile.apireference/index.html">API Reference</a> which are managed by API maintainers in the Tizen project.</td>
+ <td class="note">Only a selected set of APIs in the native framework are native APIs. This means that native applications must use the listed native APIs in the <a href="../../../../org.tizen.native.mobile.apireference/index.html">API Reference</a> which are managed by API maintainers in the Tizen project.</td>
</tr>
</tbody>
</table>
</ul>
-<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../scripts/showhide.js"></script>
+<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>
+<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>
<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>
+ <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>Error Handling</title>
</head>
<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
</div>
<div id="container"><div id="contents"><div class="content">
<div id="profile">
- <p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<h1>Error Handling</h1>
<p>How to query error codes for a certain API function is determined by how the function returns error codes.
In this sense, there are two kinds of native APIs in Tizen:</p>
-<ul class="ul">
+<ul>
<li>APIs directly returning error codes
<p>All API functions which return error codes have the following section in their description:</p>
<pre class="prettyprint">
location_manager_h location_handle;
int result = location_manager_create(LOCATION_METHOD_GPS, location_handle);
-if(LOCATIONS_ERROR_NONE != result)
+if (LOCATIONS_ERROR_NONE != result)
{
errMsg = get_error_message(ret);
dlog_print(DLOG_INFO, "MyTag", "%s", errMsg);
<p>Every error code in the Tizen native API is represented as an integer value.</p>
-<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../scripts/showhide.js"></script>
+<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>
+<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>
<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>Key Event Handling</title>
+ <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>Event Handling</title>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
<li><a href="#menu">Menu Key</a></li>
<li><a href="#back">Back Key</a></li>
- <li><a href="#media">Media Key</a></li>
+ <li><a href="#media">Media Key</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
-<h1>Key Event Handling</h1>
+<h1>Event Handling</h1>
-<p>The Tizen platform supports hardware keys for user interactions. All Tizen devices provide the Menu and Back hardware keys. You can use the <a href="../../../org.tizen.native.mobile.apireference/group__EFL__EXTENSION__EVENTS__GROUP.html">Efl Extension Event</a> API to handle key events.</p>
-<p>To provide a full user experience for your application users, you must handle hardware key presses in your application. Follow the hardware key guidelines to ensure predictable and reliable navigation in your application:</p>
+<p>The Tizen platform supports event handling for user interactions. To provide a full user experience for your application users, you must handle various events in your application.</p>
+ <table class="note">
+<tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">This feature is supported in mobile applications only.</td>
+ </tr>
+ </tbody>
+ </table>
+
+<p>All Tizen mobile native devices provide the Menu and Back hardware keys, and you can use the <a href="../../../../org.tizen.native.mobile.apireference/group__EFL__EXTENSION__EVENTS__GROUP.html">Efl Extension Event</a> API to handle the key events. Follow the hardware key guidelines below to ensure predictable and reliable navigation in your application.</p>
<h2 id="menu" name="menu">Menu Key</h2>
<p> All Tizen devices provide a <strong>Menu key</strong>, which is used to present users a context-dependent set of options. Pressing the Menu key shows a hierarchical option menu. The following figure illustrates the Menu key position and the option menu.</p>
<p class="figure">Figure: Menu key</p>
- <p style="text-align:center;"><img src="../images/menu_key.png" alt="Menu key" /></p>
+ <p align="center"><img src="../../images/menu_key.png" alt="Menu key" /></p>
<h2 id="back" name="back">Back Key</h2>
<th class="note">Note</th>
</tr>
<tr>
- <td class="note"> More details on using EFL-Extension for <strong>Menu key</strong> and <strong>Back key</strong> events, see the <a href="../../../org.tizen.guides/html/native/ui/efl_extension_n.htm">Efl Extension</a> guide.</td>
+ <td class="note"> More details on using EFL-Extension for <strong>Menu key</strong> and <strong>Back key</strong> events, see the <a href="../../../../org.tizen.guides/html/native/ui/efl_extension_n.htm">Efl Extension</a> guide.</td>
</tr>
</tbody>
</table>
<h2 id="media" name="media">Media Key</h2>
<p>Tizen also supports handling <strong>Media Key</strong> events such as play,stop,pause events from media devices (such as Bluetooth remote controller and earjack).</p>
-<p> To handle the <strong>Media Key</strong> events, use the <a href="../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__MEDIA__KEY__MODULE.html?cp=1_7_1_10_1">Media key</a> API.</p>
+<p> To handle the <strong>Media Key</strong> events, use the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__MEDIA__KEY__MODULE.html">Media key</a> API.</p>
-<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../scripts/showhide.js"></script>
+<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>
+<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>
<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>
+ <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>File System Directory Hierarchy</title>
</head>
<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
</div>
<div id="container"><div id="contents"><div class="content">
<div id="profile">
- <p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<h1>File System Directory Hierarchy</h1>
<p>The following table shows the application directory hierarchy:</p>
<table>
-<caption>Table: Application Package Directory Hierarchy</caption>
+<caption>Table: Application package directory hierarchy</caption>
<tbody>
<tr>
<th>Name</th>
<p>Every application can access a storage area where media files are stored. This is the media directory. In native applications, to obtain the media directory path, call the storage_get_directory() of Storage module. The following table lists the sub-directories of the media directory.</p>
<table>
-<caption>Table: Media Directory Hierarchy</caption>
+<caption>Table: Media directory hierarchy</caption>
<tbody>
<tr>
<th>Name</th>
<p>Every application can also access the external storage, such as MMC. This is the external storage directory. In native applications, to obtain the external storage directory path, call the storage_get_directory() method of the Storage module. The following table lists the sub-directories of the external storage directory.</p>
<table>
-<caption>Table: Media Directory Hierarchy</caption>
+<caption>Table: External storage directory hierarchy</caption>
<tbody>
<tr>
<th>Name</th>
</table>
-<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../scripts/showhide.js"></script>
+<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>
+<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>
--- /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>Security and API Privileges</title>
+<style>
+td.key { font-family: Courier New,Courier,monospace }
+tr.partner-level, tr.platform-level { background-color: #cff }
+</style>
+</head>
+
+<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+ <div id="profile">
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+ </div>
+
+<h1>Security and API Privileges</h1>
+
+<p>To effectively protect the device system and user private data, the Tizen security architecture is based on privileges and application signing of the Linux basic security model, which includes process isolation and mandatory access control. Since Tizen, as an open mobile platform, provides a wide range of features and experiences for users with a variety of applications, the users must be able to grant privileges for security-sensitive operations.</p>
+
+<p>Tizen provides API-level access control for security-sensitive operations which, if not used correctly, can harm user privacy and system stability. Therefore, applications that use such sensitive APIs must declare the required privileges in the <a href="../process/setting_properties_n.htm#manifest">manifest.xml</a> file.</p>
+
+<p>If an application invokes a privileged API, the Tizen system checks whether the privilege is present in the <span style="font-family: Courier New,Courier,monospace">manifest.xml</span> file. If the privilege is not present in the file, the system prohibits the application execution.</p>
+<p>The Tizen IDE also provides privilege checker tools to check whether the Tizen application source code contains any privilege violations. For more information, see <a href="../../../../org.tizen.devtools/html/native_tools/api_privilege_checker_n.htm">API and Privilege Checker</a>.</p>
+
+<p>The following tables list the API privileges, which you must to declare when using security-sensitive API modules.</p>
+
+<table>
+<caption>Table: Mobile native API privileges</caption>
+<tbody>
+<tr>
+<th>Privilege</th>
+<th>Display name</th>
+<th>Description</th>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/account.read</span></p></td>
+<td rowspan="1" colspan="1"><p>Reading accounts</p></td>
+<td rowspan="1" colspan="1"><p>The application can read accounts.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/account.write</span></p></td>
+<td rowspan="1" colspan="1"><p>Managing accounts</p></td>
+<td rowspan="1" colspan="1"><p>The application can create, edit, and delete accounts.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/alarm.get</span></p></td>
+<td rowspan="1" colspan="1"><p>Retrieving alarms</p></td>
+<td rowspan="1" colspan="1"><p>The application can read information about the saved alarms.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/alarm.set</span></p></td>
+<td rowspan="1" colspan="1"><p>Setting alarms</p></td>
+<td rowspan="1" colspan="1"><p>The application can set alarms and wake the device up at scheduled times.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/appmanager.kill</span></p></td>
+<td rowspan="1" colspan="1"><p>Closing applications</p></td>
+<td rowspan="1" colspan="1"><p>The application can close other applications..</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/appmanager.launch</span></p></td>
+<td rowspan="1" colspan="1"><p>Launching application</p></td>
+<td rowspan="1" colspan="1"><p>The application can open other applications.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/bluetooth</span></p></td>
+<td rowspan="1" colspan="1"><p>Using unrestricted Bluetooth services</p></td>
+<td rowspan="1" colspan="1"><p>The application can perform unrestricted actions using Bluetooth, such as scanning for and connecting to other devices.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/bluetooth.admin</span></p></td>
+<td rowspan="1" colspan="1"><p>Changing Bluetooth settings</p></td>
+<td rowspan="1" colspan="1"><p>The application can change Bluetooth settings, such as turning Bluetooth on or off, set the device name, and enable or disable the AV remote control.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/bookmark.admin</span></p></td>
+<td rowspan="1" colspan="1"><p>Accessing Internet bookmarks</p></td>
+<td rowspan="1" colspan="1"><p>The application can retrieve, create, edit, and delete Internet bookmarks.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/calendar.read</span></p></td>
+<td rowspan="1" colspan="1"><p>Reading calendar</p></td>
+<td rowspan="1" colspan="1"><p>The application can read events and tasks.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/calendar.write</span></p></td>
+<td rowspan="1" colspan="1"><p>Managing calendar</p></td>
+<td rowspan="1" colspan="1"><p>The application can create, update, and delete events and tasks.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/call</span></p></td>
+<td rowspan="1" colspan="1"><p>Making phone calls</p></td>
+<td rowspan="1" colspan="1"><p>The application can make phone calls to numbers when they are tapped without further confirmation.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/callhistory.read</span></p></td>
+<td rowspan="1" colspan="1"><p>Reading call logs</p></td>
+<td rowspan="1" colspan="1"><p>The application can read call log items.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/callhistory.write</span></p></td>
+<td rowspan="1" colspan="1"><p>Managing call logs</p></td>
+<td rowspan="1" colspan="1"><p>The application can create, update, and delete call log items.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/camera</span></p></td>
+<td rowspan="1" colspan="1"><p>Using camera</p></td>
+<td rowspan="1" colspan="1"><p>The application can take and preview pictures.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/contact.read</span></p></td>
+<td rowspan="1" colspan="1"><p>Reading contacts</p></td>
+<td rowspan="1" colspan="1"><p>The application can read your profile, contacts, and contact history. Contact history can include social network activity.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/contact.write</span></p></td>
+<td rowspan="1" colspan="1"><p>Managing contacts</p></td>
+<td rowspan="1" colspan="1"><p>The application can create, update, and delete your profile, contacts, and any contact history that is related to this application. The contact history can include social network activity.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/content.write</span></p></td>
+<td rowspan="1" colspan="1"><p>Managing content</p></td>
+<td rowspan="1" colspan="1"><p>The application can change media information. This information can be used by other applications.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/datasharing</span></p></td>
+<td rowspan="1" colspan="1"><p>Sharing data between applications</p></td>
+<td rowspan="1" colspan="1"><p>The application can share data with other applications.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/display</span></p></td>
+<td rowspan="1" colspan="1"><p>Managing display settings</p></td>
+<td rowspan="1" colspan="1"><p>The application can manage display settings, such as the brightness. This can increase battery consumption.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/download</span></p></td>
+<td rowspan="1" colspan="1"><p>Downloading through HTTP</p></td>
+<td rowspan="1" colspan="1"><p>The application can manage HTTP downloads. This can result in additional charges depending on the user's payment plan.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/email</span></p></td>
+<td rowspan="1" colspan="1"><p>Managing email accounts, mailboxes, and emails</p></td>
+<td rowspan="1" colspan="1"><p>The application can manage your email accounts, including your folders and emails.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/email.admin</span></p></td>
+<td rowspan="1" colspan="1"><p>Managing email configurations</p></td>
+<td rowspan="1" colspan="1"><p>The application can manage the email application settings.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/externalstorage</span></p></td>
+<td rowspan="1" colspan="1"><p>Accessing external storage</p></td>
+<td rowspan="1" colspan="1"><p>The application can read and write files that are saved to external storage, such as SD cards.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/externalstorage.appdata</span></p></td>
+<td rowspan="1" colspan="1"><p>Accessing application data in external storage</p></td>
+<td rowspan="1" colspan="1"><p>The application can read and write its own files in external storage, such as SD cards.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/haptic</span></p></td>
+<td rowspan="1" colspan="1"><p>Managing vibration feedback</p></td>
+<td rowspan="1" colspan="1"><p>The application can control vibration feedback.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/healthinfo</span></p></td>
+<td rowspan="1" colspan="1"><p>Reading health information</p></td>
+<td rowspan="1" colspan="1"><p>The application can read health information gathered by the device sensors, such as the pedometer and heart rate monitor.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/internet</span></p></td>
+<td rowspan="1" colspan="1"><p>Accessing Internet</p></td>
+<td rowspan="1" colspan="1"><p>The application can access the Internet. This can result in additional charges depending on your payment plan.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/keymanager</span></p></td>
+<td rowspan="1" colspan="1"><p>Using secure repository</p></td>
+<td rowspan="1" colspan="1"><p>The application can save keys, certificates, and data to, and retrieve and delete them from password-protected storage.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/keymanager.admin</span></p></td>
+<td rowspan="1" colspan="1"><p>Locking/unlocking secure repository</p></td>
+<td rowspan="1" colspan="1"><p>The application can lock and unlock a password-protected storage, and manage password changes for it.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/led</span></p></td>
+<td rowspan="1" colspan="1"><p>Managing LEDs</p></td>
+<td rowspan="1" colspan="1"><p>The application can turn LEDs on or off, such as the LED on the front of the device and the camera flash.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/location</span></p></td>
+<td rowspan="1" colspan="1"><p>Using user location</p></td>
+<td rowspan="1" colspan="1"><p>The application can read your location information.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/location.enable</span></p></td>
+<td rowspan="1" colspan="1"><p>Managing location settings</p></td>
+<td rowspan="1" colspan="1"><p>The application can control your location service settings.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/mediastorage</span></p></td>
+<td rowspan="1" colspan="1"><p>Accessing media folders</p></td>
+<td rowspan="1" colspan="1"><p>The application can read and write files in media folders.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/message.read</span></p></td>
+<td rowspan="1" colspan="1"><p>Reading text and multimedia messages and related information</p></td>
+<td rowspan="1" colspan="1"><p>The application can read text and multimedia messages, and any information related to them.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/message.write</span></p></td>
+<td rowspan="1" colspan="1"><p>Sending text and multimedia messages and updating their statuses</p></td>
+<td rowspan="1" colspan="1"><p>The application can write, send, delete, and move text and multimedia messages, and change the settings and statuses of the messages, such as read or unread.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/network.get</span></p></td>
+<td rowspan="1" colspan="1"><p>Reading network information</p></td>
+<td rowspan="1" colspan="1"><p>The application can retrieve network information such as the status of each network, its type, and detailed network profile information.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/network.profile</span></p></td>
+<td rowspan="1" colspan="1"><p>Managing network profiles</p></td>
+<td rowspan="1" colspan="1"><p>The application can add, remove, and edit network profiles.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/network.set</span></p></td>
+<td rowspan="1" colspan="1"><p>Managing network connections</p></td>
+<td rowspan="1" colspan="1"><p>The application can turn Wi-Fi on and off, and connect to and disconnect from Wi-Fi and mobile networks.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/nfc</span></p></td>
+<td rowspan="1" colspan="1"><p>Using basic NFC services</p></td>
+<td rowspan="1" colspan="1"><p>The application can read and write NFC tag information, and send NFC messages to other devices.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/nfc.admin</span></p></td>
+<td rowspan="1" colspan="1"><p>Managing NFC general settings</p></td>
+<td rowspan="1" colspan="1"><p>The application can change NFC settings, such as turning NFC on or off.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/nfc.cardemulation</span></p></td>
+<td rowspan="1" colspan="1"><p>Using NFC card emulation mode</p></td>
+<td rowspan="1" colspan="1"><p>The application can access smart card details, such as credit card details, and allow users to make payments via NFC.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/notification</span></p></td>
+<td rowspan="1" colspan="1"><p>Providing notifications</p></td>
+<td rowspan="1" colspan="1"><p>The application can show and hide its own notifications and badges.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/packagemanager.admin</span></p></td>
+<td rowspan="1" colspan="1"><p>Installing/and uninstalling application packages and clearing caches</p></td>
+<td rowspan="1" colspan="1"><p>The application can install and uninstall application packages, and clear application caches.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/packagemanager.info</span></p></td>
+<td rowspan="1" colspan="1"><p>Retrieving detailed package information</p></td>
+<td rowspan="1" colspan="1"><p>The application can retrieve detailed application package information.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/power</span></p></td>
+<td rowspan="1" colspan="1"><p>Managing power</p></td>
+<td rowspan="1" colspan="1"><p>The application can control power-related settings, such as dimming the screen.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/push</span></p></td>
+<td rowspan="1" colspan="1"><p>Receiving push notifications</p></td>
+<td rowspan="1" colspan="1"><p>The application can receive notifications from the Internet.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/recorder</span></p></td>
+<td rowspan="1" colspan="1"><p>Recording video and audio</p></td>
+<td rowspan="1" colspan="1"><p>The application can record video and audio.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/screenshot</span></p></td>
+<td rowspan="1" colspan="1"><p>Capturing device screen</p></td>
+<td rowspan="1" colspan="1"><p>The application can capture screenshots.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/secureelement</span></p></td>
+<td rowspan="1" colspan="1"><p>Accessing secure elements</p></td>
+<td rowspan="1" colspan="1"><p>The application can access secure smart card chips, such as UICC/SIM, embedded secure elements, and secure SD cards.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/shortcut</span></p></td>
+<td rowspan="1" colspan="1"><p>Managing shortcuts</p></td>
+<td rowspan="1" colspan="1"><p>The application can create and delete shortcuts.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/systemsettings</span></p></td>
+<td rowspan="1" colspan="1"><p>Managing unrestricted system settings</p></td>
+<td rowspan="1" colspan="1"><p>The application can read and write unrestricted system settings.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/systemsettings.admin</span></p></td>
+<td rowspan="1" colspan="1"><p>Managing all system settings</p></td>
+<td rowspan="1" colspan="1"><p>The application can read and write all system settings.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/telephony</span></p></td>
+<td rowspan="1" colspan="1"><p>Accessing telephony information</p></td>
+<td rowspan="1" colspan="1"><p>The application can retrieve telephony information, such as the network and SIM card used, the IMEI, and the statuses of calls.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/telephony.admin</span></p></td>
+<td rowspan="1" colspan="1"><p>Managing telephony settings</p></td>
+<td rowspan="1" colspan="1"><p>The application can manage telephony settings, such as those for incoming and outgoing calls, forwarding and holding calls, networks, and SIM cards.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/tethering.admin</span></p></td>
+<td rowspan="1" colspan="1"><p>Accessing tethering services</p></td>
+<td rowspan="1" colspan="1"><p>The application can enable and disable tethering services.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/volume.set</span></p></td>
+<td rowspan="1" colspan="1"><p>Adjusting volume</p></td>
+<td rowspan="1" colspan="1"><p>The application can adjust the volume for different features, such as notification alerts, ringtones, and media.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/web-history.admin</span></p></td>
+<td rowspan="1" colspan="1"><p>Managing Internet history</p></td>
+<td rowspan="1" colspan="1"><p>The application can manage your Internet history.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/wifidirect</span></p></td>
+<td rowspan="1" colspan="1"><p>Managing Wi-Fi Direct information</p></td>
+<td rowspan="1" colspan="1"><p>The application can enable and disable Wi-Fi Direct, manage Wi-Fi Direct connections, and change Wi-Fi Direct settings.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/window.priority.set</span></p></td>
+<td rowspan="1" colspan="1"><p>Displaying windows on top of other applications and screen</p></td>
+<td rowspan="1" colspan="1"><p>The application can appear on top of other windows and screens, including the lock screen, according to the order of priority of the windows. This may prevent you from interacting with other applications or screens until the window for the application is closed.</p></td>
+</tr>
+</tbody>
+</table>
+
+<table>
+<caption>Table: Wearable native API privileges</caption>
+<tbody>
+<tr>
+<th>Privilege</th>
+<th>Display name</th>
+<th>Description</th>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/account.read</span></p></td>
+<td rowspan="1" colspan="1"><p>Reading accounts</p></td>
+<td rowspan="1" colspan="1"><p>The application can read accounts.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/account.write</span></p></td>
+<td rowspan="1" colspan="1"><p>Managing accounts</p></td>
+<td rowspan="1" colspan="1"><p>The application can create, edit, and delete accounts.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/alarm.get</span></p></td>
+<td rowspan="1" colspan="1"><p>Retrieving alarms</p></td>
+<td rowspan="1" colspan="1"><p>The application can read information about the saved alarms.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/alarm.set</span></p></td>
+<td rowspan="1" colspan="1"><p>Setting alarms</p></td>
+<td rowspan="1" colspan="1"><p>The application can set alarms and wake the device up at scheduled times.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/appmanager.kill</span></p></td>
+<td rowspan="1" colspan="1"><p>Closing applications</p></td>
+<td rowspan="1" colspan="1"><p>The application can close other applications.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/appmanager.launch</span></p></td>
+<td rowspan="1" colspan="1"><p>Launching application</p></td>
+<td rowspan="1" colspan="1"><p>The application can open other applications.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/bluetooth</span></p></td>
+<td rowspan="1" colspan="1"><p>Using unrestricted Bluetooth services</p></td>
+<td rowspan="1" colspan="1"><p>The application can perform unrestricted actions using Bluetooth, such as scanning for and connecting to other devices.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/bluetooth.admin</span></p></td>
+<td rowspan="1" colspan="1"><p>Changing Bluetooth settings</p></td>
+<td rowspan="1" colspan="1"><p>The application can change Bluetooth settings, such as turning Bluetooth on or off, set the device name, and enable or disable the AV remote control.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/bookmark.admin</span></p></td>
+<td rowspan="1" colspan="1"><p>Accessing Internet bookmarks</p></td>
+<td rowspan="1" colspan="1"><p>The application can retrieve, create, edit, and delete Internet bookmarks.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/calendar.read</span></p></td>
+<td rowspan="1" colspan="1"><p>Reading calendar</p></td>
+<td rowspan="1" colspan="1"><p>The application can read events and tasks.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/calendar.write</span></p></td>
+<td rowspan="1" colspan="1"><p>Managing calendar</p></td>
+<td rowspan="1" colspan="1"><p>The application can create, update, and delete events and tasks.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/call</span></p></td>
+<td rowspan="1" colspan="1"><p>Making phone calls</p></td>
+<td rowspan="1" colspan="1"><p>The application can make phone calls to numbers when they are tapped without further confirmation.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/callhistory.read</span></p></td>
+<td rowspan="1" colspan="1"><p>Reading call logs</p></td>
+<td rowspan="1" colspan="1"><p>The application can read call log items.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/callhistory.write</span></p></td>
+<td rowspan="1" colspan="1"><p>Managing call logs</p></td>
+<td rowspan="1" colspan="1"><p>The application can create, update, and delete call log items.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/camera</span></p></td>
+<td rowspan="1" colspan="1"><p>Using camera</p></td>
+<td rowspan="1" colspan="1"><p>The application can take and preview pictures.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/contact.read</span></p></td>
+<td rowspan="1" colspan="1"><p>Reading contacts</p></td>
+<td rowspan="1" colspan="1"><p>The application can read your profile, contacts, and contact history. Contact history can include social network activity.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/contact.write</span></p></td>
+<td rowspan="1" colspan="1"><p>Managing contacts</p></td>
+<td rowspan="1" colspan="1"><p>The application can create, update, and delete your profile, contacts, and any contact history that is related to this application. The contact history can include social network activity.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/content.write</span></p></td>
+<td rowspan="1" colspan="1"><p>Managing content</p></td>
+<td rowspan="1" colspan="1"><p>The application can change media information. This information can be used by other applications.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/datasharing</span></p></td>
+<td rowspan="1" colspan="1"><p>Sharing data between applications</p></td>
+<td rowspan="1" colspan="1"><p>The application can share data with other applications.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/display</span></p></td>
+<td rowspan="1" colspan="1"><p>Managing display settings</p></td>
+<td rowspan="1" colspan="1"><p>The application can manage display settings, such as the brightness. This can increase battery consumption.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/download</span></p></td>
+<td rowspan="1" colspan="1"><p>Downloading through HTTP</p></td>
+<td rowspan="1" colspan="1"><p>The application can manage HTTP downloads. This can result in additional charges depending on the user's payment plan.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/externalstorage</span></p></td>
+<td rowspan="1" colspan="1"><p>Accessing external storage</p></td>
+<td rowspan="1" colspan="1"><p>The application can read and write files that are saved to external storage, such as SD cards.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/externalstorage.appdata</span></p></td>
+<td rowspan="1" colspan="1"><p>Accessing application data in external storage</p></td>
+<td rowspan="1" colspan="1"><p>The application can read and write its own files in external storage, such as SD cards.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/haptic</span></p></td>
+<td rowspan="1" colspan="1"><p>Managing vibration feedback</p></td>
+<td rowspan="1" colspan="1"><p>The application can control vibration feedback.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/healthinfo</span></p></td>
+<td rowspan="1" colspan="1"><p>Reading health information</p></td>
+<td rowspan="1" colspan="1"><p>The application can read health information gathered by the device sensors, such as the pedometer and heart rate monitor.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/internet</span></p></td>
+<td rowspan="1" colspan="1"><p>Accessing Internet</p></td>
+<td rowspan="1" colspan="1"><p>The application can access the Internet. This can result in additional charges depending on your payment plan.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/keymanager</span></p></td>
+<td rowspan="1" colspan="1"><p>Using secure repository</p></td>
+<td rowspan="1" colspan="1"><p>The application can save keys, certificates, and data to, and retrieve and delete them from password-protected storage.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/keymanager.admin</span></p></td>
+<td rowspan="1" colspan="1"><p>Locking/unlocking secure repository</p></td>
+<td rowspan="1" colspan="1"><p>The application can lock and unlock a password-protected storage, and manage password changes for it.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/led</span></p></td>
+<td rowspan="1" colspan="1"><p>Managing LEDs</p></td>
+<td rowspan="1" colspan="1"><p>The application can turn LEDs on or off, such as the LED on the front of the device and the camera flash.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/location</span></p></td>
+<td rowspan="1" colspan="1"><p>Using user location</p></td>
+<td rowspan="1" colspan="1"><p>The application can read your location information.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/location.enable</span></p></td>
+<td rowspan="1" colspan="1"><p>Managing location settings</p></td>
+<td rowspan="1" colspan="1"><p>The application can control your location service settings.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/mediastorage</span></p></td>
+<td rowspan="1" colspan="1"><p>Accessing media folders</p></td>
+<td rowspan="1" colspan="1"><p>The application can read and write files in media folders.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/message.read</span></p></td>
+<td rowspan="1" colspan="1"><p>Reading text and multimedia messages and related information</p></td>
+<td rowspan="1" colspan="1"><p>The application can read text and multimedia messages, and any information related to them.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/message.write</span></p></td>
+<td rowspan="1" colspan="1"><p>Sending text and multimedia messages and updating their statuses</p></td>
+<td rowspan="1" colspan="1"><p>The application can write, send, delete, and move text and multimedia messages, and change the settings and statuses of the messages, such as read or unread.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/network.get</span></p></td>
+<td rowspan="1" colspan="1"><p>Reading network information</p></td>
+<td rowspan="1" colspan="1"><p>The application can retrieve network information such as the status of each network, its type, and detailed network profile information.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/network.profile</span></p></td>
+<td rowspan="1" colspan="1"><p>Managing network profiles</p></td>
+<td rowspan="1" colspan="1"><p>The application can add, remove, and edit network profiles.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/network.set</span></p></td>
+<td rowspan="1" colspan="1"><p>Managing network connections</p></td>
+<td rowspan="1" colspan="1"><p>The application can turn Wi-Fi on and off, and connect to and disconnect from Wi-Fi and mobile networks.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/nfc</span></p></td>
+<td rowspan="1" colspan="1"><p>Using basic NFC services</p></td>
+<td rowspan="1" colspan="1"><p>The application can read and write NFC tag information, and send NFC messages to other devices.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/nfc.admin</span></p></td>
+<td rowspan="1" colspan="1"><p>Managing NFC general settings</p></td>
+<td rowspan="1" colspan="1"><p>The application can change NFC settings, such as turning NFC on or off.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/nfc.cardemulation</span></p></td>
+<td rowspan="1" colspan="1"><p>Using NFC card emulation mode</p></td>
+<td rowspan="1" colspan="1"><p>The application can access smart card details, such as credit card details, and allow users to make payments via NFC.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/notification</span></p></td>
+<td rowspan="1" colspan="1"><p>Providing notifications</p></td>
+<td rowspan="1" colspan="1"><p>The application can show and hide its own notifications and badges.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/packagemanager.admin</span></p></td>
+<td rowspan="1" colspan="1"><p>Installing/uninstalling application packages and clearing caches
+</p></td>
+<td rowspan="1" colspan="1"><p>The application can install and uninstall application packages, and clear application caches.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/packagemanager.info</span></p></td>
+<td rowspan="1" colspan="1"><p>Retrieving detailed package information</p></td>
+<td rowspan="1" colspan="1"><p>The application can retrieve detailed application package information.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/power</span></p></td>
+<td rowspan="1" colspan="1"><p>Managing power</p></td>
+<td rowspan="1" colspan="1"><p>The application can control power-related settings, such as dimming the screen.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/push</span></p></td>
+<td rowspan="1" colspan="1"><p>Receiving push notifications</p></td>
+<td rowspan="1" colspan="1"><p>The application can receive notifications from the Internet.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/recorder</span></p></td>
+<td rowspan="1" colspan="1"><p>Recording video and audio</p></td>
+<td rowspan="1" colspan="1"><p>The application can record video and audio.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/screenshot</span></p></td>
+<td rowspan="1" colspan="1"><p>Capturing device screen</p></td>
+<td rowspan="1" colspan="1"><p>The application can capture screenshots.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/secureelement</span></p></td>
+<td rowspan="1" colspan="1"><p>Accessing secure elements</p></td>
+<td rowspan="1" colspan="1"><p>The application can access secure smart card chips, such as UICC/SIM, embedded secure elements, and secure SD cards.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/shortcut</span></p></td>
+<td rowspan="1" colspan="1"><p>Managing shortcuts</p></td>
+<td rowspan="1" colspan="1"><p>The application can create and delete shortcuts.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/systemsettings</span></p></td>
+<td rowspan="1" colspan="1"><p>Managing unrestricted system settings</p></td>
+<td rowspan="1" colspan="1"><p>The application can read and write unrestricted system settings.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/systemsettings.admin</span></p></td>
+<td rowspan="1" colspan="1"><p>Managing all system settings</p></td>
+<td rowspan="1" colspan="1"><p>The application can read and write all system settings.
+</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/telephony</span></p></td>
+<td rowspan="1" colspan="1"><p>Accessing telephony information</p></td>
+<td rowspan="1" colspan="1"><p>The application can retrieve telephony information, such as the network and SIM card used, the IMEI, and the statuses of calls.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/telephony.admin</span></p></td>
+<td rowspan="1" colspan="1"><p>Managing telephony settings</p></td>
+<td rowspan="1" colspan="1"><p>The application can manage telephony settings, such as those for incoming and outgoing calls, forwarding and holding calls, networks, and SIM cards.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/tethering.admin</span></p></td>
+<td rowspan="1" colspan="1"><p>Accessing tethering services</p></td>
+<td rowspan="1" colspan="1"><p>The application can enable and disable tethering services.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/volume.set</span></p></td>
+<td rowspan="1" colspan="1"><p>Adjusting volume</p></td>
+<td rowspan="1" colspan="1"><p>The application can adjust the volume for different features, such as notification alerts, ringtones, and media.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/web-history.admin</span></p></td>
+<td rowspan="1" colspan="1"><p>Managing Internet history</p></td>
+<td rowspan="1" colspan="1"><p>The application can manage your Internet history.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/window.priority.set</span></p></td>
+<td rowspan="1" colspan="1"><p>Displaying windows on top of other applications and screen</p></td>
+<td rowspan="1" colspan="1"><p>The application can appear on top of other windows and screens, including the lock screen, according to the order of priority of the windows. This may prevent you from interacting with other applications or screens until the window for the application is closed.</p></td>
+</tr>
+</tbody>
+</table>
+
+<h2 name="nonAPI" id="nonAPI">Non-API Bound Privileges</h2>
+
+<p>Tizen application privileges are loosely bound to APIs, so most of the privileges can be identified by the APIs that the application calls. However, there are some privileges that are not coupled with the Tizen APIs. To allow easy identification, those privileges are mapped to corresponding system resources - same as other privileges.</p>
+
+<p>The following table lists the non-API bound privileges.</p>
+
+<table>
+<caption>Table: Non-API bound privileges</caption>
+
+<tbody>
+<tr>
+<th>Privilege</th>
+<th>Display name</th>
+<th>Description</th>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/internet</span></p></td>
+<td rowspan="1" colspan="1"><p>Internet</p></td>
+<td rowspan="1" colspan="1"><p>Most of the mobile and wearable devices use a cellular network for IP communication. However, the cellular network can cause data costs and an application that sends data through the Internet can be crucial for user privacy. Due to the importance of the functionality, a privilege for controlling application Internet access has been added.</p>
+<p>The new privilege is coupled with IP addresses of the destination and source of the IP packets. If your socket is connecting to or listening for any IP address except 127.0.0.1, this privilege is required to communicate properly. If your application does not have this privilege, the connection is blocked in the kernel layer and returns an error in the <span style="font-family: Courier New,Courier,monospace;">connect()</span> function as the permission is denied. If you are listening to a socket, you never receive any packets from the outside without errors on the socket functions.</p>
+<p>If you are using the <span style="font-family: Courier New,Courier,monospace;">listen()</span> and <span style="font-family: Courier New,Courier,monospace;">connect()</span> functions between the local loopback interface (127.0.0.1), you cannot connect to a random application (due to sandboxing) no matter how you add this privilege. However, you can connect between multiple processes of the same application binary.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/mediastorage</span></p></td>
+<td rowspan="1" colspan="1"><p>Media storage</p></td>
+<td rowspan="1" colspan="1"><p>When you connect the device to a computer (Windows or Mac) through USB, you can access a dedicated media storage area shown as massive media storage. This region of the storage is called media storage and is usually used for multimedia files, such as photos, videos, and music files. Since this storage area is used for user private data, access to it must be protected with a privilege.</p>
+<p>If your application does not have this privilege, no file operations into the media storage area (<span style="font-family: Courier New,Courier,monospace;">/opt/usr/media/</span>) succeed and you receive a permission denied error. If you have this privilege, you can read and write directories and files, create new files, and delete files in the storage area.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/externalstorage</span></p></td>
+<td rowspan="1" colspan="1"><p>External storage</p></td>
+<td rowspan="1" colspan="1"><p>Similar to the media storage, many devices support external storages, such as MicroSD card or USB memory. As with the media storage, the access to an external storage (usually <span style="font-family: Courier New,Courier,monospace;">/opt/storage/sdcard</span>) must be protected with a privilege.</p>
+<p>If your application does not have this privilege, all file operations fail with a permission denied error. If you have this privilege, you have full access to the external storage.</p></td>
+</tr>
+</tbody>
+</table>
+
+<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>Tizen APIs</title>
+</head>
+
+<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+ <div id="profile">
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+ </div>
+
+<h1>Tizen APIs</h1>
+
+<p>You can develop native applications using the native API modules. You can create diverse applications with a variety of features, and design versatile applications and intriguing user interfaces with text and graphics while taking advantage of many device functionalities, such as sensors and call operations. In addition, you can, for example, manage content and media files, use network and social services, and provide messaging and embedded Web browsing functionality.</p>
+
+<p>The Tizen platform also provides a special kind of native application model, which consists of 1 UI native application and 1 or more native service applications.</p>
+
+<p>The native API specification consists of multiple API modules that represent the versatility and wide variety of features that you can implement in your native application. Each API module represents a set of logically similar submodule APIs which can be grouped into the same category. This structure was designed to make it easier for you to narrow down and find the specific methods that you require to implement a feature in your native application.</p>
+
+<p>There are 2 types of submodules - Tizen native modules and open source modules. The integration of open source modules in the native API structure allows you to add additional features by using well-known open source libraries. This is particularly advantageous for developers who are familiar with certain libraries because they can quickly add features and use previously written code in certain cases.</p>
+
+<p>The following figure and table define the mobile native API layout. The table describes the API modules and the functionality of all their submodule APIs within that module. The table also acts as a reference source for when you are planning a new feature for your application and need a way to efficiently compare different API modules to decide which APIs to use.</p>
+
+<p class="figure" id="layout">Figure: Mobile native API layout</p>
+<p align="center"><img alt="Mobile native API layout" src="../../images/mobile_api_layout.png" /></p>
+
+<table border="1" style="width: 100%">
+ <caption>Table: Mobile native API modules</caption>
+ <tbody>
+ <tr>
+ <th>API module</th>
+ <th>Description</th>
+ <th>API submodule</th>
+ <th>Functionality</th>
+ </tr>
+ <tr>
+ <td rowspan="11"><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APPLICATION__FRAMEWORK.html">Application Framework</a></td>
+ <td rowspan="11">The Application Framework API contains submodule APIs for application development. The submodule APIs enable application life-cycle management, usage of functionality that is exported by other applications, and access to a user's application preferences.
+ <p>Documentation:</p>
+ <ul>
+ <li>Guides: <a href="../../../../org.tizen.guides/html/native/app/app_guide_n.htm">Application Framework</a></li>
+ <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/native/app_framework/app_framework_tutorials_n.htm">Application Framework</a></li></ul>
+ </td>
+ <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APPLICATION__MODULE.html">Application</a></td>
+ <td>Manages the application's main event loop, state change events, and basic system events, and gets information about the application. It is also used to launch other applications.
+ </td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SERVICE__APP__MODULE.html">Service Application</a></td>
+ <td>Handles Tizen <a href="../../../../org.tizen.guides/html/native/app/service_app_n.htm">service application</a> (non-UI application) state changes and system events. It is also used to start and exit the main event loop of service applications.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APPLICATION__MANAGER__MODULE.html">Application Manager</a></td>
+ <td>Gets information, such as the application ID and path to the shared data directory, of the current application and other installed or running applications.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.mobile.apireference/group__BADGE__MODULE.html">Badge</a></td>
+ <td>Creates and removes <a href="../../../../org.tizen.guides/html/native/app/badge_n.htm">badges</a> on the application's home screen icon. A badge is an image displayed on the application icon, which informs the user about notifications and events. This submodule can also be used to set and get the badge value and visibility.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.mobile.apireference/group__CORE__LIB__BUNDLE__MODULE.html">Bundle</a></td>
+ <td>A bundle is a string-based dictionary abstract data type (ADT). A dictionary is an ordered or unordered list of key-element pairs. Keys are used to locate elements in the list. This submodule can be used to create and manage a dictionary.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__DATA__CONTROL__MODULE.html">Data Control</a></td>
+ <td>Exchanges data between applications by allowing an application to query the public database of another application that has opted to be a data provider.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MESSAGE__PORT__MODULE.html">Message Port</a></td>
+ <td>Sends and receives small messages between applications without interference from other applications and processes. Each message is a bundle.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.mobile.apireference/group__NOTIFICATION__MODULE.html">Notification</a></td>
+ <td>Creates, inserts, and updates notifications so that applications can relay information to users. Visuals, sounds, or vibrations can be used as notifications. </td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__PACKAGE__MANAGER__MODULE.html">Package Manager</a></td>
+ <td>Stores and receives information related to packages installed on the device. This is information can be, for example, the package name, path to the icon image, or the application version. It can also be used to check whether 2 package certificates match. If they match, they have been created by the same developer and can share resources securely. </td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.mobile.apireference/group__SHORTCUT__MODULE.html">Shortcut</a></td>
+ <td>Adds application shortcuts to the device home screen, which is the main landing screen of the device.
+</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.mobile.apireference/group__WIDGET__MODULE.html">Widget</a></td>
+ <td>Handles Tizen widget application state changes and system events. It is also used to start and exit the main event loop of widget applications.</td>
+ </tr>
+ <tr>
+ <td rowspan="8"><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__FRAMEWORK.html">Base</a></td>
+ <td rowspan="8">The Base API contains submodule APIs for internationalization support and contains various open source libraries.
+ <p>Documentation:</p>
+ <ul>
+ <li>Guides: <a href="../../../../org.tizen.guides/html/native/base/base_guide_n.htm">Base</a></li>
+ <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/native/base/base_tutorials_n.htm">Base</a></li>
+ </ul></td>
+ <td><a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__STL__GCC__FRAMEWORK.html">C++ Standard Library</a></td>
+ <td>Standard C++ library.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__EGLIBC__FRAMEWORK.html">EGlibc</a></td>
+ <td>Standard C library.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__GLIB__FRAMEWORK.html">Glib</a></td>
+ <td>Provides low-level libraries and advanced data structures, such as linked lists and hash tables, for use in application development.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__MODULE.html">i18n</a></td>
+ <td> Provides internationalization (i18n) support, such as flexibly generating date formats and numbers, depending on the locale setting of the device.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__LIBXML__FRAMEWORK.html">LibXML</a></td>
+ <td>This library can be used to parse XML documents such as the <a href="../app_model/application_model_n.htm#appmanifest">Application Manifest</a>.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__MINIZIP__FRAMEWORK.html">Minizip</a></td>
+ <td>Provides a library to process files in the <span style="font-family: Courier New,Courier,monospace">.zip</span> format. It can be used to zip, unzip and compress files.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__OPENMP__FRAMEWORK.html">OpenMP</a></td>
+ <td>Supports shared memory multiprocessing. This can be used for complex tasks on multicore processors. </td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__SQLITE__FRAMEWORK.html">Sqlite</a></td>
+ <td>Implements a lightweight SQL relational database. This is widely used for embedded client or local storage.</td>
+ </tr>
+ <tr>
+ <td rowspan="3"><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTENT__FRAMEWORK.html">Content</a></td>
+ <td rowspan="3">The Content API module contains submodule APIs for managing the most common device media data types, such as image, audio, and video files. It provides operations to search for content, search for content information stored on the device, create playlists, download content from servers through an HTTP connection, and access the EXIF information of an image file.
+ <p>Documentation:</p>
+ <ul>
+ <li>Guides: <a href="../../../../org.tizen.guides/html/native/content/content_guide_n.htm">Content</a></li>
+ <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/native/content/content_tutorials_n.htm">Content</a></li></ul></td>
+ <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__WEB__DOWNLOAD__MODULE.html">Download</a></td>
+ <td>Creates and manages one or more download requests. Content is downloaded from servers through an HTTP connection.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTENT__MIME__TYPE__MODULE.html">MIME Type</a></td>
+ <td>Maps MIME types to file extensions and vice versa. For example, the <span style="font-family: Courier New,Courier,monospace;">.jpeg</span> file extension is mapped to the <span style="font-family: Courier New,Courier,monospace;">image/jpeg</span> MIME type, which is required when using other API modules, such as the AppControl API in the Application submodule API, because it operates with MIME types.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CONTENT__MODULE.html">Media Content</a></td>
+ <td>Connects and disconnects from the media content service. This connection is required to insert, update and remove media file information in the media content database. Common media data types, such as image, audio, and video can be managed through the database. Other queries, such as searching for content and content information and accessing EXIF information from image files, are also possible.</td>
+ </tr>
+ <tr>
+ <td rowspan="2"><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTEXT__FRAMEWORK.html">Context</a></td>
+ <td rowspan="2">The Context API module contains submodule APIs to detect user information such as when a user is running with a device and device information such as gestures when a device is tilted.
+ <p>Documentation:</p>
+ <ul>
+ <li>Guides: <a href="../../../../org.tizen.guides/html/native/context/context_guide_n.htm">Context</a></li>
+ <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/native/context/context_tutorials_n.htm">Context</a></li> </ul></td>
+ <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTEXT__ACTIVITY__MODULE.html">Activity Recognition</a></td>
+ <td>Detects user activities, such as walking, running, and being in a moving vehicle with a device.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTEXT__GESTURE__MODULE.html">Gesture Recognition</a></td>
+ <td>Detects user gestures on devices, such as tilt, snap, and double-tap.</td>
+ </tr>
+ <tr>
+ <td rowspan="1"><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__LOCATION__FRAMEWORK.html">Location</a></td>
+ <td rowspan="1">The Location API module allows the geographical position of a device to be determined for use with location-based services.
+ <p>Documentation:</p>
+ <ul>
+ <li>Guides: <a href="../../../../org.tizen.guides/html/native/location/location_guide_n.htm">Location</a></li>
+ <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/native/location/location_tutorials_n.htm">Location</a></li></ul></td>
+ <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__LOCATION__MANAGER__MODULE.html">Location Manager</a></td>
+ <td>Acquires information about the geographical location of the device. It also allows the receiving of notifications about position changes, velocity changes, and when a given geographical area is left.</td>
+ </tr>
+ <tr>
+ <td rowspan="3"><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MESSAGING__FRAMEWORK.html">Messaging</a></td>
+ <td rowspan="3">The Messaging API module contains submodule APIs which grant access to the messaging capabilities, such as SMS, MMS and email, of the device.
+ <p>Documentation:</p>
+ <ul>
+ <li>Guides: <a href="../../../../org.tizen.guides/html/native/messaging/messaging_guide_n.htm">Messaging</a></li>
+ <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/native/messaging/messaging_tutorials_n.htm">Messaging</a></li></ul>
+
+</td>
+ <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MESSAGING__EMAIL__MODULE.html">Email</a></td>
+ <td>Allows composing, sending, and receiving of email messages.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MESSAGING__MESSAGES__MODULE.html">Messages</a></td>
+ <td>Allows composing, sending, and receiving of SMS, MMS, and WAP push messages.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MESSAGING__PUSH__PUBLIC__MODULE.html">Push</a></td>
+ <td>Allows receiving of push notifications from a push server.</td>
+ </tr>
+
+ <tr>
+ <td rowspan="15"><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__FRAMEWORK.html">Multimedia</a></td>
+ <td rowspan="15">The Multimedia API module contains submodule APIs for easily integrating an application with audio, image, and video files. It can also be used for image editing.
+<p>Documentation:</p>
+ <ul>
+ <li>Guides: <a href="../../../../org.tizen.guides/html/native/multimedia/multimedia_guide_n.htm">Multimedia</a></li>
+ <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/native/multimedia/multimedia_tutorials_n.htm">Multimedia</a></li></ul></td>
+ <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__AUDIO__IO__MODULE.html">Audio I/O</a></td>
+ <td>Manages the system audio devices by granting access to the hardware layer of the sound card. This API must be used for tasks that require raw audio data buffers in PCM format.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html">Camera</a></td>
+ <td>Accesses the camera preview to display photo previews, focuses images, and captures images.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__IMAGE__UTIL__MODULE.html">Image Util</a></td>
+ <td>Encodes and decodes JPEG images. It also provides tools, such as crop, resize, and rotate, to transform images.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__LIBEXIF__FRAMEWORK.html">libEXIF</a></td>
+ <td>EXIF is an image file format that extends existing formats, such as JPEG and TIFF. Many Tizen devices have a camera and use this format, and libEXIF can be used to read and write EXIF metainformation to and from image files.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CODEC__MODULE.html">Media Codec</a></td>
+ <td>Provides interfaces for encoding and decoding audio and video data, such as AAC audio or MPEG-4 AVC video.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__TOOL__MODULE.html">Media Tool</a></td>
+ <td>Handles audio and video packet buffers. These buffers are utilized by the other Multimedia submodule APIs.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__METADATA__EXTRACTOR__MODULE.html">Metadata Extractor</a></td>
+ <td>Extracts metadata information from an input media file.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__OPENAL__FRAMEWORK.html">OpenAL</a></td>
+ <td>Efficiently renders multichannel 3D audio.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__PLAYER__MODULE.html">Player</a></td>
+ <td>Provides functions for media playback and can be used to control media playback attributes.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__RADIO__MODULE.html">Radio</a></td>
+ <td>Supports radio usage. This submodule API can be used for tasks, such as starting and stopping the radio and scanning for radio channels.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__RECORDER__MODULE.html">Recorder</a></td>
+ <td>Controls the recording of multimedia content. Recording process attributes, such as setting the recording filename and file format, can also be configured with this API submodule.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__MODULE.html">Sound Manager</a></td>
+ <td>Provides functions to get and set sound parameters, such as output sound volume. Session policy, such as the handling of sound session interrupts, can also be configured with this API submodule.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__TONE__PLAYER__MODULE.html">Tone Player</a></td>
+ <td>Plays and stops tones.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__VIDEO__UTIL__MODULE.html">Video Util</a></td>
+ <td>Transcodes or converts media files from one encoding to another. This API supports certain video codecs, audio codecs, and file formats.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__WAV__PLAYER__MODULE.html">WAV Player</a></td>
+ <td>Plays and stops Waveform Audio File (WAV) format files.</td>
+ </tr>
+
+ <tr>
+ <td rowspan="7"><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__FRAMEWORK.html">Network</a></td>
+ <td rowspan="7">The Network API module contains submodule APIs, which can be used for data communication. It is responsible for managing connections, maintaining IP addresses, and connecting to the system through Bluetooth, Hypertext Transfer Protocol (HTTP), Near Field Communication (NFC), Sockets, and Wi-Fi. It also provides methods for retrieving information about a specific host from the Internet Domain Name System (DNS).
+ <p>Documentation:</p>
+ <ul>
+ <li>Guides: <a href="../../../../org.tizen.guides/html/native/network/network_guide_n.htm">Network</a></li>
+ <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/native/network/network_tutorials_n.htm">Network</a></li></ul>
+</td>
+ <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__BLUETOOTH__MODULE.html">Bluetooth</a></td>
+ <td>Manages Bluetooth devices. This involves launching the Bluetooth adapter and discovering, connecting, and bonding with other Bluetooth devices. </td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__CONNECTION__MODULE.html">Connection</a></td>
+ <td>Gets network connection information, such as IP address, proxy information, gateway information, connection state, and data transfer statistics.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__CURL__FRAMEWORK.html">Curl</a></td>
+ <td>A client-side URL data transfer library supporting http, https, ftp, file URIs, and many other protocols. Allows applications to perform URL-related activities without a Web browser.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__NFC__MODULE.html">NFC</a></td>
+ <td>Allows management, such as registering and deregistering event listeners, of short-range wireless near field communication (NFC). This submodule API must also be used to read, write, receive, and send NFC messages.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__WIFI__MODULE.html">Wi-Fi</a></td>
+ <td>Manages Wi-Fi connections and monitors the state of Wi-Fi connections.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__WIFI__DIRECT__MODULE.html">Wi-Fi Direct</a></td>
+ <td>Manages the settings of Wi-Fi Direct™. This submodule API also provides functions to connect and disconnect remote devices that use Wi-Fi Direct™.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__SMARTCARD__MODULE.html">Smartcard</a></td>
+ <td>Provides application communication to the SE applet methods.</td>
+ </tr>
+ <tr>
+ <td rowspan="3"><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SECURITY__FRAMEWORK.html">Security</a></td>
+ <td rowspan="3">The Security API module contains submodule APIs which provide basic cryptographic functions, various utility functions through the OpenSSL open source library, and a secure password-protected repository for keys, certificates, and sensitive data.
+ <p>Documentation:</p>
+ <ul>
+ <li>Guides: <a href="../../../../org.tizen.guides/html/native/security/security_guide_n.htm">Security</a></li>
+ <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/native/security/security_tutorials_n.htm">Security</a></li> </ul></td>
+ <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__KEY__MANAGER__MODULE.html">Key Manager</a></td>
+ <td>Provides functions to store keys, certificates, and sensitive data related to users and their password-protected applications in a secure repository. It also provides cryptographic operations to prevent key value names from being revealed to clients.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__OPENSSL__FRAMEWORK.html">OpenSSL</a></td>
+ <td>An open source library that provides basic cryptographic functions and various utility functions.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SECURITY__FRAMEWORK__PRIVILEGE__INFO__MODULE.html">Privilege Info</a></td>
+ <td>Retrieves and displays privilege information. This can be used to show a user the privileges that an application contains when they are downloading it onto their device. This is so that they are aware of the resources which the application may access. </td>
+ </tr>
+ <tr>
+ <td rowspan="3"><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__FRAMEWORK.html">Social</a></td>
+ <td rowspan="3">The Social API module contains submodule APIs to manage personal data, such as contacts and calendars on a device.
+ <p>Documentation:</p>
+ <ul>
+ <li>Guides: <a href="../../../../org.tizen.guides/html/native/social/social_guide_n.htm">Social</a></li>
+ <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/native/social/social_tutorials_n.htm">Social</a></li> </ul></td>
+ <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__ACCOUNT__MANAGER__MODULE.html">Account Manager</a></td>
+ <td>An account is a collection of information representing the user of a specific account provider. This API submodule creates and manages accounts, retrieves account information, and receives account change notifications.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CALENDAR__SVC__MODULE.html">Calendar</a></td>
+ <td>Manages calendars, including events and tasks. It also stores and queries calendar information.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__MODULE.html">Contacts</a></td>
+ <td>Manages phone contact information, such as address books, persons, and phone logs.</td>
+ </tr>
+ <tr>
+ <td rowspan="8"><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__FRAMEWORK.html">System</a></td>
+ <td rowspan="8">The System API module contains submodule APIs for system management.
+ <p>Documentation:</p>
+ <ul>
+ <li>Guides: <a href="../../../../org.tizen.guides/html/native/system/system_guide_n.htm">System</a></li>
+ <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/native/system/system_tutorials_n.htm">System</a></li> </ul>
+</td>
+ <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__MODULE.html">Device</a></td>
+ <td>Controls devices and monitors their status. For example, this submodule API can be used to control and monitor the device battery, display, and LED.</td>
+ </tr>
+<tr>
+ <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__MEDIA__KEY__MODULE.html">Media key</a></td>
+ <td>Provides methods to handle media keys from external devices that are connected to the Tizen device, such as the volume control buttons on a headset.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__RUNTIME__INFO__MODULE.html">Runtime information</a></td>
+ <td>Obtains runtime information of a mobile device. For example, this submodule API can obtain information about the device's GPS.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__SENSOR__MODULE.html">Sensor</a></td>
+ <td>Starts and stops sensors and receives sensor data.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__STORAGE__MODULE.html">Storage</a></td>
+ <td>Obtains storage information, such as root directory, storage type (internal or external), storage status, and total available space size.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__SYSTEM__INFO__MODULE.html">System Information</a></td>
+ <td>Obtains information about the device, such as the platform and API version, device model, supported device features, and screen dimensions.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__SYSTEM__SETTINGS__MODULE.html">System Settings</a></td>
+ <td>Manages system settings, such as the lock screen settings.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DLOG.html">dlog</a></td>
+ <td>Sends log output and filters log messages from the dlog logging service.</td>
+ </tr>
+
+ <tr>
+ <td rowspan="1"><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__FRAMEWORK.html">Telephony</a></td>
+ <td rowspan="1">The Telephony API module contains a submodule API to enable an application to access the telephony capabilities of the device, such as the call facility (call information and status), the network query services, and the SIM module.
+ <p>Documentation:</p>
+ <ul>
+ <li>Guides: <a href="../../../../org.tizen.guides/html/native/telephony/telephony_guide_n.htm">Telephony</a></li>
+ <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/native/telephony/telephony_tutorials_n.htm">Telephony</a></li></ul></td>
+ <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION.html">Telephony Information</a></td>
+ <td>Obtains call, network, and SIM information.</td>
+ </tr>
+<tr>
+ <td rowspan="6"><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UI__FRAMEWORK.html">UI Framework</a></td>
+ <td rowspan="6">The UI Framework API module contains submodule APIs and open source libraries for 2D and 3D graphics and text.
+ <p>Documentation:</p>
+ <ul>
+ <li>Guides: <a href="../../../../org.tizen.guides/html/native/graphics/graphics_guide_n.htm">Graphics</a> and <a href="../../../../org.tizen.guides/html/native/ui/ui_guide_n.htm">UI Framework</a></li>
+ <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/native/graphics/graphics_tutorials_n.htm">Graphics</a> and <a href="../../../../org.tizen.tutorials/html/native/ui/ui_tutorials_n.htm">UI Framework</a></li></ul></td>
+ <td><a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__CAIRO__FRAMEWORK.html">Cairo</a></td>
+ <td>A library for 2D vector graphics drawing. Vector graphics are advantageous because they have small file sizes and can be scaled to any size without any loss of image quality.</td>
+ </tr>
+<tr>
+<td><a href="../../../../org.tizen.native.mobile.apireference/group__EFL__Group.html">EFL</a></td>
+ <td>EFL is a collection of libraries that are independent and can be built on top of each other to provide useful features that complement the existing environment.</td>
+</tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__EFL__UTIL__MODULE.html">EFL UTIL</a></td>
+ <td>Gets and sets the priority order of notification windows.</td>
+ </tr>
+<tr>
+ <td><a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__FONTCONFIG__FRAMEWORK.html">Fontconfig</a> and <a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__FREETYPE__FRAMEWORK.html">Freetype</a></td>
+ <td>A text rendering library and font-handling library to let applications find a font or closely matching font.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__OPENGL__ES__FRAMEWORK.html">OpenGL ES 1.1 and 2.0</a></td>
+ <td>Library for rendering 3D and 2D graphics in embedded systems.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UI__TBM__SURFACE__MODULE.html">TBM Surface</a></td>
+ <td>The Tizen Buffer Manager (TBM) surface provides functions for the graphics buffer.</td>
+ </tr>
+
+ <tr>
+ <td rowspan="2"><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__FRAMEWORK.html">UIX</a></td>
+ <td rowspan="2">The UIX API module contains submodule APIs for managing sound data, such as voice commands.
+ <p>Documentation:</p>
+ <ul>
+ <li>Guides: <a href="../../../../org.tizen.guides/html/native/uix/uix_guide_n.htm">UIX</a></li>
+ <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/native/uix/uix_tutorials_n.htm">UIX</a></li></ul></td>
+ <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__STT__MODULE.html">STT</a></td>
+ <td>This API submodule provides functions to recognize speech.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__TTS__MODULE.html">TTS</a></td>
+ <td>This API submodule provides functions for synthesizing voice from text and playing synthesized sound data.</td>
+ </tr>
+ <tr>
+ <td rowspan="3"><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__WEB__FRAMEWORK.html">Web</a></td>
+ <td rowspan="3">The Web API module contains submodule APIs for browsing the Internet, tracking browsing history, downloading Web content, and manipulating JavaScript Object Notation (JSON) documents.
+ <p>Documentation:</p>
+ <ul>
+ <li>Guides: <a href="../../../../org.tizen.guides/html/native/web/web_guide_n.htm">Web</a></li>
+ <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/native/web/web_tutorials_n.htm">Web</a></li></ul></td>
+ <td><a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__JSONGLIB__FRAMEWORK.html">Json-Glib</a></td>
+ <td>This library allows reading and parsing of JavaScript Object Notation (JSON) documents.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__LIB__OAUTH__FRAMEK.html">libOAuth</a></td>
+ <td>Library for using an open standard for secure authorization. This library enables users to securely log into an account on an application by using their logon credentials from another secondary account that they may have with another account provider or application. </td>
+ </tr>
+<tr>
+ <td><a href="../../../../org.tizen.native.mobile.apireference/group__WEBVIEW.html">WebView</a></td>
+ <td>Displays and controls Web pages. This submodule API contains interfaces for browsing, tracking browsing history, and downloading Web content.</td>
+</tr>
+ </tbody>
+ </table>
+
+<p>The following figure and table define the wearable native API layout. The table describes the API modules and the functionality of all their submodule APIs within that module. The table also acts as a reference source for when you are planning a new feature for your application and need a way to efficiently compare different API modules to decide which APIs to use.</p>
+
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">The wearable native profile is available since Tizen 2.3.1.</td>
+ </tr>
+ </tbody>
+ </table>
+
+<p class="figure" id="layout_w">Figure: Wearable native API layout</p>
+<p align="center"><img alt="Wearable native API layout" src="../../images/wearable_api_layout.png" /></p>
+
+<table border="1" style="width: 100%">
+ <caption>Table: Wearable native API modules</caption>
+ <tbody>
+ <tr>
+ <th>API module</th>
+ <th>Description</th>
+ <th>API submodule</th>
+ <th>Functionality</th>
+ </tr>
+ <tr>
+ <td rowspan="11"><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__APPLICATION__FRAMEWORK.html">Application Framework</a></td>
+ <td rowspan="11">The Application Framework API contains submodule APIs for application development. The submodule APIs enable application life-cycle management, usage of functionality that is exported by other applications, and access to a user's application preferences.
+ <p>Documentation:</p>
+ <ul>
+ <li>Guides: <a href="../../../../org.tizen.guides/html/native/app/app_guide_n.htm">Application Framework</a></li>
+ <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/native/app_framework/app_framework_tutorials_n.htm">Application Framework</a></li></ul>
+ </td>
+ <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__APPLICATION__MODULE.html">Application</a></td>
+ <td>Manages the application's main event loop, state change events, and basic system events, and gets information about the application. It is also used to launch other applications.
+ </td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SERVICE__APP__MODULE.html">Service Application</a></td>
+ <td>Handles Tizen <a href="../../../../org.tizen.guides/html/native/app/service_app_n.htm">service application</a> (non-UI application) state changes and system events. It is also used to start and exit the main event loop of service applications.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__APPLICATION__MANAGER__MODULE.html">Application Manager</a></td>
+ <td>Gets information, such as the application ID and path to the shared data directory, of the current application and other installed or running applications.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.wearable.apireference/group__BADGE__MODULE.html">Badge</a></td>
+ <td>Creates and removes <a href="../../../../org.tizen.guides/html/native/app/badge_n.htm">badges</a> on the application's home screen icon. A badge is an image displayed on the application icon, which informs the user about notifications and events. This submodule can also be used to set and get the badge value and visibility.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.wearable.apireference/group__CORE__LIB__BUNDLE__MODULE.html">Bundle</a></td>
+ <td>A bundle is a string-based dictionary abstract data type (ADT). A dictionary is an ordered or unordered list of key-element pairs. Keys are used to locate elements in the list. This submodule can be used to create and manage a dictionary.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__DATA__CONTROL__MODULE.html">Data Control</a></td>
+ <td>Exchanges data between applications by allowing an application to query the public database of another application that has opted to be a data provider.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MESSAGE__PORT__MODULE.html">Message Port</a></td>
+ <td>Sends and receives small messages between applications without interference from other applications and processes. Each message is a bundle.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.wearable.apireference/group__NOTIFICATION__MODULE.html">Notification</a></td>
+ <td>Creates, inserts, and updates notifications so that applications can relay information to users. Visuals, sounds, or vibrations can be used as notifications. </td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__PACKAGE__MANAGER__MODULE.html">Package Manager</a></td>
+ <td>Stores and receives information related to packages installed on the device. This is information can be, for example, the package name, path to the icon image, or the application version. It can also be used to check whether 2 package certificates match. If they match, they have been created by the same developer and can share resources securely. </td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__WATCH__APP__MODULE.html">Watch Application</a></td>
+ <td>Handles Tizen watch application state changes and system events. It is also used to start and exit the main event loop of watch applications.
+ </td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.wearable.apireference/group__WIDGET__MODULE.html">Widget</a></td>
+ <td>Handles Tizen widget application state changes and system events. It is also used to start and exit the main event loop of widget applications.</td>
+ </tr>
+ <tr>
+ <td rowspan="8"><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__FRAMEWORK.html">Base</a></td>
+ <td rowspan="8">The Base API contains submodule APIs for internationalization support and contains various open source libraries.
+ <p>Documentation:</p>
+ <ul>
+ <li>Guides: <a href="../../../../org.tizen.guides/html/native/base/base_guide_n.htm">Base</a></li>
+ <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/native/base/base_tutorials_n.htm">Base</a></li>
+ </ul></td>
+ <td><a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__STL__GCC__FRAMEWORK.html">C Standard Library</a></td>
+ <td>Standard C library.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__EGLIBC__FRAMEWORK.html">EGlibc</a></td>
+ <td>Standard C library.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__GLIB__FRAMEWORK.html">Glib</a></td>
+ <td>Provides low-level libraries and advanced data structures, such as linked lists and hash tables, for use in application development.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__MODULE.html">i18n</a></td>
+ <td> Provides internationalization (i18n) support, such as flexibly generating date formats and numbers, depending on the locale setting of the device.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__LIBXML__FRAMEWORK.html">LibXML</a></td>
+ <td>This library can be used to parse XML documents such as the <a href="../app_model/application_model_n.htm#appmanifest">Application Manifest</a>.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__MINIZIP__FRAMEWORK.html">Minizip</a></td>
+ <td>Provides a library to process files in the <span style="font-family: Courier New,Courier,monospace">.zip</span> format. It can be used to zip, unzip and compress files.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__OPENMP__FRAMEWORK.html">OpenMP</a></td>
+ <td>Supports shared memory multiprocessing. This can be used for complex tasks on multicore processors. </td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__SQLITE__FRAMEWORK.html">Sqlite</a></td>
+ <td>Implements a lightweight SQL relational database. This is widely used for embedded client or local storage.</td>
+ </tr>
+ <tr>
+ <td rowspan="2"><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__CONTENT__FRAMEWORK.html">Content</a></td>
+ <td rowspan="2">The Content API module contains submodule APIs for managing the most common device media data types, such as image, audio, and video files. It provides operations to search for content, search for content information stored on the device, create playlists, download content from servers through an HTTP connection, and access the EXIF information of an image file.
+ <p>Documentation:</p>
+ <ul>
+ <li>Guides: <a href="../../../../org.tizen.guides/html/native/content/content_guide_n.htm">Content</a></li>
+ <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/native/content/content_tutorials_n.htm">Content</a></li></ul></td>
+ <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__CONTENT__MIME__TYPE__MODULE.html">MIME Type</a></td>
+ <td>Maps MIME types to file extensions and vice versa. For example, the <span style="font-family: Courier New,Courier,monospace;">.jpeg</span> file extension is mapped to the <span style="font-family: Courier New,Courier,monospace;">image/jpeg</span> MIME type, which is required when using other API modules, such as the AppControl API in the Application submodule API, because it operates with MIME types.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__CONTENT__MODULE.html">Media Content</a></td>
+ <td>Connects and disconnects from the media content service. This connection is required to insert, update and remove media file information in the media content database. Common media data types, such as image, audio, and video can be managed through the database. Other queries, such as searching for content and content information and accessing EXIF information from image files, are also possible.</td>
+ </tr>
+ <tr>
+ <td rowspan="2"><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__CONTEXT__FRAMEWORK.html">Context</a></td>
+ <td rowspan="2">The Context API module contains submodule APIs to detect user information such as when a user is running with a device and device information such as gestures when a device is tilted.
+ <p>Documentation:</p>
+ <ul>
+ <li>Guides: <a href="../../../../org.tizen.guides/html/native/context/context_guide_n.htm">Context</a></li>
+ <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/native/context/context_tutorials_n.htm">Context</a></li> </ul></td>
+ <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__CONTEXT__ACTIVITY__MODULE.html">Activity Recognition</a></td>
+ <td>Detects user activities, such as walking, running, and being in a moving vehicle with a device.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__CONTEXT__GESTURE__MODULE.html">Gesture Recognition</a></td>
+ <td>Detects user gestures on devices, such as tilt, snap, and double-tap.</td>
+ </tr>
+ <tr>
+ <td rowspan="1"><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__LOCATION__FRAMEWORK.html">Location</a></td>
+ <td rowspan="1">The Location API module allows the geographical position of a device to be determined for use with location-based services.
+ <p>Documentation:</p>
+ <ul>
+ <li>Guides: <a href="../../../../org.tizen.guides/html/native/location/location_guide_n.htm">Location</a></li>
+ <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/native/location/location_tutorials_n.htm">Location</a></li></ul></td>
+ <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__LOCATION__MANAGER__MODULE.html">Location Manager</a></td>
+ <td>Acquires information about the geographical location of the device. It also allows the receiving of notifications about position changes, velocity changes, and when a given geographical area is left.</td>
+ </tr>
+ <tr>
+ <td rowspan="2"><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MESSAGING__FRAMEWORK.html">Messaging</a></td>
+ <td rowspan="2">The Messaging API module contains submodule APIs which grant access to the messaging capabilities, such as SMS, MMS and email, of the device.
+ <p>Documentation:</p>
+ <ul>
+ <li>Guides: <a href="../../../../org.tizen.guides/html/native/messaging/messaging_guide_n.htm">Messaging</a></li>
+ <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/native/messaging/messaging_tutorials_n.htm">Messaging</a></li></ul>
+
+</td>
+ <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MESSAGING__MESSAGES__MODULE.html">Messages</a></td>
+ <td>Allows composing, sending, and receiving of SMS, MMS, and WAP push messages.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MESSAGING__PUSH__PUBLIC__MODULE.html">Push</a></td>
+ <td>Allows receiving of push notifications from a push server.</td>
+ </tr>
+
+ <tr>
+ <td rowspan="14"><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__FRAMEWORK.html">Multimedia</a></td>
+ <td rowspan="14">The Multimedia API module contains submodule APIs for easily integrating an application with audio, image, and video files. It can also be used for image editing.
+<p>Documentation:</p>
+ <ul>
+ <li>Guides: <a href="../../../../org.tizen.guides/html/native/multimedia/multimedia_guide_n.htm">Multimedia</a></li>
+ <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/native/multimedia/multimedia_tutorials_n.htm">Multimedia</a></li></ul></td>
+ <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__AUDIO__IO__MODULE.html">Audio I/O</a></td>
+ <td>Manages the system audio devices by granting access to the hardware layer of the sound card. This API must be used for tasks that require raw audio data buffers in PCM format.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html">Camera</a></td>
+ <td>Accesses the camera preview to display photo previews, focuses images, and captures images.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__IMAGE__UTIL__MODULE.html">Image Util</a></td>
+ <td>Encodes and decodes JPEG images. It also provides tools, such as crop, resize, and rotate, to transform images.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__LIBEXIF__FRAMEWORK.html">libEXIF</a></td>
+ <td>EXIF is an image file format that extends existing formats, such as JPEG and TIFF. Many Tizen devices have a camera and use this format, and libEXIF can be used to read and write EXIF metainformation to and from image files.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__CODEC__MODULE.html">Media Codec</a></td>
+ <td>Provides interfaces for encoding and decoding audio and video data, such as AAC audio or MPEG-4 AVC video.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__TOOL__MODULE.html">Media Tool</a></td>
+ <td>Handles audio and video packet buffers. These buffers are utilized by the other Multimedia submodule APIs.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__METADATA__EXTRACTOR__MODULE.html">Metadata Extractor</a></td>
+ <td>Extracts metadata information from an input media file.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__OPENAL__FRAMEWORK.html">OpenAL</a></td>
+ <td>Efficiently renders multichannel 3D audio.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__PLAYER__MODULE.html">Player</a></td>
+ <td>Provides functions for media playback and can be used to control media playback attributes.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__RADIO__MODULE.html">Radio</a></td>
+ <td>Supports radio usage. This submodule API can be used for tasks, such as starting and stopping the radio and scanning for radio channels.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__RECORDER__MODULE.html">Recorder</a></td>
+ <td>Controls the recording of multimedia content. Recording process attributes, such as setting the recording filename and file format, can also be configured with this API submodule.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__SOUND__MANAGER__MODULE.html">Sound Manager</a></td>
+ <td>Provides functions to get and set sound parameters, such as output sound volume. Session policy, such as the handling of sound session interrupts, can also be configured with this API submodule.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__TONE__PLAYER__MODULE.html">Tone Player</a></td>
+ <td>Plays and stops tones.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__WAV__PLAYER__MODULE.html">WAV Player</a></td>
+ <td>Plays and stops Waveform Audio File (WAV) format files.</td>
+ </tr>
+
+ <tr>
+ <td rowspan="6"><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__FRAMEWORK.html">Network</a></td>
+ <td rowspan="6">The Network API module contains submodule APIs, which can be used for data communication. It is responsible for managing connections, maintaining IP addresses, and connecting to the system through Bluetooth, Hypertext Transfer Protocol (HTTP), Near Field Communication (NFC), Sockets, and Wi-Fi. It also provides methods for retrieving information about a specific host from the Internet Domain Name System (DNS).
+ <p>Documentation:</p>
+ <ul>
+ <li>Guides: <a href="../../../../org.tizen.guides/html/native/network/network_guide_n.htm">Network</a></li>
+ <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/native/network/network_tutorials_n.htm">Network</a></li></ul>
+</td>
+ <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__BLUETOOTH__MODULE.html">Bluetooth</a></td>
+ <td>Manages Bluetooth devices. This involves launching the Bluetooth adapter and discovering, connecting, and bonding with other Bluetooth devices. </td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__CONNECTION__MODULE.html">Connection</a></td>
+ <td>Gets network connection information, such as IP address, proxy information, gateway information, connection state, and data transfer statistics.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__CURL__FRAMEWORK.html">Curl</a></td>
+ <td>A client-side URL data transfer library supporting http, https, ftp, file URIs, and many other protocols. Allows applications to perform URL-related activities without a Web browser.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__NFC__MODULE.html">NFC</a></td>
+ <td>Allows management, such as registering and deregistering event listeners, of short-range wireless near field communication (NFC). This submodule API must also be used to read, write, receive, and send NFC messages.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__WIFI__MODULE.html">Wi-Fi</a></td>
+ <td>Manages Wi-Fi connections and monitors the state of Wi-Fi connections.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__SMARTCARD__MODULE.html">Smartcard</a></td>
+ <td>Provides application communication to the SE applet methods.</td>
+ </tr>
+ <tr>
+ <td rowspan="3"><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SECURITY__FRAMEWORK.html">Security</a></td>
+ <td rowspan="3">The Security API module contains submodule APIs which provide basic cryptographic functions, various utility functions through the OpenSSL open source library, and a secure password-protected repository for keys, certificates, and sensitive data.
+ <p>Documentation:</p>
+ <ul>
+ <li>Guides: <a href="../../../../org.tizen.guides/html/native/security/security_guide_n.htm">Security</a></li>
+ <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/native/security/security_tutorials_n.htm">Security</a></li> </ul></td>
+ <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__KEY__MANAGER__MODULE.html">Key Manager</a></td>
+ <td>Provides functions to store keys, certificates, and sensitive data related to users and their password-protected applications in a secure repository. It also provides cryptographic operations to prevent key value names from being revealed to clients.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__OPENSSL__FRAMEWORK.html">OpenSSL</a></td>
+ <td>An open source library that provides basic cryptographic functions and various utility functions.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SECURITY__FRAMEWORK__PRIVILEGE__INFO__MODULE.html">Privilege Info</a></td>
+ <td>Retrieves and displays privilege information. This can be used to show a user the privileges that an application contains when they are downloading it onto their device. This is so that they are aware of the resources which the application may access. </td>
+ </tr>
+ <tr>
+ <td rowspan="8"><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__FRAMEWORK.html">System</a></td>
+ <td rowspan="8">The System API module contains submodule APIs for system management.
+ <p>Documentation:</p>
+ <ul>
+ <li>Guides: <a href="../../../../org.tizen.guides/html/native/system/system_guide_n.htm">System</a></li>
+ <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/native/system/system_tutorials_n.htm">System</a></li> </ul>
+</td>
+ <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__DEVICE__MODULE.html">Device</a></td>
+ <td>Controls devices and monitors their status. For example, this submodule API can be used to control and monitor the device battery, display, and LED.</td>
+ </tr>
+<tr>
+ <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__MEDIA__KEY__MODULE.html">Media key</a></td>
+ <td>Provides methods to handle media keys from external devices that are connected to the Tizen device, such as the volume control buttons on a headset.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__RUNTIME__INFO__MODULE.html">Runtime information</a></td>
+ <td>Obtains runtime information of a wearable device. For example, this submodule API can obtain information about the device's GPS.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__SENSOR__MODULE.html">Sensor</a></td>
+ <td>Starts and stops sensors and receives sensor data.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__STORAGE__MODULE.html">Storage</a></td>
+ <td>Obtains storage information, such as root directory, storage type (internal or external), storage status, and total available space size.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__SYSTEM__INFO__MODULE.html">System Information</a></td>
+ <td>Obtains information about the device, such as the platform and API version, device model, supported device features, and screen dimensions.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__SYSTEM__SETTINGS__MODULE.html">System Settings</a></td>
+ <td>Manages system settings, such as the lock screen settings.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__DLOG.html">dlog</a></td>
+ <td>Sends log output and filters log messages from the dlog logging service.</td>
+ </tr>
+
+ <tr>
+ <td rowspan="1"><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__FRAMEWORK.html">Telephony</a></td>
+ <td rowspan="1">The Telephony API module contains a submodule API to enable an application to access the telephony capabilities of the device, such as the call facility (call information and status), the network query services, and the SIM module.
+ <p>Documentation:</p>
+ <ul>
+ <li>Guides: <a href="../../../../org.tizen.guides/html/native/telephony/telephony_guide_n.htm">Telephony</a></li>
+ <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/native/telephony/telephony_tutorials_n.htm">Telephony</a></li></ul></td>
+ <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION.html">Telephony Information</a></td>
+ <td>Obtains call, network, and SIM information.</td>
+ </tr>
+<tr>
+ <td rowspan="6"><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UI__FRAMEWORK.html">UI Framework</a></td>
+ <td rowspan="6">The UI Framework API module contains submodule APIs and open source libraries for 2D and 3D graphics and text.
+ <p>Documentation:</p>
+ <ul>
+ <li>Guides: <a href="../../../../org.tizen.guides/html/native/graphics/graphics_guide_n.htm">Graphics</a> and <a href="../../../../org.tizen.guides/html/native/ui/ui_guide_n.htm">UI Framework</a></li>
+ <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/native/graphics/graphics_tutorials_n.htm">Graphics</a> and <a href="../../../../org.tizen.tutorials/html/native/ui/ui_tutorials_n.htm">UI Framework</a></li></ul></td>
+ <td><a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__CAIRO__FRAMEWORK.html">Cairo</a></td>
+ <td>A library for 2D vector graphics drawing. Vector graphics are advantageous because they have small file sizes and can be scaled to any size without any loss of image quality.</td>
+ </tr>
+<tr>
+<td><a href="../../../../org.tizen.native.wearable.apireference/group__EFL__Group.html">EFL</a></td>
+ <td>EFL is a collection of libraries that are independent and can be built on top of each other to provide useful features that complement the existing environment.</td>
+</tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__UTIL__MODULE.html">EFL UTIL</a></td>
+ <td>Gets and sets the priority order of notification windows.</td>
+ </tr>
+<tr>
+ <td><a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__FONTCONFIG__FRAMEWORK.html">Fontconfig</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__FREETYPE__FRAMEWORK.html">Freetype</a></td>
+ <td>A text rendering library and font-handling library to let applications find a font or closely matching font.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__OPENGL__ES__FRAMEWORK.html">OpenGL ES 1.1 and 2.0</a></td>
+ <td>Library for rendering 3D and 2D graphics in embedded systems.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UI__TBM__SURFACE__MODULE.html">TBM Surface</a></td>
+ <td>The Tizen Buffer Manager (TBM) surface provides functions for the graphics buffer.</td>
+ </tr>
+
+ <tr>
+ <td rowspan="2"><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UIX__FRAMEWORK.html">UIX</a></td>
+ <td rowspan="2">The UIX API module contains submodule APIs for managing sound data, such as voice commands.
+ <p>Documentation:</p>
+ <ul>
+ <li>Guides: <a href="../../../../org.tizen.guides/html/native/uix/uix_guide_n.htm">UIX</a></li>
+ <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/native/uix/uix_tutorials_n.htm">UIX</a></li></ul></td>
+ <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UIX__STT__MODULE.html">STT</a></td>
+ <td>This API submodule provides functions to recognize speech.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UIX__TTS__MODULE.html">TTS</a></td>
+ <td>This API submodule provides functions for synthesizing voice from text and playing synthesized sound data.</td>
+ </tr>
+ <tr>
+ <td rowspan="3"><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__WEB__FRAMEWORK.html">Web</a></td>
+ <td rowspan="3">The Web API module contains submodule APIs for browsing the Internet, tracking browsing history, downloading Web content, and manipulating JavaScript Object Notation (JSON) documents.
+ <p>Documentation:</p>
+ <ul>
+ <li>Guides: <a href="../../../../org.tizen.guides/html/native/web/web_guide_n.htm">Web</a></li>
+ <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/native/web/web_tutorials_n.htm">Web</a></li></ul></td>
+ <td><a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__JSONGLIB__FRAMEWORK.html">Json-Glib</a></td>
+ <td>This library allows reading and parsing of JavaScript Object Notation (JSON) documents.</td>
+ </tr>
+ <tr>
+ <td><a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__LIB__OAUTH__FRAMEK.html">libOAuth</a></td>
+ <td>Library for using an open standard for secure authorization. This library enables users to securely log into an account on an application by using their logon credentials from another secondary account that they may have with another account provider or application. </td>
+ </tr>
+<tr>
+ <td><a href="../../../../org.tizen.native.wearable.apireference/group__WEBVIEW.html">WebView</a></td>
+ <td>Displays and controls Web pages. This submodule API contains interfaces for browsing, tracking browsing history, and downloading Web content.</td>
+</tr>
+ </tbody>
+ </table>
+
+<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>
+
<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>
+ <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>Creating Your First Tizen Application</title>
</head>
-<body onload="prettyPrint()" style="overflow: auto;">
+<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
- <div id="profile">
- <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/> <img alt="Mobile native" src="../images/mn_icon.png"/></p>
- </div>
-
- <div id="toc_border"><div id="toc">
- <p class="toc-title">Content</p>
- <ul class="toc">
- <li><a href="#webapp">Creating Your First Mobile Web App</a></li>
- <li><a href="#wearapp">Creating Your First Wearable Web App</a></li>
- <li><a href="#nativeapp">Creating Your First Mobile Native App</a></li>
- </ul>
- </div></div>
+<div id="toc-navigation">
</div>
<div id="container"><div id="contents"><div class="content">
-<h1>Creating Your First Tizen Application</h1>
-<div class="cont"><div class="static-cont">
-
-<p>The following sections teach you how to create simple applications for various Tizen application types.</p>
-
-<p>Before you get started with developing Tizen applications, you must download and install the <a href="../../../org.tizen.devtools/html/cover_page.htm">Tizen SDK</a> (software development kit). For more information about the installation process, see the <a href="https://developer.tizen.org/downloads/sdk/installing-tizen-sdk" target="_blank">Tizen developer site</a>.</p>
-
-
- <!-- Show / Hide all links -->
- <div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
+ <div id="profile">
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
- <!-- Folds -->
- <ul class="devicespecifications">
-
- <li>
- <div class="devicespec-tit">
- <h2 id="webapp" name="webapp" class="items-tit-h2"><img alt="Mobile Web" src="../images/mw_fold.png"/> Creating Your First Mobile Web App</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
-
- <p>This tutorial demonstrates how you can create a simple HelloWorld application. Study this tutorial to help familiarize yourself with the Tizen <a href="../process/app_dev_process_w.htm">Web application development process</a> as well as using the Tizen SDK and installing the created application on the Emulator or target device.</p>
- <p>When you are developing a more complex application, you can take advantage of the <a href="../../../org.tizen.devtools/html/web_tools/tools_w.htm">tools included in the SDK</a> to ease the tasks of creating functionality and designing the application UI.</p>
- <h3 id="create" name="create">To Create a HelloWorld Application</h3>
- <ol class="tutorstep">
- <li>Creating the HelloWorld Project
- <ol>
- <li>Launch the <strong>Tizen IDE</strong>.</li>
- <li><a href="../process/creating_app_project_w.htm">Create the application project in the IDE</a>. <p>During the project creation, use the basic Tizen project template: in the <strong>New Tizen Web Project</strong> window, select <strong>Template > Tizen > Basic > Basic Application</strong>.</p> </li>
- <li>Define <strong>helloworld</strong> as the name of your project and click <strong>Finish</strong>.</li>
- </ol> <p> The new <strong>helloworld</strong> project is shown in the <strong>Project Explorer</strong> view of the IDE, with default content in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file as well as in several project folders, including:</p>
- <ul class="ul">
- <li><span style="font-family: Courier New,Courier,monospace">css</span> folder: CSS files directory</li>
- <li><span style="font-family: Courier New,Courier,monospace">js</span> folder: JavaScript files directory</li>
- <li><span style="font-family: Courier New,Courier,monospace">config.xml</span> file: Application configuration file</li>
- <li><span style="font-family: Courier New,Courier,monospace">icon.png</span> file: Icon file</li>
- <li><span style="font-family: Courier New,Courier,monospace">index.html</span> file: Default HTML file</li>
- </ul> </li>
- <li>Configuring the Application and Creating the Application Code <p>The Web project source files already contain the basic application functionality.</p> <p>The automatically-included code creates an application with the title "Application Name". To change the title to HelloWorld, take the following steps (illustrated in the following figure):</p>
- <ol>
- <li>Open <span style="font-family: Courier New,Courier,monospace">index.html</span> (1). </li>
- <li>Select the title (2). </li>
- <li>Locate the title in the code and change "Application Name" into "HelloWorld" (3).</li>
- </ol> <p class="figure">Figure: HelloWorld project</p> <p style="text-align: center;"> <img alt="HelloWorld project" src="../images/create_project.png" /> </p> <p>You also have various options to <a href="../process/setting_properties_w.htm#set_widget">set the application configuration</a> using the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file and <a href="../process/app_dev_process_w.htm#design">design the application UI</a>.</p> </li>
- <li>Building and Packaging the Application <p>After you have finished implementing your application, you must <a href="../process/app_dev_process_w.htm#build">build it</a>.</p> <p>After building, the Tizen IDE automatically packages the project by creating a <span style="font-family: Courier New,Courier,monospace">.wgt</span> file.</p> </li>
- <li>Running and Debugging the Application on the Emulator <p>You can run the HelloWorld application on the <a href="../process/run_debug_app_w.htm#emulator">Emulator</a>, <a href="../process/run_debug_app_w.htm#simulator">Simulator</a>, or <a href="../process/run_debug_app_w.htm#target">real target device</a>. </p><p>The following figure shows the widget running in the Emulator.</p> <p class="figure">Figure: Running the project</p> <p style="text-align: center;"> <img alt="Running the project" src="../images/running_project.png" /> </p> <p>On a real target device, you can use the <a href="../../../org.tizen.devtools/html/web_tools/remote_inspector_w.htm">Remote Inspector</a> tool to <a href="../process/run_debug_app_w.htm#debug">debug the application</a>.</p> </li>
- </ol>
- </div>
- </li>
- <li>
-
-<div class="devicespec-tit">
- <h2 id="wearapp" name="wearapp" class="items-tit-h2"><img alt="Wearable Web" src="../images/ww_fold.png"/> Creating Your First Wearable Web App</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
-
- <p>This tutorial demonstrates how you can create a simple HelloWorld application with the Tizen wearable UI. The tutorial helps you to familiarize yourself with the Tizen wearable Web <a href="../process/app_dev_process_w.htm">application development process</a> and use the Tizen SDK, installing the created application on the Emulator or a target device.</p>
- <p>When developing a more complex application, you can take advantage of the <a href="../../../org.tizen.devtools/html/web_tools/tools_w.htm">tools included in the SDK</a> to make creating functionality and designing the application UI easier.</p>
-
- <h3 id="create_ww" name="create_ww">To Create a HelloWorld Application</h3>
- <ol class="tutorstep">
- <li>Creating the HelloWorld Project
- <ol>
- <li>Launch the <strong>Tizen IDE</strong>.</li>
- <li><a href="../process/creating_app_project_w.htm">Create the application project in the IDE</a>. <p>To use the Wearable UI project template, in the <strong>New Tizen Wearable Web Project</strong> window, select <strong>Template > Wearable UI > Basic Application</strong>.</p> </li>
- <li>Define <strong>HelloWorld</strong> as the name of your project and click <strong>Finish</strong>.</li>
- </ol>
-<p class="figure">Figure: Creating the HelloWorld project</p> <p style="text-align: center;"> <img alt="Creating the HelloWorld project" src="../images/helloworld_helloworld.png" /> </p>
-
-<p> The new <strong>HelloWorld</strong> project is shown in the <strong>Project Explorer</strong> view of the IDE, with default content in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file as well as in several project folders, including:</p>
- <ul class="ul">
- <li><span style="font-family: Courier New,Courier,monospace">css</span> folder: CSS file directory</li>
- <li><span style="font-family: Courier New,Courier,monospace">js</span> folder: JavaScript file directory</li>
- <li><span style="font-family: Courier New,Courier,monospace">lib</span> folder: Tizen wearable UI framework directory
- <ul class="ul">
- <li><span style="font-family: Courier New,Courier,monospace">lib/tau/themes/black/tau.min.css</span>: Release version of the Tizen wearable UI theme </li>
- <li><span style="font-family: Courier New,Courier,monospace">lib/tau/js/tau.min.js</span>: Release version of the Tizen wearable UI library </li>
- <li><span style="font-family: Courier New,Courier,monospace">lib/tau/themes/black/tau.css</span>: Debug version of the Tizen wearable UI theme </li>
- <li><span style="font-family: Courier New,Courier,monospace">lib/tau/js/tau.js</span>: Debug version of the Tizen wearable UI library </li>
- </ul>
- </li>
- <li><span style="font-family: Courier New,Courier,monospace">config.xml</span>: Application configuration file</li>
- <li><span style="font-family: Courier New,Courier,monospace">icon.png</span>: Icon file</li>
- <li><span style="font-family: Courier New,Courier,monospace">index.html</span>: Default HTML file</li>
- </ul> </li>
- <li>Configuring the Application and Creating the Application Code
- <p>The Web project source files already contain the basic application functionality.</p>
- <ol>
- <li>Open the <span style="font-family: Courier New,Courier,monospace">index.html</span> file (1).</li>
- <li>Set the <span style="font-family: Courier New,Courier,monospace">viewport</span> meta tag (2).</li>
- <li>Add the <span style="font-family: Courier New,Courier,monospace">tau.min.css</span> file (3).
- <p>If you created your application project using the Wearable UI template, the link already exists in the <span style="font-family: Courier New,Courier,monospace">index.html</span> file.</p></li>
- <li>Add a link to the <span style="font-family: Courier New,Courier,monospace">tau.min.js</span> file in the <span style="font-family: Courier New,Courier,monospace">script</span> element (4).
- <p>If you created your application project using the Wearable UI template, the link already exists in the <span style="font-family: Courier New,Courier,monospace">index.html</span> file.</p></li></ol>
-
-<p class="figure">Figure: <span style="font-family: Courier New,Courier,monospace">index.html</span> file</p> <p style="text-align: center;"> <img alt="index.html file" src="../images/helloworld_js.png" /> </p>
-
-
- <p>You have various options to <a href="../process/setting_properties_w.htm#set_widget">set the application configuration</a> using the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file and <a href="../process/app_dev_process_w.htm#code">code the application features</a>.</p> </li>
-
+<h1>Creating Your First Tizen Application</h1>
- <li>Creating a Layout using the Wearable UI Theme <p>In the Wearable UI, each scene is named a <a href="../../../org.tizen.web.apireference/html/ui_fw_api/wearable/page/app_page_layout.htm">page</a>. When you include the <span style="font-family: Courier New,Courier,monospace">ui-page</span> class attribute in a <span style="font-family: Courier New,Courier,monospace"><div></span> element, the attribute applies to the visible Wearable UI theme and the supporting page navigation features.</p>
-<p>For more information about the Tizen wearable UI layout and widgets, see <a href="../../../org.tizen.web.apireference/html/ui_fw_api/wearable/index.htm">Tizen Wearable Web UI Framework Reference</a>.</p> </li>
-
- <li>Building and Packaging the Application
- <p>When you have finished implementing your application, you must <a href="../process/app_dev_process_w.htm#build">build it</a>.</p> <p>After building, the Tizen IDE automatically packages the project by creating a <span style="font-family: Courier New,Courier,monospace">.wgt</span> package file.</p> </li>
- <li>Running and Debugging the Application on the Emulator <p>You can run the HelloWorld application on the <a href="../process/run_debug_app_w.htm#emulator">Emulator</a> or a real <a href="../process/run_debug_app_w.htm#target">target device</a>. </p><p>The following figure shows the widget running in the Emulator.</p>
-
- <p class="figure">Figure: Running the project</p> <p style="text-align: center;"> <img alt="Running the project" src="../images/helloworld_emulator.png" /> </p>
-
- <p>On a real target device, you can use the <a href="../../../org.tizen.devtools/html/web_tools/remote_inspector_w.htm">Remote Inspector</a> tool to <a href="../process/run_debug_app_w.htm#debug">debug the application</a>.</p> </li>
- </ol>
-</div>
- </li>
-<li>
- <div class="devicespec-tit">
- <h2 id="nativeapp" name="nativeapp" class="items-tit-h2"><img alt="Mobile native" src="../images/mn_fold.png"/> Creating Your First Mobile Native App</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+<p>Before you get started with developing Tizen applications, you must download and install the <a href="../../../../org.tizen.devtools/html/cover_page.htm">Tizen SDK</a> (software development kit). For more information about the installation process, see the <a href="https://developer.tizen.org/downloads/sdk/installing-tizen-sdk" target="_blank">Tizen developer site</a>.</p>
<p>This tutorial demonstrates how you can create a simple HelloWorld application. Study this tutorial to help familiarize yourself with the Tizen <a href="../process/app_dev_process_n.htm">native application development process</a> as well as using the Tizen SDK and installing the created application on the Emulator or target device.</p>
- <p>When you are developing a more complex application, you can take advantage of the <a href="../../../org.tizen.devtools/html/native_tools/tools_n.htm">tools included in the SDK</a> to ease the tasks of creating functionality and designing the application UI.</p>
- <h3 id="create_n" name="create_n">To Create a HelloWorld Application</h3>
+ <p>When you are developing a more complex application, you can take advantage of the <a href="../../../../org.tizen.devtools/html/native_tools/tools_n.htm">tools included in the SDK</a> to ease the tasks of creating functionality and designing the application UI.</p>
+ <h2 id="create_n" name="create_n">To Create a HelloWorld Application</h2>
<ol class="tutorstep">
<li>Creating the HelloWorld Project
- <ol>
+ <ol type="a">
<li>Launch the <strong>Tizen IDE</strong>.</li>
<li><a href="../process/app_dev_process_n.htm#creating">Create the application project in the IDE</a>.
- <p>During the project creation, use the basic Tizen project template: in the <strong>New Tizen Native Project</strong> window, select <strong>Template > MOBILE-<version> > UI Application > Basic UI Application</strong>.</p> </li>
+ <p>During the project creation, use the basic Tizen project template: in the <strong>New Tizen Native Project</strong> window, select <strong>Template > MOBILE|WEARABLE-<version> > UI Application > Basic UI Application</strong>.</p> </li>
<li>Define <strong>helloworld</strong> as the name of your project and click <strong>Finish</strong>.</li></ol>
<p class="figure">Figure: Creating the helloworld project</p>
- <p style="text-align:center;"><img alt="Creating the helloworld project" src="../images/hello_world_n.png" /></p>
+ <p align="center"><img alt="Creating the helloworld project" src="../../images/hello_world_n.png" /></p>
<p> The new <strong>helloworld</strong> project is shown in the <strong>Project Explorer</strong> view of the IDE, with default content in the <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> configuration file as well as in several other project files, including:</p>
- <ul class="ul">
+ <ul>
<li><span style="font-family: Courier New,Courier,monospace">inc</span> folder: Application header file directory</li>
<li><span style="font-family: Courier New,Courier,monospace">src</span> folder: C files directory</li>
</ul>
<li>Configuring the Application and Creating the Application Code
<p>To configure the application:</p>
- <ol>
+ <ol type="a">
<li><a href="../process/setting_properties_n.htm#manifest">Set the project properties</a> by modifying the <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> file.</li>
<li>Implement the application code in the <span style="font-family: Courier New,Courier,monospace">helloworld.c</span> file.</li>
</ol>
<p>When coding the application, note that the Tizen Native API follows the basic principles listed below:</p>
-<ul class="ul"><li>Ownership of returned strings
+<ul><li>Ownership of returned strings
<p>All strings returned as pointers should be freed by the caller unless stated otherwise.</p>
<p>To not free memory may lead to memory leaks. Insufficient system memory will trigger a system low memory notification and some applications may be killed. As a heuristic algorithm selects the process to be killed, it can destabilize the system.</p>
<pre class="prettyprint">
char *app_id_string = NULL;
-if(!app_get_id(&app_id_string))
+if (!app_get_id(&app_id_string))
{
- // Use app_id_string;
- if(app_id_string != NULL)
+ // Use app_id_string
+ if (app_id_string != NULL)
free(app_id_string);
}
</pre></li>
<p>Press CTRL+SPACE while editing your codes to see available APIs as follows:</p>
<p class="figure">Figure: Code assist</p>
- <p style="text-align:center;"><img src="../images/code_assist.png" alt="Code assist" /></p>
+ <p align="center"><img src="../../images/code_assist.png" alt="Code assist" /></p>
</li></ul>
</li>
<li>Creating the Application UI with EFL
-<p> The <a href="../../../org.tizen.tutorials/html/native/ui/efl_tutorial_n.htm">EFL</a> is the native graphical toolkit for Tizen. This tutorial is an introduction to the EFL rather than a full-fledged Tizen application, as it does not use Appcore.</p>
+<p> The <a href="../../../../org.tizen.tutorials/html/native/ui/efl_tutorial_n.htm">EFL</a> is the native graphical toolkit for Tizen. This tutorial is an introduction to the EFL rather than a full-fledged Tizen application, as it does not use Appcore.</p>
<p>To create the application UI:</p>
-<ol>
+<ol type="a">
<li>Add an interface
<p>In this tutorial, there are the following exercises:</p>
-<ul class="ul">
+<ul>
<li>a window to hold everything</li>
<li>a conformant, which shows the virtual keyboard (required by Tizen guidelines)</li>
<li>a naviframe used for applications, which show multiple screens through their lives with back and forth transitions between them (required by Tizen guidelines)</li>
<li>a horizontal box with
- <ul class="ul">
+ <ul>
<li>a label with several lines of text</li>
<li>a button</li>
</ul>
<p>A pointer to important objects is stored in the following data structure.</p>
<pre class="prettyprint">typedef struct appdata
{
- // All graphical objects here are pointers to the value of the type Evas_Object.
+ // All graphical objects here are pointers to the value of the type Evas_Object
Evas_Object *win;
Evas_Object *conformant;
Evas_Object *naviframe;
<th class="note">Note</th>
</tr>
<tr>
- <td class="note">For more information on Appcore, see the <a href="../../../org.tizen.tutorials/html/native/ui/app_framework_tutorial_n.htm">Application Framework Tutorial</a>.</td>
+ <td class="note">For more information on Appcore, see the <a href="../../../../org.tizen.tutorials/html/native/app_framework/application_tutorial_n.htm#fundamentals">Handling the Application Fundamentals</a>.</td>
</tr>
</tbody>
</table>
<li>Exit the GUI
<p>The <span style="font-family: Courier New,Courier,monospace">clicked_cb()</span> function exits the Elementary; the prototype of the function is common to all callbacks given to <span style="font-family: Courier New,Courier,monospace">evas_object_smart_callback_add()</span>. Put the <span style="font-family: Courier New,Courier,monospace">clicked_cb()</span> function above the <span style="font-family: Courier New,Courier,monospace">create_gui()</span> function. </p>
-<p>For more details on the callbacks, see the <a href="../../../org.tizen.guides/html/native/ui/event_types_n.htm#evas_smart_object">Evas Smart Object Events</a> guide.</p>
+<p>For more details on the callbacks, see the <a href="../../../../org.tizen.guides/html/native/ui/event_types_n.htm#evas_smart_object">Evas Smart Object Events</a> guide.</p>
<pre class="prettyprint">static void
-clicked_cb(void *user_data __UNUSED__, Evas_Object *obj __UNUSED__, void *event_info __UNUSED__)
+clicked_cb(void *user_data, Evas_Object *obj, void *event_info)
{
elm_exit();
}
<p>You can run the HelloWorld application on the <a href="../process/running_app_n.htm">Emulator</a>. </p>
<p>The following figure shows the widget running in the Emulator.</p> <p class="figure">Figure: Running the project</p>
- <p style="text-align:center;"><img alt="Running the project" src="../images/hello.png" /></p>
+ <p align="center"><img alt="Running the project" src="../../images/hello.png" /></p>
</li>
</ol>
-</div>
- </li>
-
- </ul>
-</div>
-</div>
-
-
-<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../scripts/showhide.js"></script>
+<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>
+<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>
<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>
+ <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>Native Application Development Process</title>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<p>The following figure illustrates the process of developing a Tizen native application. Tizen provides the tools required to manage your application's life-cycle from product conception, through development and release, to end-of-life application retirement.</p>
<p class="figure">Figure: Native application development process</p>
-<p style="text-align:center;"><img alt="Native application development process" src="../images/app_dev_process_mn.png" /></p>
+<p align="center"><img alt="Native application development process" src="../../images/app_dev_process_mn.png" /></p>
<p>To develop an application with Tizen:</p>
<h2 id="planning" name="planning">Planning and Designing the Application</h2>
<h2 id="creating" name="creating">Creating the Application Project</h2>
- <p>The Tizen IDE provides various project templates that make it easier for you to start coding your application. When you create a new project, you can select a specific template, which the Tizen native <a href="../../../org.tizen.devtools/html/native_tools/project_wizard_n.htm">Project Wizard</a> uses to automatically create basic functionalities that the native application implements to be able to execute. The default project files and folders are also created.</p>
+ <p>The Tizen IDE provides various project templates that make it easier for you to start coding your application. When you create a new project, you can select a specific template, which the Tizen native <a href="../../../../org.tizen.devtools/html/native_tools/project_wizard_n.htm">Project Wizard</a> uses to automatically create basic functionalities that the native application implements to be able to execute. The default project files and folders are also created.</p>
<p>The following project templates are available:</p>
<ul>
<li><strong>UI Application</strong>
<th class="note">Note</th>
</tr>
<tr>
- <td class="note">You can also design the application UI using the controls defined in <a href="../../../org.tizen.guides/html/native/ui/ui_guide_n.htm">UI</a> guide.
+ <td class="note">You can also design the application UI using the controls defined in <a href="../../../../org.tizen.guides/html/native/ui/ui_guide_n.htm">UI</a> guide.
</td>
</tr>
</tbody>
</table>
</li>
<li><strong>Coding applications</strong>
- <p>Code your application in the IDE using the namespaces defined in the <a href="../../../org.tizen.native.mobile.apireference/index.html">Native API Reference</a>.</p> </li>
+ <p>Code your application in the IDE using the namespaces defined in the <a href="../../../../org.tizen.native.mobile.apireference/index.html">Native API Reference</a>.</p> </li>
</ul>
<p>If needed, update the privileges of the application.</p>
<p>Once you have finished implementing your application, you are ready to <a href="#build">build your application</a>.</p>
<h2 id="packaging" name="packaging">Packaging the Application</h2>
- <p>You can package your application using the Tizen IDE. If you want to register your application in the Tizen store, <a href="../../../org.tizen.devtools/html/common_tools/certificate_registration.htm">register the author certificate</a> before packaging your application.</p>
+ <p>You can package your application using the Tizen IDE. If you want to register your application in the Tizen store, <a href="../../../../org.tizen.devtools/html/common_tools/certificate_registration.htm">register the author certificate</a> before packaging your application.</p>
<ol>
<li><p>If you have made changes to the application after testing it, <a href="building_app_n.htm">rebuild the application</a>.</p> </li>
<li><a href="#creating">Create a form-based or tab-based UI application</a>.</li>
<li>Create a service application.</li>
<li>Package a multi-project application using Tizen IDE:
- <ol>
+ <ol type="a">
<li>In the IDE, make sure all the applications you want to include in the package are located in the <strong>Project Explorer</strong> view. <p>To make the projects appear in the <strong>Project Explorer</strong> view, you can create new applications, or import existing projects or sample applications into the IDE.</p> </li>
<li><p>To establish a project reference between UI application and service application:</p>
<ul>
<li><a href="building_app_n.htm">Build</a> and <a href="running_app_n.htm">run</a> the UI application. <p>The service application or shared library is built and run automatically while the UI application is built and run.</p> </li>
</ol>
-<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../scripts/showhide.js"></script>
+<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>
+<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>
<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>
+ <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>Building Applications</title>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p>To create an application project build:</p>
<ol>
<li><p>Select the build configuration: </p>
- <ol>
+ <ol type="a">
<li><p>Right-click the project in the Tizen IDE <strong>Project Explorer</strong> view.</p></li>
<li><p>Select <strong>Build Configurations > Set Active</strong>, and select the build configuration you need.</p></li>
</ol> </li>
<ul>
<li>Automatic build <p>If you select <strong>Project > Build Automatically</strong> in the IDE menu, whenever you make any change to a source or resource and save the project, the IDE automatically recognizes the change and rebuilds the changed source on your project.</p></li>
<li>Manual build <p>Build the application binaries for executing the code:</p>
- <ol>
+ <ol type="a">
<li><p>Select the project in the <strong>Project Explorer</strong> view.</p></li>
<li><p>In the IDE menu, select <strong>Project > Build Project</strong>. </p></li>
</ol> </li>
</ol>
<p>For more information about build configuration, see the CDT guide.</p>
-<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../scripts/showhide.js"></script>
+<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>
+<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>
<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>
+ <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>Debugging Applications</title>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<div id="container"><div id="contents"><div class="content">
<h1>Debugging Applications</h1>
<p>Debugging your application enables you to understand its flow of control. With the Tizen IDE, you can use various <a href="#methods">application debugging methods</a>. However, remember that the best way to debug an application is to not make bugs in the first place, so learn how to <a href="#logs">prevent bugs by using logs</a>.</p>
- <p>The debugging environment uses <a href="http://www.gnu.org/software/gdb/gdb.html" target="_blank">GDB</a> (GNU Debugger) for debugging with the Emulator and a target device. GDB can debug both locally and <a href="#remote">remotely</a>. To ease the debugging process, you can set <a href="#break">break points</a> and <a href="#watch">watch points</a>, step in, step out, and step over break points, and watch variables to track the changes in their values in the <strong>Debug</strong> view.</p>
+ <p>The debugging environment uses <a href="http://www.gnu.org/software/gdb/gdb.html" target="_blank">GDB</a> (GNU Debugger) for debugging with the Emulator and a target device. GDB can debug both locally and <a href="#remote">remotely</a>. To ease the debugging process, you can set <a href="#break">break points</a>, step in, step out, and step over break points, and watch variables to track the changes in their values in the <strong>Debug</strong> view.</p>
<p>Debugging native applications with Tizen IDE is same as with Eclipse CDT. For more information, see <a href="http://help.eclipse.org/luna/index.jsp?topic=%2Forg.eclipse.cdt.doc.user%2Ftasks%2Fcdt_o_debug.htm" target="blank">Debugging in Eclipse</a>.</p>
<h2 id="debug" name="debug">Debug View</h2>
<p>The <strong>Debug</strong> view provides debug control buttons that help you to track source code easily.</p>
<th>Description</th>
</tr>
<tr>
- <td><img alt="Resume" src="../images/debug_view_resume.png" /></td>
+ <td><img alt="Resume" src="../../images/debug_view_resume.png" /></td>
<td>F8</td>
<td>Resumes a suspended thread.</td>
</tr>
<tr>
- <td><img alt="Step Into" src="../images/debug_view_stepinto.png" /></td>
+ <td><img alt="Step Into" src="../../images/debug_view_stepinto.png" /></td>
<td>F5</td>
<td>Steps into the highlighted statement. <p>Executes the current line, and if the line contains a method, steps into the method.</p></td>
</tr>
<tr>
- <td><img alt="Step Over" src="../images/debug_view_stepover.png" /></td>
+ <td><img alt="Step Over" src="../../images/debug_view_stepover.png" /></td>
<td>F6</td>
<td>Steps over the highlighted statement. <p>Executes the current line, and if the line contains a method, executes the method without entering it.</p></td>
</tr>
<tr>
- <td><img alt="Step Return" src="../images/debug_view_stepreturn.png" /></td>
+ <td><img alt="Step Return" src="../../images/debug_view_stepreturn.png" /></td>
<td>F7</td>
<td>Step out of the current method.</td>
</tr>
<tr>
- <td><img alt="Suspend" src="../images/debug_view_suspend.png" /></td>
+ <td><img alt="Suspend" src="../../images/debug_view_suspend.png" /></td>
<td>-</td>
<td>Suspends the selected thread.</td>
</tr>
<tr>
- <td><img alt="Terminate" src="../images/debug_view_terminate.png" /></td>
+ <td><img alt="Terminate" src="../../images/debug_view_terminate.png" /></td>
<td>Ctrl + F2</td>
<td>Terminates the selected debug target.</td>
</tr>
<h2 name="remote" id="remote">Remote Debugging</h2>
<p>The Tizen SDK supports remote debugging. Remote debugging is used to debug the OS Kernel or a system which cannot support local debugging. Remote debugging requires a "GDB client" on the host side and a "GDB server" on the target side. Both sides must be connected by serial or TCP/IP communication.</p>
<p class="figure">Figure: Remote debugging</p>
- <p><img alt="Remote debugging" src="../images/remote_debug.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
+ <p align="center"><img alt="Remote debugging" src="../../images/remote_debug.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
<h3 id="debug_remote" name="debug_remote">Remote Debugging Process</h3>
<p>A cross remote debugging environment is used to support the armel architecture of the Tizen devices. This means that the "cross gdb" and "gdb server" are used instead of native gdb and gdb server. Tizen also supports native (i386) remote debugging for the i386 emulator.</p>
<p>The Eclipse CDT based IDE supports the UI and control of the debugging process. The following figure shows the control flow of the remote debugging process.</p>
<p class="figure">Figure: Remote debugging control flow</p>
- <p><img alt="Remote debugging control flow" src="../images/remote_debug_sdk.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
+ <p align="center"><img alt="Remote debugging control flow" src="../../images/remote_debug_sdk.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
<h2 name="logs" id="logs">Debugging with Logs</h2>
<h2 name="break" id="break">Break Points</h2>
<p>A break point suspends the execution of a program at the location where the break point is set.</p>
<p>To set or unset a break point, right-click in the marker bar area on the left side of the editor, and select <strong>Toggle Breakpoint</strong>.</p>
-<!--
- <p class="figure">Figure: Setting break points</p>
- <p style="text-align:center;"><img align="center" alt="Setting break points" src="../images/breakpoint_set.png" /></p>
--->
+
<p>You can view and manage the existing break points in the <strong>Breakpoints</strong> view:</p>
<ul>
<li>To remove a break point, right-click it and select <strong>Remove</strong>. <p>When you remove a break point, the corresponding icon is removed from the marker bar are in the editor too.</p> </li>
<li>To enable or disable a break point, toggle the check box of the break point, or right-click the break point and select <strong>Enable</strong> or <strong>Disable</strong>. <p>This allows you to temporarily disable a break point without losing the information it contains.</p> </li>
</ul>
- <h3 id="properties" name="properties">Break Point Properties</h3>
- <p>You can set break point properties for actions that are executed along with the break point code.</p>
- <p>To edit the properties:</p>
- <ol>
- <li>Right-click in the marker bar area and select <strong>Breakpoint Properties</strong>.</li>
- <li>To define actions, select <strong>Actions</strong> in the left side menu.</li>
- <li>Click <strong>New</strong> and select an action type. The available action types are:
- <ul>
- <li>Sound Action <p>You can make sound when the break point stops.</p> </li>
- <li>Log Action <p>You can see log messages in the <strong>Console</strong> view.</p> </li>
- <li>Resume Action <p>The program execution continues after a specified time.</p> </li>
- <li>External Tool Action <p>You can make your own action.</p> </li>
- </ul></li>
- <li>To define common properties where the break point stops, select <strong>Common</strong> in the left side menu. <p>For example, you can specify a condition using an expression. The break point stops the execution only if the condition is matched. The <strong>Ignore count</strong> field defines the count where the break point stops.</p></li>
- </ol>
-
- <h2 name="watch" id="watch">Watch Points</h2>
- <p>A watch point suspends the execution of a program at the location where the expression is read or written.</p>
- <p>To add a watch point:</p>
- <ol>
- <li>In the <strong>Variables</strong>, <strong>Outline</strong>, or <a href="#expressions">Expressions</a> view, right-click a variable, and select <strong>Add Watchpoint (C/C++)</strong>.</li>
- <li>Define the details and click <strong>OK</strong>.</li>
- </ol>
- <p class="figure">Figure: Watch point details</p>
- <p><img alt="Watch point details" src="../images/watchpoint_setting.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
- <p>The added watch points are displayed in the <strong>Breakpoints</strong> view.</p>
- <p>To execute watch points, set the read/write access of the expression you want to watch. When running the application, the program breaks when the address of the expression is valid.</p>
-
-
+
+ <h3 id="properties" name="properties">Break Point Properties</h3>
+ <p>You can set break point properties for actions that are executed along with the break point code.</p>
+ <p>To edit the properties:</p>
+ <ol>
+ <li>Right-click in the marker bar area and select <strong>Breakpoint Properties</strong>.</li>
+ <li>To define actions, select <strong>Actions</strong> in the left side menu.</li>
+ <li>Click <strong>New</strong> and select an action type. The available action types are:
+ <ul>
+ <li>Sound Action <p>You can make a sound when the break point stops.</p> </li>
+ <li>Log Action <p>You can see log messages in the <strong>Console</strong> view.</p> </li>
+ <li>Resume Action <p>The program execution continues after a specified time.</p> </li>
+ <li>External Tool Action <p>You can make your own action.</p> </li>
+ </ul>
+ Click <strong>Attach</strong> after setting the action attributes.</li>
+ <li>To define common properties where the break point stops, select <strong>Common</strong> in the left side menu.
+ <p>For example, you can specify a condition using an expression. The break point stops the execution only if the condition is matched. The <strong>Ignore count</strong> field defines the count where the break point stops.</p></li>
+ </ol>
+
+ <h2 name="watch" id="watch">Watch Points</h2>
+ <p>A watch point suspends the execution of a program at the location where the expression is read or written.</p>
+ <p>To add a watch point:</p>
+ <ol>
+ <li>In the <strong>Variables</strong>, <strong>Outline</strong>, or <a href="#expressions">Expressions</a> view, right-click a variable, and select <strong>Add Watchpoint (C/C++)</strong>.</li>
+ <li>Define the details and click <strong>OK</strong>.</li>
+ </ol>
+ <p class="figure">Figure: Watch point details</p>
+ <p align="center"><img alt="Watch point details" src="../../images/watchpoint_setting.png" /></p>
+ <p>The added watch points are displayed in the <strong>Breakpoints</strong> view.</p>
+ <p>To execute watch points, set the read/write access of the expression you want to watch. When running the application, the program breaks when the address of the expression is valid.</p>
+
<h3 name="expressions" id="expressions">Expressions View</h3>
<p>The <strong>Expressions</strong> view allows you to evaluate the data related to expressions.</p>
<p>The <strong>Expressions</strong> view can be used in the following ways:</p>
</ol></li>
</ul>
<p class="figure">Figure: Expressions view</p>
- <p style="text-align:center;"><img alt="Expressions view" src="../images/expressions.png" /></p>
+ <p align="center"><img alt="Expressions view" src="../../images/expressions.png" /></p>
<h2 name="emulator" id="emulator">Debugging Applications on the Emulator</h2>
- <p>You can debug Tizen native applications on the
- <a href="../../../org.tizen.devtools/html/common_tools/emulator.htm">
- Emulator</a> using the <strong>Project Explorer</strong> view or the Tizen IDE menu.</p>
+ <p>You can debug Tizen native applications on the <a href="../../../../org.tizen.devtools/html/common_tools/emulator.htm">Emulator</a> using the <strong>Project Explorer</strong> view or the Tizen IDE menu.</p>
<p>To debug your application on the Emulator:</p>
<ol>
<li>Start the Emulator in the <strong>Connections</strong> view.<p></p></li>
</ul> </li>
<li><p>Use the application in the Emulator as you would in a target device.</p>
- <p>While the application is running, the IDE's
- <a href="../../../org.tizen.devtools/html/common_tools/log_view.htm">
- Log view</a> shows the log, debug, and exception messages from the methods defined in the log macros.</p> </li>
+ <p>While the application is running, the IDE's <a href="../../../../org.tizen.devtools/html/common_tools/log_view.htm">Log view</a> shows the log, debug, and exception messages from the methods defined in the log macros.</p> </li>
<li><p>To stop debugging, do one of the following:</p>
<ul>
</ol>
<p>After debugging, run your application again to check its functionality and to ensure that the bugs detected during the debugging process are fixed. </p>
<p>In the Emulator settings, you can change the display language settings, keyboard language settings, proxy address, and location settings. In addition, you can use the
- <a href="../../../org.tizen.devtools/html/common_tools/emulator.htm#ecp">Emulator Control Panel</a> to generate application events (such as sensor data, incoming calls, or location data) for debugging and testing purposes.</p>
+ <a href="../../../../org.tizen.devtools/html/common_tools/emulator.htm#ecp">Emulator Control Panel</a> to generate application events (such as sensor data, incoming calls, or location data) for debugging and testing purposes.</p>
-<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../scripts/showhide.js"></script>
+<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>
+<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>
<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>
+ <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>Creating Application UIs with UI Builder</title>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<div id="container"><div id="contents"><div class="content">
<h1>Creating Application UIs with UI Builder</h1>
- <p>Tizen provides a WYSIWYG (What You See Is What You Get) <a href="../../../org.tizen.devtools/html/native_tools/uibuilder_n.htm">UI Builder</a> tool in the IDE for creating application UIs. The UI Builder includes the following features:</p>
+ <p>Tizen provides a WYSIWYG (What You See Is What You Get) <a href="../../../../org.tizen.devtools/html/native_tools/uibuilder_n.htm">UI Builder</a> tool in the IDE for creating application UIs. The UI Builder includes the following features:</p>
<ul>
<li><a href="#project">Creating a UI Builder project</a></li>
<li><a href="#layout">Creating and designing page layouts</a></li>
<p>The following figure illustrates the default project folder structure for Tizen UI Builder applications.</p>
<p class="figure">Figure: Default project folder structure</p>
-<p style="text-align:center;"><img alt="Default project folder structure" src="../images/nuib_soubp_project_explorer.png" width="372" height="629" /></p>
+<p align="center"><img alt="Default project folder structure" src="../../images/nuib_soubp_project_explorer.png" width="372" height="629" /></p>
<p>The following table describes the content of the default project folders.</p>
<table border="1">
<caption>
<th>Content</th>
</tr>
<tr>
-<td><img alt="Default project folder structure" src="../images/nuib_soubp_includes.png" width="23" height="19" /><span>includes</span></td>
+<td><img alt="Default project folder structure" src="../../images/nuib_soubp_includes.png" width="23" height="19" /><span>includes</span></td>
<td>Native UI framework</td>
</tr>
<tr>
-<td><img alt="Default project folder structure" src="../images/nuib_soubp_folder.png" width="20" height="18" /><span>res</span></td>
+<td><img alt="Default project folder structure" src="../../images/nuib_soubp_folder.png" width="20" height="18" /><span>res</span></td>
<td>Icons or images</td>
</tr>
<tr>
-<td><img alt="Default project folder structure" src="../images/nuib_soubp_folder.png" width="20" height="18" /><span>src</span></td>
+<td><img alt="Default project folder structure" src="../../images/nuib_soubp_folder.png" width="20" height="18" /><span>src</span></td>
<td>Application source files</td>
</tr>
<tr>
-<td><img alt="Default project folder structure" src="../images/nuib_soubp_folder.png" width="20" height="18" /><span>layout</span></td>
+<td><img alt="Default project folder structure" src="../../images/nuib_soubp_folder.png" width="20" height="18" /><span>layout</span></td>
<td>Layout folder</td>
</tr>
<tr>
-<td><img alt="Default project folder structure" src="../images/nuib_soubp_folder.png" width="20" height="18" /><span>lib</span></td>
+<td><img alt="Default project folder structure" src="../../images/nuib_soubp_folder.png" width="20" height="18" /><span>lib</span></td>
<td>Library folder</td>
</tr>
<tr>
-<td><img alt="Default project folder structure" src="../images/nuib_soubp_folder.png" width="20" height="18" /><span>shared</span></td>
+<td><img alt="Default project folder structure" src="../../images/nuib_soubp_folder.png" width="20" height="18" /><span>shared</span></td>
<td>Shared folder</td>
</tr>
<tr>
-<td><img alt="Default project folder structure" src="../images/nuib_soubp_folder.png" width="20" height="18" /><span>res</span></td>
+<td><img alt="Default project folder structure" src="../../images/nuib_soubp_folder.png" width="20" height="18" /><span>res</span></td>
<td>Resource folder of the Tizen IDE</td>
</tr>
<tr>
-<td><img alt="Default project folder structure" src="../images/nuib_soubp_layout_tuml.png" width="15" height="16" /><span>layout.tuml</span></td>
+<td><img alt="Default project folder structure" src="../../images/nuib_soubp_layout_tuml.png" width="15" height="16" /><span>layout.tuml</span></td>
<td>Layout meta file (tuml: Tizen UI Markup Language)</td>
</tr>
<tr>
-<td><img alt="Default project folder structure" src="../images/nuib_soubp_tizen_icon.png" width="19" height="17" /><span>nativeuibuilder</span></td>
+<td><img alt="Default project folder structure" src="../../images/nuib_soubp_tizen_icon.png" width="19" height="17" /><span>nativeuibuilder</span></td>
<td>Application icon file</td>
</tr>
<tr>
-<td><img alt="Default project folder structure" src="../images/nuib_soubp_app_xml.png" width="16" height="19" /><span>app.xml</span></td>
+<td><img alt="Default project folder structure" src="../../images/nuib_soubp_app_xml.png" width="16" height="19" /><span>app.xml</span></td>
<td>Application information file</td>
</tr>
<tr>
-<td><img alt="Default project folder structure" src="../images/nuib_soubp_tizen_manifest_xml.png" width="16" height="18" /><span>tizen-manifest.xml</span></td>
+<td><img alt="Default project folder structure" src="../../images/nuib_soubp_tizen_manifest_xml.png" width="16" height="18" /><span>tizen-manifest.xml</span></td>
<td>Manifest XML file of the Tizen IDE</td>
</tr>
</tbody>
<h2 name="layout" id="layout">Creating and Designing Page Layouts</h2>
-<p>You can create and design native <a href="../../../org.tizen.devtools/html/native_tools/uibuilder_n.htm">UI Builder</a> application pages in the <strong>WYSIWYG Editor </strong>view.</p>
+<p>You can create and design native <a href="../../../../org.tizen.devtools/html/native_tools/uibuilder_n.htm">UI Builder</a> application pages in the <strong>WYSIWYG Editor </strong>view.</p>
<h3 id="create" name="create">Creating a New Native UI Builder Application View</h3>
<p>A design area is displayed in the <strong>WYSIWYG Editor </strong>view.</p>
</li>
<li>Drag the widget from the <strong>Palette</strong> area to the <strong>WYSIWYG Editor </strong>view.
-<p style="text-align:center;"><img alt="Designing page layout" src="../images/nuib_cadvl_wysiwyg_editor.png" width="696" height="688" /></p>
+<p align="center"><img alt="Designing page layout" src="../../images/nuib_cadvl_wysiwyg_editor.png" width="696" height="688" /></p>
</li>
<li>Select the widget in the <strong>WYSIWYG Editor</strong> or <strong>Outline</strong> view.</li>
<li>In the <strong>Properties</strong> view, set the widget properties.</li>
</ol>
-<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../scripts/showhide.js"></script>
+<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>
+<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>
<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>
+ <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>Optimizing Application Performance</title>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a href="../../../org.tizen.devtools/html/native_tools/valgrind_n.htm">Valgrind</a></li>
+ <li><a href="../../../../org.tizen.devtools/html/native_tools/da_overview_n.htm">Dynamic Analyzer</a></li>
+ <li><a href="../../../../org.tizen.devtools/html/native_tools/valgrind_n.htm">Valgrind</a></li>
</ul>
</div></div>
</div>
<h2 id="measure" name="measure">Measuring Application Performance</h2>
<p>Tizen SDK supports various tools which help to measure performance and increase performance at runtime:</p>
<ul>
- <li><a href="../../../org.tizen.devtools/html/native_tools/da_overview_n.htm">Dynamic Analyzer</a>
+ <li><a href="../../../../org.tizen.devtools/html/native_tools/da_overview_n.htm">Dynamic Analyzer</a>
<p>Dynamic Analyzer helps to identify bottlenecks and improve resource usage patterns in native applications. For more information on its usage, see <a href="#dynamic_analysis">Dynamic Analysis</a>.</p></li>
- <li><a href="../../../org.tizen.devtools/html/native_tools/valgrind_n.htm">Valgrind</a> <p>Valgrind detects memory errors or leaks. This tool helps to improve memory usage patterns in native applications. For more information on its usage, see <a href="#valgrind_analysis">Valgrind Analysis</a>.</p></li>
+ <li><a href="../../../
../org.tizen.devtools/html/native_tools/valgrind_n.htm">Valgrind</a> <p>Valgrind detects memory errors or leaks. This tool helps to improve memory usage patterns in native applications. For more information on its usage, see <a href="#valgrind_analysis">Valgrind Analysis</a>.</p></li>
</ul>
<p>Measuring performance allows you to identify bottlenecks that take a critical amount of time during the program execution and to compare the code execution time before and after optimization.</p>
<p>Profiling can show unexpected bottleneck locations that you have not noticed otherwise. Once bottlenecks are identified, you can consider applying threading mechanism to clear them. This solution does not work in all situations or for all algorithms, but it can be worth spending your time to investigate the possibilities. Code refactoring is required to apply the threading mechanism.</p>
<p>The performance details of your application retrieved during tracing are stored in trace files. You can manage the trace files through the <strong>Toolbar</strong>.</p>
<p>The following figure illustrates the components of the <strong>Toolbar</strong> used for running the dynamic analyzer.</p>
<p class="figure">Figure: Toolbar</p>
- <p style="text-align: center;"> <img alt="Toolbar" src="../images/coolbar.png" /> </p>
+ <p align="center"> <img alt="Toolbar" src="../../images/coolbar.png" /> </p>
<ol>
<li><strong>Target</strong>
<p>The <strong>Target</strong> combo box shows a serial number (if the target is a device), or the Emulator name (if the target is the Emulator).</p> </li>
<p>Clicking the <strong>Save Trace</strong> button saves the trace data permanently.</p> </li>
<li><strong>Open Trace</strong>
<p>Clicking the <strong>Open Trace</strong> button loads and displays the saved trace data.</p>
- <p style="text-align: center;"> <img alt="Open Trace window" src="../images/open_trace.png" /> </p>
+ <p align="center"> <img alt="Open Trace window" src="../../images/open_trace.png" /> </p>
<p>The <strong>Open Trace</strong> window consists of the following panels:</p>
<ul>
<li><strong>Saved file</strong>
<p>When analyzing application performance, execution time of each method is one of the most significant factors. You can improve the performance of an application by identifying unexpected bottleneck locations, and analyzing and optimizing the most used methods in the dynamic analyzer.</p>
<p>To detect and fix the methods consuming the most time:</p>
<ol>
- <li>Select the <a href="../../../org.tizen.devtools/html/native_tools/da_summary_n.htm">Summary</a> tab and view the <strong>Function Usage Profiling</strong> view displaying the methods consuming the most time. Click the title of a column to view the sorted results.</li>
+ <li>Select the <a href="../../../../org.tizen.devtools/html/native_tools/da_summary_n.htm">Summary</a> tab and view the <strong>Function Usage Profiling</strong> view displaying the methods consuming the most time. Click the title of a column to view the sorted results.</li>
- <li>To view the execution time of the methods called within a specific time period, use the <a href="../../../org.tizen.devtools/html/native_tools/da_range_info_n.htm">range information feature</a> of the dynamic analyzer.
+ <li>To view the execution time of the methods called within a specific time period, use the <a href="../../../../org.tizen.devtools/html/native_tools/da_range_info_n.htm">range information feature</a> of the dynamic analyzer.
<p>The time consumed by UI-related methods is displayed on the <strong>UI Function Profiling</strong> view of the <strong>UI</strong> tab.</p> </li>
</ol>
</li>
<li>Timeline CPU Chart
<p>When analyzing application performance, the CPU load is one of the most significant factors. A CPU load peak can result in a performance bottleneck. High CPU load leads to increased memory consumption, which shortens the battery life of the device running the application. To avoid this, you need to optimize your code.</p>
<p class="figure">Figure: Timeline CPU chart</p>
- <p style="text-align:center;"><img alt="Timeline CPU chart" src="../images/timeline_cpu_chart.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
+ <p align="center"><img alt="Timeline CPU chart" src="../../images/timeline_cpu_chart.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
<p>To detect and fix CPU load peaks with the CPU load feature of the dynamic analyzer:</p>
<ol>
<li>Select the <strong>Timeline</strong> tab and view the CPU chart.</li>
<p>If you use threads in your application code, you need to analyze the load of each thread during the application execution. The thread load feature helps to distribute the thread load. You can modify the code to optimize the thread load, while maintaining a single thread.</p>
<p>The thread load is displayed in the <strong>Thread</strong> tab.</p>
<p class="figure">Figure: Thread load</p>
- <p style="text-align:center;"><img alt="Thread load" src="../images/thread_load.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
+ <p align="center"><img alt="Thread load" src="../../images/thread_load.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
<p>The thread line displayed in blue indicates the thread load within a time frame. The darker the color, the higher the load.</p>
</li>
<p>Memory leaks occur when memory capacity that is dynamically allocated during application execution is not returned after the execution stops. Severe or accumulating memory leaks can affect the performance of other applications and programs.</p>
<p>To detect and fix memory leaks using the dynamic analyzer:</p>
<ol>
- <li>To view the memory leaks occurring during application analysis, select the <a href="../../../org.tizen.devtools/html/native_tools/da_summary_n.htm">Summary</a> tab.
- <p style="text-align:center;"><img alt="Memory leaks" src="../images/memory_leaks.png" /></p>
+ <li>To view the memory leaks occurring during application analysis, select the <a href="../../../../org.tizen.devtools/html/native_tools/da_summary_n.htm">Summary</a> tab.
+ <p align="center"><img alt="Memory leaks" src="../../images/memory_leaks.png" /></p>
<p>All the listed items are not memory leaks. To identify actual memory leaks, look for applications that are already terminated but have not returned the allocated memory. When these leaks are fixed, they disappear from the list.</p></li>
- <li>Click the <strong>View Source</strong> icon in the toolbar. <p style="text-align:center;"><img alt="View source" src="../images/view_source.png" /></p></li>
+ <li>Click the <strong>View Source</strong> icon in the toolbar.
+ <p align="center"><img alt="View source" src="../../images/view_source.png" /></p></li>
<li>Move the mouse pointer to the list item you want to check. The source code is displayed as a tooltip. The part causing the memory leak is displayed in red.
- <p style="text-align:center;"><img alt="Source View" src="../images/source_view.png" /></p>
+ <p align="center"><img alt="Source View" src="../../images/source_view.png" /></p>
</li>
<li>To view the entire source code in the IDE and fix the leak, double-click the list item. If the IDE is not running the dynamic analyzer launches it automatically.</li>
</ol>
</ul>
<p>In the thread chart, the thread life-cycle is displayed as follows:</p>
<ul>
- <li><strong>Thread creation</strong>: When an API is called to create the thread, a yellow bar is displayed and a new chart item is created with a <span style="font-family: Courier New,Courier,monospace">tid</span> arrow. <p class="figure">Figure: Creating a thread</p> <p style="text-align:center;"><img alt="thread create" src="../images/thread_create.png" /></p></li>
- <li><strong>Thread exiting</strong>: When a thread exits, a purple bar is displayed with a joined <span style="font-family: Courier New,Courier,monospace">tid</span> arrow. If another thread calls the API of the exited thread, a yellow bar is displayed. <p class="figure">Figure: Exiting a thread</p> <p style="text-align:center;"><img alt="thread exit" src="../images/thread_exit.png" /></p></li>
+ <li><strong>Thread creation</strong>: When an API is called to create the thread, a yellow bar is displayed and a new chart item is created with a <span style="font-family: Courier New,Courier,monospace">tid</span> arrow. <p class="figure">Figure: Creating a thread</p>
+<p align="center"><img alt="thread create" src="../../images/thread_create.png" /></p></li>
+ <li><strong>Thread exiting</strong>: When a thread exits, a purple bar is displayed with a joined <span style="font-family: Courier New,Courier,monospace">tid</span> arrow. If another thread calls the API of the exited thread, a yellow bar is displayed. <p class="figure">Figure: Exiting a thread</p>
+<p align="center"><img alt="thread exit" src="../../images/thread_exit.png" /></p></li>
</ul>
<p>A new thread is created in a joinable state. Otherwise, memory and resource leaks can occur until the process ends. To make the process faster, set the thread to the detach state, or call the detach API. You can check the state of the thread on the <strong>Thread</strong> tab.</p>
<h5 id="concurrency" name="concurrency">Analyzing Thread Concurrency</h5>
<li>To view the parent item with the thread for each usage showing the child items, select <strong>Sync</strong>.</li>
</ul>
<p class="figure">Figure: Synchronization chart types</p>
- <p style="text-align:center;"><img alt="Synchronization chart types" src="../images/sync_chart.png" /></p>
+ <p align="center"><img alt="Synchronization chart types" src="../../images/sync_chart.png" /></p>
<p>A synchronization object can be checked using the synchronization chart. When a synchronization object acquires a lock, the thread enters the critical section. The dynamic analyzer analyzes the critical section duration and waiting time. </p>
<p>If the critical section duration increases, the thread stops working concurrently and affects the performance. If a thread acquires a lock, the critical section waiting time of the other threads increases. To avoid potential dead lock, reduce the waiting time.</p>
<p class="figure">Figure: Dead lock warning</p>
- <p style="text-align:center;"><img alt="Dead lock warning" src="../images/dead_lock_warning.png" /></p>
+ <p align="center"><img alt="Dead lock warning" src="../../images/dead_lock_warning.png" /></p>
<h2 id="valgrind_analysis" name="valgrind_analysis">Valgrind Analysis</h2>
<p>Valgrind helps you to detect memory errors or leaks in your application at runtime.</p>
<li>Heap memory profiling <p>This option uses the <strong>Massif</strong> tool to profile your application.
</p></li>
</ul></li>
- <li><p>On the <strong>General setting</strong> tab, set the general Valgrind options. These options are used for both <strong>Memcheck</strong> and <strong>Massif</strong> profiling.</p> <p class="figure">Figure: Memory error and memory leak data options</p> <p style="text-align:center;"><img alt="Memory error and memory leak data options" src="../images/valgrind_general.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
+ <li><p>On the <strong>General setting</strong> tab, set the general Valgrind options. These options are used for both <strong>Memcheck</strong> and <strong>Massif</strong> profiling.</p> <p class="figure">Figure: Memory error and memory leak data options</p>
+<p align="center"><img alt="Memory error and memory leak data options" src="../../images/valgrind_general.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
<table style="width: 100%" border="1">
<caption>
Table: General setting options
<h4 id="heap" name="heap">Heap Memory Profiling Results</h4>
<p>The heap memory profiling table displays the heap memory consumed and allocated during the profiling process.</p>
<p class="figure">Figure: Heap memory profiling results</p>
- <p style="text-align:center;"><img alt="Heap memory profiling results" src="../images/valgrind_heap.png" /></p>
+ <p align="center"><img alt="Heap memory profiling results" src="../../images/valgrind_heap.png" /></p>
<ul>
<li><strong>Snapshot</strong> is the index number of the snapshot.</li>
<li><strong>Time (i)</strong> is the number of instructions being executed.</li>
-<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../scripts/showhide.js"></script>
+<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>
+<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>
<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>
+ <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>Running Applications</title>
</head>
<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
</div>
<div id="container"><div id="contents"><div class="content">
<div id="profile">
- <p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<h1>Running Applications</h1>
- <p>You can run Tizen native applications on the <a href="../../../org.tizen.devtools/html/common_tools/emulator.htm">
- Emulator</a> using the <strong>Project Explorer</strong> view or the Tizen IDE menu.</p>
+ <p>You can run Tizen native applications on the <a href="../../../../org.tizen.devtools/html/common_tools/emulator.htm">Emulator</a> using the <strong>Project Explorer</strong> view or the Tizen IDE menu.</p>
<p>To run your application on the Emulator:</p>
<ol>
<li><p>Before you run the application, you must sign your application package by generating an author certificate and registering it in the IDE.</p>
-<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../scripts/showhide.js"></script>
+<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>
+<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>
<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>
+ <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>Setting Project Properties</title>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a href="../details/app_filtering.htm#native">Feature Filtering</a></li>
- <li><a href="../details/sec_privileges.htm#native">Security and API Privileges</a></li>
+ <li><a href="../details/app_filtering_n.htm">Feature Filtering</a></li>
+ <li><a href="../details/sec_privileges_n.htm">Security and API Privileges</a></li>
</ul>
</div></div>
</div>
<ol>
<li><p>In the <strong>Properties</strong> window, select <strong>C/C++ Build > Tizen Settings > API and Privilege Checker</strong>.</p></li>
<li>
-<p>Select the required <a href="../../../org.tizen.devtools/html/native_tools/api_privilege_checker_n.htm#API">API problems</a> in the <strong>API Check</strong> panel.</p> </li>
+<p>Select the required <a href="../../../../org.tizen.devtools/html/native_tools/api_privilege_checker_n.htm#API">API problems</a> in the <strong>API Check</strong> panel.</p> </li>
</ol>
<p>To perform API usage checks automatically, select the required option in the <strong>Launching</strong> panel: </p>
<ul>
<li>During the <a href="app_dev_process_n.htm#build">build process</a>, select the <strong>Run API and privilege checks with build</strong> option.</li>
<li>During code editing, select the <strong>Run API and privilege checks while editing</strong> option.</li>
</ul>
-<p>You can also <a href="../../../org.tizen.devtools/html/native_tools/api_privilege_checker_n.htm">perform the API usage checks manually</a> after building the application by selecting <strong>Project > Check API and Privilege Violations</strong>. The results are displayed in the <strong>Problems</strong> view.</p>
+<p>You can also <a href="../../../../org.tizen.devtools/html/native_tools/api_privilege_checker_n.htm">perform the API usage checks manually</a> after building the application by selecting <strong>Project > Check API and Privilege Violations</strong>. The results are displayed in the <strong>Problems</strong> view.</p>
<table class="note"><tbody>
<tr>
<th class="note">Note</th>
<ol>
<li>In the <strong>Properties</strong> window, select <strong>C/C++ Build > Tizen Settings > API and Privilege Checker</strong>.</li>
<li>
-<p>Select the required <a href="../../../org.tizen.devtools/html/native_tools/api_privilege_checker_n.htm#privilege">privilege problems</a> in the <strong>Privilege Check</strong> panel.</p> </li>
+<p>Select the required <a href="../../../../org.tizen.devtools/html/native_tools/api_privilege_checker_n.htm#privilege">privilege problems</a> in the <strong>Privilege Check</strong> panel.</p> </li>
</ol>
<p>To perform privilege checks automatically, select the required option in the <strong>Launching</strong> panel: </p>
<ul>
<li>During the <a href="app_dev_process_n.htm#build">build process</a>, select the <strong>Run API and privilege checks with build</strong> option.</li>
<li>During code editing, select the <strong>Run API and privilege checks while editing</strong> option.</li>
</ul>
-<p>You can also <a href="../../../org.tizen.devtools/html/native_tools/api_privilege_checker_n.htm">perform privilege checks manually</a> after building the application by selecting <strong>Project > Check API and Privilege Violations</strong>. The results are displayed in the <strong>Problems</strong> view.</p>
+<p>You can also <a href="../../../../org.tizen.devtools/html/native_tools/api_privilege_checker_n.htm">perform privilege checks manually</a> after building the application by selecting <strong>Project > Check API and Privilege Violations</strong>. The results are displayed in the <strong>Problems</strong> view.</p>
<h2 id="manifest" name="manifest">Setting the Application Manifest</h2>
<p>The application manifest consists of application information, such as package, version, features, and privileges, which are available for the application. To configure the application information in the manifest editor, double-click the <span style="font-family: Courier New, Courier, monospace">tizen-manifest.xml</span> file present in the project folder of the application.</p>
<p class="figure">Figure: Setting the application manifest</p>
- <p style="text-align: center;">
- <img alt="Setting the application manifest" src="../images/tizen_project_explorer.png"/>
- </p>
+ <p align="center"><img alt="Setting the application manifest" src="../../images/tizen_project_explorer.png"/></p>
<p>You can edit application properties using the tabs of the manifest editor.</p>
<p>You can set and edit general and project-related information about the application, such as application package, version, author, description, in the <strong>Overview</strong> tab of the manifest editor. Additionally, you can specify the application icon.</p>
<p>You can perform the following tasks using the <strong>Overview</strong> tab:</p>
- <ul class="ul">
+ <ul>
<li>Set the package name of the application. <p>The package name represents the package identifier of the application</p></li>
<li>Set the application version (x.y.z). <p>The application version format has the following constraints: 0 ≤ {x, y} ≤ 255, 0 ≤ z ≤ 65535. You can change the application version in the <strong>Version</strong> field.</p> </li>
<li>Set the application label. <p>The application label represents the label of the application.</p> </li>
</table>
</li>
<li>Set the application author.
- <p>The application author represents the creator of the Tizen mobile native application package. You can set the name, email ID, and Web site of the author.</p>
+ <p>The application author represents the creator of the Tizen native application package. You can set the name, email ID, and Web site of the author.</p>
</li>
<li>Set the application description.
- <p>The application description represents the human-readable descriptions of the Tizen mobile native application package.</p>
+ <p>The application description represents the human-readable descriptions of the Tizen native application package.</p>
</li>
</ul>
<p>You can declare required software or hardware features. This declaration can be used for application filtering in the Tizen Store.</p>
- <p>To enable filtering for your mobile native application:</p>
+ <p>To enable filtering for your native application:</p>
<ol>
<li>In the <strong>Features</strong> tab of the manifest editor, click <strong>Add</strong> and set the mandatory features for the application package. <p>The manifest file (<span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span>) is updated automatically.</p>
</li>
<li>Upload and publish the application package on the Tizen Store.</li>
<li>If a Tizen-powered device requests applications, the store displays a list containing only applications compatible with the user's device.</li>
</ol>
-<p>For more information on the available requirements for an application package, see <a href="../details/app_filtering.htm#native">Feature Filtering for Native Applications</a>. If you want to check which features are necessary for using a specific API, see the related feature in the native <a href="../../../org.tizen.native.mobile.apireference/index.html">API Reference</a>.</p>
+<p>For more information on the available requirements for an application package, see <a href="../details/app_filtering_n.htm">Feature Filtering for Native Applications</a>. If you want to check which features are necessary for using a specific API, see the related feature in the native <a href="../../../../org.tizen.native.mobile.apireference/index.html">API Reference</a>.</p>
<h3 id="privileges" name="privileges">Specifying Privileges in the Privilege Tab</h3>
- <p>You can use features and services provided by <a href="../details/sec_privileges.htm#native">privileged APIs</a>, which handle platform and user-sensitive data. Assign specific privileges to your application in the <strong>Privilege</strong> tab of the manifest editor, according to the application functionality that you want to develop.</p>
+ <p>You can use features and services provided by <a href="../details/sec_privileges_n.htm">privileged APIs</a>, which handle platform and user-sensitive data. Assign specific privileges to your application in the <strong>Privilege</strong> tab of the manifest editor, according to the application functionality that you want to develop.</p>
<h3 id="localization" name="localization">Setting the Supported Locales in the Localization Tab</h3>
<p>You can define advanced features of the application, such as metadata and data and application control functionalities, account, and miscellaneous options, in the <strong>Advanced</strong> tab of the manifest editor.</p>
<p>You can perform the following tasks using the <strong>Advanced</strong> tab:</p>
- <ul class="ul">
+ <ul>
<li>Add metadata. <p>You can add user-defined key-value pairs to the application to be used for filtering in the package manager.</p> </li>
<li>Set miscellaneous options.
<p>You can set as true or false various application options:</p>
- <ul class="ul">
+ <ul>
<li>Set multiple <p>This attribute indicates whether the application can be launched as multiple.</p></li>
<li>Set taskmanage <p>This attribute indicates whether the application is shown in the task manager.</p></li>
<li>Set nodisplay for UI application<p>This attribute indicates whether the application is shown in the app-tray. For service applications, nodisplay is always true.</p></li>
<li>Set auto-restart <p>This attribute indicates whether the application is relaunched automatically when it is terminated abnormally.</p></li>
<li>Set on-boot <p>This attribute indicates whether the application is launched automatically on device booting time or application installation time.</p></li>
</ul>
+
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">The auto-restart and on-boot attributes are not supported in Tizen wearable devices.</td>
+ </tr>
+ </tbody>
+ </table>
</li>
<li>Define application control.
-<p>You can <a href="../../../org.tizen.guides/html/native/app/application_n.htm#export_appcontrol">export the application control functionality</a> of your application. To define an application control used to access the functionality of your application, click <strong>Add</strong> in the <strong>Application Control</strong> section of the <strong>Advanced</strong> tab of the manifest editor.</p>
+<p>You can <a href="../../../../org.tizen.guides/html/native/app/application_n.htm#export_appcontrol">export the application control functionality</a> of your application. To define an application control used to access the functionality of your application, click <strong>Add</strong> in the <strong>Application Control</strong> section of the <strong>Advanced</strong> tab of the manifest editor.</p>
<p>Each application control can have multiple operation, mime type, and uri attributes.</p> </li>
<li>Add an account.
<p>Account providers, such as Google and Facebook, represent specific service provider-related information or protocol that provides the user accounts. To add, update, or remove accounts, you must register a specific account provider in your application.</p>
<span style="font-family: Courier New,Courier,monospace">String</span> </td>
<td>
<p>File path of the account provider icon.</p> <p>The icon size is:</p>
- <ul class="ul">
+ <ul>
<li>72 x 72 for Xhigh (HD)</li>
<li>48 x 48 for High (WVGA)</li>
</ul>
<span style="font-family: Courier New,Courier,monospace">String</span> </td>
<td>
<p>File path of the account provider icon.</p> <p>The icon size is:</p>
- <ul class="ul">
+ <ul>
<li>45 x 45 for Xhigh (HD)</li>
<li>30 x 30 for High (WVGA)</li>
</ul>
<td><span style="font-family: Courier New,Courier,monospace">String</span></td>
<td> <p>Capability of the account provider.</p>
<p>Capabilities are defined in the <span style="font-family: Courier New,Courier,monospace">http://<VENDOR_INFORMATION>/accounts/capability/<NAME></span> IRI format.</p> <p>The following predefined capabilities can be used in Tizen:</p>
- <ul class="ul">
+ <ul>
<li>
<span style="font-family: Courier New,Courier,monospace">http://tizen.org/account/capability/contact</span> <p>Used when the account is related to the contacts.</p>
</li>
</tbody>
</table>
</li>
- <li>Export DataControl functionality. <p>You can <a href="../../../org.tizen.guides/html/native/app/data_control_n.htm#export">export data functionalities</a> of your Tizen native application.</p> <p>To define a data control used to export application data, click <strong>Add</strong> and define the data control details.</p> </li>
+ <li>Export DataControl functionality. <p>You can <a href="../../../
../org.tizen.guides/html/native/app/data_control_n.htm#export">export data functionalities</a> of your Tizen native application.</p> <p>To define a data control used to export application data, click <strong>Add</strong> and define the data control details.</p> </li>
</ul>
<h3 id="source" name="source">Editing the tizen-manifest.xml File in the tizen-manifest.xml Tab</h3>
- <p>The <strong>tizen-manifest.xml</strong> tab of the manifest editor shows the code of the <span style="font-family: Courier New, Courier, monospace">tizen-manifest.xml</span> file. You can <a href="../../../org.tizen.devtools/html/native_tools/manifest_text_editor_n.htm">edit the basic syntax of the XML document</a> and also see how changes made on the other tabs are reflected in the raw XML source content.</p>
+ <p>The <strong>tizen-manifest.xml</strong> tab of the manifest editor shows the code of the <span style="font-family: Courier New, Courier, monospace">tizen-manifest.xml</span> file. You can <a href="../../../../org.tizen.devtools/html/native_tools/manifest_text_editor_n.htm">edit the basic syntax of the XML document</a> and also see how changes made on the other tabs are reflected in the raw XML source content.</p>
<table class="note">
<tbody>
<tr>
-<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../scripts/showhide.js"></script>
+<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>
+<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>
<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>
+ <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>Preface</title>
</head>
<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
</div>
<div id="container"><div id="contents"><div class="content">
<div id="profile">
- <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/> <img alt="Mobile native" src="../images/mn_icon.png"/></p>
+ <p><img alt="Mobile Web" src="images/mw_icon.png"/> <img alt="Wearable Web" src="images/ww_icon.png"/> <img alt="Mobile native" src="images/mn_icon.png"/> <img alt="Wearable native" src="images/wn_icon.png"/></p>
</div>
<h1>Preface</h1>
<p>Tizen is an open-source project that allows you to create feature-rich applications for multiple device categories.</p>
-<p>The <a href="../details/details.htm#platform">Tizen platform</a> supports 2 different application types: the Web application and the native application. The Tizen platform also allows you to develop a hybrid application package where Web and native applications are packaged together to make more powerful applications. The Tizen platform ensures that all Tizen applications have consistent look and feel, regardless of whether you use the Web or native framework to create them.</p>
+<p>The Tizen platform supports 2 different application types: the Web application and the native application. The Tizen platform also allows you to develop a hybrid application package where Web and native applications are packaged together to make more powerful applications. The Tizen platform ensures that all Tizen applications have consistent look and feel, regardless of whether you use the Web or native framework to create them.</p>
-<p>The Tizen platform provides various profiles for application development: the mobile and wearable Web profiles can be used to develop Web applications for mobile and wearable devices, while the mobile native profile can be used to develop native applications for mobile devices.</p>
+<p>The Tizen platform provides various profiles for application development: the mobile and wearable Web profiles can be used to develop Web applications for mobile and wearable devices, while the mobile and wearable native profile can be used to develop native applications for mobile and wearable devices.</p>
<p>When using the Tizen documentation, look for the profile icons on the upper right corner of each page. The icons (listed in the following table) indicate which profiles the topic applies to. "N" in the icon stands for the native application profiles and "W" stands for the Web application profiles.</p>
</tr>
<tr>
<td>Mobile Web</td>
- <td><img alt="Mobile Web" src="../images/mw_icon.png"/> or <img alt="Optional Mobile Web" src="../images/mw_icon_optional.png"/></td>
+ <td><img alt="Mobile Web" src="images/mw_icon.png"/> or <img alt="Optional Mobile Web" src="images/mw_icon_optional.png"/></td>
</tr>
<tr>
<td>Wearable Web</td>
- <td><img alt="Wearable Web" src="../images/ww_icon.png"/> or <img alt="Optional Wearable Web" src="../images/ww_icon_optional.png"/></td>
+ <td><img alt="Wearable Web" src="images/ww_icon.png"/> or <img alt="Optional Wearable Web" src="images/ww_icon_optional.png"/></td>
</tr>
<tr>
<td>Mobile Native</td>
- <td><img alt="Native Web" src="../images/mn_icon.png"/></td>
+ <td><img alt="Mobile Native" src="images/mn_icon.png"/></td>
</tr>
+ <tr>
+ <td>Wearable Native</td>
+ <td><img alt="Wearable Native" src="images/wn_icon.png"/></td>
+ </tr>
</tbody>
</table>
<p>To make the most of your Tizen applications, get familiar with the Tizen documentation:</p>
<ul>
- <li><a href="../cover_page.htm">Getting Started</a>
- <p>The getting started with Tizen documentation provides all the information you need to become familiar with Tizen programming and application model. The documentation also walks you through creating your first Tizen application.</p>
+ <li><a href="cover_page.htm">Getting Started</a>
+ <p>The getting started with Tizen documentation provides overall information you need to become familiar with Tizen programming and application model. The documentation also walks you through creating your first Tizen application.</p>
</li>
- <li><a href="../../../org.tizen.devtools/html/cover_page.htm">Development Environment and Tools</a>
+ <li><a href="../../org.tizen.devtools/html/cover_page.htm">Development Environment and Tools</a>
<p>The development environment and tools documentation introduces the Tizen software development kit (SDK) and related tools you can use when developing your Tizen application.</p>
</li>
- <li><a href="../../../org.tizen.tutorials/html/cover_page.htm">Tutorials</a>
+ <li><a href="../../org.tizen.tutorials/html/cover_page.htm">Tutorials</a>
<p>The Tizen tutorials teach you how to incorporate Tizen features into your application. The tutorials contain detailed code examples to help you write the required code in practice.</p>
</li>
- <li><a href="../../../org.tizen.guides/html/cover_page.htm">Guides</a>
+ <li><a href="../../org.tizen.guides/html/cover_page.htm">Guides</a>
<p>The Tizen developer guides introduce the various features that you can use in creating Tizen applications. You can select an API domain to implement its functionalities into your Tizen application.</p>
</li>
- <li><a href="../../../org.tizen.web.apireference/html/cover_page.htm">API References</a>
+ <li><a href="../../org.tizen.web.apireference/html/cover_page.htm">API References</a>
<p>The Tizen API References provide descriptions of all the Tizen API domains, subdomains, classes, interfaces, and methods.</p>
</li>
+ <li><a href="../../org.tizen.sampledescriptions/html/cover_page.htm">Sample Descriptions</a>
+ <p>The Tizen sample descriptions introduce the sample applications provided in the SDK.</p>
+ </li>
</ul>
-<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../scripts/showhide.js"></script>
+<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>
+<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>
+++ /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>Creating Application UIs with UI Builder</title>
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="navigation">
- <div id="profile">
- <p><img alt="Mobile Web" src="../images/mw_icon.png"/></p>
- </div>
-
- <div id="toc_border"><div id="toc">
- <p class="toc-title">Content</p>
- <ul class="toc">
- <li><a href="#project">Creating a UI Builder Project</a></li>
- <li><a href="#layout">Creating and Designing Page Layouts</a></li>
- <li><a href="#event">Handling Events and Testing</a></li>
- <li><a href="#migration">Migrating UI Builder Projects</a></li>
- </ul>
- </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
- <h1>Creating Application UIs with UI Builder</h1>
- <p>Tizen provides a WYSIWYG (What You See Is What You Get) <a href="../../../org.tizen.devtools/html/web_tools/uibuilder_w.htm">UI Builder</a> tool in the IDE for creating application UIs. The UI Builder includes the following features:</p>
- <ul>
- <li><a href="#project">Creating a UI Builder project</a></li>
- <li><a href="#layout">Creating and designing page layouts</a></li>
- <li><a href="#event">Handling events and testing</a></li>
- <li><a href="#migration">Migrating UI Builder projects</a></li>
- </ul>
-
-<h2 name="project" id="project">Creating a UI Builder Project</h2>
- <p>A UI Builder project creates source code and required files and folders in the IDE workspace for building a Tizen Web application using the UI Builder. You can use the UI Builder to create and modify the page layout using a graphical user interface. The project uses the <a href="#frame">Web UI Builder framework</a> as a guide for the programming model.</p>
- <p>To create a Web UI Builder project:</p>
- <ol>
- <li>In the IDE, select <strong>File > New > Tizen Web Project</strong>. <p>If the project option you want is not visible, make sure that you are using the correct perspective (Tizen Web). To switch perspectives, go to <strong>Window > Open Perspective > Other</strong> and select the perspective you need.</p></li>
- <li>In the <strong>New Tizen Web Project</strong> window, select the <strong>Template</strong> tab and define the project details:
- <ol>
- <li>Select the <strong>Tizen Web UI Builder</strong> project type.</li>
- <li>Define the name of your project. <p>The default location for your application project is defined.</p>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The Tizen API names cannot be used as project names. The project name must be more than 2 characters and is restricted to the following regular expression: [a-z OR A-Z][a-z OR A-Z OR 0-9]{2,49}.</td>
- </tr>
- </tbody>
- </table> </li>
- </ol> </li>
- <li>Click <strong>Finish</strong>.</li>
- </ol>
- <p>The new application project is shown in the <strong>Project Explorer</strong> view of the IDE, with default content in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file as well as in <a href="#structure">several project folders</a>.</p>
-
-<h3 name="frame" id="frame">UI Builder Framework</h3>
- <p>The Tizen Web UI Builder framework consists of a set of managed code as a guide for the programming model using event handlers.</p>
- <p>An application consists of pages and the transition between pages. A page is a set of widgets and event handlers. To develop each element of an application, the Web UI Builder provides several components.</p>
- <p class="figure">Figure: Relationship between application elements and UI Builder components</p>
- <p style="text-align:center;"><img alt="Relationship between application elements and UI Builder components" src="../images/uibuilder_components.png" /></p>
- <p>The Web UI Builder framework provides the following abstract objects to handle the events of application, pages and widgets:</p>
- <ul>
- <li><a href="#app">App Object</a></li>
- <li><a href="#page">Page Object</a></li>
- </ul>
-
-<h3 name="app" id="app">App Object</h3>
- <p>The app object is an abstraction of the application. It contains the runtime information and event handler of the application life-cycle.</p>
- <p>The app object is declared in the <span style="font-family: Courier New,Courier,monospace">page-system.js</span> file. As the app object is a global object, it is accessible in every JavaScript file.</p>
- <pre class="prettyprint">/* page-system.js */
-window.app = new _app();</pre>
- <p>When the application is running, the app object always exists and has a valid value. The following tables list the available member objects and event handlers.</p>
- <table border="1">
- <caption>
- Table: App objects
- </caption>
- <tbody>
- <tr>
- <th>Method</th>
- <th>Description</th>
- <th>Example</th>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">setCurrentPageId()</span></td>
- <td>Sets the current page ID</td>
- <td><span style="font-family: Courier New,Courier,monospace">app.setCurrentPageId("page1");</span></td>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">getCurrentPageId()</span></td>
- <td>Returns the current page ID</td>
- <td><span style="font-family: Courier New,Courier,monospace">app.getCurrentPageId();</span></td>
- </tr>
- </tbody>
- </table>
- <table border="1">
- <caption>
- Table: Event handlers
- </caption>
- <tbody>
- <tr>
- <th>Event</th>
- <th>Handler</th>
- <th>Reference</th>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">load</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">app.onload</span></td>
- <td>When the document is ready</td>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">unload</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">app.onunload</span></td>
- <td>When the window is unloaded</td>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">show</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">app.onshow</span></td>
- <td>When the window is shown</td>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">hide</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">app.onhide</span></td>
- <td>When the window is hidden</td>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">pagebeforechange</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">app.onpagebeforechange</span></td>
- <td>Before switching from the current page</td>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">pagechange</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">app.onpagechange</span></td>
- <td>After switching from the current page to the new page</td>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">pagechangefailed</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">app.onpagechangefailed</span></td>
- <td>When the page switching fails</td>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">pagebeforeload</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">app.onpagebeforeload</span></td>
- <td>Before an external page is loaded</td>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">pageload</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">app.onpageload</span></td>
- <td>After an external page is loaded</td>
- </tr>
-
- </tbody>
- </table>
- <p>The prototype of the event handler is declared in the <span style="font-family: Courier New,Courier,monospace">app.js</span> file.</p>
- <pre class="prettyprint">
-app.onload = function()
-{
- /* App initialization */
- console.log("loaded");
-};
-
-app.onunload = function()
-{
- /* App termination */
- console.log("unloaded");
-};
-
-app.onshow = function()
-{
- /* App is shown */
- console.log("shown");
-};
-
-app.onhide = function()
-{
- /* App is hidden */
- console.log("hidden");
-};
-
-app.onpagebeforechange= function()
-{
- /* Before switching from the current page */
- console.log("onpagebeforechange ");
-};
-
-app.onpagechange = function()
-{
- /* After switching from the current page to the new page */
- console.log("onpagechange ");
-};
-
-app.onpagechangefailed = function()
-{
- /* When the page switching fails */
- console.log("onpagechangefailed ");
-};
-
-app.onpagebeforeload = function()
-{
- /* Before an external page is loaded */
- console.log("onpagebeforeload ");
-};
-
-app.onpageload = function()
-{
- /* After an external page is loaded */
- console.log("onpageload ");
-};
-</pre>
-
-<h3 name="page" id="page">Page Object</h3>
- <p>The page object is an abstraction object of each page. It contains the layout information of the widget and the event handler of the page or widget event.</p>
- <p>In the event handler of pages or widgets, you can access the corresponding page object using the <span style="font-family: Courier New,Courier,monospace">this</span> keyword.</p>
- <pre class="prettyprint">/* index.js */
-page1_page.prototype.onpageinit = function(event)
-{
- console.log('HTML: ' + this.pageID);
-};
-
-page1_page.prototype.button1_ontap = function(event)
-{
- this.headingone1.innerText = 'Hello World!';
-};
-</pre>
- <p class="figure">Figure: Page object</p>
- <p style="text-align:center;"><img alt="Page object" src="../images/page_object.png" /></p>
- <p>The page object exists when a page is being loaded, and has a valid value only when the page is shown. You cannot access the event handler in other pages. The following table lists the available member objects.</p>
- <table border="1">
- <caption>
- Table: Page member objects
- </caption>
- <tbody>
- <tr>
- <th>Member</th>
- <th>Type</th>
- <th>Description</th>
- <th>Value</th>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">pageID</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">string</span></td>
- <td>Page ID</td>
- <td><span style="font-family: Courier New,Courier,monospace">"page1"</span></td>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">obj</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">HTML element</span></td>
- <td>HTML element of page</td>
- <td><span style="font-family: Courier New,Courier,monospace"><div data-role="page" id="page1">...</div></span></td>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">tauObj</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">object</span></td>
- <td>Advanced page object</td>
- <td><span style="font-family: Courier New,Courier,monospace">{id: "page1", name: "Page", namespace: "mobile", widgetName: "page", ...}</span></td>
- </tr>
- </tbody>
- </table>
- <p>You can access the widget of the page as a member variable of the page object.</p>
- <pre class="prettyprint">/* index.js */
-page1_page.prototype.button1_ontap = function(event)
-{
- this.headingone1.innerText = 'Hello World!';
-};
-</pre>
- <p class="figure">Figure: Widget object</p>
- <p style="text-align:center;"><img alt="Widget object" src="../images/widget_object.png" /></p>
- <p>The following table lists the available events of the page.</p>
- <table border="1">
- <caption>
- Table: Page events
- </caption>
- <tbody>
- <tr>
- <th>Event</th>
- <th>Handler</th>
- <th>Occurred time</th>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">pagebeforecreate</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">{page_class}.prototype.onpagebeforecreate</span></td>
- <td>Before the page is initialized</td>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">pagecreate</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">{page_class}.prototype.onpagecreate</span></td>
- <td>After the page is added to DOM</td>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">pageinit</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">{page_class}.prototype.onpageinit</span></td>
- <td>After the page is initialized</td>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">pagebeforehide</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">{page_class}.prototype.onpagebeforehide</span></td>
- <td>Before the page is hidden</td>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">pagehide</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">{page_class}.prototype.onpagehide</span></td>
- <td>After the page is hidden</td>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">pagebeforeshow</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">{page_class}.prototype.onpagebeforeshow</span></td>
- <td>Before the page is shown</td>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">pageshow</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">{page_class}.prototype.onpageshow</span></td>
- <td>After the page is shown</td>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">pageremove</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">{page_class}.prototype.onpageremove</span></td>
- <td>Before the page is removed from DOM</td>
- </tr>
- </tbody>
- </table>
- <p>The following figure describes the sequence of events and the life-cycle of pages when there is a page transition. Currently, this also applies to the JQM page transition scheme.</p>
- <p class="figure">Figure: Page event sequence</p>
- <p style="text-align:center;"><img alt="Page event sequence" src="../images/page_event_sequence.png" /></p>
- <p>You can add a page event handler using the <a href="../../../org.tizen.devtools/html/web_tools/uibuilder_w.htm">UI Builder</a>.</p>
- <p class="figure">Figure: Page event handler</p>
- <p style="text-align:center;"><img alt="Page event handler" src="../images/page_event_handler.png" /></p>
- <p class="figure">Figure: Page event handler code</p>
- <p style="text-align:center;"><img alt="Page event handler code" src="../images/page_event_handler2.png" /></p>
- <p>Every widget has some event of its own. The following table list the events of button widgets.</p>
- <table border="1">
- <caption>
- Table: Button widget events
- </caption>
- <tbody>
- <tr>
- <th>Event</th>
- <th>Handler</th>
- </tr>
- <tr>
- <td>Tap</td>
- <td><span style="font-family: Courier New,Courier,monospace">{page_class}.prototype.{buttonID}_ontap</span></td>
- </tr>
- <tr>
- <td>Tap hold</td>
- <td><span style="font-family: Courier New,Courier,monospace">{page_class}.prototype.{buttonID}_ontaphold</span></td>
- </tr>
- <tr>
- <td>Swipe</td>
- <td><span style="font-family: Courier New,Courier,monospace">{page_class}.prototype.{buttonID}_onswipe</span></td>
- </tr>
- <tr>
- <td>Swipe left</td>
- <td><span style="font-family: Courier New,Courier,monospace">{page_class}.prototype.{buttonID}_onswipeleft</span></td>
- </tr>
- <tr>
- <td>Swipe right</td>
- <td><span style="font-family: Courier New,Courier,monospace">{page_class}.prototype.{buttonID}_onswiperight</span></td>
- </tr>
- </tbody>
- </table>
-
-<h3 name="structure" id="structure">Structure of a UI Builder Project</h3>
- <p>The following figure illustrates the default project folder structure for Tizen UI Builder applications.</p>
- <p class="figure">Figure: Default project folder structure</p>
- <p style="text-align:center;"><img alt="Default project folder structure" src="../images/uibuilder_files_folders.png" /></p>
- <p>The following table describes the contents of the default project folders.</p>
- <table border="1" style="width: 100%">
- <caption>
- Table: Default project folder contents
- </caption>
- <colgroup>
- <col width="50%" />
- <col width="50%" />
- </colgroup>
- <tbody>
- <tr>
- <th>File or folder</th>
- <th>Content</th>
- </tr>
- <tr>
- <td><img alt="Default project folder structure" src="../images/uibuilder_folder.png" /><span style="font-family: Courier New,Courier,monospace">lib</span></td>
- <td>UI framework</td>
- </tr>
- <tr>
- <td><img alt="Default project folder structure" src="../images/uibuilder_folder.png" /><span style="font-family: Courier New,Courier,monospace">res</span></td>
- <td>Icons</td>
- </tr>
- <tr>
- <td><img alt="Default project folder structure" src="../images/uibuilder_folder.png" /><span style="font-family: Courier New,Courier,monospace">tizen-ui-builder-fw</span></td>
- <td>UI Builder framework</td>
- </tr>
- <tr>
- <td><img alt="Default project folder structure" src="../images/uibuilder_folder.png" /><span style="font-family: Courier New,Courier,monospace">tizen-ui-builder-tool</span></td>
- <td>UI Builder Tool framework</td>
- </tr>
- <tr>
- <td><img alt="Default project folder structure" src="../images/uibuilder_xml.png" /><span style="font-family: Courier New,Courier,monospace">config.xml</span></td>
- <td>Tizen Web application configuration file</td>
- </tr>
- <tr>
- <td><img alt="Default project folder structure" src="../images/uibuilder_indexxml.png" /><span style="font-family: Courier New,Courier,monospace">index.config.xml</span></td>
- <td>UI Builder project configuration file</td>
- </tr>
- <tr>
- <td><img alt="Default project folder structure" src="../images/uibuilder_html.png" /><span style="font-family: Courier New,Courier,monospace">index.html</span></td>
- <td>Application master HTML file</td>
- </tr>
- <tr>
- <td><img alt="Default project folder structure" src="../images/uibuilder_js.png" /><span style="font-family: Courier New,Courier,monospace">index.js</span></td>
- <td>Application, page, and widgets event handler file</td>
- </tr>
- <tr>
- <td><img alt="Default project folder structure" src="../images/uibuilder_css.png" /><span style="font-family: Courier New,Courier,monospace">index.managed.css</span></td>
- <td>Automatically generated file for multi screen</td>
- </tr>
- <tr>
- <td><img alt="Default project folder structure" src="../images/uibuilder_js.png" /><span style="font-family: Courier New,Courier,monospace">index.managed.js</span></td>
- <td>Automatically generated file for app and page initialization</td>
- </tr>
- <tr>
- <td><img alt="Default project folder structure" src="../images/uibuilder_css.png" /><span style="font-family: Courier New,Courier,monospace">page1_common.css</span></td>
- <td>Automatically generated page style file</td>
- </tr>
- </tbody>
- </table>
-
-<h2 name="layout" id="layout">Creating and Designing Page Layouts</h2>
- <p>You can create and design Web <a href="../../../org.tizen.devtools/html/web_tools/uibuilder_w.htm">UI Builder</a> application pages in the <strong>Page Designer</strong> view.</p>
- <h3 id="newpage" name="newpage">Creating a New Web UI Builder Application Page</h3>
- <p>You can create multiple pages for a Web UI Builder application. To add a new page:</p>
- <ol>
- <li>In the IDE, select <strong>File > New > Other</strong>.</li>
- <li>In the <strong>New</strong> window, select <strong>Tizen > Tizen Web UI Builder Page</strong> and click <strong>Next</strong>.</li>
- <li>Select a project to be added and click <strong>Next</strong>.</li>
- <li>Select a page template and enter the new page ID.</li>
- <li>Click <strong>Finish</strong>. <p>The new page appears in the <strong>Page Designer</strong> view.</p></li>
- </ol>
- <h3 id="design" name="design">Using the Page Designer View</h3>
- <p>You can configure the design area in the <strong>Page Designer</strong> view by managing the display resolution, changing the orientation, zooming in and out, and scaling the design area to available screen space.</p>
- <p>You can add a UI widget in the <strong>Page Designer</strong> view and set its properties:</p>
- <ol>
- <li>In the <strong>Project Explorer</strong> view, double-click the page file to which you want to add widgets. <p>The page file displays a design area in the <strong>Page Designer</strong> view.</p></li>
- <li>Drag the widget from the <strong>Palette</strong> area to the design area. <p style="text-align:center;"><img alt="Designing page layout" src="../images/design_page_layout.png" /></p></li>
- <li>Select the widget in the design area or in the <strong>Outline</strong> view.</li>
- <li>In the <strong>Properties</strong> view, set the widget properties.</li>
- </ol>
- <p>You can move the widgets around in the design area.</p>
- <h3 id="widget" name="widget">Placing Widgets</h3>
- <p>You can place a variety of widgets in the <strong>Page Designer</strong>.</p>
- <p>To place a widget, drag the widget from the <strong>Palette</strong> area to the design area. The next empty position in the design area is marked with a dotted rectangle. The parent widget or content object is blue in color.</p>
- <p>You can add child widgets in a container, such as a <strong>List</strong>. For example, you can add a set of <strong>ListItem</strong> widgets in a <strong>List</strong> container widget. If the design area <strong>List</strong> container widget does not contain any <strong>ListItem</strong> widgets, the <strong>List</strong> widget displays a "Drop a List Item" message.</p>
- <p>You can only add widgets of a fixed type in container widgets. For example, you can add a <strong>ListItem</strong> widget only to a <strong>List</strong> widget. If you try to add a <strong>ListItem</strong> widget to a wrong widget, the design area changes to red color, which implies that the widget cannot be placed. If you add the widget to the correct container widget, the design area changes to blue color, which implies that the widget can be placed.</p>
-
-<h2 name="event" id="event">Handling Events and Testing</h2>
- <p>You can select a UI widget from the design area of the <strong>Page Designer</strong> view and add event handlers for it.</p>
- <p>To add an event handler for the selected widget:</p>
- <ol>
- <li>In the <strong>Properties</strong> view, select the <strong>Event</strong> sub-tab.</li>
- <li>Click the <strong>+</strong> button on the right side of the <strong>Tap</strong> label.</li>
- <li>Click the combo on the right side of <strong>Action</strong>.</li>
- <li>In the <strong>Add</strong> drop-down list, select the event to which you want to add an event handler. <p>The event handler for the selected event is displayed.</p></li>
- <li>Define a name for the event handler, and click the play button next to it. <p>The UI Builder generates a skeleton code for the event handler.</p></li>
- <li>Enter the application-specific event handler-related code.</li>
- </ol>
- <p>All widgets have their own unique ID in a specific page, and you can access the widgets in the event handler code using the ID. You can view and edit the widget ID in the <strong>Outline</strong> view. </p>
- <p>For example, if your page has a button (with the <span style="font-family: Courier New,Courier,monospace">button1</span> ID) and a heading (with the <span style="font-family: Courier New,Courier,monospace">heading1</span> ID), you can create an event handler for the button tap that changes the heading text:</p>
- <pre class="prettyprint">
-page1.button1_tap = function(event)
-{
- this.heading1.text("Hello World!");
-};
-</pre>
- <h3 id="test" name="test">Testing a UI Builder Project</h3>
- <p>To test the UI Builder project:</p>
- <ol>
- <li>Select the project in the <strong>Project Explorer</strong> view.</li>
- <li>In the IDE menu, select one of the following:
- <ul>
- <li><strong>Run > Run as > Tizen Web Application</strong> to test the project on the Emulator or target device.</li>
- <li><strong>Run > Run as > Tizen Web Simulator Application</strong> to test the project on the Web Simulator.</li>
- </ul> </li>
- </ol>
-
- <h2 id="migration" name="migration">Migrating UI Builder Projects</h2>
-
-<p>You can migrate your UI Builder project from the Tizen 2.2.1 SDK to the 2.3 version to keep your old files and settings:</p>
-
-<ol><li>In the <strong>Project Explorer</strong> view, right-click the project and select <strong>Import</strong>.</li>
-<li>Select <strong>Tizen > Tizen Web UI Builder Project with Migration</strong> and click <strong>Next</strong>.</li>
-<li>Select the project whose version is "tizen 2.2.1".</li>
-<li>Enter the migration project name and click <strong>Finish</strong>.</li>
-
-<li>Implement project changes required by the migration:
-<ol><li>Copy the original project under the new name.</li>
-<li>Generate new files ("page#" refers to the ID of each page):
-<ul><li><span style="font-family: Courier New,Courier,monospace;">.tizen-ui-builder-tool.xml</span>: Contains the version information.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">index.html</span>: Generated with reference to the following:
-<ul><li><span style="font-family: Courier New,Courier,monospace;">app.xml</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">page#.page</span></li></ul></li>
-<li><span style="font-family: Courier New,Courier,monospace;">index.meta.xml</span>: Generated with reference to the following:
-<ul><li><span style="font-family: Courier New,Courier,monospace;">page#.page</span></li></ul></li>
-<li><span style="font-family: Courier New,Courier,monospace;">index.js</span>
-<ul><li><span style="font-family: Courier New,Courier,monospace;">app.js</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">page#.js</span></li></ul></li>
-<li><span style="font-family: Courier New,Courier,monospace;">page#_common.css</span>
-<ul><li><span style="font-family: Courier New,Courier,monospace;">page#.managed.css</span></li></ul></li></ul></li>
-<li>Copy the old CSS files:
-<ul><li><span style="font-family: Courier New,Courier,monospace;">page#.css</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">app.css</span></li></ul></li>
-<li>Edit the <span style="font-family: Courier New,Courier,monospace;">config.xml</span> file
-<p>Content: <span style="font-family: Courier New,Courier,monospace;">app.xml</span> > <span style="font-family: Courier New,Courier,monospace;">index.html</span></p></li>
-<li>Generate code:
-<ul><li><span style="font-family: Courier New,Courier,monospace;">index.managed.js</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">index.managed.css</span></li></ul></li>
-<li>Replace:
-<ul><li>UI frameworks</li>
-<li>UI Builder frameworks</li>
-<li>UI Builder Tool frameworks</li>
-<li><span style="font-family: Courier New,Courier,monospace;">/res</span> folder</li>
-<li><span style="font-family: Courier New,Courier,monospace;">icon.png</span></li></ul></li>
-<li>Delete files that are no longer needed.</li></ol></li></ol>
-
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">While every effort has been made to avoid breakage, some incompatibility areas with the new APIs must be checked.
- <p>Check the <span style="font-family: Courier New,Courier,monospace;">href</span> attribute, since it is not automatically translated with the href URL. For example:</p>
-<pre class="prettyprint"><a href="page1.html">LINK</a></pre></td>
- </tr>
- </tbody>
- </table>
-
-
-
-<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>
- <!--start-->
- <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>
- <!--end-->
- </body>
-</html>
\ No newline at end of file
}
$('#contents').scroll();
-
- var updateH = function(){
+ var checkBreadCrumbs = function() {
if (!isScrolledIntoView($('#contents .content h1')))
{
$('a.top.sms').show();
$('.help_breadcrumbs').show();
}
$('#contents').css('padding-top', $('.help_breadcrumbs').outerHeight()*(7/6));
+ }
+
+ var updateH = function(){
+ checkBreadCrumbs();
$('a.top').css('bottom', $('#footer').outerHeight());
-
- if($('#navigation').length) {
- $('a.top').css('left', $('#navigation').position()['left'] + (($('#navigation').outerWidth() - $('a.top').outerWidth())/2));
- } else {
- $('a.top').css('left', $('#toc-navigation').position()['left'] + (($('#toc-navigation').outerWidth() - $('a.top').outerWidth())/2));
- }
+ $('a.top').css('left', $('#toc-navigation').position()['left'] + (($('#toc-navigation').outerWidth() - $('a.top').outerWidth())/2));
$('#toc').css('top', $('#toc_border').position()['top'] + 7);
$('#container #contents').css('margin-bottom', $('#footer').outerHeight());
//$('#toc').css('top', $('#toc_border').position()['top'] + 2);
$('#toc').css('top', $('#toc_border').position()['top'] + 7);
-
- if($('#navigation').length) {
- $('#contents').css('right', $(window).width() - $('#navigation').position()['left'] + 5);
+ $('#contents').css('right', $(window).width() - $('#toc-navigation').position()['left'] + 5);
//$('#toc').css('width', $('#toc_border').width() - 40);
- } else {
- $('#contents').css('right', $(window).width() - $('#toc-navigation').position()['left'] + 5);
- }
-
$('#toc').css('width', $('#toc_border').width() - 49);
};
var updateH_no_toc = function() {
+ checkBreadCrumbs();
if (!isScrolledIntoView($('#contents .content h1')))
{
$('a.top.sms').show();
<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>
+ <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>Tizen Web Sites </title>
</head>
<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
</div>
<div id="container"><div id="contents"><div class="content">
<div id="profile">
- <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/> <img alt="Mobile native" src="../images/mn_icon.png"/></p>
+ <p><img alt="Mobile Web" src="images/mw_icon.png"/> <img alt="Wearable Web" src="images/ww_icon.png"/> <img alt="Mobile native" src="images/mn_icon.png"/> <img alt="Wearable native" src="images/wn_icon.png"/></p>
</div>
<h1>Tizen Web Sites</h1>
</ul>
-<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../scripts/showhide.js"></script>
+<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>
+<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>
<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>
+ <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>Tizen Web Application Model</title>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/></p>
+ <p><img alt="Mobile Web" src="../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../images/ww_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a href="../details/details.htm">Understanding Tizen Programming</a></li>
+ <li><a href="../details/details_w.htm">Understanding Tizen Programming</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Tizen Web Application Model</h1>
- <p>The <a href="../../../org.tizen.devtools/html/cover_page.htm">Tizen SDK</a> enables you to create Web applications and widgets for mobile devices. A Web application comprises HTML, JavaScript, and CSS combined in a package, which can be installed on the Tizen device.</p>
- <p>A <a href="../process/app_dev_process_w.htm#package">widget package</a> includes all the support files that are needed by the widget. Therefore, a widget is a complete standalone Web application that can run without any additional external resources or network connectivity.</p>
+ <p>The <a href="../../../../org.tizen.devtools/html/cover_page.htm">Tizen SDK</a> enables you to create Web applications for mobile devices. A Web application comprises HTML, JavaScript, and CSS combined in a package, which can be installed on the Tizen device.</p>
+ <p>A <a href="../process/app_dev_process_w.htm#package">Web application package</a> includes all the support files that are needed by the Web application. Therefore, a Web application can run without any additional external resources or network connectivity after installation.</p>
<p>The application model supports a rich set of standard W3C/HTML5 features, which include various JavaScript APIs as well as additional HTML markups and CSS features. These features along with the Tizen Device APIs and UI framework support can be used to create rich Web applications in a variety of categories, such as contact, messaging, device information access, multimedia, graphics, and games.</p>
<p>Tizen supports both <a href="#wap">Web application packages</a> and <a href="#hap">hybrid application packages</a> (in mobile applications only), which combine a Web application and 1 or more native service applications.</p>
<p>Applications in the same package follow the same installation life-cycle, handled by the <a href="#package">application package manager</a>. </p>
<p>The application package manager module is expandable to support various types of applications, and designated installation modules can be added to it. </p>
<p class="figure">Figure: Application package manager</p>
- <p style="text-align:center;"><img alt="Application package manager" src="../images/application_package_manager.png" /></p>
+ <p align="center"><img alt="Application package manager" src="../../images/application_package_manager.png" /></p>
<h3 id="config" name="config">Web Package Configuration</h3>
- <p>Each Web widget package has a configuration file, <span style="font-family: Courier New,Courier,monospace">config.xml</span>, which indicates a packaging format and metadata for the application.</p>
- <p>The Tizen Web widget must follow the guidelines of <a href="http://www.w3.org/TR/widgets/" target="_blank">W3C Widget Packaging</a> and <a href="../../../org.tizen.devtools/html/web_tools/config_editor_w.htm#mw_extend">Tizen extended configuration</a>.</p>
- <p>For more information on the configuration elements, see <a href="../../../org.tizen.devtools/html/web_tools/config_editor_w.htm#hierarchy">Configuration Element Hierarchy</a>.</p>
+ <p>Each Web application package has a configuration file, <span style="font-family: Courier New,Courier,monospace">config.xml</span>, which indicates a packaging format and metadata for the application.</p>
+ <p>The Tizen Web application must follow the guidelines of <a href="http://www.w3.org/TR/widgets/" target="_blank">W3C Widget Packaging</a> and <a href="../../../../org.tizen.devtools/html/web_tools/config_editor_w.htm#mw_extend">Tizen extended configuration</a>.</p>
+ <p>For more information on the configuration elements, see <a href="../../../../org.tizen.devtools/html/web_tools/config_editor_w.htm#hierarchy">Configuration Element Hierarchy</a>.</p>
<h3 id="wap" name="wap">Web Application Package</h3>
<p>The Tizen platform supports Web applications based on HTML, JavaScript, and CSS, and packaged according to the W3C specification. The platform also provides device APIs to access the platform capabilities, enabling a rich Web application development environment.</p>
</li>
<li>Directory hierarchy (after installation on device)
<p>The following figure and table illustrate the Web application package directory structure.</p>
- <p style="text-align:center;"><img alt="Web application directory structure" src="../images/web_app_directory_structure.png" /></p>
+ <p align="center"><img alt="Web application directory structure" src="../../images/web_app_directory_structure.png" /></p>
<table style="width: 100%" border="1">
<caption>
Table: Web application package structure
<li>Directory hierarchy (after installation on device)
<p>The following figure and table illustrate the hybrid application package directory structure.</p>
<p class="figure">Figure: Hybrid application directory structure</p>
- <p style="text-align:center;"><img alt="Hybrid application directory structure" src="../images/hybrid_app_package_manager.png" /></p>
+ <p align="center"><img alt="Hybrid application directory structure" src="../../images/hybrid_app_package_manager.png" /></p>
<table style="width: 100%" border="1">
<caption>
Table: Hybrid application package structure
</ul>
-<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../scripts/showhide.js"></script>
+<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>
+<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>
<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>Tizen Application Model</title>
+ <title>Introduction to Web Applications</title>
</head>
-<body onload="prettyPrint()" style="overflow: auto;">
+<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
-<h1>Tizen Application Model</h1>
+<div id="toc-navigation">
+</div>
-<p>Click the application type you want:</p>
-<p><a href="application_model_w.htm"><img alt="Web Application" src="../images/w_division.png"/></a> <a href="application_model_n.htm"><img alt="Native Application" src="../images/n_division.png"/></a></p>
-
+<div id="container"><div id="contents"><div class="content">
+ <div id="profile">
+ <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/></p>
+ </div>
+
+<h1>Introduction to Web Applications</h1>
+
+
+<p>The introduction to Web applications documentation provides overall information you need to become familiar with Web-specific Tizen programming and application model:</p>
+
+<ul>
+
+<li><a href="first_app/first_app_w.htm">Creating Your First Tizen Application</a>
+<p>Demonstrates how you can create a simple HelloWorld application - thus helping you to get more familiar with the Tizen application development process and using the Tizen SDK.</p></li>
+
+<li><a href="process/app_dev_process_w.htm">Application Development Process</a>
+<p>Teaches you how to create a Tizen application from the initial application planning stage to the end stages where you are ready to run and package your application.</p></li>
+
+<li><a href="app_model/application_model_w.htm">Tizen Application Model</a>
+<p>Provides an introduction to the Tizen application life-cycle and package contents.</p></li>
+
+<li><a href="details/details_w.htm">Understanding Tizen Programming</a>
+<p>Introduces the Tizen platform, its architecture, and some useful programming concepts you need to take into account when designing Tizen applications.</p>
+</li>
+
+</ul>
+
<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>
--- /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>Application Filtering</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+ <div id="profile">
+ <p><img alt="Mobile Web" src="../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../images/ww_icon.png"/></p>
+ </div>
+ <div id="toc_border"><div id="toc">
+ <p class="toc-title">Content</p>
+ <ul class="toc">
+ <li><a href="#filter_w">Feature-based Filtering</a></li>
+ <li><a href="#profile_w">Profile-based Filtering</a></li>
+ <li><a href="#multi_profile">Single Web Application for Multiple Profiles</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Application Filtering</h1>
+
+<p>The Tizen platform provides a wide range of features across a variety of hardware and software components. Among the features, there are some that can be selectively supported by the Tizen device manufacturer. For application stores to correctly select your application for installation on an appropriate device, the feature and profile information must be correctly declared in your application.</p>
+
+ <h2 id="filter_w" name="filter_w">Feature-based Filtering</h2>
+ <p>Some features can be selectively supported by the Tizen device manufacturer. To prevent problems when the user is trying to run your application on a device that does not support all the features your application is using, do one of the following:</p>
+<ul>
+<li>When the application is running, check whether the device supports the needed features. If not, the application can use other features, which are supported by the device, as a workaround.
+<p>For example, if an application wants to use location information, it can check the device capability by using the <span style="font-family: Courier New,Courier,monospace">getCapability()</span> method of the <span style="font-family: Courier New,Courier,monospace">SystemInfo</span> interface (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfo">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html#SystemInfo">wearable</a> applications). If the device supports GPS, the application uses GPS information, and if the device supports WPS only, the application uses WPS information instead of GPS.</p>
+</li>
+<li>Use feature-based filtering to prevent your application from being shown in the application list on the Tizen Store, if the user's device does not support all the features of your application. This way you can prevent the application from being installed on an unsupportive device in the first place.
+<p>Be careful when defining the feature list for feature-based filtering. The feature list can dramatically reduce your chances of getting the application downloaded by reducing the number of devices which can support the application.</p></li>
+</ul>
+
+<p>If the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file of the application package includes a feature list, the Tizen Store compares the capabilities of the device with the required feature conditions of the application. The store only lists the applications whose conditions match the capabilities of the device, and thus prevents unsupported applications from being installed.</p>
+
+ <p class="figure">Figure: Feature-based filtering</p>
+ <p align="center"><img align="center" alt="Feature-based filtering" src="../../images/app_filtering_basic_flow.png" /></p>
+
+<p>When multiple features are defined in the feature list for feature-based filtering, the Tizen Store creates the filtering condition for all using the "AND" operation. For example, if there are <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc</span> and <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth</span> features in the feature list of the application package, only a device that has both those features can show the application on the Tizen Store application list for downloading.</p>
+
+<h3 id="screen_size" name="screen_size">Screen Size Feature</h3>
+<p>The screen size feature is the only exception to the normal feature handling process described above. When the screen size is defined in the feature list, the Tizen Store creates the filtering condition with the "OR" operation. For example, if the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.480.800</span> and <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.720.1280</span> features are defined in your application feature list, a device that supports one or the other of those features can show the application on the Tizen Store application list.</p>
+ <p>If you do not specify a proper screen size in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file, your application can be rejected from the Tizen store.</p>
+ <p>The following tables list the available screen size features. </p>
+ <table>
+ <caption>Table: Available screen size features for mobile applications</caption>
+ <tbody>
+ <tr>
+ <th>Feature key</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal</span></td>
+ <td>Specify this key, if the application supports all possible current and future resolutions on the normal screen size.
+ <p>You cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously. If you do, only the most specific resolution key is considered and the less specific resolution keys are ignored. For example, if you specify both <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal</span> and <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.480</span> keys, only the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.480</span> key is applied.</p> <p>If no screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p>
+ </td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.240.400</span></td>
+ <td>Specify this key, if the application supports the 240 x 400 resolution on the normal screen size.
+ <p>You can specify multiple <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.*</span> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously.</p><p>If no screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p>
+ </td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.320</span></td>
+ <td>Specify this key, if the application supports the 320 x 320 resolution on the normal screen size.
+ <p>You can specify multiple <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.*</span> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously.</p><p>If no screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p>
+ </td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.480</span></td>
+ <td>Specify this key, if the application supports the 320 x 480 resolution on the normal screen size.
+ <p>You can specify multiple <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.*</span> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously.</p><p>If no screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p></td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.360.480</span></td>
+ <td>Specify this key, if the application supports the 360 x 480 resolution on the normal screen size.
+ <p>You can specify multiple <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.*</span> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously.</p><p>If no screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p></td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.480.800</span></td>
+ <td>Specify this key, if the application supports the 480 x 800 resolution on the normal screen size.
+ <p>You can specify multiple <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.*</span> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously.</p><p>If no screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p></td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.540.960</span></td>
+ <td>Specify this key, if the application supports the 540 x 960 resolution on the normal screen size.
+ <p>You can specify multiple <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.*</span> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously.</p><p>If no screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p></td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.600.1024</span></td>
+ <td>Specify this key, if the application supports the 600 x 1024 resolution on the normal screen size.
+ <p>You can specify multiple <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.*</span> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously.</p><p>If no screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p></td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.720.1280</span></td>
+ <td>Specify this key, if the application supports the 720 x 1280 resolution on the normal screen size.
+ <p>You can specify multiple <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.*</span> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously.</p><p>If no screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p></td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.1080.1920</span></td>
+ <td>Specify this key, if the application supports the 1080 x 1920 resolution on the normal screen size.
+ <p>You can specify multiple <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.*</span> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously.</p><p>If no screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p></td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.all</span></td>
+ <td>Specify this key, if the application supports all possible current and future screen sizes and all possible current and future resolutions per screen size.
+ <p>You cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously. If you do, only the most specific resolution key is considered and the less specific resolution keys are ignored. For example, if you specify both <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.all</span> and <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.480</span> keys, only the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.480</span> key is applied.</p><p>If no screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p></td>
+ </tr>
+ </tbody>
+ </table>
+
+ <table>
+ <caption>Table: Available screen size features for wearable applications</caption>
+ <tbody>
+ <tr>
+ <th>Feature key</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal</span></td>
+ <td>Specify this key, if the application supports all possible current and future resolutions on the normal screen size.
+ <p>You cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously. If you do, only the most specific resolution key is considered and the less specific resolution keys are ignored. For example, if you specify both <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal</span> and <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.480</span> keys, only the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.480</span> key is applied.</p> <p>If no screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p>
+ </td>
+ </tr>
+
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.320</span></td>
+ <td>Specify this key, if the application supports the 320 x 320 resolution on the normal screen size.
+ <p>You can specify multiple <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.*</span> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously.</p><p>If no screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p>
+ </td>
+ </tr>
+
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.360.480</span></td>
+ <td>Specify this key, if the application supports the 360 x 480 resolution on the normal screen size.
+ <p>You can specify multiple <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.*</span> keys, if your application supports multiple screen resolutions on the normal screen size. However, you cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously.</p><p>If no screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p></td>
+ </tr>
+
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.all</span></td>
+ <td>Specify this key, if the application supports all possible current and future screen sizes and all possible current and future resolutions per screen size.
+ <p>You cannot specify keys on both <span style="font-family: Courier New,Courier,monospace">screen.size.*</span> and <span style="font-family: Courier New,Courier,monospace">screen.size.normal.*</span> levels simultaneously. If you do, only the most specific resolution key is considered and the less specific resolution keys are ignored. For example, if you specify both <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.all</span> and <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.480</span> keys, only the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.normal.320.480</span> key is applied.</p><p>If no screen size key is declared, it is assumed that the application supports only <span style="font-family: Courier New,Courier,monospace">screen.size.normal.720.1280</span>. To avoid this, specify at least 1 screen size key.</p></td>
+ </tr>
+ </tbody>
+ </table>
+
+
+<h3 id="hierarchy" name="hierarchy">Feature Hierarchy</h3>
+
+<p>The feature keys have a hierarchy. For example, consider the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location</span>, <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.gps</span>, and <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.wps</span> features:</p>
+<ul>
+<li>If the feature list includes the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.gps</span> feature, only a device which has the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.gps</span> feature can show the application on the Tizen Store application list.</li>
+<li>If the feature list includes the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location</span> feature, a device which has the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.gps</span>, <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.wps</span>, or <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location</span> feature can show the application on the Tizen Store application list.
+<p>This means that the Tizen Store considers the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location</span> feature as the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.gps OR http://tizen.org/feature/location.wps</span> feature. (If the feature list includes the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.gps</span> and <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.wps</span> features together, only a device which supports both those features can show the application.)</p></li></ul>
+
+<h3 id="adding" name="adding">Adding the Feature List</h3>
+
+ <p>To enable filtering for your Web application, add the feature list for the application <span style="font-family: Courier New,Courier,monospace">config.xml</span> file:</p>
+ <ol>
+ <li>To open the Web application configuration editor in the IDE, double-click the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file in the <strong>Project Explorer</strong> view. </li>
+ <li>In the <strong>Feature</strong> tab, click <strong>Add</strong>.</li>
+ <li>Select a feature from the list.</li>
+ <li>Click <strong>Save</strong>.</li>
+ </ol>
+
+ <p>After setting the feature information with the Web application configuration editor, you can see the added code in the <strong>Source</strong> tab.</p>
+
+ <p> The following example shows the setting in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file code:</p>
+ <pre class="prettyprint">
+<tizen:feature name="http://tizen.org/feature/network.nfc"/>
+</pre>
+
+<p>The following tables show the available requirements for Tizen Web application package.</p>
+<table border="1" id="features">
+<caption>Table: Available requirements for mobile Web Device APIs</caption>
+ <tbody>
+<tr>
+ <th>Feature key</th>
+ <th>Description</th>
+ </tr>
+
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/datasync</span></td>
+ <td>Specify this key, if the application requires the DataSync feature.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/fmradio</span></td>
+ <td>Specify this key, if the application requires an FM radio.</td>
+ </tr>
+ <tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/humanactivitymonitor</span></td>
+ <td>Specify this key, if the application requires any of the Human Activity Monitor features.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.batch</span></td>
+ <td>Specify this key, if the application requires the location tracking with a position batch information feature for using the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/humanactivitymonitor.html">Human Activity Monitor</a> (GPS Type) API.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth</span></td>
+ <td>Specify this key, if the application requires the Bluetooth feature.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.audio.media</span></td>
+ <td>Specify this key, if the application requires the Bluetooth Advanced Audio feature (A2DP).</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.health</span></td>
+ <td>Specify this key, if the application requires the Bluetooth Health feature (HDP).</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.le</span></td>
+ <td>Specify this key, if the application requires the Bluetooth Low Energy feature (BLE).</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc</span></td>
+ <td>Specify this key, if the application requires the use of any API that, in turn, requires the Near Field Communication (NFC) feature.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc.card_emulation</span></td>
+ <td>Specify this key, if the application requires the NFC card emulation feature.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc.card_emulation.hce</span></td>
+ <td>Specify this key, if the application requires the NFC host-based card emulation feature.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc.p2p</span></td>
+ <td>Specify this key, if the application requires the NFC P2P feature.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc.tag</span></td>
+ <td>Specify this key, if the application requires the NFC tag feature.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.push</span></td>
+ <td>Specify this key, if the application requires the network-based push service.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.secure_element</span></td>
+ <td>Specify this key, if the application requires the secure element feature.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.telephony</span></td>
+ <td>Specify this key, if the application requires the use of any API that, in turn, requires the telephony feature.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.telephony.mms</span></td>
+ <td>Specify this key, if the application requires the MMS feature.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.wifi</span></td>
+ <td>Specify this key, if the application requires the use of any API that, in turn, requires the Wi-Fi feature.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.barometer</span></td>
+ <td>Specify this key, if the application requires a barometer sensor for using the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/sensor.html">Sensor</a> (Pressure Type) API.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.heart_rate_monitor</span></td>
+ <td>Specify this key, if the application requires a heart rate monitor sensor for using the Human Activity Monitor (HRM Type) API.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.magnetometer</span></td>
+ <td>Specify this key, if the application requires a magnetic sensor for using the Sensor (MAGNETIC Type) API.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.pedometer</span></td>
+ <td>Specify this key, if the application requires a pedometer sensor for using the Human Activity Monitor (PEDOMETER Type) API.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.photometer</span></td>
+ <td>Specify this key, if the application requires a photometer sensor for using the Sensor (LIGHT Type) API.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.proximity</span></td>
+ <td>Specify this key, if the application requires a proximity sensor for using the Sensor (PROXIMITY Type) API.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.ultraviolet</span></td>
+ <td>Specify this key, if the application requires a ultraviolet sensor for using the Sensor (ULTRAVIOLET Type) API.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.wrist_up</span></td>
+ <td>Specify this key, if the application requires a wrist up sensor for using the Human Activity Monitor (WRIST_UP Type) API.</td>
+ </tr>
+</tbody>
+</table>
+
+<table border="1" id="features">
+<caption>Table: Available requirements for mobile Web W3C/HTML5 APIs</caption>
+ <tbody>
+<tr>
+ <th>Feature key</th>
+ <th>Description</th>
+ </tr>
+
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/camera</span></td>
+ <td>Specify this key, if the application requires any kind of a camera for using the <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#getusermedia">getUserMedia</a> or <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#mediacapture">HTML Media Capture</a> API.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.gps</span></td>
+ <td>Specify this key, if the application requires the Global Positioning System (GPS) feature for using the <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#geo">GeoLocation</a> API.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/microphone</span></td>
+ <td>Specify this key, if the application requires a microphone for using the getUserMedia or HTML Media Capture API.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.accelerometer</span></td>
+ <td>Specify this key, if the application requires an acceleration sensor for using the <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#orientation">DeviceOrientation Event Specification</a> API.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.gyroscope</span></td>
+ <td>Specify this key, if the application requires a gyro sensor for using the DeviceOrientation Event API.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.magnetometer</span></td>
+ <td>Specify this key, if the application requires a magnetic sensor for using the DeviceOrientation Event Specification or <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#sceenori">Screen Orientation</a> API.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/speech.synthesis</span></td>
+ <td>Specify this key, if the application requires the speech synthesis (text-to-speech, TTS) feature for using the <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#webspeech">Web Speech</a> API.</td>
+ </tr>
+</tbody>
+</table>
+
+
+ <table border="1" id="features">
+<caption>Table: Available requirements for wearable Web Device APIs</caption>
+ <tbody>
+<tr>
+ <th>Feature key</th>
+ <th>Description</th>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/download</span></td>
+ <td>Specify this key, if the application requires the network connection to access the Internet for using the <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/download.html">Download</a> API.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/humanactivitymonitor</span></td>
+ <td><p>Specify this key, if the application requires the <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/humanactivitymonitor.html">Human Activity Monitor</a> API.</p>
+ <p>If the key is declared in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file, the application can be installed on the device with any of the Human Activity Monitor features:</p>
+ <ul>
+ <li>HRM: <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.heart_rate_monitor</span></li>
+ <li>PEDOMETER: <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.pedometer</span></li>
+ <li>WRIST_UP: <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.wrist_up</span></li>
+ <li>GPS: <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.batch</span></li>
+ </ul>
+ </td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.batch</span></td>
+ <td>Specify this key, if the application requires the location tracking with a position batch information feature.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth</span></td>
+ <td>Specify this key, if the application requires the Bluetooth feature.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.audio.media</span></td>
+ <td>Specify this key, if the application requires the Bluetooth Advanced Audio feature (A2DP) feature for using the <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/mediakey.html">Media Key</a> API.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.health</span></td>
+ <td>Specify this key, if the application requires the Bluetooth Health feature (HDP).</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth.le</span></td>
+ <td>Specify this key, if the application requires the Bluetooth Low Energy feature (BLE).</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc</span></td>
+ <td>Specify this key, if the application requires the use of any API that, in turn, requires the Near Field Communication (NFC) feature.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc.card_emulation</span></td>
+ <td>Specify this key, if the application requires the NFC card emulation feature.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc.card_emulation.hce</span></td>
+ <td>Specify this key, if the application requires the NFC host-based card emulation feature.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc.p2p</span></td>
+ <td>Specify this key, if the application requires the NFC P2P feature.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc.tag</span></td>
+ <td>Specify this key, if the application requires the NFC tag feature.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.push</span></td>
+ <td>Specify this key, if the application requires the network-based push service.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.secure_element</span></td>
+ <td>Specify this key, if the application requires the secure element feature.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.telephony</span></td>
+ <td>Specify this key, if the application requires the use of any API that, in turn, requires the telephony feature.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.wifi</span></td>
+ <td>Specify this key, if the application requires the use of any API that, in turn, requires the Wi-Fi feature (for example, the Download API).</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.barometer</span></td>
+ <td>Specify this key, if the application requires a barometer sensor.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.heart_rate_monitor</span></td>
+ <td>Specify this key, if the application requires a heart rate monitor sensor.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.magnetometer</span></td>
+ <td>Specify this key, if the application requires a magnetic sensor.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.pedometer</span></td>
+ <td>Specify this key, if the application requires a pedometer sensor.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.photometer</span></td>
+ <td>Specify this key, if the application requires a photometer sensor.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.proximity</span></td>
+ <td>Specify this key, if the application requires a proximity sensor.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.ultraviolet</span></td>
+ <td>Specify this key, if the application requires an ultraviolet sensor.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.wrist_up</span></td>
+ <td>Specify this key, if the application requires a wrist up sensor.</td>
+ </tr>
+</tbody>
+</table>
+
+<table border="1" id="features">
+<caption>Table: Available requirements for wearable Web W3C/HTML5 APIs</caption>
+ <tbody>
+<tr>
+ <th>Feature key</th>
+ <th>Description</th>
+ </tr>
+
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/camera</span></td>
+ <td>Specify this key, if the application requires any kind of a camera for using the <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#getusermedia">getUserMedia</a> API.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/input.rotating_bezel</span></td>
+ <td>Specify this key, if the application requires rotating bezel input.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.gps</span></td>
+ <td>Specify this key, if the application requires the Global Positioning System (GPS) feature for using the <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#geo">GeoLocation</a> API.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/microphone</span></td>
+ <td>Specify this key, if the application requires a microphone for using the getUserMedia API.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.internet</span></td>
+ <td>Specify this key, if the application requires Internet access for using the <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#websocket">WebSocket API</a>, <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#httpreq">XMLHttpRequest Level 1</a>, or <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#cross">Cross-Origin Resource Sharing</a> API.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.shape.circle</span></td>
+ <td>Specify this key, if the application requires a circle-shaped screen.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.shape.rectangle</span></td>
+ <td>Specify this key, if the application requires a rectangle-shaped screen.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.accelerometer</span></td>
+ <td>Specify this key, if the application requires an acceleration sensor for using the <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#orientation">DeviceOrientation Event Specification</a> API.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.gyroscope</span></td>
+ <td>Specify this key, if the application requires a gyro sensor for using the DeviceOrientation Event API.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/speech.synthesis</span></td>
+ <td>Specify this key, if the application requires the speech synthesis (text-to-speech, TTS) feature for using the <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#webspeech">Web Speech</a> API.</td>
+ </tr>
+</tbody>
+</table>
+
+<table border="1" id="features">
+<caption>Table: Available requirements for wearable Web Supplementary APIs</caption>
+ <tbody>
+<tr>
+ <th>Feature key</th>
+ <th>Description</th>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/media.audio_recording</span></td>
+ <td>Specify this key, if the application requires the audio recording functionality of the device for using the <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#camera">Camera API (Tizen Extension)</a> (Audio Recording) API.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/media.image_capture</span></td>
+ <td>Specify this key, if the application requires the image capture functionality of the device for using the <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#camera">Camera API (Tizen Extension)</a> (Image Recording) API.</td>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/media.video_recording</span></td>
+ <td>Specify this key, if the application requires the video recording functionality of the device for using the <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#camera">Camera API (Tizen Extension)</a> (Video Recording) API.</td>
+ </tr>
+</tbody>
+</table>
+
+<table border="1" id="features">
+<caption>Table: Available requirements for wearable Web Runtime</caption>
+ <tbody>
+<tr>
+ <th>Feature key</th>
+ <th>Description</th>
+ </tr>
+<tr>
+<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/web.service</span></td>
+ <td>Specify this key, if the application requires the Web service application feature.</td>
+ </tr>
+</tbody>
+</table>
+
+<h2 id="profile_w" name="profile_w">Profile-based Filtering</h2>
+<p>A Tizen profile describes the requirements for a category of Tizen devices that have a common application execution environment. Applications are created for a single specific target profile, such as mobile, wearable, or TV, and can run on devices compliant to that profile.</p>
+
+<p>Use profile-based filtering to ensure that your application is only downloaded on the appropriate device profile. To ensure this, declare the intended profile by adding the <span style="font-family: Courier New,Courier,monospace">profile name</span> element in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file.</p>
+
+<p>The following table lists the Tizen profiles and related profile name attributes.</p>
+ <table border="1" id="feature">
+<caption>Table: Tizen profiles and profile name attributes</caption>
+<tbody>
+<tr>
+<th width="50%">Tizen profile</th>
+ <th>Profile name attribute</th>
+ </tr>
+<tr>
+<td>Mobile</td>
+ <td><span style="font-family: Courier New,Courier,monospace">mobile</span></td>
+ </tr>
+<tr>
+<td>Wearable</td>
+ <td><span style="font-family: Courier New,Courier,monospace">wearable</span></td>
+ </tr>
+<tr>
+<td>TV</td>
+ <td><span style="font-family: Courier New,Courier,monospace">TV</span></td>
+ </tr>
+</tbody></table>
+
+<p>In a Web application, the profile name element can be added to the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file as follows:</p>
+<pre class="prettyprint">
+<widget xmlns="http://www.w3.org/ns/widgets" xmlns:tizen="http://tizen.org/ns/widgets" ... >
+<tizen:profile name="mobile"/>
+<!--OR-->
+<tizen:profile name="wearable"/>
+</pre>
+
+<p>The Tizen Store compares the device profile and the <span style="font-family: Courier New,Courier,monospace">profile name</span> element in an application. The store only shows the applications with a profile name matching the device profile to prevent unsupported applications from being installed.</p>
+
+<h2 id="multi_profile" name="multi_profile">Single Web Application for Multiple Profiles</h2>
+<p>Applications are created for a single specific target profile and can only run on devices compliant to that profile. However, it is easily possible to develop a Web application on one profile and make it work on another profile if you use Web APIs that are common to both the profiles. You just modify the <span style="font-family: Courier New,Courier,monospace"> <tizen:profile></span> tag to switch profiles. You may also have to make other changes, like adapting your application to different screen sizes and input events. It is recommended that you test this modified application to ensure it performs as desired.</p>
+
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
--- /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>Understanding Tizen Programming</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+ <div id="profile">
+ <p><img alt="Mobile Web" src="../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../images/ww_icon.png"/></p>
+ </div>
+
+ <div id="toc_border"><div id="toc">
+ <p class="toc-title">Content</p>
+ <ul class="toc">
+ <li><a href="#platform">Tizen Platform Introduction</a></li>
+ <li><a href="#architecture">Tizen Architecture</a></li>
+ </ul>
+ <p class="toc-title">Related Info</p>
+ <ul class="toc">
+ <li><a href="../app_model/application_model_w.htm">Tizen Application Model</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Understanding Tizen Programming</h1>
+
+<p>When designing Tizen Web applications, you need to take into account the following programming concepts:</p>
+<ul>
+ <li><a href="tizen_apis_w.htm">Tizen APIs</a></li>
+ <li><a href="sec_privileges_w.htm">Security and API Privileges</a></li>
+ <li><a href="app_filtering_w.htm">Application Filtering</a></li>
+ <li><a href="web_runtime_w.htm">Web Runtime</a></li>
+ <li><a href="event_handling_w.htm">Event Handling</a> (in <span style="color: red">wearable applications only</span>)</li>
+</ul>
+
+<h2 id="platform" name="platform">Tizen Platform Introduction</h2>
+
+<p>Tizen is a user-interactive and service-oriented open-source project that allows you to create feature-rich applications for multiple device categories, such as smartphones, tablets and wearable devices (for example, smartwatches), using various APIs. The Tizen platform allows you to create a wide range of applications for Tizen devices, customized with the common <a href="#architecture">Tizen architecture</a> as its basis. Tizen also provides <a href="../../tizen_websites.htm">Web sites</a> with tools for creating, distributing, and managing applications efficiently.</p>
+
+<p>The Tizen platform supports 2 different application types: the Web application and the native application. The Tizen platform also allows you to develop a hybrid application package where Web and native applications are packaged together to make more powerful applications. The Tizen platform ensures that all Tizen applications have consistent look and feel, regardless of whether you are creating a Web or native application.</p>
+
+<p>The Tizen platform provides various profiles for application development: the mobile and wearable Web profiles can be used to develop Web applications for mobile and wearable devices, while the mobile native profile can be used to develop native applications for mobile devices. </p>
+
+
+<h2 id="architecture" name="architecture">Tizen Architecture</h2>
+
+<p>Tizen is a standards-based platform that provides Web and native APIs for developing applications for multiple device categories. Tizen is currently targeted for smart phones, tablet devices (mobile profile), and wearable devices (wearable profile), though planned to cover more device categories in the future. The following figure illustrates the Tizen architecture.</p>
+<p class="figure">Figure: Tizen architecture</p>
+
+<p align="center"><img alt="Tizen architecture"
+src="../../images/what_is_tizen_architecture.png" /></p>
+
+<p>The Tizen architecture consists of the following subsystems:</p>
+
+<ul>
+<li>Web framework
+<p>The Web framework accommodates and leverages most up-to-date Web technologies. It provides a large number of HTML5 functionalities defined by W3C and other standardization groups, such as video, audio, form, 2D canvas, WebGL, CSS3, geolocation, vibration, Web socket, and Web worker. In addition, the framework defines various new device APIs, which enable you to access device functionalities, such as Bluetooth, near field communication (NFC), alarm, and messaging. The device functionalities are provided with a strict rule-based security control system that restricts the malicious use of the device APIs.</p></li>
+
+<li>Native framework
+<p>The native framework is composed of system services and a set of native modules across various domains, with which native applications can be developed. The modules include, for example, Base, Application framework, Security, UI, Network, Messaging, Social, Locations, and Web. The framework also provides popular standard open source libraries, such as eglibc, libstdc++, libxml2, OpenAL, and OpenMP®, to support efficient application development and the migration of pre-existing applications using such libraries.</p>
+
+<table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">Only a selected set of APIs in the native framework are native APIs. This means that native applications must use the listed native APIs in the <a href="../../../../org.tizen.native.mobile.apireference/index.html">API Reference</a> which are managed by API maintainers in the Tizen project.</td>
+ </tr>
+ </tbody>
+</table>
+</li>
+
+<li>Kernel
+<p>The kernel layer contains the Linux kernel and device drivers.</p></li>
+</ul>
+
+
+<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>Event Handling</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+ <div id="profile">
+ <p><img alt="Wearable Web" src="../../images/ww_icon.png"/></p>
+ </div>
+ <div id="toc_border"><div id="toc">
+ <p class="toc-title">Content</p>
+ <ul class="toc">
+ <li><a href="#rotary">Rotary Events</a></li>
+ <li><a href="#ambient">Ambient Events</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+<h1>Event Handling</h1>
+
+<p>The Tizen platform supports event handling for user interactions. To provide a full user experience for your application users, you must handle various events in your application.</p>
+
+ <table class="note">
+<tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">This feature is supported in wearable applications only.</td>
+ </tr>
+ </tbody>
+ </table>
+
+<h2 id="rotary" name="rotary">Rotary Events</h2>
+
+<p>The Tizen platform supports rotary events for user interaction on a wearable rotary device or sensor. The rotary device can rotate clockwise or counter-clockwise, and dispatch an event for each movement. The rotary device has points called <strong>detent</strong>. If the rotary device detects the detent point while rotating, it dispatches a separate new event about the point. The number of the available detent points depends on the device hardware.</p>
+
+<p class="figure">Figure: Rotary device</p>
+<p align="center"><img alt="Rotary device" src="../../images/rotary_event.png" /> </p>
+<p>Rotary events are used to deliver the rotary device or sensor data to the application. The following table describes the rotary events.</p>
+
+<table border="1">
+<caption> Table: Rotary events</caption>
+ <tbody>
+ <tr>
+ <th>Type</th>
+ <th>Description</th>
+ <th>Attribute</th>
+ </tr>
+ <tr>
+ <td>rotarydetent</td>
+ <td>Event is triggered when a device detects the detent point.</td>
+ <td><span style="font-family: Courier New,Courier,monospace">detail.direction</span>: the rotation direction.
+ <p>The available values are <span style="font-family: Courier New,Courier,monospace;">CW</span> for clockwise and <span style="font-family: Courier New,Courier,monospace;">CCW</span> for counter-clockwise rotation.</p></td>
+ </tr>
+ </tbody>
+</table>
+
+<p>To bind an event callback on rotary events, use the following code:</p>
+<pre class="prettyprint">
+document.addEventListener("rotarydetent", function(ev)
+{
+ var direction = ev.detail.direction;
+ /* Add behavior for detent detected event with a direction value */
+});
+</pre>
+
+<h2 id="ambient" name="ambient">Ambient Events</h2>
+
+<p>In low-powered wearable devices, the Tizen platform supports an ambient mode for watch applications. When the device enables the ambient mode, the Tizen watch application displayed on an idle screen can show a limited UI to reduce power consumption. The watch application also receives a tick event every minute in the ambient mode.</p>
+
+<p>The limits of the UI in the ambient mode depend on the device. When designing the ambient mode UI, you achieve optimal results by drawing only a black and white UI and using less than 20% of the pixels on the screen. If you do not want to draw your own ambient mode UI, set the <span style="font-family: Courier New,Courier,monospace">ambient_support</span> attribute to <strong>disable</strong> in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file. In this case, the platform shows the default ambient mode UI.</p>
+
+<p>The following table describes the ambient mode events.</p>
+<table border="1">
+<caption> Table: Ambient events</caption>
+ <tbody>
+ <tr>
+ <th>Type</th>
+ <th>Description</th>
+ <th>Attribute</th>
+ </tr>
+ <tr>
+ <td>ambientmodechanged</td>
+ <td>Event is triggered when a device enables or disables the ambient mode.</td>
+ <td><span style="font-family: Courier New,Courier,monospace">detail.ambientMode</span>: the status of the mode.
+ <p>The available values are <span style="font-family: Courier New,Courier,monospace;">true</span> when the ambient mode is enabled and <span style="font-family: Courier New,Courier,monospace;">false</span> when the ambient mode is disabled.</p>
+ </td>
+ </tr>
+ <tr>
+ <td>timetick</td>
+ <td>Event is triggered once a minute while the device is in the ambient mode to notify the application that it can update its UI.
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">The <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/alarm</span> privilege must be set to get timetick events.</td>
+ </tr>
+ </tbody>
+ </table>
+ </td>
+ <td>-</td>
+ </tr>
+ </tbody>
+</table>
+
+
+
+<p>To bind an event callback on ambient events, use the following code:</p>
+<pre class="prettyprint">
+document.addEventListener("ambientmodechanged", function(ev)
+{
+ var mode = ev.detail.ambientMode;
+ if (mode == true)
+ {
+ /* Change the UI for ambient mode */
+ }
+ else
+ {
+ /* Change the UI for normal mode */
+ }
+});
+
+document.addEventListener("timetick", function(ev)
+{
+ /* Update the UI */
+});
+</pre>
+
+
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
+
--- /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>Security and API Privileges</title>
+<style>
+td.key { font-family: Courier New,Courier,monospace }
+tr.partner-level, tr.platform-level { background-color: #cff }
+</style>
+</head>
+
+<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+ <div id="profile">
+ <p><img alt="Mobile Web" src="../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../images/ww_icon.png"/></p>
+ </div>
+
+<h1>Security and API Privileges</h1>
+
+<p>To effectively protect the device system and user private data, the Tizen security architecture is based on privileges and application signing of the Linux basic security model, which includes process isolation and mandatory access control. Since Tizen, as an open mobile platform, provides a wide range of features and experiences for users with a variety of applications, the users must be able to grant privileges for security-sensitive operations.</p>
+
+<p>Tizen provides API-level access control for security-sensitive operations which, if not used correctly, can harm user privacy and system stability. Therefore, applications that use such sensitive APIs must declare the required privileges in the <a href="../process/setting_properties_w.htm#privilege">config.xml</a> file.</p>
+
+<p>If an application invokes a privileged API, the Tizen system checks whether the privilege is present in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file. If the privilege is not present in the file, the system prohibits the application execution.</p>
+<p>The Tizen IDE also provides privilege checker tools to check whether the Tizen application source code contains any privilege violations. For more information, see <a href="../../../../org.tizen.devtools/html/web_tools/privilege_checker_w.htm">Privilege Checker</a>.</p>
+
+<p>The following tables list the API privileges, which you must to declare when using security-sensitive API modules.</p>
+
+<table id="privileges">
+<caption>Table: Mobile Web Device API privileges</caption>
+<tbody>
+<tr>
+ <th>Privilege</th>
+ <th>Level</th>
+ <th>Display name</th>
+ <th>Description</th>
+</tr>
+<tr>
+ <td class="key">http://tizen.org/privilege/account.read</td>
+ <td>public</td>
+ <td>Reading accounts</td>
+ <td>The application can read accounts.</td>
+</tr>
+<tr>
+ <td class="key">http://tizen.org/privilege/account.write</td>
+ <td>public</td>
+ <td>Managing accounts</td>
+ <td>The application can create, edit, and delete accounts.</td>
+</tr>
+<tr>
+ <td class="key">http://tizen.org/privilege/alarm</td>
+ <td>public</td>
+ <td>Setting alarms</td>
+ <td>The application can set alarms and wake up the device at scheduled times.</td>
+</tr>
+<tr>
+ <td class="key">http://tizen.org/privilege/application.info</td>
+ <td>public</td>
+ <td>Retrieving application information</td>
+ <td>The application can retrieve information related to other applications.</td>
+</tr>
+<tr>
+ <td class="key">http://tizen.org/privilege/application.launch</td>
+ <td>public</td>
+ <td>Opening applications</td>
+ <td>The application can open other applications using the application ID or application control.</td>
+</tr>
+<tr class="partner-level">
+ <td class="key">http://tizen.org/privilege/appmanager.certificate</td>
+ <td>partner</td>
+ <td>Getting application certificates</td>
+ <td>The application can retrieve specified application certificates.</td>
+</tr>
+<tr class="partner-level">
+ <td class="key">http://tizen.org/privilege/appmanager.kill</td>
+ <td>partner</td>
+ <td>Closing applications</td>
+ <td>The application can close other applications.</td>
+</tr>
+<tr>
+ <td class="key">http://tizen.org/privilege/bluetooth.admin</td>
+ <td>public</td>
+ <td>Managing Bluetooth general settings</td>
+ <td>The application can change Bluetooth settings, such as turning Bluetooth on or off and setting the device name.</td>
+</tr>
+<tr>
+ <td class="key">http://tizen.org/privilege/bluetooth.gap</td>
+ <td>public</td>
+ <td>Using Bluetooth GAP</td>
+ <td>The application can use the Bluetooth Generic Access Profile (GAP) to, for example, scan for and pair with devices.</td>
+</tr>
+<tr>
+ <td class="key">http://tizen.org/privilege/bluetooth.health</td>
+ <td>public</td>
+ <td>Using Bluetooth HDP</td>
+ <td>The application can use the Bluetooth Health Device Profile (HDP) to, for example, send health information.</td>
+</tr>
+<tr>
+ <td class="key">http://tizen.org/privilege/bluetooth.spp</td>
+ <td>public</td>
+ <td>Using Bluetooth SPP</td>
+ <td>The application can use the Bluetooth Serial Port Profile (SPP) to, for example, send serial data.</td>
+</tr>
+<tr class="platform-level">
+ <td class="key">http://tizen.org/privilege/bluetoothmanager</td>
+ <td>platform</td>
+ <td>Managing Bluetooth system settings</td>
+ <td>The application can change Bluetooth system settings related to privacy and security, such as the visibility mode.</td>
+</tr>
+<tr class="platform-level">
+ <td class="key">http://tizen.org/privilege/bookmark.read</td>
+ <td>platform</td>
+ <td>Reading bookmarks</td>
+ <td>The application can read bookmarks.</td>
+</tr>
+<tr class="platform-level">
+ <td class="key">http://tizen.org/privilege/bookmark.write</td>
+ <td>platform</td>
+ <td>Managing bookmarks</td>
+ <td>The application can create, edit, and delete bookmarks.</td>
+</tr>
+<tr>
+ <td class="key">http://tizen.org/privilege/calendar.read</td>
+ <td>public</td>
+ <td>Reading calendar</td>
+ <td>The application can read events and tasks.</td>
+</tr>
+<tr>
+ <td class="key">http://tizen.org/privilege/calendar.write</td>
+ <td>public</td>
+ <td>Managing calendar</td>
+ <td>The application can create, update, and delete events and tasks.</td>
+</tr>
+<tr>
+ <td class="key">http://tizen.org/privilege/call</td>
+ <td>public</td>
+ <td>Making phone calls</td>
+ <td>The application can make phone calls to numbers when they are tapped without further confirmation.</td>
+</tr>
+<tr>
+ <td class="key">http://tizen.org/privilege/callhistory.read</td>
+ <td>public</td>
+ <td>Reading call logs</td>
+ <td>The application can read call log items.</td>
+</tr>
+<tr>
+ <td class="key">http://tizen.org/privilege/callhistory.write</td>
+ <td>public</td>
+ <td>Managing call logs</td>
+ <td>The application can create, update, and delete call log items.</td>
+</tr>
+<tr>
+ <td class="key">http://tizen.org/privilege/contact.read</td>
+ <td>public</td>
+ <td>Reading contacts</td>
+ <td>The application can read your profile, contacts, and contact history. Contact history can include social network activity.</td>
+</tr>
+<tr>
+ <td class="key">http://tizen.org/privilege/contact.write</td>
+ <td>public</td>
+ <td>Managing contacts</td>
+ <td>The application can create, update, and delete your profile, contacts, and any contact history that is related to this application. Contact history can include social network activity.</td>
+</tr>
+<tr>
+ <td class="key">http://tizen.org/privilege/content.read</td>
+ <td>public</td>
+ <td>Reading contents</td>
+ <td>The application can read media content information.</td>
+</tr>
+<tr>
+ <td class="key">http://tizen.org/privilege/content.write</td>
+ <td>public</td>
+ <td>Managing contents</td>
+ <td>The application can create, update, and delete media content information.</td>
+</tr>
+<tr>
+ <td class="key">http://tizen.org/privilege/datacontrol.consumer</td>
+ <td>public</td>
+ <td>Accessing exported data</td>
+ <td>The application can read data exported by data control providers.</td>
+</tr>
+<tr>
+ <td class="key">http://tizen.org/privilege/datasync</td>
+ <td>public</td>
+ <td>Syncing device data</td>
+ <td>The application can synchronize device data, such as contacts and calendar events, using the OMA DS 1.2 protocol.</td>
+</tr>
+<tr>
+ <td class="key">http://tizen.org/privilege/download</td>
+ <td>public</td>
+ <td>Downloading via HTTP</td>
+ <td>The application can manage HTTP downloads.</td>
+</tr>
+<tr>
+ <td class="key">http://tizen.org/privilege/filesystem.read</td>
+ <td>public</td>
+ <td>Reading file systems</td>
+ <td>The application can read file systems.</td>
+</tr>
+<tr>
+ <td class="key">http://tizen.org/privilege/filesystem.write</td>
+ <td>public</td>
+ <td>Writing to file systems</td>
+ <td>The application can write to file systems.</td>
+</tr>
+<tr>
+ <td class="key">http://tizen.org/privilege/healthinfo</td>
+ <td>public</td>
+ <td>Reading health related information</td>
+ <td>The application can read the user's health information gathered by device sensors, such as pedometer or heart rate monitor.</td>
+</tr>
+<tr>
+ <td class="key">http://tizen.org/privilege/internet</td>
+ <td>public</td>
+ <td>Accessing Internet</td>
+ <td>The application can access the Internet.This can result in additional charges depending on the user's payment plan.</td>
+</tr>
+<tr>
+ <td class="key">http://tizen.org/privilege/location</td>
+ <td>public</td>
+ <td>Using user location</td>
+ <td>The application can read the user's location information.</td>
+</tr>
+<tr>
+ <td class="key">http://tizen.org/privilege/messaging.read</td>
+ <td>public</td>
+ <td>Accessing messages</td>
+ <td>The application can retrieve messages from message boxes or receive messages.</td>
+</tr>
+<tr>
+ <td class="key">http://tizen.org/privilege/messaging.write</td>
+ <td>public</td>
+ <td>Writing messages</td>
+ <td>The application can write, send, sync, and remove text messages, multimedia messages, and emails.</td>
+</tr>
+<tr class="partner-level">
+ <td class="key">http://tizen.org/privilege/networkbearerselection</td>
+ <td>partner</td>
+ <td>Selecting network connection</td>
+ <td>The application can request and release a specific network connection.</td>
+</tr>
+<tr>
+ <td class="key">http://tizen.org/privilege/nfc.admin</td>
+ <td>public</td>
+ <td>Managing NFC general settings</td>
+ <td>The application can change NFC settings, such as turning NFC on or off.</td>
+</tr>
+<tr>
+ <td class="key">http://tizen.org/privilege/nfc.cardemulation</td>
+ <td>public</td>
+ <td>Using NFC card emulation mode</td>
+ <td>The application can access smart card details, such as credit card details, and allow users to make payments via NFC.</td>
+</tr>
+<tr>
+ <td class="key">http://tizen.org/privilege/nfc.common</td>
+ <td>public</td>
+ <td>Using NFC common features</td>
+ <td>The application can use NFC common features.</td>
+</tr>
+<tr>
+ <td class="key">http://tizen.org/privilege/nfc.p2p</td>
+ <td>public</td>
+ <td>Pushing NFC messages</td>
+ <td>The application can push NFC messages to other devices.</td>
+</tr>
+<tr>
+ <td class="key">http://tizen.org/privilege/nfc.tag</td>
+ <td>public</td>
+ <td>Reading/writing to NFC tags</td>
+ <td>The application can read and write NFC tag information.</td>
+</tr>
+<tr>
+ <td class="key">http://tizen.org/privilege/notification</td>
+ <td>public</td>
+ <td>Providing notifications</td>
+ <td>The application can show and hide its own notifications and badges.</td>
+</tr>
+<tr>
+ <td class="key">http://tizen.org/privilege/package.info</td>
+ <td>public</td>
+ <td>Receiving package information</td>
+ <td>The application can retrieve information about installed packages.</td>
+</tr>
+<tr class="platform-level">
+ <td class="key">http://tizen.org/privilege/packagemanager.install</td>
+ <td>platform</td>
+ <td>Managing packages</td>
+ <td>The application can install or uninstall application packages.</td>
+</tr>
+<tr>
+ <td class="key">http://tizen.org/privilege/power</td>
+ <td>public</td>
+ <td>Managing power</td>
+ <td>The application can control power-related settings, such as dimming the screen.</td>
+</tr>
+<tr>
+ <td class="key">http://tizen.org/privilege/push</td>
+ <td>public</td>
+ <td>Receiving push notifications</td>
+ <td>The application can receive notifications from the Internet.</td>
+</tr>
+<tr>
+ <td class="key">http://tizen.org/privilege/secureelement</td>
+ <td>public</td>
+ <td>Accessing secure elements</td>
+ <td>The application can access secure smart card chips, such as UICC/SIM, embedded secure elements, and secure SD cards.</td>
+</tr>
+<tr>
+ <td class="key">http://tizen.org/privilege/setting</td>
+ <td>public</td>
+ <td>Accessing user settings</td>
+ <td>The application can change and read user settings.</td>
+</tr>
+<tr>
+ <td class="key">http://tizen.org/privilege/system</td>
+ <td>public</td>
+ <td>Reading system information</td>
+ <td>The application can read system information.</td>
+</tr>
+<tr class="partner-level">
+ <td class="key">http://tizen.org/privilege/systemmanager</td>
+ <td>partner</td>
+ <td>Reading secure system information</td>
+ <td>The application can read secure system information.</td>
+</tr>
+<tr>
+ <td class="key">http://tizen.org/privilege/volume.set</td>
+ <td>public</td>
+ <td>Adjusting volume</td>
+ <td>The application can adjust the volume for different features, such as notification alerts, ringtones, and media.</td>
+</tr>
+<tr>
+ <td class="key">http://tizen.org/privilege/websetting</td>
+ <td>public</td>
+ <td>Managing web application settings</td>
+ <td>The application can change its Web application settings, including deleting cookies.</td>
+</tr>
+</tbody>
+</table>
+
+<table id="privileges">
+<caption>Table: Mobile Web W3C/HTML5 API privileges</caption>
+<tbody>
+<tr>
+ <th>Privilege</th>
+ <th>Level</th>
+ <th>Description</th>
+</tr>
+<tr>
+ <td class="key">http://tizen.org/privilege/internet</td>
+ <td>public</td>
+ <td>The application can access the Internet using the <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#websocket">WebSocket</a>, <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#httpreq">XMLHttpRequest Level 2</a>, <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#serversent">Server-Sent Events</a>, <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#cache">HTML5 Application caches</a>, and <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#cross">Cross-Origin Resource Sharing</a> APIs.</td>
+</tr>
+<tr>
+ <td class="key">http://tizen.org/privilege/mediacapture</td>
+ <td>public</td>
+ <td>The application can manipulate streams from cameras and microphones using the <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#getusermedia">getUserMedia</a> API.
+ <p><strong>Privilege behavior:</strong></p>
+ <ul><li>In the local domain, if this privilege is defined, permission is granted. Otherwise, execution is blocked.</li>
+<li>In the remote domain, if this privilege is defined, pop-up user prompt is used. Otherwise, execution is blocked.</li></ul></td>
+</tr>
+<tr>
+ <td class="key">http://tizen.org/privilege/unlimitedstorage</td>
+ <td>public</td>
+ <td>The application can use the storage with unlimited size with the <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#directory">File API: Directories and System</a>, <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#writer">File API: Writer</a>, <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#database">Indexed Database</a>, and <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#sql">Web SQL Database</a> APIs.
+ <p><strong>Privilege behavior:</strong></p>
+ <ul><li>In the local domain, if this privilege is defined, permission is granted. Otherwise, pop-up user prompt is used.</li>
+<li>In the remote domain, pop-up user prompt is used.</li></ul></td>
+</tr>
+<tr>
+ <td class="key">http://tizen.org/privilege/notification</td>
+ <td>public</td>
+ <td>The application can display simple notifications using the <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#webnoti">Web Notifications</a> API.
+ <p><strong>Privilege behavior:</strong></p>
+ <ul><li>In the local domain, if this privilege is defined, permission is granted. Otherwise, pop-up user prompt is used.</li>
+<li>In the remote domain, pop-up user prompt is used.</li></ul></td>
+</tr>
+<tr>
+ <td class="key">http://tizen.org/privilege/location </td>
+ <td>public</td>
+ <td>The application can access geographic locations using the <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#geo">Geolocation</a> API.
+ <p><strong>Privilege behavior:</strong></p>
+ <ul><li>In the local domain, if this privilege is defined, permission is granted. Otherwise, execution is blocked.</li>
+<li>In the remote domain, if this privilege is defined, pop-up user prompt is used. Otherwise, execution is blocked.</li></ul></td>
+</tr>
+</tbody>
+</table>
+
+<table id="privileges">
+<caption>Table: Mobile Web Supplementary API privileges</caption>
+<tbody>
+<tr>
+ <th>Privilege</th>
+ <th>Level</th>
+ <th>Description</th>
+</tr>
+<tr>
+ <td class="key">http://tizen.org/privilege/fullscreen</td>
+ <td>public</td>
+ <td>The application can display in the full-screen mode using the <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#fullscreen">FullScreen API - Mozilla</a> API.
+ <p><strong>Privilege behavior:</strong></p>
+<ul><li>If this privilege is defined, permission is granted without user interaction. Otherwise, permission is granted by user interaction.</li></ul></td>
+</tr>
+</tbody>
+</table>
+
+<table id="privileges">
+<caption>Table: Wearable Web Device API privileges</caption>
+<tbody>
+<tr>
+ <th>Privilege</th>
+ <th>Level</th>
+ <th>Display name</th>
+ <th>Description</th>
+</tr>
+<tr>
+ <td class="key">http://tizen.org/privilege/alarm</td>
+ <td>public</td>
+ <td>Setting alarms</td>
+ <td>The application can set alarms and wake up the device at scheduled times.</td>
+</tr>
+<tr>
+ <td class="key">http://tizen.org/privilege/application.info</td>
+ <td>public</td>
+ <td>Retrieving application information</td>
+ <td>The application can retrieve information related to other applications.</td>
+</tr>
+<tr>
+ <td class="key">http://tizen.org/privilege/application.launch</td>
+ <td>public</td>
+ <td>Opening applications</td>
+ <td>The application can open other applications using the application ID or application control.</td>
+</tr>
+<tr class="partner-level">
+ <td class="key">http://tizen.org/privilege/appmanager.certificate</td>
+ <td>partner</td>
+ <td>Getting application certificates</td>
+ <td>The application can retrieve specified application certificates.</td>
+</tr>
+<tr class="partner-level">
+ <td class="key">http://tizen.org/privilege/appmanager.kill</td>
+ <td>partner</td>
+ <td>Closing applications</td>
+ <td>The application can close other applications.</td>
+</tr>
+<tr>
+ <td class="key">http://tizen.org/privilege/call</td>
+ <td>public</td>
+ <td>Making phone calls</td>
+ <td>The application can make phone calls to numbers when they are tapped without further confirmation.</td>
+</tr>
+<tr>
+ <td class="key">http://tizen.org/privilege/content.read</td>
+ <td>public</td>
+ <td>Reading contents</td>
+ <td>The application can read media content information.</td>
+</tr>
+<tr>
+ <td class="key">http://tizen.org/privilege/content.write</td>
+ <td>public</td>
+ <td>Managing contents</td>
+ <td>The application can create, update, and delete media content information.</td>
+</tr>
+<tr>
+ <td class="key">http://tizen.org/privilege/download</td>
+ <td>public</td>
+ <td>Downloading via HTTP</td>
+ <td>The application can manage HTTP downloads.</td>
+</tr>
+<tr>
+ <td class="key">http://tizen.org/privilege/filesystem.read</td>
+ <td>public</td>
+ <td>Reading file systems</td>
+ <td>The application can read file systems.</td>
+</tr>
+<tr>
+ <td class="key">http://tizen.org/privilege/filesystem.write</td>
+ <td>public</td>
+ <td>Writing to file systems</td>
+ <td>The application can write to file systems.</td>
+</tr>
+<tr>
+ <td class="key">http://tizen.org/privilege/healthinfo</td>
+ <td>public</td>
+ <td>Reading health related information</td>
+ <td>The application can read the user's health information gathered by device sensors, such as pedometer or heart rate monitor.</td>
+</tr>
+<tr>
+ <td class="key">http://tizen.org/privilege/location</td>
+ <td>public</td>
+ <td>Using user location</td>
+ <td>The application can read the user's location information.</td>
+</tr>
+<tr>
+ <td class="key">http://tizen.org/privilege/nfc.admin</td>
+ <td>public</td>
+ <td>Managing NFC general settings</td>
+ <td>The application can change NFC settings, such as turning NFC on or off.</td>
+</tr>
+<tr>
+ <td class="key">http://tizen.org/privilege/nfc.cardemulation</td>
+ <td>public</td>
+ <td>Using NFC card emulation mode</td>
+ <td>The application can access smart card details, such as credit card details, and allow users to make payments via NFC.</td>
+</tr>
+<tr>
+ <td class="key">http://tizen.org/privilege/nfc.common</td>
+ <td>public</td>
+ <td>Using NFC common features</td>
+ <td>The application can use NFC common features.</td>
+</tr>
+<tr>
+ <td class="key">http://tizen.org/privilege/nfc.p2p</td>
+ <td>public</td>
+ <td>Pushing NFC messages</td>
+ <td>The application can push NFC messages to other devices.</td>
+</tr>
+<tr>
+ <td class="key">http://tizen.org/privilege/nfc.tag</td>
+ <td>public</td>
+ <td>Reading/writing to NFC tags</td>
+ <td>The application can read and write NFC tag information.</td>
+</tr>
+<tr>
+ <td class="key">http://tizen.org/privilege/notification</td>
+ <td>public</td>
+ <td>Providing notifications</td>
+ <td>The application can show and hide its own notifications and badges.</td>
+</tr>
+<tr>
+ <td class="key">http://tizen.org/privilege/package.info</td>
+ <td>public</td>
+ <td>Receiving package information</td>
+ <td>The application can retrieve information about installed packages.</td>
+</tr>
+<tr class="platform-level">
+ <td class="key">http://tizen.org/privilege/packagemanager.install</td>
+ <td>platform</td>
+ <td>Managing packages</td>
+ <td>The application can install or uninstall application packages.</td>
+</tr>
+<tr>
+ <td class="key">http://tizen.org/privilege/power</td>
+ <td>public</td>
+ <td>Managing power</td>
+ <td>The application can control power-related settings, such as dimming the screen.</td>
+</tr>
+<tr>
+ <td class="key">http://tizen.org/privilege/push</td>
+ <td>public</td>
+ <td>Receiving push notifications</td>
+ <td>The application can receive notifications from the Internet.</td>
+</tr>
+<tr>
+ <td class="key">http://tizen.org/privilege/secureelement</td>
+ <td>public</td>
+ <td>Accessing secure elements</td>
+ <td>The application can access secure smart card chips, such as UICC/SIM, embedded secure elements, and secure SD cards.</td>
+</tr>
+<tr>
+ <td class="key">http://tizen.org/privilege/setting</td>
+ <td>public</td>
+ <td>Accessing user settings</td>
+ <td>The application can change and read user settings.</td>
+</tr>
+<tr>
+ <td class="key">http://tizen.org/privilege/system</td>
+ <td>public</td>
+ <td>Reading system information</td>
+ <td>The application can read system information.</td>
+</tr>
+<tr class="partner-level">
+ <td class="key">http://tizen.org/privilege/systemmanager</td>
+ <td>partner</td>
+ <td>Reading secure system information</td>
+ <td>The application can read secure system information.</td>
+</tr>
+<tr>
+ <td class="key">http://tizen.org/privilege/volume.set</td>
+ <td>public</td>
+ <td>Adjusting volume</td>
+ <td>The application can adjust the volume for different features, such as notification alerts, ringtones, and media.</td>
+</tr>
+</tbody>
+</table>
+
+<table id="privileges">
+<caption>Table: Wearable Web W3C/HTML5 API privileges</caption>
+<tbody>
+<tr>
+ <th>Privilege</th>
+ <th>Level</th>
+ <th>Description</th>
+</tr>
+<tr>
+ <td class="key">http://tizen.org/privilege/internet</td>
+ <td>public</td>
+ <td>The application can access the Internet using the <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#websocket">WebSocket</a>, <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#httpreq">XMLHttpRequest Level 1</a>, and <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#cross">Cross-Origin Resource Sharing</a> APIs.</td>
+</tr>
+<tr>
+ <td class="key">http://tizen.org/privilege/mediacapture</td>
+ <td>public</td>
+ <td>The application can manipulate streams from cameras and microphones using the <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#getusermedia">getUserMedia</a> API.
+ <p><strong>Privilege behavior:</strong></p>
+ <ul><li>In the local domain, if this privilege is defined, permission is granted. Otherwise, execution is blocked.</li>
+<li>In the remote domain, if this privilege is defined, pop-up user prompt is used. Otherwise, execution is blocked.</li></ul></td>
+</tr>
+<tr>
+ <td class="key">http://tizen.org/privilege/unlimitedstorage</td>
+ <td>public</td>
+ <td>The application can use the storage with unlimited size with the <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#database">Indexed Database</a> API.
+ <p><strong>Privilege behavior:</strong></p>
+ <ul><li>In the local domain, if this privilege is defined, permission is granted. Otherwise, pop-up user prompt is used.</li>
+<li>In the remote domain, pop-up user prompt is used.</li></ul></td>
+</tr>
+<tr>
+ <td class="key">http://tizen.org/privilege/location </td>
+ <td>public</td>
+ <td>The application can access geographic locations using the <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#geo">Geolocation</a> API.
+ <p><strong>Privilege behavior:</strong></p>
+ <ul><li>In the local domain, if this privilege is defined, permission is granted. Otherwise, execution is blocked.</li>
+<li>In the remote domain, if this privilege is defined, pop-up user prompt is used. Otherwise, execution is blocked.</li></ul></td>
+</tr>
+</tbody>
+</table>
+
+<table id="privileges">
+<caption>Table: Wearable Web Supplementary API privileges</caption>
+<tbody>
+<tr>
+ <th>Privilege</th>
+ <th>Level</th>
+ <th>Description</th>
+</tr>
+<tr>
+ <td class="key">http://tizen.org/privilege/camera</td>
+ <td>public</td>
+ <td>The application can capture video and image on a target device using the <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#camera">Camera API (Tizen Extension)</a> (Video Recording and Image Capture) API.
+ <p><strong>Privilege behavior:</strong></p>
+ <ul><li>In the local domain, if this privilege is defined, permission is granted. Otherwise, execution is blocked.</li>
+<li>In the remote domain, execution is blocked.</li></ul></td>
+</tr>
+<tr>
+ <td class="key">http://tizen.org/privilege/audiorecorder</td>
+ <td>public</td>
+ <td>The application can record an audio stream on a target device using the <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#camera">Camera API (Tizen Extension)</a> (Audio Recording) API.
+ <p><strong>Privilege behavior:</strong></p>
+ <ul><li>In the local domain, if this privilege is defined, permission is granted. Otherwise, execution is blocked.</li>
+<li>In the remote domain, execution is blocked.</li></ul></td>
+</tr>
+</tbody>
+</table>
+
+<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>Tizen APIs</title>
+</head>
+
+<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+ <div id="profile">
+ <p><img alt="Mobile Web" src="../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../images/ww_icon.png"/></p>
+ </div>
+
+<h1>Tizen APIs</h1>
+
+<p>Using the Tizen Web API modules, you can develop rich Web applications and build great application experiences with well-known Web programming languages: HTML, CSS, and JavaScript. Just like every major browser in the market, the Tizen Web API modules support the latest HTML5 capabilities, such as animation, offline, audio, and video. By utilizing the standard HTML5 capabilities, your Web applications are ready to run across various devices and platforms with minimal customization. In addition to the JavaScript-based Tizen Device API, you can also enable advanced device access from your Web applications, such as Bluetooth and NFC.</p>
+
+<p>The Tizen platform supports hybrid applications (1 mobile Web application and 1 or more mobile native applications). A hybrid application package is very useful to mobile Web applications that need background processing or monitoring. With a hybrid application package, you can register the included applications in the Tizen Store and install, upgrade, and uninstall them using a single hybrid package. For more information on developing hybrid Web applications with Tizen mobile devices, see <a href="../process/app_dev_process_w.htm#hybrid">Packaging Hybrid Applications</a>.</p>
+
+<p>Tizen provides a wide range of Web API modules that allow you to take full advantage of various Tizen features.</p>
+ <p>The following table lists the features provided by the <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/index.html">Mobile Web Device API Reference</a>.</p>
+ <table border="1">
+ <caption>
+ Table: Device API features provided for mobile applications
+ </caption>
+ <colgroup>
+ <col width="20%" />
+ <col width="40%" />
+ <col width="40%" />
+ </colgroup>
+ <tbody>
+ <tr>
+ <th>Feature</th>
+ <th>Purpose</th>
+ <th>Documentation</th>
+ </tr>
+ <tr>
+ <td>Tizen</td>
+ <td>This API contain classes and interfaces that provide a set of basic definitions and interfaces that are used in the Tizen Device API.
+ <p>You can use filters and sorting modes for query methods, generic success and error event handlers, a generic error interface, and a simple coordinate interface for defining location information.</p></td>
+ <td>
+ <ul>
+ <li>Guides: <a href="../../../../org.tizen.guides/html/web/tizen/tizen/tizen_guide_w.htm">Tizen</a></li>
+ <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/web/tizen/tizen/tizen_tutorials_w.htm">Tizen</a></li>
+ <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/index.html#Tizen">Tizen</a></li>
+ </ul></td>
+ </tr>
+ <tr>
+ <td>Application</td>
+ <td>These APIs contain classes and interfaces that enable you to manage alarm, application, and package features.
+ <p>You can schedule an application to be run at a specific time, retrieve information about the applications installed or running on the device, and enable package management.</p></td>
+ <td>
+ <ul>
+ <li>Guides: <a href="../../../../org.tizen.guides/html/web/tizen/application/app_guide_w.htm">Application</a></li>
+ <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/web/tizen/application/app_tutorials_w.htm">Application</a></li>
+ <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/index.html#Application">Application</a></li>
+ </ul></td>
+ </tr>
+ <tr>
+ <td>Communication</td>
+ <td>These APIs contain classes and interfaces that enable you to manage Bluetooth, messaging, NFC (Near Field Communication), push, and secure element features.
+ <p>You can transfer data over a Bluetooth connection, send and receive messages, share contacts, photos, and videos using NFC, receive push notifications from a push server, and access secure elements, such as SIM card and secure SD card, in a device.</p></td>
+ <td>
+ <ul>
+ <li>Guides: <a href="../../../../org.tizen.guides/html/web/tizen/communication/comm_guide_w.htm">Communication</a></li>
+ <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/web/tizen/communication/comm_tutorials_w.htm">Communication</a></li>
+ <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/index.html#Communication">Communication</a></li>
+ </ul></td>
+ </tr>
+ <tr>
+ <td>Content</td>
+ <td>These APIs contain classes and interfaces that enable you to manage content and download features.
+ <p>You can search and manage multimedia content locally, download files from the Internet, and monitor the download progress and status.</p></td>
+ <td>
+ <ul>
+ <li>Guides: <a href="../../../../org.tizen.guides/html/web/tizen/content/content_guide_w.htm">Content</a></li>
+ <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/web/tizen/content/content_tutorials_w.htm">Content</a></li>
+ <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/index.html#Contents">Content</a></li>
+ </ul></td>
+ </tr>
+ <tr>
+ <td>Input/Output</td>
+ <td>These APIs contain classes and interfaces that enable you to manage file system and message port features.
+ <p>You can access specific parts of the device file system, archive files, and send and receive messages through message ports.</p></td>
+ <td>
+ <ul>
+ <li>Guides: <a href="../../../../org.tizen.guides/html/web/tizen/input_output/io_guide_w.htm">Input/Output</a></li>
+ <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/web/tizen/input_output/io_tutorials_w.htm">Input/Output</a></li>
+ <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/index.html#I/O">Input/Output</a></li>
+ </ul></td>
+ </tr>
+ <tr>
+ <td>Multimedia</td>
+ <td>These APIs contain classes and interfaces that enable you to manage multimedia-related features.
+ <p>You can change and monitor playback volume level, and react to dedicated multimedia key presses.</p></td>
+ <td>
+ <ul>
+ <li>Guides: <a href="../../../../org.tizen.guides/html/web/tizen/multimedia/multimedia_guide_w.htm">Multimedia</a></li>
+ <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/web/tizen/multimedia/multimedia_tutorials_w.htm">Multimedia</a></li>
+ <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/index.html#Multimedia">Multimedia</a></li>
+ </ul></td>
+ </tr>
+
+ <tr>
+ <td>Social</td>
+ <td>These APIs contain classes and interfaces that enable you to manage bookmark, calendar, call history, contact, and data synchronization features.
+ <p>You can manage the Tizen Web browser bookmark list, calendar events and tasks, call history, and address books and contacts on a device, and you can synchronize device data, such as contacts and calendar events, with the OMA DS server.</p></td>
+ <td>
+ <ul>
+ <li>Guides: <a href="../../../../org.tizen.guides/html/web/tizen/social/social_guide_w.htm">Social</a></li>
+ <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/web/tizen/social/social_tutorials_w.htm">Social</a></li>
+ <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/index.html#Social">Social</a></li>
+ </ul></td>
+ </tr>
+ <tr>
+ <td>System</td>
+ <td>These APIs contain classes and interfaces that enable you to manage power, system information and setting, time, and Web setting features.
+ <p>You can access the state of the device power resource, device system information, and device wallpaper settings, and you can use locale-specific calendar features by retrieving date and time information. You can manage time features, and set Web view properties, such as setting Web view user agents and deleting Web view cookies.</p></td>
+ <td>
+ <ul>
+ <li>Guides: <a href="../../../../org.tizen.guides/html/web/tizen/system/system_guide_w.htm">System</a></li>
+ <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/web/tizen/system/system_tutorials_w.htm">System</a></li>
+ <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/index.html#System">System</a></li>
+ </ul></td>
+ </tr>
+ <tr>
+ <td>User Interface</td>
+ <td>These APIs contain classes and interfaces that enable you to manage badge and notification features.
+ <p>You can manage and monitor badge numbers, and create and manage notifications about application events.</p></td>
+ <td>
+ <ul>
+ <li>Guides: <a href="../../../../org.tizen.guides/html/web/tizen/ui/ui_guide_w.htm">User Interface</a></li>
+ <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/web/tizen/ui/ui_tutorials_w.htm">User Interface</a></li>
+ <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/index.html#User Interface">User Interface</a></li>
+ </ul></td>
+ </tr>
+ <tr>
+ <td>Web UI Framework</td>
+ <td>These APIs contain classes and interfaces that enable you to manage the Tizen Advanced UI (TAU) features.
+ <p>You can create and manage various kinds of UI widgets.</p></td>
+ <td>
+ <ul>
+ <li>Guides: <a href="../../../../org.tizen.guides/html/web/tizen/uifw/uifw_guide_w.htm">Web UI Framework (UIFW)</a></li>
+ <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/web/tizen/uifw/uifw_tutorial_w.htm">Web UI Framework (UIFW)</a></li>
+ <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/ui_fw_api/mobile/index.htm">Web UI Framework</a></li>
+ </ul></td>
+ </tr>
+ </tbody>
+ </table>
+
+<p>The following table lists the features provided by the <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/index.html">Wearable Web Device API Reference</a>.</p>
+ <table border="1">
+ <caption>
+ Table: Device API features provided for wearable applications
+ </caption>
+ <colgroup>
+ <col width="20%" />
+ <col width="40%" />
+ <col width="40%" />
+ </colgroup>
+ <tbody>
+ <tr>
+ <th>Feature</th>
+ <th>Purpose</th>
+ <th>Documentation</th>
+ </tr>
+ <tr>
+ <td>Tizen</td>
+ <td>This API contain classes and interfaces that provide a set of basic definitions and interfaces that are used in the Tizen Device API.
+ <p>You can use filters and sorting modes for query methods, generic success and error event handlers, a generic error interface, and a simple coordinate interface for defining location information.</p></td>
+ <td>
+ <ul>
+ <li>Guides: <a href="../../../../org.tizen.guides/html/web/tizen/tizen/tizen_guide_w.htm">Tizen</a></li>
+ <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/web/tizen/tizen/tizen_tutorials_w.htm">Tizen</a></li>
+ <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/index.html#Tizen">Tizen</a></li>
+ </ul></td>
+ </tr>
+ <tr>
+ <td>Application</td>
+ <td>These APIs contain classes and interfaces that enable you to manage alarm, application, and package features.
+ <p>You can schedule an application to be run at a specific time, retrieve information about the applications installed or running on the device, and enable package management.</p></td>
+ <td>
+ <ul>
+ <li>Guides: <a href="../../../../org.tizen.guides/html/web/tizen/application/app_guide_w.htm">Application</a></li>
+ <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/web/tizen/application/app_tutorials_w.htm">Application</a></li>
+ <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/index.html#Application">Application</a></li>
+ </ul></td>
+ </tr>
+ <tr>
+ <td>Communication</td>
+ <td>These APIs contain classes and interfaces that enable you to manage Bluetooth, NFC (Near Field Communication), push, and secure element features.
+ <p>You can transfer data over a Bluetooth connection, share contacts, photos, and videos using NFC, receive push notifications from a push server, and access secure elements, such as SIM card and secure SD card, in a device.</p></td>
+ <td>
+ <ul>
+ <li>Guides: <a href="../../../../org.tizen.guides/html/web/tizen/communication/comm_guide_w.htm">Communication</a></li>
+ <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/web/tizen/communication/comm_tutorials_w.htm">Communication</a></li>
+ <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/index.html#Communication">Communication</a></li>
+ </ul></td>
+ </tr>
+ <tr>
+ <td>Content</td>
+ <td>These APIs contain classes and interfaces that enable you to manage content and download features.
+ <p>You can search and manage multimedia content locally, download files from the Internet, and monitor the download progress and status.</p></td>
+ <td>
+ <ul>
+ <li>Guides: <a href="../../../../org.tizen.guides/html/web/tizen/content/content_guide_w.htm">Content</a></li>
+ <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/web/tizen/content/content_tutorials_w.htm">Content</a></li>
+ <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/index.html#Contents">Content</a></li>
+ </ul></td>
+ </tr>
+ <tr>
+ <td>Input/Output</td>
+ <td>These APIs contain classes and interfaces that enable you to manage file system and message port features.
+ <p>You can access specific parts of the device file system, archive files, and send and receive messages through message ports.</p></td>
+ <td>
+ <ul>
+ <li>Guides: <a href="../../../../org.tizen.guides/html/web/tizen/input_output/io_guide_w.htm">Input/Output</a></li>
+ <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/web/tizen/input_output/io_tutorials_w.htm">Input/Output</a></li>
+ <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/index.html#I/O">Input/Output</a></li>
+ </ul></td>
+ </tr>
+ <tr>
+ <td>Multimedia</td>
+ <td>These APIs contain classes and interfaces that enable you to manage multimedia-related features.
+ <p>You can change and monitor playback volume level, and react to dedicated multimedia key presses.</p></td>
+ <td>
+ <ul>
+ <li>Guides: <a href="../../../../org.tizen.guides/html/web/tizen/multimedia/multimedia_guide_w.htm">Multimedia</a></li>
+ <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/web/tizen/multimedia/multimedia_tutorials_w.htm">Multimedia</a></li>
+ <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/index.html#Multimedia">Multimedia</a></li>
+ </ul></td>
+ </tr>
+ <tr>
+ <td>System</td>
+ <td>These APIs contain classes and interfaces that enable you to manage power, system information and setting, and time features.
+ <p>You can access the state of the device power resource, device system information, and device wallpaper settings, and you can use locale-specific calendar features by retrieving date and time information. You can also manage time features.</p></td>
+ <td>
+ <ul>
+ <li>Guides: <a href="../../../../org.tizen.guides/html/web/tizen/system/system_guide_w.htm">System</a></li>
+ <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/web/tizen/system/system_tutorials_w.htm">System</a></li>
+ <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/index.html#System">System</a></li>
+ </ul></td>
+ </tr>
+ <tr>
+ <td>User Interface</td>
+ <td>These APIs contain classes and interfaces that enable you to manage badge and notification features.
+ <p>You can manage and monitor badge numbers, and create and manage notifications about application events.</p></td>
+ <td>
+ <ul>
+ <li>Guides: <a href="../../../../org.tizen.guides/html/web/tizen/ui/ui_guide_w.htm">User Interface</a></li>
+ <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/web/tizen/ui/ui_tutorials_w.htm">User Interface</a></li>
+ <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/index.html#User Interface">User Interface</a></li>
+ </ul></td>
+ </tr>
+ <tr>
+ <td>Web UI Framework</td>
+ <td>These APIs contain classes and interfaces that enable you to manage the Tizen Advanced UI (TAU) features.
+ <p>You can create and manage various kinds of UI widgets.</p></td>
+ <td>
+ <ul>
+ <li>Guides: <a href="../../../../org.tizen.guides/html/web/tizen/uifw/uifw_guide_w.htm">Web UI Framework (UIFW)</a></li>
+ <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/web/tizen/uifw/uifw_tutorial_w.htm">Web UI Framework (UIFW)</a></li>
+ <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/ui_fw_api/wearable/index.htm">Web UI Framework</a></li>
+ </ul></td>
+ </tr>
+ </tbody>
+ </table>
+
+<p>The following table lists the features provided by the <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html" shape="rect">Mobile Web W3C/HTML5 and Supplementaries API Reference</a>.</p>
+ <table border="1">
+ <caption>
+ Table: W3C/HTML5 and some supplementary API features provided for mobile applications
+ </caption>
+ <colgroup>
+ <col width="20%" />
+ <col width="40%" />
+ <col width="40%" />
+ </colgroup>
+ <tbody>
+ <tr>
+ <th>Feature</th>
+ <th>Purpose</th>
+ <th>Documentation</th>
+ </tr>
+ <tr>
+ <td>DOM, Forms and Styles</td>
+ <td>These APIs enable you to create animations, specify the border and background styles of HTML elements, apply styles to HTML documents, specify the color and opacity of HTML elements, create flexible and multi-column layouts for Web applications, move, rotate, stretch, and scale elements, and add effects using the CSS3 properties. They also enable you to use CSS and JavaScript code effectively with HTML elements, implement Web forms for user input, define media features for specific output devices, select element nodes in the DOM tree, and store the information of the page that the user has viewed.</td>
+ <td>
+ <ul>
+ <li>Guides: <a href="../../../../org.tizen.guides/html/web/w3c/dom/dom_guide_w.htm">DOM, Forms and Styles</a></li>
+ <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/web/w3c/dom/dom_tutorials_w.htm">DOM, Forms and Styles</a></li>
+ <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#dom">DOM, Forms and Styles</a></li>
+ </ul></td>
+ </tr>
+ <tr>
+ <td>Device</td>
+ <td>These APIs enable you to retrieve the battery status and detect changes in it, detect rotation and acceleration motions, manage screen orientation, implement and control various types of touch events, and implement different vibration patterns on a Tizen device.</td>
+ <td>
+ <ul>
+ <li>Guides: <a href="../../../../org.tizen.guides/html/web/w3c/device/device_guide_w.htm">Device</a></li>
+ <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/web/w3c/device/device_tutorials_w.htm">Device</a></li>
+ <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#device">Device</a></li>
+ </ul></td>
+ </tr>
+ <tr>
+ <td>Graphics</td>
+ <td>These APIs enable you to create images, shapes, and text using the HTML5 canvas element and HTML canvas 2D context, and create and modify SVG elements in your application.</td>
+ <td>
+ <ul>
+ <li>Guides: <a href="../../../../org.tizen.guides/html/web/w3c/graphics/graphics_guide_w.htm">Graphics</a></li>
+ <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/web/w3c/graphics/graphics_tutorials_w.htm">Graphics</a></li>
+ <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#graphics">Graphics</a></li>
+ </ul></td>
+ </tr>
+ <tr>
+ <td>Media</td>
+ <td>These APIs enable you to access a local device to generate a multimedia stream, access the media capture capabilities based on their type, control multimedia playback and check supported media formats, and play audio content.</td>
+ <td>
+ <ul>
+ <li>Guides: <a href="../../../../org.tizen.guides/html/web/w3c/media/media_guide_w.htm">Media</a></li>
+ <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/web/w3c/media/media_tutorials_w.htm">Media</a></li>
+ <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#media">Media</a></li>
+ </ul></td>
+ </tr>
+ <tr>
+ <td>Communication</td>
+ <td>These APIs enable you to send and receive data between Web sites and through a message channel, exchange push data with the server, connect to the socket server to send and receive data, and use cross-origin resource sharing (CORS) to request and send data of various content types.</td>
+ <td>
+ <ul>
+ <li>Guides: <a href="../../../../org.tizen.guides/html/web/w3c/communication/comm_guide_w.htm">Communication</a></li>
+ <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/web/w3c/communication/comm_tutorials_w.htm">Communication</a></li>
+ <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#communication">Communication</a></li>
+ </ul></td>
+ </tr>
+ <tr>
+ <td>Storage</td>
+ <td>These APIs enable you to retrieve file content and information, slice data objects, manage sandboxed file systems, activate project resource caching and manage the cached resources, create an object store and save data in it, create databases and access them using SQL statements, and use session storage and local storage.</td>
+ <td>
+ <ul>
+ <li>Guides: <a href="../../../../org.tizen.guides/html/web/w3c/storage/storage_guide_w.htm">Storage</a></li>
+ <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/web/w3c/storage/storage_tutorials_w.htm">Storage</a></li>
+ <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#storage">Storage</a></li>
+ </ul></td>
+ </tr>
+ <tr>
+ <td>Security</td>
+ <td>These APIs enable you to allow or block specific HTML elements on a Web page, and make cross-origin requests to resources, allowing a client-side Web application to obtain data retrieved from another origin.</td>
+ <td>
+ <ul>
+ <li>Guides: <a href="../../../../org.tizen.guides/html/web/w3c/security/security_guide_w.htm">Security</a></li>
+ <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/web/w3c/security/security_tutorials_w.htm">Security</a></li>
+ <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#security">Security</a></li>
+ </ul></td>
+ </tr>
+ <tr>
+ <td>UI</td>
+ <td>These APIs enable you to copy content and paste it in an editable area, create and manage draggable elements, and implement drag events.</td>
+ <td>
+ <ul>
+ <li>Guides: <a href="../../../../org.tizen.guides/html/web/w3c/ui/ui_guide_w.htm">UI</a></li>
+ <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/web/w3c/ui/ui_tutorials_w.htm">UI</a></li>
+ <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#ui">UI</a></li>
+ </ul></td>
+ </tr>
+ <tr>
+ <td>Performance and Optimization</td>
+ <td>These APIs enable you to retrieve the visibility status of a Web document and detect changes in it, control animation frame rate, and create and manage HTML5 Web Workers to run an independent JavaScript thread on the background.</td>
+ <td>
+ <ul>
+ <li>Guides: <a href="../../../../org.tizen.guides/html/web/w3c/perf_opt/performance_guide_w.htm">Performance and Optimization</a></li>
+ <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/web/w3c/perf_opt/performance_tutorials_w.htm">Performance and Optimization</a></li>
+ <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#performance">Performance and Optimization</a></li>
+ </ul></td>
+ </tr>
+ <tr>
+ <td>Location</td>
+ <td>These APIs enable you to retrieve and update position information.</td>
+ <td>
+ <ul>
+ <li>Guides: <a href="../../../../org.tizen.guides/html/web/w3c/location/location_guide_w.htm">Location</a></li>
+ <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/web/w3c/location/location_tutorials_w.htm">Location</a></li>
+ <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#location">Location</a></li>
+ </ul></td>
+ </tr>
+ <tr>
+ <td>Supplementary</td>
+ <td>These APIs enable you to manage some supplementary features, such as displaying an element on full screen, accessing binary data in JavaScript, and using the WebGL graphics library to create 3D visual elements.</td>
+ <td>
+ <ul>
+ <li>Guides: <a href="../../../../org.tizen.guides/html/web/w3c/supplement/supplement_guide_w.htm">Supplementary Features</a></li>
+ <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/web/w3c/supplement/supplement_tutorials_w.htm">Supplementary Features</a></li>
+ <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#Supplementary">Supplementary</a></li>
+ </ul></td>
+ </tr>
+ </tbody>
+ </table>
+
+
+<p>The following table lists the features provided by the <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html">Wearable Web W3C/HTML5 and Supplementaries API Reference</a>.</p>
+ <table border="1">
+ <caption>
+ Table: W3C/HTML5 and some supplementary API features provided for wearable applications
+ </caption>
+ <colgroup>
+ <col width="20%" />
+ <col width="40%" />
+ <col width="40%" />
+ </colgroup>
+ <tbody>
+ <tr>
+ <th>Feature</th>
+ <th>Purpose</th>
+ <th>Documentation</th>
+ </tr>
+ <tr>
+ <td>DOM, Forms and Styles</td>
+ <td>These APIs enable you to create animations, specify the border and background styles of HTML elements, apply styles to HTML documents, specify the color and opacity of HTML elements, create flexible layouts for Web applications, move, rotate, stretch, and scale elements, and add effects using the CSS3 properties. They also enable you to use CSS and JavaScript code effectively with HTML elements, implement Web forms for user input, define media features for specific output devices, select element nodes in the DOM tree, and store the information of the page that the user has viewed.</td>
+ <td>
+ <ul>
+ <li>Guides: <a href="../../../../org.tizen.guides/html/web/w3c/dom/dom_guide_w.htm">DOM, Forms and Styles</a></li>
+ <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/web/w3c/dom/dom_tutorials_w.htm">DOM, Forms and Styles</a></li>
+ <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#dom">DOM, Forms and Styles</a></li>
+ </ul></td>
+ </tr>
+ <tr>
+ <td>Device</td>
+ <td>These APIs enable you to retrieve the battery status and detect changes in it, detect rotation and acceleration motions, implement and control various types of touch events, and implement different vibration patterns on a Tizen wearable device.</td>
+ <td>
+ <ul>
+ <li>Guides: <a href="../../../../org.tizen.guides/html/web/w3c/device/device_guide_w.htm">Device</a></li>
+ <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/web/w3c/device/device_tutorials_w.htm">Device</a></li>
+ <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#device">Device</a></li>
+ </ul></td>
+ </tr>
+ <tr>
+ <td>Graphics</td>
+ <td>These APIs enable you to create images, shapes, and text using the HTML5 canvas element and HTML canvas 2D context.</td>
+ <td>
+ <ul>
+ <li>Guides: <a href="../../../../org.tizen.guides/html/web/w3c/graphics/graphics_guide_w.htm">Graphics</a></li>
+ <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/web/w3c/graphics/graphics_tutorials_w.htm">Graphics</a></li>
+ <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#graphics">Graphics</a></li>
+ </ul></td>
+ </tr>
+ <tr>
+ <td>Media</td>
+ <td>These APIs enable you to access a local device to generate a multimedia stream, control multimedia playback and check supported media formats, and play audio content.</td>
+ <td>
+ <ul>
+ <li>Guides: <a href="../../../../org.tizen.guides/html/web/w3c/media/media_guide_w.htm">Media</a></li>
+ <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/web/w3c/media/media_tutorials_w.htm">Media</a></li>
+ <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#media">Media</a></li>
+ </ul></td>
+ </tr>
+ <tr>
+ <td>Communication</td>
+ <td>These APIs enable you to send and receive data between Web sites and through a message channel, and connect to the socket server to send and receive data.</td>
+ <td>
+ <ul>
+ <li>Guides: <a href="../../../../org.tizen.guides/html/web/w3c/communication/comm_guide_w.htm">Communication</a></li>
+ <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/web/w3c/communication/comm_tutorials_w.htm">Communication</a></li>
+ <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#communication">Communication</a></li>
+ </ul></td>
+ </tr>
+ <tr>
+ <td>Storage</td>
+ <td>These APIs enable you to retrieve file content and information, create an object store and save data in it, and use session storage and local storage.</td>
+ <td>
+ <ul>
+ <li>Guides: <a href="../../../../org.tizen.guides/html/web/w3c/storage/storage_guide_w.htm">Storage</a></li>
+ <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/web/w3c/storage/storage_tutorials_w.htm">Storage</a></li>
+ <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#storage">Storage</a></li>
+ </ul></td>
+ </tr>
+ <tr>
+ <td>Security</td>
+ <td>These APIs enable you to allow or block specific HTML elements on a Web page.</td>
+ <td>
+ <ul>
+ <li>Guides: <a href="../../../../org.tizen.guides/html/web/w3c/security/security_guide_w.htm">Security</a></li>
+ <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/web/w3c/security/security_tutorials_w.htm">Security</a></li>
+ <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#security">Security</a></li>
+ </ul></td>
+ </tr>
+ <tr>
+ <td>Performance and Optimization</td>
+ <td>These APIs enable you to retrieve the visibility status of a Web document and detect changes in it, control animation frame rate, and create and manage HTML5 Web Workers to run an independent JavaScript thread on the background.</td>
+ <td>
+ <ul>
+ <li>Guides: <a href="../../../../org.tizen.guides/html/web/w3c/perf_opt/performance_guide_w.htm">Performance and Optimization</a></li>
+ <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/web/w3c/perf_opt/performance_tutorials_w.htm">Performance and Optimization</a></li>
+ <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#performance">Performance and Optimization</a></li>
+ </ul></td>
+ </tr>
+ <tr>
+ <td>Location</td>
+ <td>These APIs enable you to retrieve and update position information.</td>
+ <td>
+ <ul>
+ <li>Guides: <a href="../../../../org.tizen.guides/html/web/w3c/location/location_guide_w.htm">Location</a></li>
+ <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/web/w3c/location/location_tutorials_w.htm">Location</a></li>
+ <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#location">Location</a></li>
+ </ul></td>
+ </tr>
+ <tr>
+ <td>Supplementary</td>
+ <td>These APIs enable you to manage some supplementary features, such as managing the device camera, accessing binary data in JavaScript, and using the WebGL graphics library to create 3D visual elements.</td>
+ <td>
+ <ul>
+ <li>Guides: <a href="../../../../org.tizen.guides/html/web/w3c/supplement/supplement_guide_w.htm">Supplementary Features</a></li>
+ <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/web/w3c/supplement/supplement_tutorials_w.htm">Supplementary Features</a></li>
+ <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#Supplementary">Supplementary</a></li>
+ </ul></td>
+ </tr>
+ </tbody>
+ </table>
+
+<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>
+
<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>
+ <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>Web Runtime</title>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/></p>
+ <p><img alt="Mobile Web" src="../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../images/ww_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<li><p>Packaged Web applications</p></li>
<li><p>Hosted Web applications</p></li>
</ul>
- <p>All Web applications must be packaged according to <a href="http://www.w3.org/TR/widgets/" target="_blank">Widget Packaging and XML Configuration guidelines</a>. However, unlike packaged Web applications, the hosted Web applications have an externally hosted document as their starting page. For more information, see <a class="opensection" href="../../../org.tizen.devtools/html/web_tools/config_editor_w.htm#mw_extend">Extending Configuration Elements</a>.</p>
+ <p>All Web applications must be packaged according to <a href="http://www.w3.org/TR/widgets/" target="_blank">Widget Packaging and XML Configuration guidelines</a>. However, unlike packaged Web applications, the hosted Web applications have an externally hosted document as their starting page. For more information, see <a href="../../../../org.tizen.devtools/html/web_tools/config_editor_w.htm#mw_extend">Extending Configuration Elements</a>.</p>
<p>You can manage Web applications by:</p>
- <ul class="ul">
- <li>Installing Web applications <p>To install a Web application, see the <a href="http://www.w3.org/TR/widgets/#steps-for-processing-a-widget-package" target="_blank">guidelines for processing a widget package</a>. After the installation is completed, the WRT sends a notification of the result.</p> <p>The Web Runtime also registers the Web application on the device's idle screen. It uses an icon and Web application name derived according to Web widget packaging rules.</p>
+ <ul>
+ <li>Installing Web applications <p>To install a Web application, see the <a href="http://www.w3.org/TR/widgets/#steps-for-processing-a-widget-package" target="_blank">guidelines for processing a Web application package</a>. After the installation is completed, the WRT sends a notification of the result.</p> <p>The Web Runtime also registers the Web application on the device's idle screen. It uses an icon and Web application name derived according to Web application packaging rules.</p>
<p>If a Web application installation fails due to power failure, the Web Runtime reinstalls it during next booting. The Web Runtime aborts the installation in the following situations:</p>
<ul>
<h2 id="runtime" name="runtime">Web Runtime API Support</h2>
<p>The main functionality of the Web Runtime is to provide the following Tizen Web APIs to Web applications:</p>
<ul>
- <li><p><a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_cover.html">W3C/HTML5 APIs</a></p></li>
- <li><p><a href="../../../org.tizen.web.apireference/html/device_api/device_api_cover.html">Tizen Device API</a></p></li>
+ <li><p><a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_cover.html">W3C/HTML5 APIs</a></p></li>
+ <li><p><a href="../../../../org.tizen.web.apireference/html/device_api/device_api_cover.html">Tizen Device API</a></p></li>
</ul>
<p>It also supports multiple browsing context creation within a single Web application using, for example, the <span style="font-family: Courier New,Courier,monospace;">window.open()</span> method, or hyperlink navigation.</p>
<p>Tizen Web APIs can be accessed in the top-level browsing context, such as main document window, and nested browsing contexts, such as iframes.</p>
</tr>
</tbody>
</table>
- <p>To access the host page of your Web application, add the domain for access in the <span style="font-family: Courier New,Courier,monospace;">config.xml</span> file. For more information, see <a href="#content">Content Security Policy</a>.</p>
+ <p>To access the host page of your Web application, add the domain for access in the <span style="font-family: Courier New,Courier,monospace;">config.xml</span> file. For more information, see <a href="#content_sec">Content Security Policy</a>.</p>
<p>The Web Runtime also supports the following features:</p>
<ul>
<li><p><a href="http://www.w3.org/TR/widgets-apis/" target="_blank">Widget Interface</a></p></li>
<p>The Web application security consists of the following elements:</p>
<ul>
- <li><a href="#signature">Widget Signature</a></li>
+ <li><a href="#signature">Web Application Signature</a></li>
<li><a href="#protect">Web Application Protection</a></li>
<li><a href="#storage">Private Storage Support</a></li>
<li><a href="#html5">HTML5 API Security Policy</a></li>
<li><a href="#device">Tizen Device API Security Policy</a></li>
- <li><a href="#content">Content Security Policy</a></li>
+ <li><a href="#content_sec">Content Security Policy</a></li>
</ul>
- <h3 id="signature" name="signature">Widget Signature</h3>
+ <h3 id="signature" name="signature">Web Application Signature</h3>
<p>The Web Runtime follows the <a href="http://www.w3.org/TR/widgets-digsig/" target="_blank">XML digital widget signature</a> process:</p>
<ul>
<li>Web application can be signed by the author and distributors.</li>
</ul>
<h3 id="protect" name="protect">Web Application Protection</h3>
- <p>For Web applications that <a href="../../../org.tizen.devtools/html/web_tools/config_editor_w.htm#mw_setting">explicitly turn on encryption</a> using the <span style="font-family: Courier New,Courier,monospace;"><tizen:setting /></span> element in the configuration file, the Web Runtime provides the following protection features:</p>
- <ul class="ul">
+ <p>For Web applications that <a href="../../../../org.tizen.devtools/html/web_tools/config_editor_w.htm#mw_setting">explicitly turn on encryption</a> using the <span style="font-family: Courier New,Courier,monospace;"><tizen:setting /></span> element in the configuration file, the Web Runtime provides the following protection features:</p>
+ <ul>
<li>HTML, JavaScript, and CSS files of the Web application stored by the device are encrypted.</li>
<li>When the Web application is launched, the WRT decrypts all of its resources in a manner which is transparent to the Web application itself.</li>
</ul>
<h3 id="device" name="device">Tizen Device API Security Policy</h3>
- <p>Web Runtime also provides access to sensitive Device API features after consulting the platform-defined security policy. A Web application or an individual user cannot elevate the permissions set by the platform-defined security policy. The mapping between each Tizen Device API and the corresponding privilege is defined in the API definitions in the <a href="../../../org.tizen.web.apireference/html/device_api/device_api_cover.html">Tizen Device API Reference</a>.</p>
+ <p>Web Runtime also provides access to sensitive Device API features after consulting the platform-defined security policy. A Web application or an individual user cannot elevate the permissions set by the platform-defined security policy. The mapping between each Tizen Device API and the corresponding privilege is defined in the API definitions in the <a href="../../../../org.tizen.web.apireference/html/device_api/device_api_cover.html">Tizen Device API Reference</a>.</p>
<p>The following table summarizes distributor signature type to API privilege level behavior mapping:</p>
<table border="1">
<caption>Table: Distributor signature type to API privilege level behavior mapping</caption>
</tr>
</tbody>
</table>
- <h3 id="content" name="content">Content Security Policy</h3>
+ <h3 id="content_sec" name="content_sec">Content Security Policy</h3>
<p>The Web applications can mitigate various kinds of content injection vulnerabilities, such as cross-site scripting (XSS). The content security policy (CSP) is a declarative policy that lets the author or server administrator of a Web application inform the client from where the application expects to load resources. To mitigate XSS, for example, a Web application can declare from where it expects to load scripts, allowing the client to detect and block malicious scripts injected into the application by an attacker.</p>
<p>Web application configuration can include 1 or more <span style="font-family: Courier New,Courier,monospace;"><tizen:content-security-policy></span>, <span style="font-family: Courier New,Courier,monospace;"><tizen:content-security-policy-report-only></span>, or <span style="font-family: Courier New,Courier,monospace;"><tizen:allow-navigation></span> element. If these are included, the Web application is set to the <strong>CSP-based security mode</strong>.</p>
</table>
-<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../scripts/showhide.js"></script>
+<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>
+<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>
--- /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>Creating Your First Tizen Application</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+ <div id="profile">
+ <p><img alt="Mobile Web" src="../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../images/ww_icon.png"/></p>
+ </div>
+
+ <div id="toc_border"><div id="toc">
+ <p class="toc-title">Content</p>
+ <ul class="toc">
+ <li><a href="#webapp">Creating Your First Mobile Web App</a></li>
+ <li><a href="#wearapp">Creating Your First Wearable Web App</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Creating Your First Tizen Application</h1>
+
+<p>Before you get started with developing Tizen applications, you must download and install the <a href="../../../../org.tizen.devtools/html/cover_page.htm">Tizen SDK</a> (software development kit). For more information about the installation process, see the <a href="https://developer.tizen.org/downloads/sdk/installing-tizen-sdk" target="_blank">Tizen developer site</a>.</p>
+
+
+<h2 id="webapp" name="webapp">Creating Your First Mobile Web App</h2>
+
+ <p>This tutorial demonstrates how you can create a simple HelloWorld application. Study this tutorial to help familiarize yourself with the Tizen <a href="../process/app_dev_process_w.htm">Web application development process</a> as well as using the Tizen SDK and installing the created application on the Emulator or target device.</p>
+ <p>When you are developing a more complex application, you can take advantage of the <a href="../../../../org.tizen.devtools/html/web_tools/tools_w.htm">tools included in the SDK</a> to ease the tasks of creating functionality and designing the application UI.</p>
+ <h3 id="create" name="create">To Create a HelloWorld Application</h3>
+ <ol class="tutorstep">
+ <li>Creating the HelloWorld Project
+ <ol type="a">
+ <li>Launch the <strong>Tizen IDE</strong>.</li>
+ <li><a href="../process/creating_app_project_w.htm">Create the application project in the IDE</a>. <p>During the project creation, use the basic Tizen project template: in the <strong>New Tizen Web Project</strong> window, select <strong>Template > Tizen > Basic > Basic Application</strong>.</p> </li>
+ <li>Define <strong>helloworld</strong> as the name of your project and click <strong>Finish</strong>.</li>
+ </ol> <p> The new <strong>helloworld</strong> project is shown in the <strong>Project Explorer</strong> view of the IDE, with default content in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file as well as in several project folders, including:</p>
+ <ul>
+ <li><span style="font-family: Courier New,Courier,monospace">css</span> folder: CSS files directory</li>
+ <li><span style="font-family: Courier New,Courier,monospace">js</span> folder: JavaScript files directory</li>
+ <li><span style="font-family: Courier New,Courier,monospace">config.xml</span> file: Application configuration file</li>
+ <li><span style="font-family: Courier New,Courier,monospace">icon.png</span> file: Icon file</li>
+ <li><span style="font-family: Courier New,Courier,monospace">index.html</span> file: Default HTML file</li>
+ </ul> </li>
+ <li>Configuring the Application and Creating the Application Code <p>The Web project source files already contain the basic application functionality.</p> <p>The automatically-included code creates an application with the title "Application Name". To change the title to HelloWorld, take the following steps (illustrated in the following figure):</p>
+ <ol type="a">
+ <li>Open <span style="font-family: Courier New,Courier,monospace">index.html</span> (1). </li>
+ <li>Select the title (2). </li>
+ <li>Locate the title in the code and change "Application Name" into "HelloWorld" (3).</li>
+ </ol> <p class="figure">Figure: HelloWorld project</p> <p align="center"> <img alt="HelloWorld project" src="../../images/create_project.png" /> </p> <p>You also have various options to <a href="../process/setting_properties_w.htm#set_widget">set the application configuration</a> using the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file and <a href="../process/app_dev_process_w.htm#design">design the application UI</a>.</p> </li>
+ <li>Building and Packaging the Application <p>After you have finished implementing your application, you must <a href="../process/app_dev_process_w.htm#build">build it</a>.</p> <p>After building, the Tizen IDE automatically packages the project by creating a <span style="font-family: Courier New,Courier,monospace">.wgt</span> file.</p> </li>
+ <li>Running and Debugging the Application on the Emulator <p>You can run the HelloWorld application on the <a href="../process/run_debug_app_w.htm#emulator">Emulator</a>, <a href="../process/run_debug_app_w.htm#simulator">Simulator</a>, or <a href="../process/run_debug_app_w.htm#target">real target device</a>. </p><p>The following figure shows the Web application running in the Emulator.</p> <p class="figure">Figure: Running the project</p> <p align="center"> <img alt="Running the project" src="../../images/running_project.png" /> </p> <p>On a real target device, you can use the <a href="../../../../org.tizen.devtools/html/web_tools/web_inspector_w.htm">Web Inspector</a> tool to <a href="../process/run_debug_app_w.htm#debug">debug the application</a>.</p> </li>
+ </ol>
+
+ <h2 id="wearapp" name="wearapp">Creating Your First Wearable Web App</h2>
+
+ <p>This tutorial demonstrates how you can create a simple HelloWorld application with the Tizen wearable UI. The tutorial helps you to familiarize yourself with the Tizen wearable Web <a href="../process/app_dev_process_w.htm">application development process</a> and use the Tizen SDK, installing the created application on the Emulator or a target device.</p>
+ <p>When developing a more complex application, you can take advantage of the <a href="../../../../org.tizen.devtools/html/web_tools/tools_w.htm">tools included in the SDK</a> to make creating functionality and designing the application UI easier.</p>
+
+ <h3 id="create_ww" name="create_ww">To Create a HelloWorld Application</h3>
+ <ol class="tutorstep">
+ <li>Creating the HelloWorld Project
+ <ol type="a">
+ <li>Launch the <strong>Tizen IDE</strong>.</li>
+ <li><a href="../process/creating_app_project_w.htm">Create the application project in the IDE</a>. <p>To use the Wearable UI project template, in the <strong>New Tizen Wearable Web Project</strong> window, select <strong>Template > Wearable UI > Basic Application</strong>.</p> </li>
+ <li>Define <strong>HelloWorld</strong> as the name of your project and click <strong>Finish</strong>.</li>
+ </ol>
+<p class="figure">Figure: Creating the HelloWorld project</p> <p align="center"> <img alt="Creating the HelloWorld project" src="../../images/helloworld_helloworld.png" /> </p>
+
+<p> The new <strong>HelloWorld</strong> project is shown in the <strong>Project Explorer</strong> view of the IDE, with default content in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file as well as in several project folders, including:</p>
+ <ul>
+ <li><span style="font-family: Courier New,Courier,monospace">css</span> folder: CSS file directory</li>
+ <li><span style="font-family: Courier New,Courier,monospace">js</span> folder: JavaScript file directory</li>
+ <li><span style="font-family: Courier New,Courier,monospace">lib</span> folder: Tizen wearable UI framework directory
+ <ul>
+ <li><span style="font-family: Courier New,Courier,monospace">lib/tau/themes/black/tau.min.css</span>: Release version of the Tizen wearable UI theme </li>
+ <li><span style="font-family: Courier New,Courier,monospace">lib/tau/js/tau.min.js</span>: Release version of the Tizen wearable UI library </li>
+ <li><span style="font-family: Courier New,Courier,monospace">lib/tau/themes/black/tau.css</span>: Debug version of the Tizen wearable UI theme </li>
+ <li><span style="font-family: Courier New,Courier,monospace">lib/tau/js/tau.js</span>: Debug version of the Tizen wearable UI library </li>
+ </ul>
+ </li>
+ <li><span style="font-family: Courier New,Courier,monospace">config.xml</span>: Application configuration file</li>
+ <li><span style="font-family: Courier New,Courier,monospace">icon.png</span>: Icon file</li>
+ <li><span style="font-family: Courier New,Courier,monospace">index.html</span>: Default HTML file</li>
+
+ </ul> </li>
+ <li>Configuring the Application and Creating the Application Code
+ <p>The Web project source files already contain the basic application functionality.</p>
+ <ol type="a">
+ <li>Open the <span style="font-family: Courier New,Courier,monospace">index.html</span> file (1).</li>
+ <li>Set the <span style="font-family: Courier New,Courier,monospace">viewport</span> meta tag (2).</li>
+ <li>Add the <span style="font-family: Courier New,Courier,monospace">tau.min.css</span> file (3).
+ <p>If you created your application project using the Wearable UI template, the link already exists in the <span style="font-family: Courier New,Courier,monospace">index.html</span> file.</p></li>
+ <li>Add a link to the <span style="font-family: Courier New,Courier,monospace">tau.min.js</span> file in the <span style="font-family: Courier New,Courier,monospace">script</span> element (4).
+ <p>If you created your application project using the Wearable UI template, the link already exists in the <span style="font-family: Courier New,Courier,monospace">index.html</span> file.</p></li></ol>
+
+<p class="figure">Figure: <span style="font-family: Courier New,Courier,monospace">index.html</span> file</p> <p align="center"> <img alt="index.html file" src="../../images/helloworld_js.png" /> </p>
+
+
+ <p>You have various options to <a href="../process/setting_properties_w.htm#set_widget">set the application configuration</a> using the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file and <a href="../process/app_dev_process_w.htm#code">code the application features</a>.</p> </li>
+
+
+ <li>Creating a Layout using the Wearable UI Theme <p>In the Wearable UI, each scene is named a <a href="../../../../org.tizen.web.apireference/html/ui_fw_api/wearable/page/app_page_layout.htm">page</a>. When you include the <span style="font-family: Courier New,Courier,monospace">ui-page</span> class attribute in a <span style="font-family: Courier New,Courier,monospace"><div></span> element, the attribute applies to the visible Wearable UI theme and the supporting page navigation features.</p>
+<p>For more information about the Tizen wearable UI layout and components, see <a href="../../../../org.tizen.web.apireference/html/ui_fw_api/wearable/index.htm">Tizen Wearable Web UI Framework Reference</a>.</p> </li>
+
+ <li>Building and Packaging the Application
+ <p>When you have finished implementing your application, you must <a href="../process/app_dev_process_w.htm#build">build it</a>.</p> <p>After building, the Tizen IDE automatically packages the project by creating a <span style="font-family: Courier New,Courier,monospace">.wgt</span> package file.</p> </li>
+ <li>Running and Debugging the Application on the Emulator <p>You can run the HelloWorld application on the <a href="../process/run_debug_app_w.htm#emulator">Emulator</a> or a real <a href="../process/run_debug_app_w.htm#target">target device</a>. </p><p>The following figure shows the Web application running in the Emulator.</p>
+
+ <p class="figure">Figure: Running the project</p> <p align="center"> <img alt="Running the project" src="../../images/helloworld_emulator.png" /> </p>
+
+ <p>On a real target device, you can use the <a href="../../../../org.tizen.devtools/html/web_tools/web_inspector_w.htm">Web Inspector</a> tool to <a href="../process/run_debug_app_w.htm#debug">debug the application</a>.</p> </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>
+
<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>
+ <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>Web Application Development Process</title>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/></p>
+ <p><img alt="Mobile Web" src="../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../images/ww_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p>The following figure illustrates the process of developing a Tizen Web application. Tizen provides the tools required to manage your application's life-cycle from product conception, through development and release, to end-of-life application retirement.</p>
<p class="figure">Figure: Web application development process</p>
- <p style="text-align:center;"><img alt="Web application development process" src="../images/app_dev_process_mw.png" /></p>
+ <p align="center"><img alt="Web application development process" src="../../images/app_dev_process_mw.png" /></p>
<p>To develop an application with Tizen:</p>
<h2 id="plan" name="plan">Planning and Designing the Application</h2>
<p>The first step in creating a Tizen Web application is planning and designing it using the design tools of your choice.</p>
- <p>For information on planning and designing your applications, see <a href="../../../org.tizen.guides/html/web/guides_w.htm">Tizen Web Guides</a> and <a href="../../../org.tizen.web.apireference/html/web_api_reference.htm">Tizen Web API References</a>.</p>
+ <p>For information on planning and designing your applications, see <a href="../../../../org.tizen.guides/html/web/guides_w.htm">Tizen Web Guides</a> and <a href="../../../../org.tizen.web.apireference/html/web_api_reference.htm">Tizen Web API References</a>.</p>
<p>Once you have finished the application plan and design, you are ready to create the application project.</p>
<h2 id="create" name="create">Creating the Application Project</h2>
-<p>After you have planned and designed your application, you are ready to <a href="creating_app_project_w.htm">create the application project</a> in the Tizen IDE. You can also <a href="designing_app_ui_w.htm#project">create a UI Builder project</a>, which enables you to design your application with the <a href="../../../org.tizen.devtools/html/web_tools/uibuilder_w.htm">UI Builder</a>.</p>
- <p>When creating the application project, use an applicable project template or sample. Based on the selection, the Project Wizard automatically creates basic functionalities that the application has to implement to be able to run. You can select from a variety of <a class="opensection" href="creating_app_project_w.htm#template">templates and samples</a>. You can also create <a class="opensection" href="creating_app_project_w.htm#user">custom user templates</a>.</p>
+<p>After you have planned and designed your application, you are ready to <a href="creating_app_project_w.htm">create the application project</a> in the Tizen IDE.</p>
+ <p>When creating the application project, use an applicable project template or sample. Based on the selection, the Tizen Web <a href="../../../../org.tizen.devtools/html/web_tools/project_wizard_w.htm">Project Wizard</a> automatically creates basic functionalities that the application has to implement to be able to run. You can select from a variety of <a href="creating_app_project_w.htm#template">templates and samples</a>. You can also create <a href="creating_app_project_w.htm#user">custom user templates</a>.</p>
<h2 id="set" name="set" >Setting Project Properties</h2>
- <p>After creating the application project, you can <a href="setting_properties_w.htm">configure the properties of the project and the widget</a> to achieve the required functionality and features for your application.</p>
+ <p>After creating the application project, you can <a href="setting_properties_w.htm">configure the properties of the project and the Web application</a> to achieve the required functionality and features for your application.</p>
<h2 id="design" name="design" >Designing the Application UI</h2>
-<p>You can <a href="designing_app_ui_w.htm">design and create the application UI (user interface) with UI Builder</a>.</p>
-<p>UI Builder is included in the Tizen SDK, and functions as a WYSIWYG (What You See Is What You Get) design environment for creating UIs for Web applications.</p>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">You can also design the application UI using the widgets defined in the <a href="../../../org.tizen.web.apireference/html/ui_fw_api/ui_fw_api_cover.html">Web UI Framework Reference</a>.</td>
- </tr>
- </tbody>
- </table>
+<p>You can design the application UI using the widgets defined in the <a href="../../../../org.tizen.web.apireference/html/ui_fw_api/ui_fw_api_cover.html">Web UI Framework Reference</a>.</p>
<h2 id="code" name="code">Coding the Application</h2>
-<p><a href="coding_app_w.htm">Code your application</a> in the IDE using the APIs defined in the Web <a href="../../../org.tizen.web.apireference/html/web_api_reference.htm">API References</a>.</p>
+<p><a href="coding_app_w.htm">Code your application</a> in the IDE using the APIs defined in the Web <a href="../../../../org.tizen.web.apireference/html/web_api_reference.htm">API References</a>.</p>
<p>Once you have finished coding your application, you are ready to build your application.</p>
<h2 id="build" name="build" >Building the Application</h2>
<ul><li>JavaScript</li>
<li>CSS</li></ul></li>
<li>Compile for:
- <ul class="ul"><li>Coffeescript</li>
+ <ul><li>Coffeescript</li>
<li>Less</li></ul></li></ol>
<table class="note">
<tbody>
</tr>
<tr>
<td class="note">About the output files:
- <ul class="ul">
+ <ul>
<li>Compiled coffeescript output file name is <span style="font-family: Courier New,Courier,monospace"><file name>.js</span>. This file is used when the project is packed to the WGT package file, but the script tag's reference path must be changed manually.</li>
<li>Compiled less output file name is <span style="font-family: Courier New,Courier,monospace"><file name>.css</span>. This file is used when the project is packed to the WGT package file, but the script tag's reference path must be changed manually.</li>
</ul></td>
</table>
<p>If the project has errors, they are shown in the <strong>Problems</strong> and <strong>Project Explorer</strong> views after the build.</p>
- <p>You can build a widget automatically or manually:</p>
+ <p>You can build a Web application automatically or manually:</p>
<ul>
<li>Automatic build: <p>In the IDE menu, select <strong>Project > Build Automatically</strong>.</p> <p>If you select this option, whenever the source or a resource is changed and saved, the IDE automatically recognizes any saved changes and rebuilds the project source.</p> </li>
<li>Manual build: <p>In the IDE menu, select <strong>Project > Build Project</strong>.</p> <p>You can build your project at your convenience. If you want to use the manual build, ensure that the <strong>Project > Build Automatically</strong> option is not selected.</p> </li>
</tbody>
</table>
- <p>To customize a widget, set the build properties:</p>
+ <p>To customize the application, set the build properties:</p>
<ul><li>JS validation
<p>Set the options in the IDE menu: <strong>Window > Preferences > Tizen SDK > Web > Editor > JavaScript Editor</strong>.</p></li>
<li>CSS validation
<p>You can run the application smartly:</p>
<ul><li>You can use the <a href="run_debug_app_w.htm#rds">Rapid Development Support (RDS)</a> mode to run or test faster.</li>
<li>You can use the live editing mode to test faster (debug mode does not support it).</li></ul>
- <p>For more information about the debugging process and tools, see <a href="run_debug_app_w.htm#debug">Debugging Widgets</a>.</p>
+ <p>For more information about the debugging process and tools, see <a href="run_debug_app_w.htm#debug">Debugging Web Applications</a>.</p>
<h2 id="package" name="package">Packaging the Application</h2>
<li>Make up resources (for hybrid core, font, and UI framework applications).</li>
<li>Handle signing.</li></ol>
<p>Web application packaging process is based on the W3C packaging and configuration.</p>
- <p>You can package a widget using the <span style="font-family: Courier New,Courier,monospace">web-packaging</span> command in the <a href="../../../org.tizen.devtools/html/web_tools/command_line_interface_w.htm">Command Line Interface (CLI)</a>, which is an IDE functional tool in the Tizen SDK:</p>
+ <p>You can package a Web application using the <span style="font-family: Courier New,Courier,monospace">web-packaging</span> command in the <a href="../../../../org.tizen.devtools/html/web_tools/command_line_interface_w.htm">Command Line Interface (CLI)</a>, which is an IDE functional tool in the Tizen SDK:</p>
<pre class="prettyprint">web-packaging project.wgt project/</pre>
- <p>The Tizen Web SDK provides the functionality to package a widget quickly in the required format and to set the package properties.</p>
+ <p>The Tizen Web SDK provides the functionality to package a Web application quickly in the required format and to set the package properties.</p>
<p>You can set the package properties in <strong>IDE > Project > Properties > Tizen SDK > Package</strong> by selecting the resources to be included in the package. For a Web application, you can set the properties in <strong>IDE > Project > Properties > Tizen SDK > Package > Web</strong>:</p>
<ul>
<p>You can minify your JavaScript, CSS, HTML, and PNG resources and put in an exclude file pattern that you do not want to optimize.</p></li>
<li><strong>Set hybrid application's main service application</strong> (in mobile applications only)</li></ul>
- <p>By default, the widget package is created once. You can view the package content at any point of the application development process by double-clicking the project <span style="font-family: Courier New,Courier,monospace">.wgt</span> file in the <strong>Project Explorer</strong> view. All the files present in the application project are displayed in a list.</p>
+ <p>By default, the Web application package is created once. You can view the package content at any point of the application development process by double-clicking the project <span style="font-family: Courier New,Courier,monospace">.wgt</span> file in the <strong>Project Explorer</strong> view. All the files present in the application project are displayed in a list.</p>
<p>Any changes made to the files in the package content list, such as deleting files or dragging and dropping files, are not reflected in the actual project files.</p>
- <p class="figure">Figure: Viewing the widget package</p>
- <p style="text-align:center;"><img alt="Viewing the widget package" src="../images/view_package_mw.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
+ <p class="figure">Figure: Viewing the Web application package</p>
+ <p align="center"><img alt="Viewing the Web application package" src="../../images/view_package_mw.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
- <p>Additionally, you can <a href="setting_properties_w.htm#localization">localize the widget</a> to support different languages and environments.</p>
+ <p>Additionally, you can <a href="setting_properties_w.htm#localization">localize the Web application</a> to support different languages and environments.</p>
<h2 id="multi" name="multi" >Developing Multiple Projects as a Combined Package</h2>
-<p>Tizen supports multi-project applications that combine different types of <a class="opensection" href="creating_app_project_w.htm#template">application templates in Hybrid and Companion Applications</a>.</p>
+<p>Tizen supports multi-project applications that combine different types of <a href="creating_app_project_w.htm#template">application templates in hybrid and companion applications</a>.</p>
<h3 id="hybrid">Packaging Hybrid Applications in Mobile Applications</h3>
<p>A hybrid application package combines a Web application and 1 or more native service applications.</p>
<p>To create and run a hybrid application:</p>
<ol>
- <li>Create a project for a <a href="creating_app_project_w.htm">Web UI application</a> and <a href="app_dev_process_n.htm#creating">native service application</a>.</li>
+ <li>Create a project for a <a href="creating_app_project_w.htm">Web UI application</a> and <a href="../../native/process/app_dev_process_n.htm#creating">native service application</a>.</li>
<li>To establish a project reference between a UI and service application:
<ul>
<li>In the <strong>Project Explorer</strong> view, right-click the Web UI application.</li>
</li>
<li><a href="app_dev_process_w.htm#build">Build</a> and <a href="app_dev_process_w.htm#run">run</a> the Web UI application. The service application is built and executed automatically at the same time, and you can find a WGT file (hybrid application package) under the Web UI application project in the <strong>Project Explorer</strong> view.
- <p>To modify the build configuration of the service application, see <a href="app_dev_process_n.htm#build">Building the Application</a>.</p></li>
+ <p>To modify the build configuration of the service application, see <a href="../../native/process/app_dev_process_n.htm#build">Building the Application</a>.</p></li>
</ol>
<p>With a hybrid application package, you can register the included applications in the Tizen Store and install, upgrade, and uninstall them using the single hybrid package. When a hybrid application package is installed, the Web application is installed by the Web installer, followed by the native installer installing native service applications.</p>
<p>A hybrid application package is very useful to Web applications that need background processing or monitoring. A native service application does not have a UI and can be run in the background.</p>
- <p>The Web application and native service applications within a hybrid application package share the same package ID and data folder. Sharing application data between them is easy. Many useful inter-application APIs, such as <a href="../../../org.tizen.native.mobile.apireference/group__CAPI__MESSAGE__PORT__MODULE.html">Message Port</a> and <a href="../../../org.tizen.native.mobile.apireference/group__CAPI__APP__CONTROL__MODULE.html">AppControl</a>, can be used in a hybrid application package.</p>
+ <p>The Web application and native service applications within a hybrid application package share the same package ID and data folder. Sharing application data between them is easy. Many useful inter-application APIs, such as <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MESSAGE__PORT__MODULE.html">Message Port</a> and <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APP__CONTROL__MODULE.html">AppControl</a>, can be used in a hybrid application package.</p>
<p>For more information on hybrid applications and their package structure, see <a href="https://developer.tizen.org/downloads/sample-applications/sample-mobile-applications" target="blank">HybridWebApp and HybridServiceApp</a>, and <a href="../app_model/application_model_w.htm#hap">Hybrid Application Package</a>.</p>
<h2 id="cert" name="cert" >Certifying and Publishing the Application</h2>
<p>Once your application has reached the end of its life-cycle, you can remove it from the Tizen Store or Samsung Galaxy Apps Store.</p>
-<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../scripts/showhide.js"></script>
+<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>
+<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>
<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>
+ <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>Coding Applications</title>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/></p>
+ <p><img alt="Mobile Web" src="../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../images/ww_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a class="opensection" href="#hover">Using Hover Help</a></li>
- <li><a class="opensection" href="#add">Adding External Source Code or Library</a></li>
+ <li><a href="#hover">Using Hover Help</a></li>
+ <li><a href="#add">Adding External Source Code or Library</a></li>
</ul>
</div></div>
</ol>
<h2 name="hover" id="hover">Using Hover Help</h2>
- <p>The Tizen IDE supports hover help for Web API and W3C widgets. The hover help provides input from the <a href="../../../org.tizen.web.apireference/html/web_api_reference.htm">API Reference</a>.</p>
+ <p>The Tizen IDE supports hover help for Web API and W3C Widget APIs. The hover help provides input from the <a href="../../../../org.tizen.web.apireference/html/web_api_reference.htm">API Reference</a>.</p>
<p class="figure">Figure: Hover help</p>
- <p style="text-align:center;"><img alt="Hover help" src="../images/hover_help.png" /></p>
+ <p align="center"><img alt="Hover help" src="../../images/hover_help.png" /></p>
<h2 name="add" id="add">Adding External Source Code or Library</h2>
<p>External source files are located in the project directory, and its <span style="font-family: Courier New,Courier,monospace">/js</span> and <span style="font-family: Courier New,Courier,monospace">/css</span> sub-directories. You can add a new folder or source file (such as CSS, HTML, JSON, XML, and JavaScript) to your existing project.</p>
<p>You can add files in the following ways (as an example, the instructions illustrate the adding of a CSS file):</p>
</table>
-<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../scripts/showhide.js"></script>
+<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>
+<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>
<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>
+ <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>Creating the Application Project</title>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/></p>
+ <p><img alt="Mobile Web" src="../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../images/ww_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a class="opensection" href="#import">Importing a Project</a></li>
- <li><a class="opensection" href="#export">Exporting a Project User Template</a></li>
- <li><a class="opensection" href="#template">Supported Templates and Samples</a></li>
- <li><a class="opensection" href="#user">User Template</a></li>
+ <li><a href="#import">Importing a Project</a></li>
+ <li><a href="#export">Exporting a Project User Template</a></li>
+ <li><a href="#template">Supported Templates and Samples</a></li>
+ <li><a href="#user">User Template</a></li>
</ul>
</div></div>
</div>
<ol>
<li>In the IDE, select <strong>File > New > Tizen Web Project</strong>. <p>If the project option you want is not visible, make sure that you are using the correct perspective (Tizen Web). To switch perspectives, go to <strong>Window > Open Perspective > Other</strong> and select the perspective you need.</p></li>
<li>In the <strong>New Tizen Web Project</strong> window, define the project details:
- <ol>
+ <ol type="a">
<li>Select the project type.</li>
<li>Define the name of your project. <p>The default location for your application project is defined.</p>
<table class="note">
</ol>
<p>The new application project is shown in the <strong>Project Explorer</strong> view of the IDE, with default content in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file as well as in several project folders.</p>
<p class="figure">Figure: Creating a Tizen mobile Web project</p>
- <p style="text-align:center;"><img alt="Creating a Tizen mobile Web project" src="../images/web_application_project.png" /></p>
+ <p align="center"><img alt="Creating a Tizen mobile Web project" src="../../images/web_application_project.png" /></p>
<p class="figure">Figure: Creating a Tizen wearable Web project</p>
-<p style="text-align:center;"><img alt="Creating a Tizen wearable Web project" src="../images/wearable_web_application_project.png" /></p>
+<p align="center"><img alt="Creating a Tizen wearable Web project" src="../../images/wearable_web_application_project.png" /></p>
<h2 id="import" name="import">Importing a Project</h2>
<p>If you have an existing Tizen application project, you can import it into the Tizen IDE:</p>
<ol>
- <li>Select <strong>File > Import > Tizen > Web Projects and Widget file</strong>.</li>
- <li>Click <strong>Browse</strong> and select the root directory, which contains your existing project, or widget file (with the <span style="font-family: Courier New,Courier,monospace">.wgt</span> extension). <p>After selecting the project, you can copy it into the workspace by selecting the <strong>Copy projects into workspace</strong> check box.</p></li>
+ <li>Select <strong>File > Import > Tizen > Tizen Project or Package</strong>.</li>
+ <li>Click <strong>Browse</strong> and select the root directory, which contains your existing project, or Web application package file (with the <span style="font-family: Courier New,Courier,monospace">.wgt</span> extension).</li>
+ <li>Click the selection buttons under <strong>To</strong>, and select both a profile and a version.</li>
+ <li>Enter a project name.</li>
<li>Click <strong>Finish</strong>.</li>
</ol>
<h2 id="export" name="export">Exporting a Project User Template</h2>
<p>To export an existing project as a <a href="#user">user template</a> that you can use as a basis for creating other projects:</p>
<ol>
- <li>Select <strong>File > Export > Tizen > Tizen User Template</strong>.</li>
+ <li>Select <strong>File > Export > Tizen > Tizen Web User Template</strong>.</li>
<li>In the <strong>User Template Export Wizard</strong> window, define the project and user template details:
- <ol>
+ <ol type="a">
<li>Select the source project.</li>
<li>Define the name of your user template.</li>
<li>Click <strong>Browse</strong> and select the export location. <p>You can add the template to the <strong>User Template</strong> tab of the <strong>New Tizen Web Project</strong> window by selecting the <strong>Import a template to the new project wizard automatically</strong> check box. To select a template description, preview image, and icon files to be shown in the Project Wizard, click <strong>Next</strong>.</p></li>
<td>This is a Tizen blank application template.</td>
</tr>
<tr>
- <td>jQuery Mobile</td>
+ <td>jQuery Mobile (mobile applications only)</td>
<td>
<ul>
<li>Single Page Application</li>
<li>E - Yellow</li>
</ul> </td>
</tr>
+ <tr>
+ <td>IME application (wearable applications only)</td>
+ <td>Web IME Application</td>
+ <td>This is a Web-based IME application template, which lets you create your own IME by only writing HTML, CSS, and JavaScript code.
+ </td>
+ </tr>
</tbody>
</table>
<h2 name="user" id="user">User Template</h2>
<p>You can <a href="#export">create custom user templates from existing projects</a> and then use these templates to create new projects. The created user templates are located in the <span style="font-family: Courier New,Courier,monospace"><TIZEN_SDK_DATA>/ide/user-templates/web</span> directory and a user-defined directory. When you create a user template, you can define the export location in the User Template Export Wizard.</p>
<p class="figure">Figure: User template export location</p>
- <p style="text-align:center;"><img alt="User template export location" src="../images/user_template_export.png" /></p>
+ <p align="center"><img alt="User template export location" src="../../images/user_template_export.png" /></p>
<p>The <span style="font-family: Courier New,Courier,monospace"><TIZEN_SDK_DATA></span> directory is different for different platforms:</p>
<ul>
</ol>
-<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../scripts/showhide.js"></script>
+<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>
+<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>
<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>
+ <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>Running and Debugging Applications</title>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/></p>
+ <p><img alt="Mobile Web" src="../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../images/ww_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a href="#emulator">Running Widgets on the Emulator</a></li>
- <li><a href="#target">Running Widgets on a Target Device</a></li>
- <li><a href="#simulator">Running Mobile Widgets on the Simulator</a></li>
- <li><a href="#debug">Debugging Widgets</a></li>
+ <li><a href="#emulator">Running Web Applications on the Emulator</a></li>
+ <li><a href="#target">Running Web Applications on a Target Device</a></li>
+ <li><a href="#simulator">Running Mobile Web Applications on the Simulator</a></li>
+ <li><a href="#debug">Debugging Web Applications</a></li>
<li><a href="#rds">Rapid Development Support</a></li>
</ul>
</div></div>
- <h2 name="emulator" id="emulator">Running Widgets on the Emulator</h2>
- <p>You can debug Tizen widgets on the <a href="../../../org.tizen.devtools/html/common_tools/emulator.htm">Emulator</a> using the <strong>Project Explorer</strong> view or the Tizen IDE menu.</p>
+ <h2 name="emulator" id="emulator">Running Web Applications on the Emulator</h2>
+ <p>You can debug Tizen Web applications on the <a href="../../../../org.tizen.devtools/html/common_tools/emulator.htm">Emulator</a> using the <strong>Project Explorer</strong> view or the Tizen IDE menu.</p>
<table class="note">
<tbody>
<tr>
</table>
<p>To launch the Emulator, do one of the following:</p>
<ul>
- <li>Use the <a href="../../../org.tizen.devtools/html/common_tools/emulator.htm#manager">Emulator Manager</a>:
+ <li>Use the <a href="../../../../org.tizen.devtools/html/common_tools/emulator.htm#manager">Emulator Manager</a>:
<ol>
<li>Start the Emulator Manager using the Desktop (in Linux) or Start menu (in Windows®), or using the command line.</li>
<li>In the <strong>Emulator Manager</strong> window, select the Emulator image in the <strong>Name</strong> column. <p>If you are using the Emulator Manager for the first time, you must create an Emulator image. To create an Emulator image, click <strong>Create New</strong>, set the image details, and click <strong>Save</strong>.</p></li>
<li>Click <strong>Launch</strong>.</li>
</ol> </li>
- <li>Use the <a href="../../../org.tizen.devtools/html/common_tools/emulator.htm#startup">command line</a>.</li>
+ <li>Use the <a href="../../../../org.tizen.devtools/html/common_tools/emulator_features.htm#startup">command line</a>.</li>
</ul>
<p>To run the application on the Emulator, do one of the following:</p>
<ul>
</ul>
<p>To stop the Emulator, right-click the Emulator and click <strong>Close</strong>.</p>
- <h2 name="target" id="target">Running Widgets on a Target Device</h2>
- <p>You can run Tizen widgets on a target device using the <strong>Project Explorer</strong> view or the Tizen IDE menu.</p>
+ <h2 name="target" id="target">Running Web Applications on a Target Device</h2>
+ <p>You can run Tizen Web applications on a target device using the <strong>Project Explorer</strong> view or the Tizen IDE menu.</p>
<p>To run your application on the target device:</p>
<ol>
<li>Connect the target device to your computer.</li>
<li>In the Tizen IDE menu, go to <strong>Run > Run As > Tizen Web Application</strong>.</li>
<li>On the Tizen IDE toolbar, click <strong>Run</strong>.</li>
</ul>
- <p>If the Web application successfully launches on the target device, the <a href="../../../org.tizen.devtools/html/web_tools/js_log_console_w.htm">JavaScript Log Console View</a> is automatically launched in the Tizen IDE. The JavaScript Log Console view displays Web application JavaScript logs.</p>
+ <p>If the Web application successfully launches on the target device, the <a href="../../../../org.tizen.devtools/html/web_tools/js_log_console_w.htm">JavaScript Log Console View</a> is automatically launched in the Tizen IDE. The JavaScript Log Console view displays Web application JavaScript logs.</p>
- <h2 name="simulator" id="simulator">Running Mobile Widgets on the Simulator</h2>
- <p>You can run Tizen widgets on the <a href="../../../org.tizen.devtools/html/web_tools/web_simulator_w.htm">Web Simulator</a> using the <strong>Project Explorer</strong> view or the Tizen IDE menu.</p>
+ <h2 name="simulator" id="simulator">Running Mobile Web Applications on the Simulator</h2>
+ <p>You can run Tizen Web applications on the <a href="../../../../org.tizen.devtools/html/web_tools/web_simulator_w.htm">Web Simulator</a> using the <strong>Project Explorer</strong> view or the Tizen IDE menu.</p>
<table class="note">
<tbody>
<tr>
<th class="note">Note</th>
</tr>
<tr>
- <td class="note">The Tizen Web Simulator runs only on the Google Chrome™ browser. To use the Web Simulator, download and install <a href="http://www.google.com/chrome/" target="_blank">Google Chrome</a>. You can manually specify the installation location of the browser in the <a href="../../../org.tizen.devtools/html/web_tools/web_simulator_w.htm#pref">simulator preferences</a>.</td>
+ <td class="note">The Tizen Web Simulator runs only on the Google Chrome™ browser. To use the Web Simulator, download and install <a href="http://www.google.com/chrome/" target="_blank">Google Chrome</a>. You can manually specify the installation location of the browser in the <a href="../../../../org.tizen.devtools/html/web_tools/web_simulator_w.htm#pref">simulator preferences</a>.</td>
</tr>
</tbody>
</table>
- <p>If you are running your widget on the Web Simulator for the first time, create a running configuration by selecting <strong>Run > Run Configurations > Tizen Web Simulator Application</strong> in the Tizen IDE menu. The running configuration contains the application launch settings.</p>
+ <p>If you are running your Web application on the Web Simulator for the first time, create a running configuration by selecting <strong>Run > Run Configurations > Tizen Web Simulator Application</strong> in the Tizen IDE menu. The running configuration contains the application launch settings.</p>
<p>To run your application on the Simulator, do one of the following:</p>
<ul>
<li>In the <strong>Project Explorer</strong> view, right-click the project and select <strong>Run As > Tizen Web Simulator Application</strong>.</li>
</ul>
<p>When the application is launched, the Web Simulator loads the file specified in the <strong>Content</strong> field of the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file. The mostly commonly specified file is <span style="font-family: Courier New,Courier,monospace">index.html</span>.</p>
- <p>The simulator renders your application on the browser using the <a href="http://www.webkit.org/" target="_blank">WebKit</a> engine. All the Google Chrome™ browser development features are available in the simulator, including the <a href="../../../org.tizen.devtools/html/web_tools/remote_inspector_w.htm">Remote Inspector</a> tool, which can be accessed by pressing the <strong>F12</strong> keyboard key. You can leverage the advantages of the Web Simulator tool by setting the device screen size and orientation, and by sending events and messages, such as geolocation data and sensor input events, to your application for debugging the widget.</p>
+ <p>The simulator renders your application on the browser using the <a href="http://www.webkit.org/" target="_blank">WebKit</a> engine. All the Google Chrome™ browser development features are available in the simulator, including the <a href="../../../../org.tizen.devtools/html/web_tools/web_inspector_w.htm">Web Inspector</a> tool, which can be accessed by pressing the <strong>F12</strong> keyboard key. You can leverage the advantages of the Web Simulator tool by setting the device screen size and orientation, and by sending events and messages, such as geolocation data and sensor input events, to your application for debugging it.</p>
- <h2 name="debug" id="debug">Debugging Widgets</h2>
- <p>Debugging a widget enables you to understand its flow of control. You can debug a widget by running it on the target device and debugging its JavaScript code. JavaScript code debugging uses the <a href="../../../org.tizen.devtools/html/web_tools/remote_inspector_w.htm">Remote Inspector</a> tool.</p>
+ <h2 name="debug" id="debug">Debugging Web Applications</h2>
+ <p>Debugging a Web application enables you to understand its flow of control. You can debug a Web application by running it on the target device and debugging its JavaScript code. JavaScript code debugging uses the <a href="../../../../org.tizen.devtools/html/web_tools/web_inspector_w.htm">Web Inspector</a> tool.</p>
<p>To debug your application on the target device:</p>
<ol>
<li>Connect the target device to your computer.</li>
</ul> </li>
<li>In the <strong>Debug Configurations</strong> window, click <strong>New Launch Configuration</strong>. <p>If you have not made any changes to the application source files since the last time the application was run, <a href="#rds">Rapid Development Support (RDS)</a> is used to skip the package upload and make running the application faster. RDS is enabled as default. To disable it, go to <strong>Window > Preferences > Tizen SDK > Rapid Development Support</strong>.</p></li>
<li>Set the timeout using the <strong>Timeout value</strong> slider. <p>The timeout value represents the waiting time for the application launch operation. If you are using a lower configuration system, set a higher timeout value to avoid application launch failure errors.</p></li>
- <li>Start the debugging by clicking <strong>Debug</strong>.</li>
+ <li>Start the debugging by clicking <strong>Debug</strong>.
<p>If no changes are required in the debug configuration, you can also debug the application on the target device by doing one of the following:</p>
<ul>
- <li>In the <strong>Project Explorer</strong> view, right-click the project and select <strong>Debug As > Tizen Web Application</strong>.</li>
- <li>In the Tizen IDE menu, go to <strong>Run > Debug As > Tizen Web Application</strong>.</li>
+ <li>In the <strong>Project Explorer</strong> view, right-click the project and select <strong>Debug As > Tizen Web application</strong>.</li>
+ <li>In the Tizen IDE menu, go to <strong>Run > Debug As > Tizen Web application</strong>.</li>
<li>On the Tizen IDE toolbar, click <strong>Debug</strong>.</li>
</ul>
- <p>The Remote Inspector tool is displayed in a new Chrome browser window. You can perform the following debugging tasks using the Remote Inspector:</p>
+ <p>The Web Inspector tool is displayed in a new Chrome browser window. You can perform the following debugging tasks using the Web Inspector:</p>
<ul>
<li>Inspect styles</li>
<li>Inspect the DOM</li>
<th class="note">Note</th>
</tr>
<tr>
- <td class="note"> <p>The Remote Inspector always opens in a new window. Life-cycle synchronization between the application to be debugged and the Remote Inspector browser is not supported.</p> <p>Installing Google Chrome on the device is mandatory for the Remote Inspector to work. When Google Chrome is installed on the device, the Tizen SDK automatically detects it. To select the browser path, go to <strong>Window > Preferences > Tizen SDK > Web > Chrome</strong>.</p> </td>
+ <td class="note"> <p>The Web Inspector always opens in a new window. Life-cycle synchronization between the application to be debugged and the Web Inspector browser is not supported.</p> <p>Installing Google Chrome on the device is mandatory for the Web Inspector to work. When Google Chrome is installed on the device, the Tizen SDK automatically detects it. To select the browser path, go to <strong>Window > Preferences > Tizen SDK > Web > Chrome</strong>.</p> </td>
</tr>
</tbody>
</table>
- <li>To debug the JavaScript code, click <strong>Sources</strong> in the Remote Inspector menu.</li>
- <p>You must enable debugging before debugging JavaScript code.</p>
- <li>You can also set a break point in the code by right-clicking in the marker bar area on the left side of the editor, and selecting <strong>Toggle Breakpoint</strong>.</li>
+</li>
+ <li>To debug the JavaScript code, click <strong>Sources</strong> in the Web Inspector menu.
+ <p>You must enable debugging before debugging JavaScript code.</p> </li>
+ <li>You can also set a break point in the code by right-clicking in the marker bar area on the left side of the editor, and selecting <strong>Toggle Breakpoint</strong>.
<p>Once the break points are set, you can watch variables, expressions, and the current call stack. You can also control the debugging by using the following control buttons.</p>
<table>
<caption>
<th>Description</th>
</tr>
<tr>
- <td><img alt="Resume" src="../images/resume.png" /></td>
+ <td><img alt="Resume" src="../../images/resume.png" /></td>
<td>Resumes the current execution.</td>
</tr>
<tr>
- <td><img alt="Step over" src="../images/stepover.png" /></td>
+ <td><img alt="Step over" src="../../images/stepover.png" /></td>
<td>Steps over the highlighted statement. <p>Executes the current line, and if the line contains a method, executes the method without entering it.</p></td>
</tr>
<tr>
- <td><img alt="Step in" src="../images/stepin.png" /></td>
+ <td><img alt="Step in" src="../../images/stepin.png" /></td>
<td>Steps into the highlighted statement. <p>Executes the current line, and if the line contains a method, steps into the method.</p></td>
</tr>
<tr>
- <td><img alt="Step out" src="../images/stepout.png" /></td>
+ <td><img alt="Step out" src="../../images/stepout.png" /></td>
<td>Steps out of the current method.</td>
</tr>
<tr>
- <td><img alt="Deactivate all break points" src="../images/deactivate.png" /></td>
+ <td><img alt="Deactivate all break points" src="../../images/deactivate.png" /></td>
<td>Deactivates all break points.</td>
</tr>
</tbody>
- </table>
+ </table> </li>
</ol>
- <p>If the Web application successfully launches on the target device, the <a href="../../../org.tizen.devtools/html/web_tools/js_log_console_w.htm">JavaScript Log Console View</a> is automatically launched in the Tizen IDE. The JavaScript Log Console view displays Web application JavaScript logs.</p>
+ <p>If the Web application successfully launches on the target device, the <a href="../../../../org.tizen.devtools/html/web_tools/js_log_console_w.htm">JavaScript Log Console View</a> is automatically launched in the Tizen IDE. The JavaScript Log Console view displays Web application JavaScript logs.</p>
<h2 name="rds" id="rds">Rapid Development Support</h2>
<p>Rapid Development Support (RDS) lets you develop a Tizen application rapidly by saving deployment time.</p>
</tr>
</tbody>
</table>
-<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../scripts/showhide.js"></script>
+<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>
+<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>
<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>
+ <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>Setting Project Properties</title>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/></p>
+ <p><img alt="Mobile Web" src="../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../images/ww_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a class="opensection" href="#api">Checking API Privileges</a></li>
- <li><a class="opensection" href="#set">Setting Build Properties</a></li>
- <li><a class="opensection" href="#set_json">Setting the JSON Property</a></li>
- <li><a class="opensection" href="#set_widget">Setting the Web Application Configuration</a></li>
+ <li><a href="#api">Checking API Privileges</a></li>
+ <li><a href="#set">Setting Build Properties</a></li>
+ <li><a href="#set_json">Setting the JSON Property</a></li>
+ <li><a href="#set_widget">Setting the Web Application Configuration</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a href="../details/app_filtering.htm#web">Feature Filtering</a></li>
- <li><a href="../details/sec_privileges.htm#web">Security and API Privileges</a></li>
+ <li><a href="../details/app_filtering_w.htm">Feature Filtering</a></li>
+ <li><a href="../details/sec_privileges_w.htm">Security and API Privileges</a></li>
</ul>
</div></div>
</div>
<th class="note">Note</th>
</tr>
<tr>
- <td class="note">Only modify the widget configuration by using the configuration editor in the Tizen IDE. If you create or edit the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file using any other text editor, your application may not work as expected.</td>
+ <td class="note">Only modify the Web application configuration by using the configuration editor in the Tizen IDE. If you create or edit the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file using any other text editor, your application may not work as expected.</td>
</tr>
</tbody>
</table>
- <p>After you have finished setting the project properties, you are ready to <a class="opensection" href="app_dev_process_w.htm#design">design the UI</a>.</p>
+ <p>After you have finished setting the project properties, you are ready to <a href="app_dev_process_w.htm#design">design the UI</a>.</p>
<h2 id="api" name="api">Checking API Privileges</h2>
<p>You can check the source code in your project for any violation of API privileges. To enable the privilege check:</p>
<li><p>In the <strong>Properties</strong> window, select <strong>Project > Properties > Tizen SDK > Web > Privilege</strong>.</p></li>
<li><p>If you want to exclude JavaScript files in specified folders, you can do so in the <strong>Excluded Folder Settings</strong> panel.</p> <p>This configuration helps to avoid unnecessary analysis for library files like <span style="font-family: Courier New,Courier,monospace">jQuery</span>.</p></li>
</ol>
- <p>To perform privilege checks automatically, select the required option in the <strong>Mode Settings</strong> panel. To check during the <a class="opensection" href="app_dev_process_w.htm#build">build process</a>, select the <strong>Run privilege checks with build</strong> option.</p>
+ <p>To perform privilege checks automatically, select the required option in the <strong>Mode Settings</strong> panel. To check during the <a href="app_dev_process_w.htm#build">build process</a>, select the <strong>Run privilege checks with build</strong> option.</p>
<p>You can also perform the checks manually in the IDE by selecting <strong>Project > Check Privilege</strong> from the context menu. The results are displayed in the <strong>Problems</strong> view.</p>
<h2 id="set" name="set">Setting Build Properties</h2>
</ol>
<h2 name="set_widget" id="set_widget">Setting the Web Application Configuration</h2>
- <p>Every application has a <span style="font-family: Courier New,Courier,monospace">config.xml</span> configuration file. The Tizen IDE provides a widget configuration editor for configuring the application.</p>
+ <p>Every application has a <span style="font-family: Courier New,Courier,monospace">config.xml</span> configuration file. The Tizen IDE provides a Web application configuration editor for configuring the application.</p>
<p>To edit the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file, open it by double-clicking the file in the <strong>Project Explorer</strong> view.</p>
- <p>You can edit widget properties using the tabs of the widget configuration editor.</p>
+ <p>You can edit Web application properties using the tabs of the Web application configuration editor.</p>
<h3 id="overview" name="overview" >Defining and Editing General Information in the Overview Tab</h3>
- <p>You can define and edit general information of the widget in the <strong>Overview</strong> tab of the widget configuration editor.</p>
+ <p>You can define and edit general information of the Web application in the <strong>Overview</strong> tab of the Web application configuration editor.</p>
- <p>The following table lists the widget properties you can edit in the <strong>Overview</strong> tab.</p>
+ <p>The following table lists the Web application properties you can edit in the <strong>Overview</strong> tab.</p>
<table border="1">
<caption>
- Table: Widget general information
+ Table: Web application general information
</caption>
<tbody>
<tr>
</tr>
<tr>
<td>Identifier</td>
- <td>Widget identifier</td>
+ <td>Web application identifier</td>
</tr>
<tr>
<td>Version</td>
- <td>Current version of the widget</td>
+ <td>Current version of the Web application</td>
</tr>
<tr>
<td>Name</td>
- <td>Widget name that is displayed in an application menu or in other contexts</td>
+ <td>Web application name that is displayed in an application menu or in other contexts</td>
</tr>
<tr>
<td>Content</td>
- <td>Start-up file of the widget </td>
+ <td>Start-up file of the Web application </td>
</tr>
<tr>
<td>Icon </td>
- <td>Custom icon for the widget, displayed in the main menu.
+ <td>Custom icon for the Web application, displayed in the main menu.
<p>The following icon format and sizes can be used:</p>
<table border="1">
<tbody>
</tbody>
</table>
-<h3 id="widget" name="widget">Defining Widget License Information and UI Preferences in the Widget Tab</h3>
+<h3 id="widget" name="widget">Defining Web Application License Information and UI Preferences in the Widget Tab</h3>
- <p>You can define license information and UI preferences of the widget in the <strong>Widget</strong> tab of the widget configuration editor.</p>
+ <p>You can define license information and UI preferences of the Web application in the <strong>Widget</strong> tab of the Web application configuration editor.</p>
- <p>The following table lists the widget properties you can edit in the <strong>Widget</strong> tab.</p>
+ <p>The following table lists the Web application properties you can edit in the <strong>Widget</strong> tab.</p>
<table border="1">
<caption>
- Table: Widget license and UI information
+ Table: Web application license and UI information
</caption>
<tbody>
<tr>
<th>Description</th>
</tr>
<tr>
- <td colspan="2"><strong>Managing the Widget</strong></td>
+ <td colspan="2"><strong>Managing the Web Application</strong></td>
</tr>
<tr>
<td>Author </td>
- <td>Person or organization that created the widget </td>
+ <td>Person or organization that created the Web application </td>
</tr>
<tr>
<td>E-mail</td>
</tr>
<tr>
<td>Web Site </td>
- <td> IRI associated with the widget, such as a homepage or a profile on a social network </td>
+ <td> IRI associated with the Web application, such as a homepage or a profile on a social network </td>
</tr>
<tr>
<td>License</td>
- <td>Software license, which can include content, such as a usage agreement, redistribution statement, and copyright license terms, under which the content of the widget package is provided </td>
+ <td>Software license, which can include content, such as a usage agreement, redistribution statement, and copyright license terms, under which the content of the Web application package is provided </td>
</tr>
<tr>
<td>License URL</td>
</tr>
<tr>
<td>Description</td>
- <td>Free-form widget description</td>
+ <td>Free-form Web application description</td>
</tr>
<tr>
- <td colspan="2"><strong>Managing the Widget UI</strong></td>
+ <td colspan="2"><strong>Managing the Web application UI</strong></td>
</tr>
<tr>
<td>Width</td>
<p>To enable filtering for your mobile Web application:</p>
<ol>
- <li>In the <strong>Feature</strong> tab of the widget configuration editor, click <strong>Add</strong>.</li>
+ <li>In the <strong>Feature</strong> tab of the Web application configuration editor, click <strong>Add</strong>.</li>
<li>Select a feature from the list.</li>
<li>Click <strong>Save</strong>.</li>
</ol>
- <p>After setting the feature information with the widget configuration editor, you can see the added code in the <strong>Source</strong> tab.</p>
+ <p>After setting the feature information with the Web application configuration editor, you can see the added code in the <strong>Source</strong> tab.</p>
<p> The following example shows the setting in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file code:</p>
<pre class="prettyprint">
<tizen:feature name="http://tizen.org/feature/network.nfc"/>
</pre>
-<p>For more information on the available requirements for an application package, see <a href="../details/app_filtering.htm#web">Feature Filtering for Web Applications</a>.</p>
+<p>For more information on the available requirements for an application package, see <a href="../details/app_filtering_w.htm">Feature Filtering for Web Applications</a>.</p>
<h3 id="privilege" name="privilege">Specifying Privileges in the Privilege Tab</h3>
- <p>You can use features and services provided by <a href="../details/sec_privileges.htm#web">privileged APIs</a>, which handle platform and user-sensitive data. You can specify an API, or API groups, accessed and used by the widget in the <strong>Privilege</strong> tab of the widget configuration editor. The tab serves as a standardized tool to request the binding of an IRI-identifiable runtime component for a widget to use at runtime.</p>
+ <p>You can use features and services provided by <a href="../details/sec_privileges_w.htm">privileged APIs</a>, which handle platform and user-sensitive data. You can specify an API, or API groups, accessed and used by the Web application in the <strong>Privilege</strong> tab of the Web application configuration editor. The tab serves as a standardized tool to request the binding of an IRI-identifiable runtime component for a Web application to use at runtime.</p>
<p>To add a privilege:</p>
<ol>
- <li>In the <strong>Privilege</strong> tab of the widget configuration editor, click <strong>Add</strong>.</li>
+ <li>In the <strong>Privilege</strong> tab of the Web application configuration editor, click <strong>Add</strong>.</li>
<li>In the <strong>Add privilege</strong> window, select an option:
- <ul class="ul">
+ <ul>
<li><strong>Internal</strong>: Select a privilege from the predefined list of APIs. You can select multiple privileges by holding the <strong>CTRL</strong> key. </li>
<li><strong>Privilege name</strong>: Manually enter the URL containing a privilege definition.</li>
<li><strong>File</strong>: Click <strong>Browse</strong> and select a privilege file (with the <span style="font-family: Courier New,Courier,monospace">.xml</span> or <span style="font-family: Courier New,Courier,monospace">.widlprocxml</span> extension).</li>
</ul> </li>
<li>Click <strong>Finish</strong>.</li>
</ol>
- <p>After setting the privilege information with the widget configuration editor, you can see the added code in the <strong>Source</strong> tab.</p>
+ <p>After setting the privilege information with the Web application configuration editor, you can see the added code in the <strong>Source</strong> tab.</p>
<p>The following example shows the setting in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file code:</p>
<pre class="prettyprint"><tizen:privilege name="http://tizen.org/privilege/application.launch"/></pre>
<h3 id="policy" name="policy">Defining External Access Policies in the Policy Tab</h3>
- <p>According to the W3C Access Requests Policy (WARP), you cannot access external network resources by default. If you require access to an external network resource, you must request network resource permissions for the widget using the <strong>Policy</strong> tab of the widget configuration editor.</p>
+ <p>According to the W3C Access Requests Policy (WARP), you cannot access external network resources by default. If you require access to an external network resource, you must request network resource permissions for the Web application using the <strong>Policy</strong> tab of the Web application configuration editor.</p>
<tr>
<td>access</td>
<td><p>Used to define network resource permissions.</p>
- <p>To request network resource permissions, click <strong>Add</strong> and enter the resource URLs in the <strong>Network URL</strong> column. You can allow the widget to access the URL sub-domains by setting the <strong>Allow subdomain</strong> column value as <span style="font-family: Courier New,Courier,monospace">true</span>.</p>
+ <p>To request network resource permissions, click <strong>Add</strong> and enter the resource URLs in the <strong>Network URL</strong> column. You can allow the Web application to access the URL sub-domains by setting the <strong>Allow subdomain</strong> column value as <span style="font-family: Courier New,Courier,monospace">true</span>.</p>
<p>The following example shows the setting in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file code:</p>
<pre class="prettyprint">
<access origin="http://www.tizen.org" subdomains="true"/></pre> </td>
</tbody>
</table>
- <p>After setting the policy information with the widget configuration editor, you can see the added code in the <strong>Source</strong> tab.</p>
+ <p>After setting the policy information with the Web application configuration editor, you can see the added code in the <strong>Source</strong> tab.</p>
<h3 id="localization" name="localization">Setting the Supported Locales in the Localization Tab</h3>
- <p>You can provide localization support for name, description, and license elements of the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file in the <strong>Localization</strong> tab of the widget configuration editor.</p>
+ <p>You can provide localization support for name, description, and license elements of the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file in the <strong>Localization</strong> tab of the Web application configuration editor.</p>
<p>To add localization:</p>
<ol><li>In the <strong>Name</strong> panel, click <strong>Add</strong>.
<name xml:lang="en-gb">Lee</name>
</pre></li>
<li>In the <strong>Description</strong> panel, click <strong>Add</strong>.
-<p>Select a language and enter the description of the widget.</p>
+<p>Select a language and enter the description of the Web application.</p>
<p>The following example shows the setting in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file:</p>
<pre class="prettyprint">
<description xml:lang="en-gb">Widget</description>
</license>
</pre> </li>
</ol>
- <p>After setting the localization information with the widget configuration editor, you can see the added code in the <strong>Source</strong> tab.</p>
+ <p>After setting the localization information with the Web application configuration editor, you can see the added code in the <strong>Source</strong> tab.</p>
<p>You can localize a Web application to adapt to various languages and cultural environments by creating different Web application versions for different languages.</p>
<p>To localize a Web application:</p>
<ol>
<li>Launch the Localization Wizard by doing one of the following:
<ul>
- <li>In the <strong>Project Explorer</strong> view, right-click the widget and select <strong>Localization > Localization Wizard</strong>.</li>
+ <li>In the <strong>Project Explorer</strong> view, right-click the Web application and select <strong>Localization > Localization Wizard</strong>.</li>
<li>In the Tizen IDE menu, go to <strong>Project > Localization > Localization Wizard</strong>.</li>
</ul>
</li>
<li>Click <strong>Finish</strong>. <p>In the <strong>Project Explorer</strong> view, a new <span style="font-family: Courier New,Courier,monospace">locales</span> folder is created containing separate sub-folders for each locale. The sub-folders contain a copy of the selected files. Use that copy to create a localized version of the file.</p></li>
</ol>
<p class="figure">Figure: Locale folders</p>
-<p style="text-align:center;"><img alt="Locale folders" src="../images/localize_widget.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
+<p align="center"><img alt="Locale folders" src="../../images/localize_widget.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
<h3 id="preferences" name="preferences">Declaring Name-value Pairs in the Preferences Tab</h3>
- <p>You can declare name-value pairs which can be set and retrieved using the Widget API (in <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#widget">mobile</a> or <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#widget">wearable</a> applications) in the <strong>Preferences</strong> tab of the widget configuration editor. These name-value pairs, or preferences, are used by the widget during execution.</p>
+ <p>You can declare name-value pairs which can be set and retrieved using the Widget Interface API (in <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#widget">mobile</a> or <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#widget">wearable</a> applications) in the <strong>Preferences</strong> tab of the Web application configuration editor. These name-value pairs, or preferences, are used by the Web application during execution.</p>
<p>To add preferences, click <strong>Add</strong> and enter values in the <strong>Name</strong> and <strong>Value</strong> columns. You can set a preference as read-only by setting the <strong>Read-only</strong> column value as <span style="font-family: Courier New,Courier,monospace">true</span>.</p>
- <p>After setting the preference information with the widget configuration editor, you can see the added code in the <strong>Source</strong> tab.</p>
+ <p>After setting the preference information with the Web application configuration editor, you can see the added code in the <strong>Source</strong> tab.</p>
<p>The following example shows the setting in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file code:</p>
<pre class="prettyprint">
<preference name="key" value="value" readonly="false"/>
<h3 id="tizen" name="tizen">Configuring the Tizen Schema Extension in the Tizen Tab</h3>
- <p> The <strong>Tizen</strong> tab of the widget configuration editor shows the Tizen schema extension. Some of the attributes specified on this tab are mandatory and must be defined, whereas others are optional.</p>
+ <p> The <strong>Tizen</strong> tab of the Web application configuration editor shows the Tizen schema extension. Some of the attributes specified on this tab are mandatory and must be defined, whereas others are optional.</p>
<p>The following table describes the schema extension properties that you can edit.</p>
<table border="1">
</tr>
<tr>
<td>src</td>
- <td><p>In Widget Packaging and XML Configuration, the Web application start page is a document within the
widget package. The Tizen WRT allows the start page to be hosted on an external server.</p> <p>The <span style="font-family: Courier New,Courier,monospace"><tizen:content /></span> element is used to point to the relevant document.</p> </td>
+ <td><p>In Widget Packaging and XML Configuration, the Web application start page is a document within the
Web application package. The Tizen WRT allows the start page to be hosted on an external server.</p> <p>The <span style="font-family: Courier New,Courier,monospace"><tizen:content /></span> element is used to point to the relevant document.</p> </td>
</tr>
<tr>
<td colspan="2"><strong>setting</strong></td>
</tr>
<tr>
<td><strong>app-control</strong></td>
- <td><p>Describes the <a href="../../../org.tizen.guides/html/web/tizen/application/application_w.htm#controls">application control functionalities</a> provided by the application. The <strong>operation</strong>, <strong>uri</strong>, and <strong>mime</strong> fields describe the functionalities that other applications can request and the <strong>src</strong> field describes the application page that handles the request.</p> <p>The following example shows the setting in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file code:</p> <pre class="prettyprint">
+ <td><p>Describes the <a href="../../../
../org.tizen.guides/html/web/tizen/application/application_w.htm#controls">application control functionalities</a> provided by the application. The <strong>operation</strong>, <strong>uri</strong>, and <strong>mime</strong> fields describe the functionalities that other applications can request and the <strong>src</strong> field describes the application page that handles the request.</p> <p>The following example shows the setting in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file code:</p> <pre class="prettyprint">
<tizen:app-control>
<tizen:src name="edit.html"/>
<tizen:operation name="http://tizen.org/appcontrol/operation/edit"/>
<tizen:uri name="file"/>
<tizen:mime name="image/jpeg"/>
</tizen:app-control></pre> </td>
- </tr>
+ </tr>
<tr>
<td colspan="2"><strong>account</strong></td>
</tr>
<td><p>The capabilities of the account provider defined in the IRI format:</p>
<p><span style="font-family: Courier New,Courier,monospace">http://<vendor information>/accounts/capability/<name></span></p>
<p>The following predefined capabilities can be used:</p>
- <ul class="ul">
+ <ul>
<li><p><span style="font-family: Courier New,Courier,monospace">http://tizen.org/account/capability/contact</span></p>
<p>Used when the account is related to contacts.</p></li>
<li><p><span style="font-family: Courier New,Courier,monospace">http://tizen.org/account/capability/calendar</span></p>
<h3 id="source" name="source">Editing the config.xml File in the Source Tab</h3>
- <p>The <strong>Source</strong> tab of the widget configuration editor shows the code of the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file. You can edit an XML document and immediately see how changes made on the other tabs are reflected in the raw XML source content.</p>
+ <p>The <strong>Source</strong> tab of the Web application configuration editor shows the code of the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file. You can edit an XML document and immediately see how changes made on the other tabs are reflected in the raw XML source content.</p>
<table class="note">
<tbody>
</table>
-<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
-<script type="text/javascript" src="../scripts/showhide.js"></script>
+<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>
+<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>
</script>
<!--end-->
</body>
-</html>
+</html>
\ No newline at end of file
<toc label="Getting Started with Tizen" topic="html/cover_page.htm">
- <topic href="html/preface/preface.htm" label="Preface">
- </topic>
- <topic href="html/first_app/first_app.htm" label="Creating Your First Tizen Application">
- </topic>
- <topic href="html/process/app_dev_process.htm" label="Application Development Process">
- <topic href="html/process/app_dev_process_w.htm" label="Web Application">
- <topic href="html/process/creating_app_project_w.htm" label="Creating the Application Project"></topic>
- <topic href="html/process/setting_properties_w.htm" label="Setting Project Properties"></topic>
- <topic href="html/process/designing_app_ui_w.htm" label="Creating Application UIs with UI Builder"></topic>
- <topic href="html/process/coding_app_w.htm" label="Coding Applications"></topic>
- <topic href="html/process/run_debug_app_w.htm" label="Running and Debugging Applications"></topic>
+ <topic href="html/preface.htm" label="Preface"></topic>
+ <topic href="html/web/cover_page_w.htm" label="Web Application">
+ <topic href="html/web/first_app/first_app_w.htm" label="Creating Your First Tizen Application"></topic>
+ <topic href="html/web/process/app_dev_process_w.htm" label="Application Development Process">
+ <topic href="html/web/process/creating_app_project_w.htm" label="Creating the Application Project"></topic>
+ <topic href="html/web/process/setting_properties_w.htm" label="Setting Project Properties"></topic>
+ <topic href="html/web/process/coding_app_w.htm" label="Coding Applications"></topic>
+ <topic href="html/web/process/run_debug_app_w.htm" label="Running and Debugging Applications"></topic>
</topic>
+ <topic href="html/web/app_model/application_model_w.htm" label="Tizen Application Model"></topic>
- <topic href="html/process/app_dev_process_n.htm" label="Native Application">
- <topic href="html/process/setting_properties_n.htm" label="Setting Project Properties"></topic>
- <topic href="html/process/designing_app_ui_n.htm" label="Creating Application UIs with UI Builder"></topic>
- <topic href="html/process/building_app_n.htm" label="Building Applications"></topic>
- <topic href="html/process/running_app_n.htm" label="Running Applications"></topic>
- <topic href="html/process/debugging_app_n.htm" label="Debugging Applications"></topic>
- <topic href="html/process/performance_n.htm" label="Optimizing Application Performance"></topic>
- </topic>
- </topic>
-
- <topic href="html/app_model/application_model.htm" label="Tizen Application Model">
- <topic href="html/app_model/application_model_w.htm" label="Web Application"></topic>
- <topic href="html/app_model/application_model_n.htm" label="Native Application"></topic>
+ <topic href="html/web/details/details_w.htm" label="Understanding Tizen Programming">
+ <topic href="html/web/details/tizen_apis_w.htm" label="Tizen APIs"></topic>
+ <topic href="html/web/details/sec_privileges_w.htm" label="Security and API Privileges"></topic>
+ <topic href="html/web/details/app_filtering_w.htm" label="Application Filtering"></topic>
+ <topic href="html/web/details/web_runtime_w.htm" label="Web Runtime"></topic>
+ <topic href="html/web/details/event_handling_w.htm" label="Event Handling"></topic>
+ </topic>
</topic>
- <topic href="html/details/details.htm" label="Understanding Tizen Programming">
- <topic href="html/details/tizen_apis.htm" label="Tizen APIs"></topic>
- <topic href="html/details/sec_privileges.htm" label="Security and API Privileges"></topic>
- <topic href="html/details/app_filtering.htm" label="Application Filtering"></topic>
- <topic href="html/details/web_runtime_w.htm" label="Web Runtime"></topic>
- <topic href="html/details/key_events.htm" label="Key Event Handling"></topic>
- <topic href="html/details/io_overview.htm" label="File System Directory Hierarchy"></topic>
- <topic href="html/details/error_handling.htm" label="Error Handling"></topic>
+ <topic href="html/native/cover_page_n.htm" label="Native Application">
+ <topic href="html/native/first_app/first_app_n.htm" label="Creating Your First Tizen Application"></topic>
+ <topic href="html/native/process/app_dev_process_n.htm" label="Application Development Process">
+ <topic href="html/native/process/setting_properties_n.htm" label="Setting Project Properties"></topic>
+ <topic href="html/native/process/designing_app_ui_n.htm" label="Creating Application UIs with UI Builder"></topic>
+ <topic href="html/native/process/building_app_n.htm" label="Building Applications"></topic>
+ <topic href="html/native/process/running_app_n.htm" label="Running Applications"></topic>
+ <topic href="html/native/process/debugging_app_n.htm" label="Debugging Applications"></topic>
+ <topic href="html/native/process/performance_n.htm" label="Optimizing Application Performance"></topic>
+ </topic>
+ <topic href="html/native/app_model/application_model_n.htm" label="Tizen Application Model"></topic>
+ <topic href="html/native/details/details_n.htm" label="Understanding Tizen Programming">
+ <topic href="html/native/details/tizen_apis_n.htm" label="Tizen APIs"></topic>
+ <topic href="html/native/details/sec_privileges_n.htm" label="Security and API Privileges"></topic>
+ <topic href="html/native/details/app_filtering_n.htm" label="Application Filtering"></topic>
+ <topic href="html/native/details/event_handling_n.htm" label="Event Handling"></topic>
+ <topic href="html/native/details/io_overview_n.htm" label="File System Directory Hierarchy"></topic>
+ <topic href="html/native/details/error_handling_n.htm" label="Error Handling"></topic>
+ </topic>
</topic>
- <topic href="html/details/tizen_websites.htm" label="Tizen Web Sites"></topic>
+ <topic href="html/tizen_websites.htm" label="Tizen Web Sites"></topic>
</toc>
\ No newline at end of file
Bundle-ManifestVersion: 1
Bundle-Name: Tizen Guides
Bundle-SymbolicName: org.tizen.guides;singleton=true
-Bundle-Version: 2.3.1
+Bundle-Version: 2.4.0
Bundle-Vendor: The Linux Foundation
<body onload="prettyPrint()">
<h1><a name="Creating2" id="Creating2">About This Content</a></h1>
- <p>Tizen 2.3.0</p>
+ <p>Tizen 2.4.0</p>
<h1>License</h1>
<p>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>
color: #ffffff;
}
-#navigation {width: 20%; position: fixed; right: 17px; top: 0; bottom: 51px; /* overflow: auto; *//* min-width: 200px; *//* background: white; */z-index: 100;padding-top: 10px;/* padding-bottom: 88px; */margin-bottom: 89px;}
#toc-navigation {width: 20%; position: fixed; right: 17px; top: 0; bottom: 51px; /* overflow: auto; *//* min-width: 200px; *//* background: white; */z-index: 100;padding-top: 10px;/* padding-bottom: 88px; */margin-bottom: 89px;}
#toc {padding: 0px 20px 5px 20px; /* border: 2px solid #567a9c; */ border-radius: 15px;position: absolute;top: 78px;bottom: 9px;overflow: auto;/* margin-bottom: 5px; */padding-bottom: 5px;border-bottom: 3px transparent solid;margin-left: 5px;}
#main {width: 75%; height: 90%;}
#container {width:100%;}
#container #contents {padding:0px 0 20px; overflow: auto;position: fixed;top: 0;bottom: 0;margin-bottom: 64px;right: 200px;left: 20px;}
body.no-toc #container #contents {right: 0;padding-right:30px;}
-body.no-toc #navigation {width: auto;}
body.no-toc #toc-navigation {width: auto;}
body.no-toc .top {right: 19px; /* float:none; */ width: 28px;}
body.no-toc #profile {float: right;right: -32px;}
ul.devicespecifications li div.devicespec-tit .items-tit-h3 { /*float:left;*/ margin:0 0 0 14px; padding:0; line-height: 22px; font-size: 14pt; color: #1C1C1C; font-style:normal; font-weight: bold;}
ul.devicespecifications li div.devicespec-tit .items-tit-h4 { /*float:left;*/ margin:0 0 0 14px; padding:0; line-height: 22px; font-size: 12pt; color: #1C1C1C; font-style:normal; font-weight: bold;}
- ul.devicespecifications li div.devicespec-tit span {position: absolute; top: 0; right:0;background:#416cbb; display:block; height:22px; margin-right:0; border-left: solid 1px #7a9bd4; }
- ul.devicespecifications li div.devicespec-tit span a.bt-arr {display:block; width: 55px; height:15px; margin-left:0; padding-top:5px; padding-left: 14px; text-align:left; background: url('../images/ico_arr_hidden.gif') 46px 9px no-repeat;}
- ul.devicespecifications li div.devicespec-tit span a.bt-arr em {display:inline-block; height: 14px; line-height:11px; font-size:11px; color:#fff; font-style:normal; margin-right: 8px;}
- ul.devicespecifications li div.devicespec-tit span * {vertical-align:middle;}
+ ul.devicespecifications li div.devicespec-tit > span {position: absolute; top: 0; right:0;background:#416cbb; display:block; height:22px; margin-right:0; border-left: solid 1px #7a9bd4; }
+ ul.devicespecifications li div.devicespec-tit > span a.bt-arr {display:block; width: 55px; height:15px; margin-left:0; padding-top:5px; padding-left: 14px; text-align:left; background: url('../images/ico_arr_hidden.gif') 46px 9px no-repeat;}
+ ul.devicespecifications li div.devicespec-tit > span a.bt-arr em {display:inline-block; height: 14px; line-height:11px; font-size:11px; color:#fff; font-style:normal; margin-right: 8px;}
+ ul.devicespecifications li div.devicespec-tit > span * {vertical-align:middle;}
ul.devicespecifications li div.devicespec-con ul.con-list { width:100%; }
ul.devicespecifications li div.devicespec-con ul.con-list li {line-height: 18px; margin:0; padding:0 0 0 7px; background: url("../images/ico_bullet_2_7.gif") 0 8px no-repeat; }
<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
</div>
<div id="container"><div id="contents"><div class="content">
<li><a href="web/tizen/application/data_w.htm">Data Control</a></li>
</ul>
</li>
+ <li><a href="web/tizen/communication/comm_guide_w.htm">Communication</a>
+ <ul>
+ <li><a href="web/tizen/communication/bluetooth_w.htm">Bluetooth</a></li>
+ <li><a href="web/tizen/communication/nfc_w.htm">NFC</a></li>
+ <li><a href="web/tizen/communication/push_w.htm">Push</a></li>
+ <li><a href="web/tizen/communication/secure_element_w.htm">Secure Element</a></li>
+ <li><a href="web/tizen/communication/messaging_w.htm">Messaging</a></li>
+ </ul>
+ </li>
<li><a href="web/tizen/content/content_guide_w.htm">Content</a>
<ul>
<li><a href="web/tizen/content/content_w.htm">Content</a></li>
</li>
<li><a href="web/tizen/input_output/io_guide_w.htm">Input/Output</a>
<ul>
+ <li><a href="web/tizen/input_output/archive_w.htm">Archive</a></li>
<li><a href="web/tizen/input_output/filesystem_w.htm">Filesystem</a></li>
<li><a href="web/tizen/input_output/message_port_w.htm">Message Port</a></li>
- <li><a href="web/tizen/input_output/archive_w.htm">Archive</a></li>
</ul>
</li>
<li><a href="web/tizen/multimedia/multimedia_guide_w.htm">Multimedia</a>
<li><a href="web/tizen/multimedia/media_key_w.htm">Media Key</a></li>
<li><a href="web/tizen/multimedia/sound_w.htm">Sound</a></li>
</ul>
- </li>
+ </li>
<li><a href="web/tizen/system/system_guide_w.htm">System</a>
<ul>
<li><a href="web/tizen/system/ham_w.htm">Human Activity Monitor</a></li>
<li><a href="web/tizen/system/system_info_w.htm">System Information</a></li>
<li><a href="web/tizen/system/system_setting_w.htm">System Setting</a></li>
<li><a href="web/tizen/system/time_w.htm">Time</a></li>
- <li><a href="web/tizen/system/fm_radio_w.htm">FM Radio</a></li>
- <li><a href="web/tizen/system/web_setting_w.htm">Web Setting</a></li>
+ <li><a href="web/tizen/system/fm_radio_w.htm">FM Radio</a></li>
+ <li><a href="web/tizen/system/web_setting_w.htm">Web Setting</a></li>
</ul>
</li>
<li><a href="web/tizen/ui/ui_guide_w.htm">User Interface</a>
<li><a href="web/tizen/ui/noti_w.htm">Notification</a></li>
</ul>
</li>
- <li><a href="web/tizen/communication/comm_guide_w.htm">Communication</a>
- <ul>
- <li><a href="web/tizen/communication/bluetooth_w.htm">Bluetooth</a></li>
- <li><a href="web/tizen/communication/messaging_w.htm">Messaging</a></li>
- <li><a href="web/tizen/communication/nfc_w.htm">NFC</a></li>
- <li><a href="web/tizen/communication/push_w.htm">Push</a></li>
- <li><a href="web/tizen/communication/secure_element_w.htm">Secure Element</a></li>
- </ul>
- </li>
<li><a href="web/tizen/social/social_guide_w.htm">Social</a>
<ul>
<li><a href="web/tizen/social/account_w.htm">Account</a></li>
<li><a href="web/tizen/social/contact_w.htm">Contact</a></li>
<li><a href="web/tizen/social/data_sync_w.htm">Data Synchronization</a></li>
</ul>
- </li>
+ </li>
<li><a href="web/tizen/localization/localization_w.htm">Localization</a></li>
- <li><a href="web/tizen/uifw/uifw_guide_w.htm">Web UIFW</a></li>
+ <li><a href="web/tizen/uifw/uifw_guide_w.htm">Web UIFW</a></li>
<li><a href="web/tizen/service/service_w.htm">Service Application</a></li>
- <li><a href="web/tizen/ime/ime_w.htm">IME Application</a></li>
- </ul>
+ <li><a href="web/tizen/ime/ime_w.htm">IME Application</a></li>
+ </ul>
</li>
<li><a href="web/w3c/guides_w3c_w.htm">W3C/HTML5/Supplementary Features</a>
<ul>
<li><a href="web/w3c/dom/media_query_w.htm">Media Queries</a></li>
<li><a href="web/w3c/dom/selector_w.htm">Selectors API Level 1 and Level 2</a></li>
<li><a href="web/w3c/dom/session_history_w.htm">HTML5 session history of browsing contexts</a></li>
- <li><a href="web/w3c/dom/multi_w.htm">CSS Multi-column Layout Module</a></li>
+ <li><a href="web/w3c/dom/multi_w.htm">CSS Multi-column Layout Module</a></li>
</ul>
</li>
<li><a href="web/w3c/device/device_guide_w.htm">Device</a>
<ul>
<li><a href="web/w3c/device/battery_w.htm">Battery Status</a></li>
- <li><a href="web/w3c/device/device_orientation_w.htm">DeviceOrientation Event Specification</a></li>
+ <li><a href="web/w3c/device/device_orientation_w.htm">DeviceOrientation Event Specification</a></li>
<li><a href="web/w3c/device/touch_w.htm">Touch Events version 1</a></li>
- <li><a href="web/w3c/device/vibration_w.htm">Vibration</a></li>
+ <li><a href="web/w3c/device/vibration_w.htm">Vibration</a></li>
<li><a href="web/w3c/device/browser_state_w.htm">HTML5 Browser state</a></li>
- <li><a href="web/w3c/device/screen_orientation_w.htm">Screen Orientation</a></li>
+ <li><a href="web/w3c/device/screen_orientation_w.htm">Screen Orientation</a></li>
</ul>
</li>
<li><a href="web/w3c/graphics/graphics_guide_w.htm">Graphics</a>
<li><a href="web/w3c/storage/storage_guide_w.htm">Storage</a>
<ul>
<li><a href="web/w3c/storage/file_w.htm">File</a></li>
- <li><a href="web/w3c/storage/indexdb_w.htm">Indexed Database</a></li>
+ <li><a href="web/w3c/storage/indexdb_w.htm">Indexed Database</a></li>
<li><a href="web/w3c/storage/web_storage_w.htm">Web Storage</a></li>
<li><a href="web/w3c/storage/appcache_w.htm">HTML5 Application caches</a></li>
<li><a href="web/w3c/storage/websql_w.htm">Web SQL Database</a></li>
<li><a href="web/w3c/ui/clipboard_w.htm">Clipboard API and events</a></li>
<li><a href="web/w3c/ui/drag_drop_w.htm">HTML5 Drag and drop</a></li>
</ul>
- </li>
+ </li>
<li><a href="web/w3c/useful/useful_guide_w.htm">Useful Guides for W3C/HTML5 Features</a>
<ul>
- <li><a href="web/w3c/useful/html_priority_w.htm">HTML Priorities</a></li>
+ <li><a href="web/w3c/useful/html_priority_w.htm">HTML Priorities</a></li>
<li><a href="web/w3c/useful/multiple_screens_w.htm">Multiple Screen Support</a></li>
- <li><a href="web/w3c/useful/frame_flattening_w.htm">Frame Flattening</a></li>
+ <li><a href="web/w3c/useful/frame_flattening_w.htm">Frame Flattening</a></li>
<li><a href="web/w3c/useful/sound_policy_w.htm">Tizen WebKit Tap Sound Policy</a></li>
<li><a href="web/w3c/useful/performance_w.htm">Performance Improvement</a></li>
<li><a href="web/w3c/useful/ui_layout_w.htm">Multiple UI Layouts</a></li>
</ul>
- </li>
+ </li>
<li><a href="web/w3c/supplement/supplement_guide_w.htm">Supplementary Features</a>
<ul>
<li><a href="web/w3c/supplement/typedarray_w.htm">Typed Array - Khronos</a></li>
<li><a href="web/w3c/supplement/fullscreen_w.htm">FullScreen API - Mozilla</a></li>
<li><a href="web/w3c/supplement/camera_w.htm">Camera API (Tizen Extension)</a></li>
</ul>
- </li>
- </ul>
+ </li>
+ </ul>
</li>
</ul>
<li><a href="native/app/app_guide_n.htm">Application Framework</a>
<ul>
<li><a href="native/app/application_n.htm">Application</a></li>
+ <li><a href="native/app/appgroup_n.htm">Application Group</a></li>
<li><a href="native/app/app_manager_n.htm">Application Manager</a></li>
<li><a href="native/app/badge_n.htm">Badge</a></li>
<li><a href="native/app/bundle_n.htm">Bundle</a></li>
<li><a href="native/app/notification_n.htm">Notification</a></li>
<li><a href="native/app/package_n.htm">Package Manager</a></li>
<li><a href="native/app/service_app_n.htm">Service Application</a></li>
+ <li><a href="native/app/widget_n.htm">Widget</a></li>
<li><a href="native/app/shortcut_n.htm">Shortcut</a></li>
+ <li><a href="native/app/watch_n.htm">Watch Application</a></li>
</ul>
</li>
<li><a href="native/base/base_guide_n.htm">Base</a>
</li>
<li><a href="native/content/content_guide_n.htm">Content</a>
<ul>
- <li><a href="native/content/download_n.htm">Download</a></li>
<li><a href="native/content/media_content_n.htm">Media Content</a></li>
<li><a href="native/content/mime_type_n.htm">MIME Type</a></li>
-
+ <li><a href="native/content/download_n.htm">Download</a></li>
</ul>
</li>
<li><a href="native/context/context_guide_n.htm">Context</a>
<ul>
<li><a href="native/context/activity_recognition_n.htm">Activity Recognition</a></li>
<li><a href="native/context/gesture_recognition_n.htm">Gesture Recognition</a></li>
+ <li><a href="native/context/trigger_n.htm">Contextual Trigger</a></li>
+ <li><a href="native/context/history_n.htm">Contextual History</a></li>
</ul>
</li>
<li><a href="native/graphics/graphics_guide_n.htm">Graphics</a>
<ul>
<li><a href="native/graphics/opengles_n.htm">OpenGL ES</a></li>
<li><a href="native/graphics/tbm_n.htm">TBM Surface</a></li>
- <li><a href="native/graphics/cairo_n.htm">Cairo Integration</a></li>
+ <li><a href="native/graphics/cairo_n.htm">Cairo</a></li>
</ul>
</li>
<li><a href="native/location/location_guide_n.htm">Location</a>
<ul>
<li><a href="native/location/location_n.htm">Location</a></li>
- <li><a href="native/location/geofence_n.htm">Geofence</a></li>
- <li><a href="native/location/maps_n.htm">Maps Service</a></li>
+ <li><a href="native/location/geofence_n.htm">Geofence</a></li>
+ <li><a href="native/location/maps_n.htm">Maps Service</a></li>
</ul>
</li>
<li><a href="native/messaging/messaging_guide_n.htm">Messaging</a>
<ul>
<li><a href="native/messaging/messages_n.htm">Messages</a></li>
- <li><a href="native/messaging/email_n.htm">Email</a></li>
<li><a href="native/messaging/push_n.htm">Push</a></li>
+ <li><a href="native/messaging/email_n.htm">Email</a></li>
</ul>
</li>
<li><a href="native/multimedia/multimedia_guide_n.htm">Multimedia</a>
<li><a href="native/multimedia/camera_n.htm">Camera</a></li>
<li><a href="native/multimedia/image_util_n.htm">Image Util</a></li>
<li><a href="native/multimedia/media_codecs_n.htm">Media Codec</a></li>
+ <li><a href="native/multimedia/media_controller_n.htm">Media Controller</a></li>
<li><a href="native/multimedia/media_tools_n.htm">Media Tool</a></li>
+ <li><a href="native/multimedia/metadata_editor_n.htm">Metadata Editor</a></li>
<li><a href="native/multimedia/metadata_extractor_n.htm">Metadata Extractor</a></li>
<li><a href="native/multimedia/player_n.htm">Player</a></li>
<li><a href="native/multimedia/radio_n.htm">Radio</a></li>
<li><a href="native/multimedia/recorder_n.htm">Recorder</a></li>
+ <li><a href="native/multimedia/thumbnail_util_n.htm">Thumbnail Util</a></li>
<li><a href="native/multimedia/tone_player_n.htm">Tone Player</a></li>
- <li><a href="native/multimedia/video_util_n.htm">Video Util</a></li>
<li><a href="native/multimedia/wav_player_n.htm">WAV Player</a></li>
<li><a href="native/multimedia/sound_manager_n.htm">Sound Manager</a></li>
+ <li><a href="native/multimedia/screen_mirroring_n.htm">Screen Mirroring Sink</a></li>
+ <li><a href="native/multimedia/video_util_n.htm">Video Util</a></li>
</ul>
</li>
<li><a href="native/network/network_guide_n.htm">Network</a>
<li><a href="native/network/connection_n.htm">Connection</a></li>
<li><a href="native/network/bluetooth_n.htm">Bluetooth</a></li>
<li><a href="native/network/nfc_n.htm">NFC</a></li>
+ <li><a href="native/network/smartcard_n.htm">SmartCard</a></li>
<li><a href="native/network/wifi_n.htm">Wi-Fi</a></li>
<li><a href="native/network/wifi_direct_n.htm">Wi-Fi Direct</a></li>
</ul>
</li>
+ <li><a href="native/oauth2/oauth2_guide_n.htm">OAuth2</a></li>
<li><a href="native/security/security_guide_n.htm">Security</a>
<ul>
<li><a href="native/security/key_manager_n.htm">Key Manager</a></li>
</li>
<li><a href="native/social/social_guide_n.htm">Social</a>
<ul>
+ <li><a href="native/social/phonenumber_util_n.htm">Phonenumber-utils</a></li>
<li><a href="native/social/account_manager_n.htm">Account Manager</a></li>
<li><a href="native/social/calendar_n.htm">Calendar</a></li>
<li><a href="native/social/contact_n.htm">Contacts</a></li>
</ul>
- </li>
- <li><a href="native/sync/sync_guide_n.htm">Sync</a></li>
+ </li>
<li><a href="native/system/system_guide_n.htm">System</a>
<ul>
<li><a href="native/system/device_n.htm">Device</a></li>
</ul>
</li>
<li><a href="native/telephony/telephony_guide_n.htm">Telephony</a></li>
- <li><a href="native/ui/ui_guide_n.htm">UI</a>
+ <li><a href="native/ui/ui_guide_n.htm">UI Framework</a>
<ul>
<li><a href="native/ui/efl_n.htm">EFL</a></li>
<li><a href="native/ui/eina_n.htm">Eina</a>
<li><a href="native/ui/ecore_n.htm">Ecore</a>
<ul>
<li><a href="native/ui/main_loop_n.htm">Main Loop</a></li>
- <li><a href="native/ui/threads_n.htm">Thread Usage</a></li>
+ <li><a href="native/ui/threads_n.htm">Thread Usage</a></li>
</ul>
- </li>
+ </li>
<li><a href="native/ui/events_effects_n.htm">Event and Effect</a>
<ul>
<li><a href="native/ui/event_types_n.htm">Event Types</a></li>
- <li><a href="native/ui/animations_effects_n.htm">Animation and Effect Types</a></li>
+ <li><a href="native/ui/animations_effects_n.htm">Animation and Effect Types</a></li>
</ul>
- </li>
- <li><a href="native/ui/ui_control_n.htm">UI Control</a>
+ </li>
+ <li><a href="native/ui/ui_component_n.htm">UI Components</a>
<ul>
- <li><a href="native/ui/elementary_n.htm">Elementary Widgets</a></li>
+ <li><a href="native/ui/ui_component_mn.htm">Mobile Native</a>
<ul>
- <li><a href="native/ui/containers_n.htm">Container Widgets</a></li>
- <li><a href="native/ui/ui_widgets_n.htm">UI Widgets</a></li>
+ <li><a href="native/ui/elementary_mn.htm">Elementary</a>
+ <ul>
+ <li><a href="native/ui/containers_mn.htm">Containers</a></li>
+ <li><a href="native/ui/components_mn.htm">Components</a></li>
+ <li><a href="native/ui/styles_mn.htm">UI Component Styles</a></li>
+ </ul>
+ </li>
</ul>
- <li><a href="native/ui/widget_preferences_n.htm">Widget Preferences</a></li>
+ </li>
+ <li><a href="native/ui/ui_component_wn.htm">Wearable Native</a>
+ <ul>
+ <li><a href="native/ui/elementary_wn.htm">Elementary</a>
+ <ul>
+ <li><a href="native/ui/containers_wn.htm">Containers</a></li>
+ <li><a href="native/ui/components_wn.htm">Components</a></li>
+ <li><a href="native/ui/styles_wn.htm">UI Component Styles</a></li>
+ </ul>
+ </li>
+ <li><a href="native/ui/circle_components_wn.htm">Circle Components</a></li>
+ </ul>
+ </li>
+ <li><a href="native/ui/preferences_n.htm">UI Component Preferences</a></li>
</ul>
- </li>
+ </li>
<li><a href="native/ui/efl_extension_n.htm">Efl Extension</a></li>
<li><a href="native/ui/font_setting_n.htm">Font Setting</a></li>
<li><a href="native/ui/efl_util_n.htm">EFL UTIL</a></li>
<li><a href="native/ui/multiple_screens_n.htm">Multiple Screen Support</a></li>
+ <li><a href="native/ui/scalability_n.htm">Scalability Support</a></li>
+ <li><a href="native/ui/eom_n.htm">EOM</a></li>
</ul>
</li>
<li><a href="native/uix/uix_guide_n.htm">UIX</a>
</ul>
</li>
<li><a href="native/web/web_guide_n.htm">Web</a></li>
+ <li><a href="native/sync/sync_guide_n.htm">Sync</a></li>
<li><a href="native/porting/porting_n.htm">Porting</a>
<ul>
<li><a href="native/porting/api_comparison_n.htm">API Comparison</a></li>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.tutorials/html/native/app_framework/app_framework_tutorials_n.htm">Application Framework Tutorials</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APPLICATION__FRAMEWORK.html">Application Framework API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APPLICATION__FRAMEWORK.html">Application Framework API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__APPLICATION__FRAMEWORK.html">Application Framework API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<p>The main application framework features are:</p>
<ul>
<li><a href="application_n.htm">Application</a> <p>Enables you to manage application state change or system events and control mechanisms that launch other applications.</p></li>
- <li><a href="app_manager_n.htm">Application Manager</a>
- <p>Allows you to retrieve information about an application.</p></li>
+ <li><a href="appgroup_n.htm">Application Group</a> <p>Enables you to manage application launch mode and grouping.</p></li>
+
<li><a href="app_manager_n.htm">Application Manager</a> <p>Allows you to retrieve information about an application.</p></li>
<li><a href="badge_n.htm">Badge</a> <p>Allows you to create badges.</p> </li>
<li><a href="bundle_n.htm">Bundle</a> <p>Enables you to manage bundles and their content.</p></li>
<li><a href="data_control_n.htm">Data Control</a> <p>Allows your applications to exchange data.</p></li>
<li><a href="notification_n.htm">Notification</a> <p>Allows you to create and manage notifications.</p> </li>
<li><a href="package_n.htm">Package Manager</a> <p>Allows you to install, unistall, and update packages, and store their information.</p></li>
<li><a href="service_app_n.htm">Service Application</a> <p>Allows you to create and manage native service applications.</p></li>
+ <li><a href="widget_n.htm">Widget</a> <p>Allows you to create and manage widget applications.</p></li>
+ </ul>
+<p>The following guides apply in <span style="color: red">mobile applications only</span>:</p>
+ <ul>
<li><a href="shortcut_n.htm">Shortcut</a> <p>Allows you to add a shortcut for the Home application.</p></li>
</ul>
+ <p>The following guides apply in <span style="color: red">wearable applications only</span>:</p>
+ <ul>
+ <li><a href="watch_n.htm">Watch Application</a> <p>Allows you to manage a watch application and display the current date and time accurately.</p></li>
+ </ul>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.tutorials/html/native/app_framework/app_manager_tutorial_n.htm">Application Manager Tutorial</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APPLICATION__MANAGER__MODULE.html">Application Manager API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APPLICATION__MANAGER__MODULE.html">Application Manager API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__APPLICATION__MANAGER__MODULE.html">Application Manager API for Wearable Native</a></li>
</ul>
</div></div>
</div>
--- /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>Application Group</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="toc-navigation">
+ <div id="profile">
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+ </div>
+
+ <div id="toc_border"><div id="toc">
+ <p class="toc-title">Related Info</p>
+ <ul class="toc">
+ <li><a href="../../../../org.tizen.tutorials/html/native/app_framework/appgroup_tutorial_n.htm">Application Group Tutorial</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APP__GROUP__MODULE.html">Application Group API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__APP__GROUP__MODULE.html">Application Group API for Wearable Native</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+<h1>Application Group</h1>
+<p>You can define the application launch mode and group your applications into entities that can be managed together.</p>
+
+ <p>The main features of the Application Group API include:</p>
+ <ul>
+ <li>Defining the application launch mode
+ <p>When an application is launched through an app control, its launch mode defines its behavior:</p>
+ <ul><li>The single launch mode means that the application is launched as a main application (in a new group).</li>
+ <li>The caller launch mode means that the application is launched as a sub application belonging to the same group as the caller application who is causing the application to be launched.</li></ul>
+ <p>You can set the application launch mode <a href="../../../../org.tizen.devtools/html/native_tools/manifest_text_editor_n.htm#launch_mode">in the manifest file</a> using the <span style="font-family: Courier New,Courier,monospace">launch_mode</span> attribute of the <span style="font-family: Courier New,Courier,monospace"><ui-application></span> element. If the launch mode is set to <span style="font-family: Courier New,Courier,monospace">caller</span>, the application that calls the app control can define the launch mode for the called application using the <span style="font-family: Courier New,Courier,monospace">app_control_set_launch_mode()</span> function. However, if the called application has set its launch mode in its manifest file to <span style="font-family: Courier New,Courier,monospace">single</span>, that setting overrides the caller application's launch mode request.</p>
+ </li>
+ <li>Managing the application group
+ <p>Applications in a same group act as if they are in 1 stack. For example, if an application A wants to send an email using an email application B, the application A can launch the email application B, making the email application B a sub application in the same group as the application A. When both applications are running, and the user presses the home button, both applications are hidden. When the user later resumes the caller application (application A), the email application B is shown on top of the caller application.</p>
+ <p>If an application is launched in a group, it can be terminated by the main (first) application in the group. If the main application is terminated or killed, the sub applications in the group are terminated automatically (they can be terminated by the framework even if they are hidden).</p>
+
+ <p class="figure">Figure: Group behavior</p>
+<p align="center"><img alt="Group behavior" src="../../images/app_group_behavior.png" /></p>
+
+ </li>
+</ul>
+
+
+<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
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.tutorials/html/native/app_framework/application_tutorial_n.htm">Application Tutorial</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APPLICATION__MODULE.html">Application API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APPLICATION__MODULE.html">Application API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__APPLICATION__MODULE.html">Application API for Wearable Native</a></li>
</ul>
</div></div>
</div>
}
if (ad->win)
- elm_win_activate(ad->win);
+ elm_win_activate(ad->win);
}
</pre>
<h3 id="controls" name="controls">Application Controls</h3>
application ID and operation ID when resolving the application control.
</p>
<p>
- You can specify the application control information of your application in the <a href="../../../../org.tizen.gettingstarted/html/process/setting_properties_n.htm#manifest">application project settings</a> in the IDE; an
+ You can specify the application control information of your application in the <a href="../../../../org.tizen.gettingstarted/html/native/process/setting_properties_n.htm#manifest">application project settings</a> in the IDE; an
operation ID must be specified for the application control.
</p>
<h3 id="platform_appcontrol" name="platform_appcontrol">Using Platform Application Controls</h3>
-<p>Tizen provides base applications, such as Web browser, image viewer, music player, and video player. Using the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APP__CONTROL__MODULE.html">App Control</a> module, you can take advantage of the Tizen base application functionalities.</p>
+<p>Tizen provides base applications, such as Web browser, image viewer, music player, and video player. Using the App Control module (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APP__CONTROL__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__APP__CONTROL__MODULE.html">wearable</a> applications), you can take advantage of the Tizen base application functionalities.</p>
<p>The Tizen platform provides the platform application controls for the following base applications:</p>
<ul>
<h2 id="alarms" name="alarms">Handling Alarms</h2>
-<p>The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__ALARM__MODULE.html">Alarm</a> API provides functions to launch an application at a specific time. The mechanism involved in launching the application is the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APP__CONTROL__MODULE.html">AppControl</a> API.</p>
+<p>The Alarm API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__ALARM__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__ALARM__MODULE.html">wearable</a> applications) provides functions to launch an application at a specific time. The mechanism involved in launching the application is the App Control API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APP__CONTROL__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__APP__CONTROL__MODULE.html">wearable</a> applications).</p>
<p>The AppControl API allows launching an application explicitly, giving its package name, or providing certain criteria that the application must meet. For example, the criteria can include the type of data on which the application must be able to operate. The structure containing the criteria is called an appcontrol.</p>
<p>For more information, see the <a href="#app_controls">Launching Applications</a> guide.</p>
<p>The Tizen native application can be in one of several different states. Typically, the application is launched by the user from the Launcher, or by another application. As the application is starting, the <span style="font-family: Courier New,Courier,monospace">app_create_cb()</span> callback is executed and the main event loop starts. The application now normally becomes the frontmost window, with focus. When the application loses the frontmost or focus status, the <span style="font-family: Courier New,Courier,monospace">app_pause_cb()</span> callback is invoked and your application goes into a pause state. The pause state means that the application is not terminated but is running in the background. The application can go into a pause state because:</p>
<ul>
<li>A new application is launched from the request of your application.</li>
- <li>The user requests to go to the Home screen.</li>
+ <li>The user requests to go to the home screen.</li>
<li>A system event occurs and causes a resident application with a higher priority (such as an incoming phone call) to become active and hide your application temporarily.</li>
<li>An alarm is triggered for another application, which becomes the top-most window and hides your application.</li>
</ul>
</ul>
<p>The application state changes are managed by the underlying framework. The following figure and table illustrate the application states.</p>
-
<p class="figure">Figure: Application states</p>
- <p
style="text-align:center;"><img alt="Application state transitions" src="../../images/app_states.png" /></p>
+ <p class="figure">Figure: Application states</p>
+ <p
align="center"><img alt="Application state transitions" src="../../images/app_states.png" /></p>
<table>
<caption>
<p>The Application API defines 5 states with corresponding transition handlers. The state transition is notified through a state transition callback function, whether the application is created, running, paused, resumed, or terminated. The application must react to each state change appropriately.</p>
-
<p class="figure">Figure: Application state transitions</p>
- <p
style="text-align:center;"><img alt="Application state transitions" src="../../images/app_state_transitions.png" /></p>
+ <p class="figure">Figure: Application state transitions</p>
+ <p
align="center"><img alt="Application state transitions" src="../../images/app_state_transitions.png" /></p>
<h2 id="app_strings" name="app_strings">Localizing Application Strings</h2>
- <p>Tizen provides localized resources to make your application usable for different countries. The localization is based on the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__I18N__MODULE.html">Internationalization</a> API, which makes strings translatable and places them in .po (portable object) files.</p>
+ <p>Tizen provides localized resources to make your application usable for different countries. The localization is based on the Internationalization API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__I18N__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__I18N__MODULE.html">wearable</a> applications), which makes strings translatable and places them in .po (portable object) files.</p>
<table class="note">
<tbody>
<h3 id="translating" name="translating">Translating Texts Directly</h3>
-<p>The approach described in the previous section is not applicable all of the time. For instance, it does not work if you are populating a genlist, if you need plurals in the translation or if you want to do something else than put the translation in elementary widgets.</p>
+<p>The approach described in the previous section is not applicable all of the time. For instance, it does not work if you are populating a genlist, if you need plurals in the translation or if you want to do something else than put the translation in elementary UI components.</p>
-<p>It is possible to retrieve the translation for a given text through the <span style="font-family: Courier New,Courier,monospace;">i18n_get_text()</span> API from <span style="font-family: Courier New,Courier,monospace;">app_i18n.h</span>.</p>
+<p>It is possible to retrieve the translation for a given text through the <span style="font-family: Courier New,Courier,monospace;">i18n_get_text()</span> function from <span style="font-family: Courier New,Courier,monospace;">app_i18n.h</span>.</p>
<pre class="prettyprint">
char *i18n_get_text(const char *msgid);
<h4>Handling Language Changes at Runtime</h4>
-<p>The user can change the system language settings at any time. When that is done, appcore notifies the application, which changed the language used in the Elementary. The widgets receive a "language,changed" signal and reset their text.</p>
+<p>The user can change the system language settings at any time. When that is done, appcore notifies the application, which changed the language used in the Elementary. The UI components receive a "language,changed" signal and reset their text.</p>
<p>This is how to handle the appcore event:</p>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.tutorials/html/native/app_framework/badge_tutorial_n.htm">Badge Tutorial</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__BADGE__MODULE.html">Badge API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__BADGE__MODULE.html">Badge API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__BADGE__MODULE.html">Badge API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<p>A badge is an image displayed on the application icon, which informs the user about notifications and events.</p>
<p class="figure">Figure: Badge</p>
-
<p style="text-align:center;"><img alt="Badge" src="../../images/badge.png" /></p>
+
<p align="center"><img alt="Badge" src="../../images/badge.png" /></p>
<p>To create a badge, use the <span style="font-family: Courier New,Courier,monospace">badge_new()</span> method with a writable application ID on your application. The writable application ID enables another application to control your application to manage the badge. You can also configure your application to handle the badge itself.</p>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.tutorials/html/native/app_framework/bundle_tutorial_n.htm">Bundle Tutorial</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CORE__LIB__BUNDLE__MODULE.html">Bundle API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CORE__LIB__BUNDLE__MODULE.html">Bundle API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CORE__LIB__BUNDLE__MODULE.html">Bundle API for Wearable Native</a></li>
</ul>
</div></div>
</div>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.tutorials/html/native/app_framework/data_control_tutorial_n.htm">Data Control Tutorial</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__DATA__CONTROL__MODULE.html">Data Control API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__DATA__CONTROL__MODULE.html">Data Control API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__DATA__CONTROL__MODULE.html">Data Control API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<h1 id="data_controls" name="data_controls">Data Control</h1>
<p>Data control is a standard mechanism for exchanging specific data between applications.</p>
-
<p class="figure">Figure: Data control mechanism</p>
- <p
style="text-align:center;"><img alt="Data control mechanism" src="../../images/datacontrol.png" /></p>
+ <p class="figure">Figure: Data control mechanism</p>
+ <p
align="center"><img alt="Data control mechanism" src="../../images/datacontrol.png" /></p>
<p>All applications can request data shared by other applications using a data control. However, only service applications can provide their own data.</p>
<p>There are 2 types of data controls:</p>
<h2 id="export" name="export">Exporting DataControl Functionality</h2>
-<p>You can export functionalities of your Tizen native application in the <a href="../../../../org.tizen.gettingstarted/html/process/setting_properties_n.htm#manifest">application project settings</a> in the IDE. The provider ID, type, and accessibility must be specified for the data control.</p>
+<p>You can export functionalities of your Tizen native application in the <a href="../../../../org.tizen.gettingstarted/html/native/process/setting_properties_n.htm#manifest">application project settings</a> in the IDE. The provider ID, type, and accessibility must be specified for the data control.</p>
<p class="figure">Figure: Exporting data control</p>
- <p
style="text-align:center;"><img alt="Exporting data control" src="../../images/exporting_datacontrol.png"/></p>
+ <p
align="center"><img alt="Exporting data control" src="../../images/exporting_datacontrol.png"/></p>
<h3 id="data" name="data">Data Model</h3>
<p>The data model must be opened to the public to help other applications to use the exported data controls. The data model consists of the following data:</p>
<ul>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.tutorials/html/native/app_framework/message_port_tutorial_n.htm">Message Port Tutorial</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MESSAGE__PORT__MODULE.html">Message Port API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MESSAGE__PORT__MODULE.html">Message Port API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MESSAGE__PORT__MODULE.html">Message Port API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<ul><li>Check whether the message port of a remote application is registered with the <span style="font-family: Courier New,Courier,monospace">message_port_check_remote_port()</span> function.</li>
<li>A Tizen application can send messages to another application using the <span style="font-family: Courier New,Courier,monospace">message_port_send_message()</span> function.</li>
<li>Another application can receive the messages using the <span style="font-family: Courier New,Courier,monospace">message_port_register_local_port()</span> function.</li></ul>
-
<p class="figure">Figure: Uni-directional communication</p>
- <p
style="text-align:center;"><img alt="Uni-directional communication" src="../../images/unidirection.png" /></p> </li>
+ <p class="figure">Figure: Uni-directional communication</p>
+ <p
align="center"><img alt="Uni-directional communication" src="../../images/unidirection.png" /></p> </li>
<li>Bi-directional communication
<ul><li>Check whether the trusted message port of a remote application is registered with the <span style="font-family: Courier New,Courier,monospace">message_port_check_remote_port()</span> function.</li>
<li>A Tizen application can send messages and local message port information to another application using the <span style="font-family: Courier New,Courier,monospace">message_port_send_message_with_local_port()</span> function. This local message port information can be used to send the response messages from the other application which receives these messages.</li>
<li>Another application can receive the messages using the <span style="font-family: Courier New,Courier,monospace">message_port_register_local_port()</span> function. The remote message port information can be used to send response messages to the application which sends the messages.</li></ul>
-
<p class="figure">Figure: Bi-directional communication</p>
- <p
style="text-align:center;"><img alt="Bi-directional communication" src="../../images/bidirection.png" /></p> </li></ul>
+ <p class="figure">Figure: Bi-directional communication</p>
+ <p
align="center"><img alt="Bi-directional communication" src="../../images/bidirection.png" /></p> </li></ul>
<h2 id="trusted" name="trusted">Trusted Communication</h2>
<p>You can send and receive trusted messages through message port APIs. The trusted message port instance can be retrieved using the <span style="font-family: Courier New,Courier,monospace">message_port_register_trusted_local_port()</span> function. Communication over the trusted message port is allowed only if both applications are signed with a certificate that is uniquely assigned to its developer. </p>
-
<p class="figure">Figure: Trusted message port communication</p>
- <p
style="text-align:center;"><img alt="Trusted message port communication" src="../../images/trusted_communication.png" /></p>
+ <p class="figure">Figure: Trusted message port communication</p>
+ <p
align="center"><img alt="Trusted message port communication" src="../../images/trusted_communication.png" /></p>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.tutorials/html/native/app_framework/notification_tutorial_n.htm">Notification Tutorial</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__NOTIFICATION__MODULE.html">Notification API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__NOTIFICATION__MODULE.html">Notification API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__NOTIFICATION__MODULE.html">Notification API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<p>The Tizen Notification API requires the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/notification</span> privilege.</p>
<p>To use the notification feature:</p>
-<ul class="ul"><li>To post a simple notification, use the <span style="font-family: Courier New,Courier,monospace">notification_post(</span>) function, which accepts a notification handle as a parameter.
+<ul><li>To post a simple notification, use the <span style="font-family: Courier New,Courier,monospace">notification_post(</span>) function, which accepts a notification handle as a parameter.
<p>The posted notification has a default notification icon and the application name as the title.</p></li>
<li>To control the detailed behavior of the notification or to show the progress bar in the on-going activity area, use the <span style="font-family: Courier New,Courier,monospace">notification_create()</span> function to get a notification handle and set the details.</li></ul>
<h2 id="type" name="type">Notification Types</h2>
<p>Tizen provides notifications by using a combination of any of the following notification types:</p>
-<ul class="ul"><li>Ticker</li>
+<ul><li>Ticker</li>
<li>Quick panel </li>
<li>Badge number </li>
<li>Sound </li></ul>
<p>You can specify the message for the ticker or quick panel, and the badge number for the notification. The display area for quick panel notifications can be one of the following:</p>
-<ul class="ul"><li>Notification area
+<ul><li>Notification area
<p>The notification area is the reserved space for displaying all notifications, except the on-going notifications.</p></li>
<li>On-going area
<p>The on-going area is the application screen area and is only used to display notifications for the currently running application.</p></li></ul>
<p class="figure">Figure: Notification and on-going areas</p>
-
<p style="text-align:center;"><img alt="Notification and on-going areas" src="../../images/notification.png" /></p>
+
<p align="center"><img alt="Notification and on-going areas" src="../../images/notification.png" /></p>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.tutorials/html/native/app_framework/package_tutorial_n.htm">Package Manager Tutorial</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__PACKAGE__MANAGER__MODULE.html">Package Manager API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__PACKAGE__MANAGER__MODULE.html">Package Manager API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__PACKAGE__MANAGER__MODULE.html">Package Manager API for Wearable Native</a></li>
</ul>
</div></div>
</div>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.tutorials/html/native/app_framework/application_tutorial_n.htm">Service Application Tutorial</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SERVICE__APP__MODULE.html">Service Application API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SERVICE__APP__MODULE.html">Service Application API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SERVICE__APP__MODULE.html">Service Application API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<p>The following figure and table describe the service application states.</p>
<p class="figure">Figure: Running service applications</p>
-
<p style="text-align:center;"><img alt="Running service applications" src="../../images/app_run.png" /></p>
+
<p align="center"><img alt="Running service applications" src="../../images/app_run.png" /></p>
<table>
<caption>
<icon>org.tizen.message.png</icon>
<label>Message</label>
</service-application>
- <!-- Consumer -->
+ <!--Consumer-->
<service-application component-type="svcapp" auto-restart="true" on-boot="true"
appid="org.tizen.message.consumer"
exec="/usr/apps/org.tizen.message/bin/msg-consumer-service"
<ul><li><span style="font-family: Courier New,Courier,monospace">component-type</span>
<p>Set your service application component type to <span style="font-family: Courier New,Courier,monospace">svcapp</span> to define the application as a service application.</p></li>
<li><span style="font-family: Courier New,Courier,monospace">auto-restart</span>
-<p>If set to <span style="font-family: Courier New,Courier,monospace">true</span>, the application restarts whenever it terminates abnormally. If the application is running, it is launched after installing or upgrading the package.</p></li>
+<p>If set to <span style="font-family: Courier New,Courier,monospace">true</span>, the application restarts whenever it terminates abnormally. If the application is running, it is launched after installing or upgrading the package.</p>
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">This attribute is not supported in Tizen wearable devices.</td>
+ </tr>
+ </tbody>
+ </table> </li>
<li><span style="font-family: Courier New,Courier,monospace">on-boot</span>
-<p>If set to <span style="font-family: Courier New,Courier,monospace">true</span>, the application launches on boot time, and after installing or upgrading the package. The application does not start if this attribute is removed after updating the package.</p></li></ul>
+<p>If set to <span style="font-family: Courier New,Courier,monospace">true</span>, the application launches on boot time, and after installing or upgrading the package. The application does not start if this attribute is removed after updating the package.</p>
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">This attribute is not supported in Tizen wearable devices.</td>
+ </tr>
+ </tbody>
+ </table> </li></ul>
<p>The following table defines the behaviors resulting from the attribute combinations:</p>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
</div>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.tutorials/html/native/app_framework/shortcut_tutorial_n.htm">Shortcut Tutorial</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__SHORTCUT__MODULE.html">Shortcut API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__SHORTCUT__MODULE.html">Shortcut API for Mobile Native</a></li>
</ul>
</div></div>
</div>
<p>You can add your shortcut for the Home application. The Tizen Shortcut API requires the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/shortcut</span> privilege.</p>
+ <table class="note">
+<tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">This feature is supported in mobile applications only.</td>
+ </tr>
+ </tbody>
+ </table>
<p>To use the shortcut feature:</p>
<ul><li>To add a shortcut, use the <span style="font-family: Courier New,Courier,monospace">shortcut_add_to_home()</span> function, which requests the Home application to add a new shortcut.</li>
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+ <meta http-equiv="X-UA-Compatible" content="IE=9" />
+ <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+ <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+ <script type="text/javascript" src="../../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+ <title>Watch Application</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="toc-navigation">
+ <div id="profile">
+ <p><img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+ </div>
+
+ <div id="toc_border"><div id="toc">
+ <p class="toc-title">Related Info</p>
+ <ul class="toc">
+ <li><a href="../../../../org.tizen.tutorials/html/native/app_framework/watch_tutorial_n.htm">Watch Application Tutorial</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__WATCH__APP__MODULE.html">Watch Application API for Wearable Native</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+<h1>Watch Application</h1>
+<p>Tizen allows you to create a watch application and manage its life-cycle to display the current date and time accurately on the screen.</p>
+
+ <table class="note">
+<tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">This feature is supported in wearable applications only.</td>
+ </tr>
+ </tbody>
+ </table>
+ <p>The main features of the Watch Application API include:</p>
+ <ul>
+ <li>Managing the application life-cycle
+ <p>You can create and initialize a watch application with the <span style="font-family: Courier New,Courier,monospace">main()</span> function.</p>
+ <p>To start an event loop, use the <span style="font-family: Courier New,Courier,monospace">watch_app_main()</span> function. Before calling this function, set up the <span style="font-family: Courier New,Courier,monospace">watch_app_lifecycle_callback_s</span> structure variable, which contains the required event callbacks.</p></li>
+ <li>Managing the time handle and displaying the time
+ <p>To draw an accurate clock in various formats on the screen, use the Watch Application getter APIs with the <span style="font-family: Courier New,Courier,monospace">watch_time_h</span> time handle. You can get the handle with the <span style="font-family: Courier New,Courier,monospace">watch_time_get_current_time()</span> function.</p></li>
+ <li>Managing the ambient mode
+ <p>In a low-powered wearable device, an ambient mode is available. In this mode, the watch application shows a limited UI and receives only the ambient tick event every minute to reduce power consumption.</p>
+ <p>The details of the limited UI drawn in the ambient mode depend on the device. Usually, when designing the ambient mode UI, draw a black and white UI only, and use less than 20% of the pixels on the screen. If you do not want to draw your own ambient mode UI, set the <span style="font-family: Courier New,Courier,monospace">ambient-support</span> attribute to <span style="font-family: Courier New,Courier,monospace">false</span> in the watch application <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> file to allow the platform to show a default ambient mode UI:</p>
+<pre class="prettyprint">
+<watch-application appid="org.tizen.watch.app" exec="app" ambient-support="true|false">
+</pre>
+<p>To use the ambient mode, the user must enable it in the device settings.</p>
+</li>
+</ul>
+
+ <p>When a watch application is successfully installed on a device, its UI is visible in the clock menu of the watch settings.</p>
+
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ 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>Widget</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="toc-navigation">
+ <div id="profile">
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+ </div>
+
+ <div id="toc_border"><div id="toc">
+ <p class="toc-title">Related Info</p>
+ <ul class="toc">
+ <li><a href="../../../../org.tizen.tutorials/html/native/app_framework/widget_tutorial_n.htm">Widget Tutorial</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__WIDGET__MODULE.html">Widget API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__WIDGET__MODULE.html">Widget API for Wearable Native</a></li>
+
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+<h1>Widget</h1>
+<p>You can manage the life-cycle of widget applications and show them on the home screen.</p>
+
+ <p>The main features of the Widget API include:</p>
+ <ul>
+ <li>Managing the application life-cycle
+ <p>The widget application starts with the <span style="font-family: Courier New,Courier,monospace">main()</span> function, which initializes the application. The <span style="font-family: Courier New,Courier,monospace">widget_app_main()</span> function is used to start the application event loop. Before calling this function, set up the <span style="font-family: Courier New,Courier,monospace">widget_app_lifecycle_callback_s</span> structure variable, which is passed to the function.</p>
+ <p>When initializing the application, <a href="../../../../org.tizen.devtools/html/native_tools/manifest_text_editor_n.htm#widget_app">edit the manifest file</a> to define the widget settings.</p>
+ </li>
+ <li>Managing multiple widget instances
+ <p>Each widget application can create multiple widget instances that can share the same resources.</p>
+ <p>To get and set customized widget instances, use the <span style="font-family: Courier New,Courier,monospace">widget_app_context_set_tag()</span> and <span style="font-family: Courier New,Courier,monospace">widget_app_context_get_tag()</span> functions. To get the ID of a widget instance, use the <span style="font-family: Courier New,Courier,monospace">widget_app_get_id()</span> function.</p>
+ </li>
+ <li>Creating the widget UI
+ <p>The widget application can draw a UI on the home screen. To do this, you must get the window object of the home screen and draw the UI on it.</p></li>
+ </ul>
+
+ <p>When a widget application is successfully installed on a device, you can see it in the widget list in the <strong>Add Widget</strong> menu.</p>
+
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.tutorials/html/native/base/base_tutorials_n.htm">Base Tutorials</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__FRAMEWORK.html">Base API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__FRAMEWORK.html">Base API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__FRAMEWORK.html">Base API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.tutorials/html/native/base/i18n_tutorial_n.htm">i18n Tutorial</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__MODULE.html">i18n API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__MODULE.html">i18n API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__MODULE.html">i18n API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<h2 id="ucalendar" name="ucalendar">Ucalendar</h2>
-<p>The
<a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UCALENDAR__MODULE.html">Ucalendar</a> API is used for converting between a Udate object and a set of integer fields such as <span style="font-family: Courier New,Courier,monospace;">I18N_UCALENDAR_YEAR</span>, <span style="font-family: Courier New,Courier,monospace;">I18N_UCALENDAR_MONTH</span>, <span style="font-family: Courier New,Courier,monospace;">I18N_UCALENDAR_DAY</span>, and <span style="font-family: Courier New,Courier,monospace;">I18N_UCALENDAR_HOUR</span>. A <a href="#udate">Udate</a> object represents a specific instant in time with one millisecond precision.</p>
+<p>The
Ucalendar API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UCALENDAR__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__UCALENDAR__MODULE.html">wearable</a> applications) is used for converting between a Udate object and a set of integer fields such as <span style="font-family: Courier New,Courier,monospace;">I18N_UCALENDAR_YEAR</span>, <span style="font-family: Courier New,Courier,monospace;">I18N_UCALENDAR_MONTH</span>, <span style="font-family: Courier New,Courier,monospace;">I18N_UCALENDAR_DAY</span>, and <span style="font-family: Courier New,Courier,monospace;">I18N_UCALENDAR_HOUR</span>. A <a href="#udate">Udate</a> object represents a specific instant in time with one millisecond precision.</p>
<p>The types of Ucalendar interpret a Udate according to the rules of a specific calendar system, such as the gregorian or traditional system.</p>
<p>A Ucalendar object can produce all the time field values needed to implement the date-time formatting for a particular language and calendar style (for example, Japanese-Gregorian, Japanese-Traditional).</p>
</table>
<h2 id="uchar" name="uchar">Uchar</h2>
-<p>The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UCHAR__MODULE.html">Uchar</a> API provides a low-level access to the Unicode Character Database.</p>
+<p>The Uchar API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UCHAR__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__UCHAR__MODULE.html">wearable</a> applications) provides a low-level access to the Unicode Character Database.</p>
<p>Unicode assigns each code point (not just the assigned character) values for several properties. Most of them are simple boolean flags, or constants from a small enumerated list. For some properties, values are strings or other relatively more complex types.</p>
<p>For more information, see <a href="http://www.unicode.org/ucd/" target="_blank">About the Unicode Character Database</a> and <a href="http://icu-project.org/userguide/properties.html" target="_blank">ICU User Guide chapter on Properties</a>.
</p>
<h2 id="ucoll" name="ucoll">Ucollator</h2>
-<p>The
<a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UCOLLATOR__MODULE.html">Ucollator</a> API performs locale-sensitive string comparison. It builds searching and sorting routines for natural language text and provides correct sorting orders for most supported locales. If specific data for a locale is not available, the order eventually falls back to the <a href="http://www.unicode.org/reports/tr35/tr35-collation.html#Root_Collation" target="_blank">CLDR root sort order</a>. The sorting order can be customized by providing your own set of rules. For more information, see the <a href="http://userguide.icu-project.org/collation/customization" target="_blank">ICU Collation Customization</a> section of the User Guide.</p>
+<p>The
Ucollator API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UCOLLATOR__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__UCOLLATOR__MODULE.html">wearable</a> applications) performs locale-sensitive string comparison. It builds searching and sorting routines for natural language text and provides correct sorting orders for most supported locales. If specific data for a locale is not available, the order eventually falls back to the <a href="http://www.unicode.org/reports/tr35/tr35-collation.html#Root_Collation" target="_blank">CLDR root sort order</a>. The sorting order can be customized by providing your own set of rules. For more information, see the <a href="http://userguide.icu-project.org/collation/customization" target="_blank">ICU Collation Customization</a> section of the User Guide.</p>
<h2 id="udate" name="udate">Udate</h2>
-<p>The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UDATE__MODULE.html">Udate</a> API consists of functions that convert dates and times from their internal representations to textual form and back again in a language-independent manner. Converting from the internal representation (milliseconds since midnight, January 1, 1970) to text is known as formatting, and converting from text to milliseconds is known as parsing. Tizen currently defines only one concrete handle (<span style="font-family: Courier New,Courier,monospace">i18n_udate_format_h</span>), which can handle practically all normal date formatting and parsing actions.</p>
+<p>The Udate API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UDATE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__UDATE__MODULE.html">wearable</a> applications) consists of functions that convert dates and times from their internal representations to textual form and back again in a language-independent manner. Converting from the internal representation (milliseconds since midnight, January 1, 1970) to text is known as formatting, and converting from text to milliseconds is known as parsing. Tizen currently defines only one concrete handle (<span style="font-family: Courier New,Courier,monospace">i18n_udate_format_h</span>), which can handle practically all normal date formatting and parsing actions.</p>
<p>The Udate format helps you to format and parse dates for any locale. Your code can be completely independent of the locale conventions for months, days of the week, or even the lunar or solar calendar format.</p>
<p>You can pass in different options for the arguments for date and time style to control the length of the result; you can select from <span style="font-family: Courier New,Courier,monospace">SHORT</span>, <span style="font-family: Courier New,Courier,monospace">MEDIUM</span>, <span style="font-family: Courier New,Courier,monospace">LONG</span>, and <span style="font-family: Courier New,Courier,monospace">FULL</span>. The exact result depends on the locale.</p>
<p>The date and time formats are specified by the <span style="font-family: Courier New,Courier,monospace">date and time pattern</span> strings. Within the date and time pattern strings, all unquoted ASCII letters (A-Z and a-z) are reserved as pattern letters representing calendar fields. The <span style="font-family: Courier New,Courier,monospace">i18n_udate_format_h</span> handle supports the date and time formatting algorithm and pattern letters defined by the <a href="http://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table" target="_blank">UTS#35 Unicode Locale Data Markup Language (LDML)</a>. It is further documented in the <a href="https://sites.google.com/site/icuprojectuserguide/formatparse/datetime?pli=1#TOC-Date-Field-Symbol-Table" target="_blank">ICU User Guide</a>.</p>
<h2 id="udatepg" name="udatepg">Udatepg</h2>
-<p>The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UDATEPG__MODULE.html">Udatepg</a> API enables flexible generation of date format patterns, such as "yy-MM-dd". The user can build up the generator by adding successive patterns. After this, a query can be made using a pattern that includes only the desired fields and lengths. The generator returns the a pattern that is most similar to it.
+<p>The Udatepg API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UDATEPG__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__UDATEPG__MODULE.html">wearable</a> applications) enables flexible generation of date format patterns, such as "yy-MM-dd". The user can build up the generator by adding successive patterns. After this, a query can be made using a pattern that includes only the desired fields and lengths. The generator returns the a pattern that is most similar to it.
</p>
<p>The main method is the <span style="font-family: Courier New,Courier,monospace">i18n_udatepg_get_best_pattern()</span> function, since normally the Udatepg API is pre-built with data from a particular locale. However, generators can be built directly from other data as well.
</p>
<h2 id="ulocale" name="ulocale">Ulocale</h2>
-<p>The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__ULOCALE__MODULE.html">Ulocale</a> API represents a specific geographical, political, or cultural region. Locale-sensitive operations use the Ulocale functions to tailor information for the user. For example, displaying a number is a locale-sensitive operation. The number must be formatted according to the customs and conventions of the user's native country, region, or culture.
+<p>The Ulocale API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__ULOCALE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__ULOCALE__MODULE.html">wearable</a> applications) represents a specific geographical, political, or cultural region. Locale-sensitive operations use the Ulocale functions to tailor information for the user. For example, displaying a number is a locale-sensitive operation. The number must be formatted according to the customs and conventions of the user's native country, region, or culture.
</p>
<p>You create a locale with one of the options listed below. Each component is separated by an underscore in the locale string:</p>
<h2 id="unormal" name="unormal">Unormalization</h2>
-<p> The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UNORMALIZATION__MODULE.html">Unicode normalization</a> API is for the standard unicode normalization. All instances of <span style="font-family: Courier New,Courier,monospace">i18n_unormalizer_s</span> are unmodifiable and immutable. Instances returned by <span style="font-family: Courier New,Courier,monospace">i18n_unormalization_get_instance()</span> are singletons that must not be deleted by the caller.</p>
+<p> The Unicode normalization API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UNORMALIZATION__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__UNORMALIZATION__MODULE.html">wearable</a> applications) is for the standard unicode normalization. All instances of <span style="font-family: Courier New,Courier,monospace">i18n_unormalizer_s</span> are unmodifiable and immutable. Instances returned by <span style="font-family: Courier New,Courier,monospace">i18n_unormalization_get_instance()</span> are singletons that must not be deleted by the caller.</p>
<h2 id="unumber" name="unumber">Unumber</h2>
-<p>The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UNUMBER__MODULE.html">Unumber</a> API helps you to format and parse numbers for any locale. Your code can be completely independent of the locale conventions for decimal points, thousands-separators, or even the particular decimal digits used, or whether the number format is even decimal. There are different number format styles like decimal, currency, percent and spellout.</p>
+<p>The Unumber API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UNUMBER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__UNUMBER__MODULE.html">wearable</a> applications) helps you to format and parse numbers for any locale. Your code can be completely independent of the locale conventions for decimal points, thousands-separators, or even the particular decimal digits used, or whether the number format is even decimal. There are different number format styles like decimal, currency, percent and spellout.</p>
<h2 id="usearch" name="usearch">Usearch</h2>
-<p>The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__USEARCH__MODULE.html">Usearch</a> API provides language-sensitive text searching based on the comparison rules defined in a Ucollator data struct.</p>
+<p>The Usearch API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__USEARCH__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__USEARCH__MODULE.html">wearable</a> applications) provides language-sensitive text searching based on the comparison rules defined in a Ucollator data struct.</p>
<h2 id="ustring" name="ustring">Ustring</h2>
-<p>The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__USTRING__MODULE.html">Ustring</a> API provides general unicode string handling. Some functions are similar in name, signature, and behavior to the ANSI C <span style="font-family: Courier New,Courier,monospace"><string.h></span> functions, and other functions provide more Unicode-specific functionality.</p>
+<p>The Ustring API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__USTRING__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__USTRING__MODULE.html">wearable</a> applications) provides general unicode string handling. Some functions are similar in name, signature, and behavior to the ANSI C <span style="font-family: Courier New,Courier,monospace"><string.h></span> functions, and other functions provide more Unicode-specific functionality.</p>
<p>The i18n uses 16-bit Unicode (UTF-16) in the form of arrays of <span style="font-family: Courier New,Courier,monospace">i18n_uchar</span> code units. UTF-16 encodes each Unicode code point with either 1 or 2 <span style="font-family: Courier New,Courier,monospace">i18n_uchar</span> code units. This is the default form of Unicode, and a forward-compatible extension of the original, fixed-width form that was known as UCS-2. UTF-16 superseded UCS-2 with Unicode 2.0 in 1996.</p>
<p>The i18n also handles 16-bit Unicode text with unpaired surrogates. Such text is not well-formed UTF-16. Code-point-related functions treat unpaired surrogates as surrogate code points, such as separate units.</p>
<p>Although UTF-16 is a variable-width encoding form, such as some legacy multi-byte encodings, it is much more efficient even for random access because the code unit values for single-unit characters versus lead units versus trail units are completely disjoint. This means that it is easy to determine character (code point) boundaries from random offsets in the string.</p>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.tutorials/html/native/content/content_tutorials_n.htm">Content Tutorials</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTENT__FRAMEWORK.html">Content API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTENT__FRAMEWORK.html">Content API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__CONTENT__FRAMEWORK.html">Content API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<p>The main content features are:</p>
<ul>
- <li><a href="download_n.htm">Download</a> <p>Enables you to download files from the Internet and monitor the download progress and status.</p></li>
<li><a href="media_content_n.htm">Media Content</a> <p>Provides functions and interfaces that allow you to handle content management and content search.</p></li>
<li><a href="mime_type_n.htm">MIME type</a> <p>Enables you to get the MIME type of a file extension and get a list of associated extensions.</p></li>
</ul>
-
+ <p>The following guides apply in <span style="color: red">mobile applications only</span>:</p>
+ <ul>
+ <li><a href="download_n.htm">Download</a> <p>Enables you to download files from the Internet and monitor the download progress and status.</p></li>
+ </ul>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
</div>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.tutorials/html/native/content/download_tutorial_n.htm">Download Tutorial</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__WEB__DOWNLOAD__MODULE.html">Download API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__WEB__DOWNLOAD__MODULE.html">Download API for Mobile Native</a></li>
</ul>
</div></div>
</div>
<h1>Download</h1>
<p>You can create and manage one or more download requests. Tizen allows you to create a new download process, configure the download URL or destination, and launch the process.</p>
+ <table class="note">
+<tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">This feature is supported in mobile applications only.</td>
+ </tr>
+ </tbody>
+ </table>
+
<h2 id="state" name="state">Download States</h2>
<p>The following figure illustrates the download states (such as READY and DOWNLOADING), and API functions (such as <span style="font-family: Courier New,Courier,monospace">download_start()</span>) which cause transitions between those states. Functions can be called only from specific states. Every possible scenario must be handled in the code to avoid undefined behavior in the application.</p>
<p class="figure">Figure: Download states</p>
- <p
style="text-align:center;"><img alt="Download states" src="../../images/download_state.png" /></p>
+ <p
align="center"><img alt="Download states" src="../../images/download_state.png" /></p>
<p>The following table defines the download state enumerator values.</p>
<table>
<p class="figure">Figure: User scenario</p>
- <p
style="text-align:center;"><img alt="User scenario" src="../../images/user_scenario.png" /></p>
+ <p
align="center"><img alt="User scenario" src="../../images/user_scenario.png" /></p>
<h2 id="stop" name="stop">Stopping and Destroying a Download</h2>
<p>You can get information about media content from the metadata in the content, such as an ID3 or MP4 tag. You can obtain or update data from the media database, which stores metadata for the media files (such as images, videos, and audio) in the device.</p>
-
<p class="figure">Figure: Media content of the device</p>
- <p
style="text-align:center;"><img alt="Media content of the device" src="../../images/content.png" /></p>
+ <p class="figure">Figure: Media content of the device</p>
+ <p
align="center"><img alt="Media content of the device" src="../../images/content.png" /></p>
<p>The media files are updated using an application (by calling the Content API) or a media scanner. When updating the files in the media scanner, the following limitations apply:</p>
<ul><li>SD card insertion and removal: Media files are updated only in the SD card.</li>
<li>Rebooting the device: Media files are updated in the internal memory and SD card in the device.</li></ul>
-<p>Media content is available to only use the files located in the specific paths. You can get the paths by using the <span style="font-family: Courier New,Courier,monospace">int storage_get_directory(int storage_id, storage_directory_e type, char **path);</span> function. For more information, see the Storage API
Reference (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__STORAGE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__STORAGE__MODULE.html">wearable</a> applications).</p>
+<p>Media content is available to only use the files located in the specific paths. You can get the paths by using the <span style="font-family: Courier New,Courier,monospace">int storage_get_directory(int storage_id, storage_directory_e type, char **path);</span> function. For more information, see the Storage API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__STORAGE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__STORAGE__MODULE.html">wearable</a> applications).</p>
<p>The main features of the Content module include:</p>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.tutorials/html/native/content/mime_type_tutorial_n.htm">MIME Type Tutorial</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTENT__MIME__TYPE__MODULE.html">MIME Type API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTENT__MIME__TYPE__MODULE.html">MIME Type API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__CONTENT__MIME__TYPE__MODULE.html">MIME Type API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<p>The MIME Type API obtains a file's MIME types or file extensions using <span style="font-family: Courier New,Courier,monospace">xdgmime</span>. <span style="font-family: Courier New,Courier,monospace">xdgmime</span> reads the MIME information from the <span style="font-family: Courier New,Courier,monospace">/usr/local/share/mime</span> directory, which is updated with the <span style="font-family: Courier New,Courier,monospace">update-mime-database()</span> function in the <span style="font-family: Courier New,Courier,monospace">shared-mime-info</span> package.</p>
<p class="figure">Figure: MIME type management</p>
-
<p style="text-align:center;"><img alt="MIME type management" src="../../images/mime_type.png" /></p>
+
<p align="center"><img alt="MIME type management" src="../../images/mime_type.png" /></p>
<p>The main features of the MIME Type API include:</p>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.tutorials/html/native/context/activity_tutorial_n.htm">Activity Recognition Tutorial</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTEXT__ACTIVITY__MODULE.html">Activity Recognition API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTEXT__ACTIVITY__MODULE.html">Activity Recognition API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__CONTEXT__ACTIVITY__MODULE.html">Activity Recognition API for Wearable Native</a></li>
</ul>
</div></div>
</div>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.tutorials/html/native/context/gesture_tutorial_n.htm">Gesture Recognition Tutorial</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTEXT__GESTURE__MODULE.html">Gesture Recognition API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTEXT__GESTURE__MODULE.html">Gesture Recognition API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__CONTEXT__GESTURE__MODULE.html">Gesture Recognition API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<li>Move to ear
<p>The device is moved near to an ear. The event is detected using the acceleration and proximity sensors.</p>
<p class="figure">Figure: Move-to-ear event</p>
-
<p style="text-align:center;"><img alt="Move-to-ear event" src="../../images/move_ear.png" /></p></li>
+
<p align="center"><img alt="Move-to-ear event" src="../../images/move_ear.png" /></p></li>
<li>No move
<p>The device is not moved for a while.</p></li>
<li>Pick-up
<li>Shake
<p>The device is quickly moved back and forth.</p>
<p class="figure">Figure: Shake event</p>
-
<p style="text-align:center;"><img alt="Shake event" src="../../images/shake.png" /></p></li>
+
<p align="center"><img alt="Shake event" src="../../images/shake.png" /></p></li>
<li>Snap
<p>The device is moved along a particular axis.</p>
<p class="figure">Figure: Axes of the device</p>
-
<p style="text-align:center;"><img alt="Axes of the device" src="../../images/device_axes.png" /></p>
+
<p align="center"><img alt="Axes of the device" src="../../images/device_axes.png" /></p>
<p>The movement is measured with 6 discrete events: +X, -X, +Y, -Y, +Z, and -Z:</p>
<ul><li>With the display in the portrait mode, the +X, -X, +Z, and -Z snaps are active.</li>
<li>With the display in the landscape mode, the +Y, -Y, +Z, and -Z snaps are active.</li></ul>
<p class="figure">Figure: Snap events +X, +Y, and +Z</p>
-
<p style="text-align:center;"><img alt="Snap events +X, +Y, and +Z" src="../../images/snap.png" /></p>
+
<p align="center"><img alt="Snap events +X, +Y, and +Z" src="../../images/snap.png" /></p>
<table class="note">
<tbody>
<tr>
<li>Tilt
<p>The device is tilted. The event provides changes of the slopes on the X and Y axes, not the current angle of each axis.</p>
<p class="figure">Figure: Tilt event</p>
-
<p style="text-align:center;"><img alt="Tilt event" src="../../images/tilt.png" /></p></li>
+
<p align="center"><img alt="Tilt event" src="../../images/tilt.png" /></p></li>
<li>Turn face down
<p>The device is turned over and the screen is facing downwards.</p>
<p class="figure">Figure: Face-down event</p>
-
<p style="text-align:center;"><img alt="Face-down event" src="../../images/face_down.png" /></p></li>
+
<p align="center"><img alt="Face-down event" src="../../images/face_down.png" /></p></li>
<li>Wrist up
<p>The event occurs when wrist-up gesture is performed (in case of a watch device).</p>
<p class="figure">Figure: Wrist-up event</p>
-
<p style="text-align:center;"><img alt="Wrist-up event" src="../../images/wrist_up.png" /></p></li>
+
<p align="center"><img alt="Wrist-up event" src="../../images/wrist_up.png" /></p></li>
</ul>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<p>The Tizen platform collects data on the device usage. Based on this data, the applications can take advantage of the user's application usage patterns through statistical analysis.</p>
-<table class="note">
-<tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">This feature is supported in mobile applications only.</td>
- </tr>
- </tbody>
+<table class="note">
+<tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">This feature is supported in mobile applications only.</td>
+ </tr>
+ </tbody>
</table>
<p>The Contextual History API provides history data about application usage, media playback, communications, and device settings. When an application reads each type of history data, the application must set filters (mandatory and optional) to specify the necessary statistics. The following example shows how to get information about the 5 most frequently used applications from the last 30 days.</p>
</tr>
<tr>
<td>Application usage history:
+
<p><span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_RECENTLY_USED_APP</span></p>
<p><span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_FREQUENTLY_USED_APP</span></p>
<p><span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_RARELY_USED_APP</span></p>
<ul>
<li>Most recently or frequently used applications, in a descending order of the application use counts.</li>
<li>Most rarely used applications in removable applications, in an ascending order of the application use counts.</li>
- <li>Peak time for applications, or the time period when the user most frequently uses an application during the day.
+ <li>Peak time for applications, or the time period when the user most frequently uses an application during the day.
<p>The result is a sorted list of hours of the day, in a descending order of the application use count in each one-hour time slot.</p></li>
<li>Common settings for applications, or the most common setting values regarding an application or any applications.</li>
</ul>
<p>Once a rule is composed and registered successfully into the system, a unique rule ID is assigned to it. You can use the rule ID to enable, disable, or permanently remove the rule.</p>
<p class="figure">Figure: Rule states</p>
-<p
style="text-align:center;"><img alt="Rule States" src="../../images/context_trigger_rule_states.png" /></p>
+<p
align="center"><img alt="Rule States" src="../../images/context_trigger_rule_states.png" /></p>
<table class="note">
<tbody>
<p>The following figure illustrates the rule components and their relations.
</p>
<p class="figure">Figure: Rule components</p>
-<p
style="text-align:center;"><img alt="Rule components" src="../../images/context_trigger_rule_components.png" width="350"/></p>
+<p
align="center"><img alt="Rule components" src="../../images/context_trigger_rule_components.png" width="350"/></p>
<h2 id="event_and_condition" name="event_and_condition">Event and Conditions</h2>
<td><span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_IN, CONTEXT_TRIGGER_OUT</span></td>
</tr>
<tr>
- <td rowspan="2">
- <span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_CONDITION_APP_USE_FREQUENCY</span>
- <p><span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_CONDITION_COMMUNICATION_FREQUENCY</span></p>
+ <td rowspan="2"><span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_CONDITION_APP_USE_FREQUENCY</span>
+ <p><span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_CONDITION_COMMUNICATION_FREQUENCY</span></p>
</td>
<td><span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_RANK</span></td>
<td>Integer</td>
<h3 id="options" name="options">Options</h3>
-<p>Certain events or conditions require the specification of some option values to clarify their monitoring or computation objective. For example, if an event is defined using <span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_EVENT_PLACE</span>, the target location must be specified by the place ID that can be retrieved using the <a href="../location/location_guide_n.htm">Location Manager</a>, as in the following example:</p>
+<p>Certain events or conditions require the specification of some option values to clarify their monitoring or computation objective. For example, if an event is defined using <span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_EVENT_PLACE</span>, the target location must be specified by the place ID that can be retrieved using the <a href="../location/location_n.htm#manager">Location Manager</a>, as in the following example:</p>
<pre class="prettyprint">
// Getting the target place ID through the Location Manager API
<td><span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_PLACE_ID</span></td>
<td>Integer</td>
<td>
- Place ID. For more information, see the <a href="../location/location_guide_n.htm">Location</a> guide.
+ Place ID. For more information, see the <a href="../location/location_n.htm">Location</a> guide.
</td>
</tr>
<tr>
<li>Combining attributes into an event or condition
<p>Some event and condition items provide multiple attributes. The logical connection between attributes must be set properly to fulfill the requirement. For example, when you use <span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_EVENT_ON_TIME</span> to define a rule "at 4 PM every Monday", the comparisons regarding the 2 attributes, <span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_TIME_OF_DAY</span> and <span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_DAY_OF_WEEK</span> must be satisfied together.</p>
-<p>On the contrary, using <span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_APP_USE_FREQUENCY</span>, if you want to check whether a specific application belongs to the 5 most frequently used applications, or the application was used at least 10 times, the both comparisons against <span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_RANK</span> and <span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_TOTAL_COUNT</span> need to be connected by logical disjunction. </p>
+<p>On the contrary, using <span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_APP_USE_FREQUENCY</span>, if you want to check whether a specific application belongs to the 5 most frequently used applications, or the application was used at least 10 times, both comparisons against <span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_RANK</span> and <span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_TOTAL_COUNT</span> must be connected by a logical disjunction.</p>
<p>The following example illustrates the cases described above:</p>
<pre class="prettyprint">
<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>Cairo Integration</title>
+ <title>Cairo</title>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
<li><a href="#create">Creating an Evas_Object Image</a></li>
- <li><a href="#link">Linking Evas_Object Image to Cairo</a></li>
- <li><a href="#paint">Painting with Cairo</a></li>
+ <li><a href="#link">Linking Evas_Object Images to Cairo</a></li>
+ <li><a href="#paint">Drawing with Cairo</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a href="../../../../org.tizen.tutorials/html/native/graphics/cairo_tutorial_n.htm">Cairo Integration Tutorial</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__CAIRO__FRAMEWORK.html">Cairo API</a></li>
+ <li><a href="../../../../org.tizen.tutorials/html/native/graphics/cairo_tutorial_n.htm">Cairo Tutorial</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__CAIRO__FRAMEWORK.html">Cairo API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__CAIRO__FRAMEWORK.html">Cairo API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
- <h1>Cairo Integration</h1>
+ <h1>Cairo</h1>
-<p>Evas Cairo is the connection between the Cairo buffer and the Evas buffer.</p>
-<p>EFL and more especially Evas are optimized and designed with bitmaps in mind, and it is more complicated to display vector images with EFL. There is an svg loader for evas, which loads a vectorial file as an evas object image, in other words as pixels. But if you want to create graphs, for example to display the evolutions of stocks during time, you need an external library, and this programming guide explains how to link this external library to evas.</p>
-<p>This library is the <a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__CAIRO__FRAMEWORK.html">Cairo</a> API. It is one of the most famous open source libraries for 2D graphics. Evas and EFL already have most of Cairo features, but if you want to display Bezier curves on screen it is advisable to use Cairo.</p>
-<p>The <a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas</a> API and Cairo have completely different concepts. Evas knows the state of each object on screen and manipulates the state. So when you create, for example, a rectangle with <span style="font-family: Courier New,Courier,monospace">evas_object_rectangle_add</span>, it is not rendered on screen. After the render is launched, the rectangle may be overlayed by an opaque image and never be rendered on canvas. This is how evas manages the surfaces. Cairo works as a person draws on a paper sheet. Once something is painted on the surface it is rendered on the screen.</p>
+<p><a href="http://cairographics.org" target="_blank">Cairo</a> is an open source library for 2D vector graphics with support for multiple output devices. In Tizen, Cairo can support output to 2 different backends, such as the image and evas-gl (similar to gl) backend. This guide explains how you can link the Cairo image backend with Evas (in <a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">wearable</a> applications), so that Cairo can draw on the image surface and an Evas object can get the image data from the Cairo image buffer.</p>
+
<h2 id="create" name="create">Creating an Evas_Object Image</h2>
-<p>This is how to create an Evas_Object. We use an Image object as it is displayed as pixels on the screen.</p>
-<pre class="prettyprint">Evas_Object *image;
+<p>Cairo and Evas have completely different concepts:</p>
+<ul><li>Evas knows the state of each object on the screen and manipulates the state. So when you create, for example, a rectangle with the <span style="font-family: Courier New,Courier,monospace">evas_object_rectangle_add()</span> function, it is not rendered on the screen when the function is called. In the rendering stage, the rectangle can be overlaid by an opaque image and never be rendered on the canvas.</li>
+<li>Cairo draws as a person on a paper sheet. Once something is drawn on the Cairo surface, it is rendered on the screen.</li></ul>
-image = evas_object_image_add(evas);
+<p>First, as shown in the following code snippet, you can define the <span style="font-family: Courier New,Courier,monospace">appdata</span> structure, which contains all the pointers to the objects to be manipulated:</p>
+
+<pre class="prettyprint">
+typedef struct appdata
+{
+ Evas_Object *win;
+ Evas_Object *img;
+ cairo_surface_t *surface;
+ cairo_t *cairo;
+ unsigned char *pixels;
+} appdata_s;
</pre>
-<p>To have transparent values enabled, we use ARGB8888 colorspace for the pixels. To do that, use the following code:</p>
-<pre class="prettyprint">evas_object_image_alpha_set(image, EINA_TRUE);
-evas_object_image_colorspace_set(image, EVAS_COLORSPACE_ARGB8888);
+<p>To create a new <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> image, use the <span style="font-family: Courier New,Courier,monospace">evas_object_image_add()</span> function. The image object can be used for displaying as pixels on the screen:</p>
+
+<pre class="prettyprint">
+appdata_s * ad;
+ad->win = elm_win_util_standard_add(PACKAGE, PACKAGE);
+evas_object_show(ad->win);
+ad->img = evas_object_image_add(evas_object_evas_get(ad->win));
+evas_object_show(ad->img);
</pre>
-<p>The image is now ready to be linked to Cairo.</p>
+<h2 id="link" name="link">Linking Evas_Object Images to Cairo</h2>
-<h2 id="link" name="link">Linking Evas_Object Image to Cairo</h2>
+<p>You can now create a Cairo image surface for the provided pixel and other data by using the <span style="font-family: Courier New,Courier,monospace">cairo_image_surface_create_for_data()</span> function. The pixel data is a pointer to a buffer supplied by the application in which you want to write content.</p>
+<p>The size of the row stride is called by the <span style="font-family: Courier New,Courier,monospace">cairo_format_stride_for_width()</span> function. The function provides a stride value that respects all alignment requirements of the accelerated image-rendering code within Cairo.</p>
-<p>Now we create the real pixels Cairo uses for painting and EFL for displaying. We allocate the pixels for both Cairo and evas. The size of the row stride is called by <span style="font-family: Courier New,Courier,monospace">cairo_format_stride_for_width</span>. To set the size of the pixels to be allocated, use the following code.</p>
-<pre class="prettyprint">cairo_format_t image_format;
-cairo_t *cairo;
-cairo_surface_t *surface;
-unsigned char *pixels;
-
-image_format = CAIRO_FORMAT_ARGB32;
-row_stride = cairo_format_stride_for_width(image_format, WIDTH);
-// Create the pixels here
-pixels = (unsigned char *) calloc(sizeof(unsigned char) * row_stride * HEIGHT, 1);
+<pre class="prettyprint">
+int row_stride = cairo_format_stride_for_width(CAIRO_FORMAT_ARGB32, WIDTH);
+ad->pixels = (unsigned char *) calloc(sizeof(unsigned char) * row_stride * HEIGHT, 1);
+ad->surface = cairo_image_surface_create_for_data(ad->pixels,CAIRO_FORMAT_ARGB32, WIDTH, HEIGHT, row_stride);
</pre>
-<p>This is how to create a Cairo structure which uses these pixels:</p>
-<pre class="prettyprint">surface = cairo_image_surface_create_for_data(pixels, image_format,
- WIDTH, HEIGHT, row_stride);
-</pre>
<p>To create the Cairo context used for all operations, use the following code.</p>
-<pre class="prettyprint">cairo = cairo_create(surface);
+<pre class="prettyprint">
+cairo = cairo_create(ad->surface);
</pre>
-<p>This is how to associate the pixels to the Evas_Object Image and set the size of the image to be the same as the one on the Cairo canvas.</p>
-<pre class="prettyprint">evas_object_image_size_set(image, WIDTH, HEIGHT);
-evas_object_image_fill_set(image, 0, 0, WIDTH, HEIGHT);
-evas_object_image_data_set(image, pixels);
+<p>Associate the pixels (as raw data) to given image object. The pixels must be of the same size and colorspace as the image object.</p>
+<pre class="prettyprint">
+evas_object_image_data_set(ad->img, ad->pixels);
</pre>
-<p>Each time we finish painting with Cairo, evas renders the pixels on screen with the following code.</p>
-<pre class="prettyprint">evas_object_image_data_update_add(image, 0, 0, WIDTH, HEIGHT);
+<p>Once you finish painting by using Cairo, Evas renders a particular rectangular region to be redrawn on the screen:</p>
+<pre class="prettyprint">
+evas_object_image_data_update_add(ad->img, 0, 0, WIDTH, HEIGHT);
</pre>
-<h2 id="paint" name="paint">Painting with Cairo</h2>
+<h2 id="paint" name="paint">Drawing with Cairo</h2>
-<p>All painting operations use the Cairo object created previously. To place the pencil at a specific position, use <span style="font-family: Courier New,Courier,monospace">cairo_move_to</span>. To paint a line between the current position and a point on the surface, use <span style="font-family: Courier New,Courier,monospace">cairo_line_to</span>. Here we paint a line with the current style from the point (x, y) 10, 10 to the point 10, 110.</p>
-<pre class="prettyprint">cairo_move_to(cairo, 10, 10);
-cairo_line_to(cairo, 10, 110);
-</pre>
+<p>Before drawing a line, set the current line width or color as a style. For example, you can set the line width as 2 and the line color as opaque red:</p>
+<pre class="prettyprint">
+cairo_set_line_width(ad->cairo, 2);
+cairo_set_source_rgba(ad->cairo, 1.0, 0.0, 0.0, 1.0);</pre>
-<p>Create a rectangle by using the <span style="font-family: Courier New,Courier,monospace">cairo_rectangle</span> API. This call draws a rectangle from position 10,10 and with 100px width and height.</p>
-<pre class="prettyprint">cairo_rectangle(cairo, 10, 10, 110, 110);
-</pre>
+<p>You can draw various lines:</p>
+<ul>
+<li><p>To set the start position with a user-specific offset, use the <span style="font-family: Courier New,Courier,monospace">cairo_translate()</span> function. It modifies the current transformation matrix (CTM) by translating the user-space origin by (x, y).</p>
+<pre class="prettyprint">
+cairo_translate(ad->cairo, 40, 40);</pre></li>
-<p>Change the color of the pen by using the API <span style="font-family: Courier New,Courier,monospace">cairo_set_source_rgba</span> or <span style="font-family: Courier New,Courier,monospace">cairo_set_source_rgb</span>. This call changes the color to red with half transparency.</p>
-<pre class="prettyprint">cairo_set_source_rgba(cairo, 1.0, 0.0, 0.0, 0.5);
-</pre>
+<li><p>Cairo uses a connect-the-dots style system when creating a path. To draw a line between 2 points (100,100 and 200,150) on the surface, use the <span style="font-family: Courier New,Courier,monospace">cairo_move_to()</span> and <span style="font-family: Courier New,Courier,monospace">cairo_line_to()</span> functions:</p>
+<pre class="prettyprint">
+cairo_move_to(ad->cairo, 100, 100);
+cairo_line_to(ad->cairo, 200, 150);</pre></li>
-<p>Changing the size of the pen is done by calling <span style="font-family: Courier New,Courier,monospace">cairo_set_line_width</span>. For a two pixel width use the following code.</p>
-<pre class="prettyprint">cairo_set_line_width(cairo, 2);
-</pre>
+<li><p>To draw a line from the endpoint of the current path, use the <span style="font-family: Courier New,Courier,monospace">cairo_rel_line_to()</span> function. The offset by (dx, dy) must be specified as (100, -50).</p>
+<pre class="prettyprint">
+cairo_rel_line_to(ad->cairo, 100, -50);</pre></li>
+
+<li><p>To draw a circular arc of the given radius (100 * sqrt(2)) to the current path, use the <span style="font-family: Courier New,Courier,monospace">cairo_arc()</span> function.</p>
+<p>The arc is centered at (200, 200), begins at angle1 (-0.25 * M_PI) and proceeds in the direction of increasing angles to end at angle2 (0.25 * M_PI). If angle2 is less than angle1, it is progressively increased by 2*M_PI until it is greater than angle1.</p>
+<pre class="prettyprint">
+cairo_arc(ad->cairo, 200, 200, 100 * sqrt(2), -0.25 * M_PI, 0.25 * M_PI);</pre></li>
+
+<li><p>To draw a cubic Bézier spline to the path from the end position of the previous path, use the <span style="font-family: Courier New,Courier,monospace">cairo_rel_curve_to()</span> function. You can use the points offset by (-100, -50) and (-100, 50) as the control points. After the call, the current point is offset by (-200, 0).</p>
+<pre class="prettyprint">
+cairo_rel_curve_to(ad->cairo, -100, -50, -100, 50, -200, 0);</pre></li>
+
+<li><p>You can add a line segment to the path from the current point to the beginning of the current sub-path. After this call, the current point is at the joined endpoint of the sub-path. The <span style="font-family: Courier New,Courier,monospace">cairo_close_path()</span> function differs from simply calling the <span style="font-family: Courier New,Courier,monospace">cairo_line_to()</span> function with the equivalent coordinate in the case of stroking: there is a line join connecting the final and initial segments of the sub-path.</p>
+<pre class="prettyprint">
+cairo_close_path(ad->cairo);</pre></li>
+
+<li><p>To create a rectangle, use the <span style="font-family: Courier New,Courier,monospace">cairo_rectangle()</span> function. This call draws a rectangle with 400 px in width and height from point (0, 0).</p>
+<pre class="prettyprint">
+cairo_rectangle(ad->cairo, 0, 0, 400, 400);</pre></li>
+
+<li><p>To stroke the paths, use the <span style="font-family: Courier New,Courier,monospace">cairo_stroke()</span> function. It is a drawing operator that strokes the current path according to the current line width, line join, line cap, and dash settings. After the function call, the current path is cleared from the cairo context.</p>
+<pre class="prettyprint">
+cairo_stroke(ad->cairo);</pre></li>
+
+<li><p>To ensure that any pending Cairo operation are drawn, use the <span style="font-family: Courier New,Courier,monospace">cairo_surface_flush()</span> function after finishing the Cairo drawing:</p>
+
+<pre class="prettyprint">
+cairo_surface_flush(ad->surface);</pre></li></ul>
+
+<p>You need to destroy Cairo objects before terminating your application:</p>
+<pre class="prettyprint">
+cairo_destroy(ad->cairo);
+cairo_surface_destroy(ad->surface);</pre>
+
+ <p class="figure">Figure: Drawing paths and a rectangle with Cairo</p>
+ <p align="center"><img alt="Drawing paths and a rectangle with Cairo" src="../../images/cairo.png" /></p>
-<p>For the complete official Cairo documentation, see <a href="http://cairographics.org/documentation/" target="_blank">http://cairographics.org/documentation/</a>.</p>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.tutorials/html/native/graphics/graphics_tutorials_n.htm">Graphics Tutorials</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UI__FRAMEWORK.html">UI API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UI__FRAMEWORK.html">UI Framework API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UI__FRAMEWORK.html">UI Framework API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<ul>
<li><a href="opengles_n.htm">OpenGL ES</a> <p>Enables you to create OpenGL ES applications in Tizen with the EGL layer.</p></li>
<li><a href="tbm_n.htm">TBM Surface</a> <p>Provides Tizen Buffer Manager (TBM) surface functions for the graphic buffer in Tizen.</p></li>
- <li><a href="cairo_n.htm">Cairo Integration</a> <p>Allows you to integrate Evas images and Cairo surfaces to display vector graphics.</p></li>
+ <li><a href="cairo_n.htm">Cairo</a> <p>Allows you to use Cairo to draw on the image surface and Evas objects to get the image data.</p></li>
</ul>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.tutorials/html/native/graphics/opengl_tutorial_n.htm">OpenGL ES Tutorial</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__OPENGL__ES__FRAMEWORK.html">OpenGL ES API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__OPENGL__ES__FRAMEWORK.html">OpenGL ES API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__OPENGL__ES__FRAMEWORK.html">OpenGL ES API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<p>The OpenGL ES overview shows the interaction among Graphics subsystems, OpenGL ES, and EGL defined by the <a href="http://www.khronos.org" target="_blank">Khronos Group</a>.</p>
-<p>OpenGL ES is a standard specification defining a cross-language, cross-platform <a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__OPENGL__ES__FRAMEWORK.html">OpenGL ES</a> API for writing applications that produce 2D and 3D computer graphics. OpenGL ES 1.1 and 2.0 are supported in Tizen 2.3. (OpenGL ES 3.0 will be supported in the next Tizen version.)</p>
+<p>OpenGL ES is a standard specification defining a cross-language, cross-platform OpenGL ES API (in <a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__OPENGL__ES__FRAMEWORK.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__OPENGL__ES__FRAMEWORK.html">wearable</a> applications) for writing applications that produce 2D and 3D computer graphics. OpenGL ES 1.1 and 2.0 are supported in Tizen 2.3. (OpenGL ES 3.0 will be supported in the next Tizen version.)</p>
<p>EGL is an adhesive layer between OpenGL ES and the underlying native platform window system. EGL communicates with the Window system to get information on the application window, creates the drawing surface, and manages rendering context and resources.</p>
-
<p class="figure">Figure: OpenGL ES structure</p>
- <p
style="text-align:center;"><img alt="OpenGL® ES structure" src="../../images/opengl1.png" /></p>
+ <p class="figure">Figure: OpenGL ES structure</p>
+ <p
align="center"><img alt="OpenGL® ES structure" src="../../images/opengl1.png" /></p>
<h2 id="tizen" name="tizen">OpenGL ES in Tizen</h2>
<p>Tizen native applications do not depend on the Window system, because the Window system is an internal Tizen module, which can be enhanced or replaced. EFL provides a method that draws the OpenGL ES content and encapsulates the EGL and the native Window system.</p>
-
<p class="figure">Figure: OpenGL ES and EFL</p>
- <p
style="text-align:center;"><img alt="OpenGL® ES and EFL" src="../../images/opengl2.png" /></p>
+ <p class="figure">Figure: OpenGL ES and EFL</p>
+ <p
align="center"><img alt="OpenGL® ES and EFL" src="../../images/opengl2.png" /></p>
-<p>A GLView creates a drawable GL surface for the application, and sets up all the required callbacks. The application can use GLView with various widgets, such as toolbar or button.</p>
+<p>A GLView creates a drawable GL surface for the application, and sets up all the required callbacks. The application can use GLView with various UI components, such as toolbar or button.</p>
<p>GLView internally uses EvasGL. It is an abstraction layer on top of EGL, which provides the necessary features for most applications in a platform-independent way. Since the goal of EvasGL is to abstract the underlying platform, only a subset of the features can be used by applications.</p>
<h3>Setting up an OpenGL ES Surface</h3>
-<p>The easiest way to use OpenGL ES within a Tizen application is to rely on the GLView widget.</p>
+<p>The easiest way to use OpenGL ES within a Tizen application is to rely on the GLView component.</p>
-<p>GLView is a simple Elementary widget that sets up an OpenGL ES target surface and a context, and allows you to embed it in any Tizen application. GLView is basically a wrapper around EvasGL, the OpenGL-ES/EGL abstraction layer of EFL.</p>
+<p>GLView is a simple Elementary UI component that sets up an OpenGL ES target surface and a context, and allows you to embed it in any Tizen application. GLView is basically a wrapper around EvasGL, the OpenGL-ES/EGL abstraction layer of EFL.</p>
<p>To create a basic application:</p>
-<p>To develop a GL application, you have to call <span style="font-family: Courier New,Courier,monospace">elm_config_accel_preference_set</span> before creating a window. It makes an application to use GPU.</p>
+<p>To develop a GL application, you have to call <span style="font-family: Courier New,Courier,monospace">elm_config_accel_preference_set</span> before creating a window. It makes an application to use GPU. To use the Direct Rendering mode, you have to set the same option values (depth, stencil, and MSAA) to a rendering engine and a GLView object. You can set the option values to a rendering engine using the <span style="font-family: Courier New,Courier,monospace">elm_config_accel_preference_set()</span> function and to a GLView object using the <span style="font-family: Courier New,Courier,monospace">elm_glview_mode_set()</span> function. If the GLView object option values are bigger or higher than the rendering engine's, the Direct Rendering mode is disabled.</p>
<p>First, you should declare the global variable using <span style="font-family: Courier New,Courier,monospace">ELEMENTARY_GLVIEW_GLOBAL_DEFINE()</span>, then create a GLView object and use <span style="font-family: Courier New,Courier,monospace">ELEMENTARY_GLVIEW_GLOBAL_USE(glview)</span>. Now, you can call GL functions.</p>
{
Evas_Object *glview;
- // This creates the widget itself
+ // This creates the UI component itself
glview = elm_glview_add(win);
elm_win_resize_object_add(win, glview);
}</pre>
</li>
<li>Callback for resizing
- <p>The resize callback is called whenever the GLView widget is resized. A common action to take here is to reset the viewport.</p>
+ <p>The resize callback is called whenever the GLView component is resized. A common action to take here is to reset the viewport.</p>
<pre class="prettyprint">
// GLView resize function
<h3>Callbacks</h3>
-<p>Now that we have configured the EvasGL environment, we declare a widget in which all the OpenGL ES transformation takes place. In the example below, we selected the image widget because it provides callbacks that allow us to play with the mouse events and coordinates, and we set up an image object that inherits the size of the parent window.</p>
+<p>Now that we have configured the EvasGL environment, we declare a UI component in which all the OpenGL ES transformation takes place. In the example below, we selected the image component because it provides callbacks that allow us to play with the mouse events and coordinates, and we set up an image object that inherits the size of the parent window.</p>
<pre class="prettyprint">
ad->img = evas_object_image_filled_add(evas_object_evas_get(ad->win));</pre>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.tutorials/html/native/graphics/tbm_tutorial_n.htm">TBM Surface Tutorial</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UI__TBM__SURFACE__MODULE.html">TBM Surface API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UI__TBM__SURFACE__MODULE.html">TBM Surface API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UI__TBM__SURFACE__MODULE.html">TBM Surface API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<p>Enables you to obtain an access token by using the oauth2 authorization.</p></li>
<li><a href="security/security_guide_n.htm">Security</a>
<p>Enables you to increase the security of your application through cryptography, encryption, and request control.</p></li>
- <li><a href="sync/sync_guide_n.htm">Sync</a>
- <p>Enables you to provide your application with notification for syncing operation between server and device.</p></li>
+ <li><a href="social/social_guide_n.htm">Social</a>
+ <p>Enables you to manage the user's personal data, such as contacts, calendars, and accounts.</p></li>
<li><a href="system/system_guide_n.htm">System</a>
<p>Enables you to handle log messages, device and system information, and manage system settings, sensors, and system storage.</p></li>
<li><a href="telephony/telephony_guide_n.htm">Telephony</a>
<p>Enables you handle call, SIM, network, and modem information.</p></li>
- <li><a href="ui/ui_guide_n.htm">UI</a>
+ <li><a href="ui/ui_guide_n.htm">UI Framework</a>
<p>Enables you to create a visual outlook for your application to ensure the best possible user experience.</p></li>
<li><a href="uix/uix_guide_n.htm">UIX</a>
<p>Enables you to handle UI extensions, which include managing sound data, such as voice commands, speech-to-text (STT), and text-to-speech (TTS).</p></li>
<li><a href="web/web_guide_n.htm">Web</a>
<p>Enables you to access Web content.</p></li>
- <li><a href="social/social_guide_n.htm">Social</a> <span style="color: red">in mobile applications only</span>
- <p>Enables you to manage the user's personal data, such as contacts, calendars, and accounts.</p></li>
+ <li><a href="sync/sync_guide_n.htm">Sync</a> <span style="color: red">in mobile applications only</span>
+ <p>Enables you to receive notifications in your application about syncing operations between a server and the device.</p></li>
+
</ul>
<p>For information about features not implemented by a specific API:</p>
<h2 id="settings" name="settings">Geofence Settings</h2>
<p>Tizen provides the user a way of managing the geofence places and fence through the My places application. The following figure shows the default places and supported fences.</p>
<p class="figure">Figure: My places</p>
- <p
style="text-align:center;"><img alt="My places" src="../../images/geofence_setting.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
+ <p
align="center"><img alt="My places" src="../../images/geofence_setting.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
<p>My places controls the adding, removing, and updating of places and fences. <strong>Home</strong>, <strong>Office</strong>, and <strong>Car</strong> are the default places, and <strong>Map</strong>, <strong>Wi-Fi</strong>, and <strong>Bluetooth</strong> are the supported fence methods. <strong>Car</strong> supports only Wi-Fi and Bluetooth for a fence method.</p>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
</div>
<div id="toc_border"><div id="toc">
- </ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.tutorials/html/native/location/location_tutorials_n.htm">Location Tutorials</a></li>
<p>Provides the geographical location of the device.</p></li>
</ul>
-<ul>
-<li><a href="maps_n.htm">Maps Service</a>
- <p>Allows you to create and use maps service such as geocoder, place, and route.</p></li>
-</ul>
<p>The following guides apply in <span style="color: red">mobile applications only</span>:</p>
<ul>
<li><a href="geofence_n.htm">Geofence</a>
<p>Allows you to create and use geofences.</p></li>
+<li><a href="maps_n.htm">Maps Service</a>
+ <p>Allows you to create and use the maps services, such as geocoder, place searching, and routing.</p></li>
</ul>
-
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
</script>
</body>
-</html>
+</html>
\ No newline at end of file
<li>Location indicator on the screen <p>When the application uses the current location of the user, a location indicator is shown at the top of the screen to explicitly notify the user that the current location data is being used.</p> </li>
</ul>
<p class="figure">Figure: Location setting and indicator</p>
- <p
style="text-align:center;"><img alt="Location setting and indicator" src="../../images/location_setting_and_indicator.png" /></p>
+ <p
align="center"><img alt="Location setting and indicator" src="../../images/location_setting_and_indicator.png" /></p>
<p>The location-related functions work differently based on whether the location settings are used.</p>
<h2 id="settings" name="settings">Location Settings</h2>
<p>Tizen provides the user a robust way of controlling the usage of their location data through the device location settings. The following figure shows the various options for enabling or disabling specific positioning technologies and controlling application permissions.</p>
<p class="figure">Figure: Location settings</p>
- <p
style="text-align:center;"><img alt="Location settings" src="../../images/loc_priv_setting.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
+ <p
align="center"><img alt="Location settings" src="../../images/loc_priv_setting.png" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
<p> The <strong>GPS</strong> setting controls the Global Positioning System usage. It takes GPS satellite signals and provides accurate positioning services generally outdoors. The <strong>Network position</strong> setting enables the usage of network-based positioning technology, which includes Wi-Fi- and cell tower-based positioning, and improves the coverage of positioning services to indoors.</p>
<p>To ensure privacy, all location settings are initially disabled. To enable them, the user must manually toggle the buttons. The manual task required from the user is understood as an implicit user consent.</p>
<table class="note">
<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>Maps</title>
+<title>Maps Service</title>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
</div>
<div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a href="../../../../org.tizen.tutorials/html/native/location/maps_tutorial_n.htm">Maps Tutorial</a></li>
+ <li><a href="../../../../org.tizen.tutorials/html/native/location/maps_tutorial_n.htm">Maps Service Tutorial</a></li>
<li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MAPS_SERVICE__MODULE.html">Maps Service API for Mobile Native</a></li>
</ul>
</div>
</div>
</div>
- <div id="container">
- <div id="contents">
- <div class="content">
- <h1>Maps</h1>
- </p>Maps features include geocoding, reverse geocoding, place searching and route calculation.</p>
- <p>The main maps features are:</p>
- <ul>
- <li><p><a class="opensection" href="#initial">Instantiating the Maps Service</a><br>
- Allows you to issue an instance of Maps Service, discover and select a Maps Provider and set basic maps preferences</p></li>
- <li><p><a class="opensection" href="#geocode">Geocoding and Reverse Geocoding</a><br>
- Allows you to determine the geographical location (latitude, longitude) of a specified address and, vise versa, an address of a specified geographical location</p></li>
- <li><p><a class="opensection" href="#search_place">Place Searching</a><br>
- Allows you to find place information</p></li>
- <li><p><a class="opensection" href="#search_route">Route Searching</a><br>
- Allows you to query a route between a pair of geographical points</p></li>
- </ul>
- <br>
- <p>Two Maps Providers are supported:
- <ul>
- <li><a href="https://developer.here.com">HERE Maps</a> based on <a href="https://developer.here.com/rest-apis">HERE REST API</a></li>
- <li><a href="http://developer.mapquest.com">MapQuest</a> based on <a href="http://open.mapquestapi.com">Open MapQuest API</a></li>
- </ul>
- <p>A user have to get access key of Maps Providers from developer sites</p>
- <p>Note that Maps Service must be used under "Term of Use" of Maps Service Providers.</p>
- <div>
- <h2 id="initial" name="initial" class="items-tit-h2">Maps Service</h2>
- </div>
- <div>
- <p>Using Maps Service allows your Tizen Native Application to:</p>
- <ul>
- <li><p>Discover and select a Maps Provider as well as specify basic maps preferences</p></li>
- <li><p>Get geocode (geographical coordinates: latitude and longitude) of a place, specified with address</p></li>
- <li><p>Get reverse geocode (address) of a place, specified with geographical coordinates: latitude and longitude</p></li>
- <li><p>Query the place information, corresponding to specified search keys and filters</p></li>
- <li><p>Query the route that defines a path between a start and destination, passing optionally through
- specific intermediate location and calculated regarding to specified transportation preferences</p></li>
- </ul>
- <br>
- <p>Asynchronous Maps Service responses are implemented with callback interfaces (functions whose names end with “cb”)</p>
- <p>You can use the Maps Service response states as follows:</p>
- <ul>
- <li><p>If the Maps Service is working correctly, the response state is set
- to <span style="font-family: Courier New,Courier,monospace;">MAPS_SERVICE_ERROR_NONE</span></p></li>
- <li><p>If the user revokes a permission for the application to use the Maps Service, the response state is set
- to <span style="font-family: Courier New,Courier,monospace;">MAPS_ERROR_PERMISSION_DENIED</span></p></li>
- <li><p>If the maps request or maps feature you are trying to use is not supported in the Maps Provider, the response state is set
- to <span style="font-family: Courier New,Courier,monospace;">MAPS_ERROR_NOT_SUPPORTED</span></p></li>
- <li><p>If the Maps Provider faces problems with accessing the maps server, the response state is set
- to <span style="font-family: Courier New,Courier,monospace;">MAPS_ERROR_NETWORK_UNREACHABLE</span>
- , <span style="font-family: Courier New,Courier,monospace;">MAPS_ERROR_SERVICE_NOT_AVAILABLE</span>
- or<span style="font-family: Courier New,Courier,monospace;"> MAPS_ERROR_CONNECTION_TIME_OUT</span></p></li>
- </ul>
- </div>
-
- <div>
- <h2 class="items-tit-h2">Maps Features</h2>
- </div>
- <div>
- <p id="geocode" name="geocode">The following types of geocode requests are provided:</p>
- <ul>
- <li><p>Get place coordinates by a free text address</p></li>
- <li><p>Get place coordinates by a free text address within a specified geographical area</p></li>
- <li><p>Get place coordinates by a structured address (the structure with fields such as city, street, building number)</p></li>
- </ul>
- <p>The response of geocode request is a geographical location, specified with latitude and longitude values.</p>
- <br>
- <p>The only one form of reverse geocode is provided:</p>
- <ul>
- <li><p>Get structured address by place coordinates</p></li>
- </ul>
- <p>The response of reverse geocode request is structured address information, comprising street, building number, city, postal code, district, state, country, etc.</p>
- <br>
- <p id="search_place" name="search_place">The following types of place search requests are provided:</p>
- <ul>
- <li><p>Query place information within a distance around a specified geographical location</p></li>
- <li><p>Query place information within a specified geographical area</p></li>
- <li><p>Query place information by a free text address within a specified geographical area</p></li>
- </ul>
- <p>The response of place search request is structured place information, comprising place id, name and URL,
- address, geographical location and distance from the center of search area, place category, rating, review, image, etc.</p>
- <p>Note: dependently to Maps Provider, some types of place information may be unavailable.</p>
- <br>
- <p id="search_route" name="search_route">The following types of route search requests are provided:</p>
- <ul>
- <li><p>Query route from a start to a destination specified as geographical location</p></li>
- <li><p>Query route passing through a number of geographical locations</p></li>
- </ul>
- <p>The response of route calculation request is structured route information, comprising route id,
- geographical coordinates of start and destination, route bounding box, transportation mode, total distance and duration.</p>
- <p>Note: dependently to Maps Provider, the route may be present as a list of geographical points or as a list of
- segments which, in turn, may be present also as a list of geographical points or as a list of maneuvers.</p>
- </div>
-
- <div>
- <h2 class="items-tit-h2">Privacy Policy</h2>
- </div>
- <div>
- TBD
- </div>
-
- <div>
- <h2 class="items-tit-h2">Maps Settings</h2>
- </div>
- <div>
- TBD
- </div>
+ <div id="container"><div id="contents"><div class="content">
+<h1>Maps Service</h1>
+<p>Map service features include geocoding, reverse geocoding, place searching, and route calculation.</p>
- </div>
- </div>
- </div>
+<table class="note">
+<tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">This feature is supported in mobile applications only.</td>
+ </tr>
+ </tbody>
+ </table>
+
+<p>The main Maps Service API features are:</p>
+<ul>
+ <li>Discovering and selecting a map provider
+ <p>You can also specifying basic maps preferences.</p></li>
+ <li><a href="#geocode">Geocoding and reverse geocoding</a>
+ <p>You can get the geocode (geographical coordinates) of a place based on an address, or the reverse geocode (address) based on the geographical coordinates (latitude and longitude).</p></li>
+ <li><a href="#search_place">Searching places</a>
+ <p>You can query place information, corresponding to specified search keys and filters.</p></li>
+ <li><a href="#search_route">Searching routes</a>
+ <p>You can query a route that defines a path between a start and destination point, passing optionally through specific intermediate locations and calculated using a specified transportation method.</p></li>
+ <li><a href="#response">Handling map service responses</a>
+ <p>You can receive responses from the map service through various callbacks.</p></li>
+</ul>
- <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
- <script type="text/javascript" src="../../scripts/showhide.js"></script>
- <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>
+<p>The following map providers are supported:</p>
+ <ul>
+ <li><a href="https://developer.here.com" target="_blank">HERE Maps</a> based on the <a href="https://developer.here.com/rest-apis" target="_blank">HERE REST API</a>.</li>
+ <li><a href="http://developer.mapquest.com" target="_blank">MapQuest</a> based on the <a href="http://open.mapquestapi.com" target="_blank">Open MapQuest API</a>.</li>
+ </ul>
+
+<table class="note">
+<tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">To use the map service, you must get an access key to the map provider from the provider developer site. The service must be used according to the provider's Term of Use.</td>
+ </tr>
+ </tbody>
+ </table>
+
+<h2 id="geocode">Geocodes</h2>
+ <p>The following geocode request types are provided:</p>
+ <ul>
+ <li>Get place coordinates based on a free text address.</li>
+ <li>Get place coordinates based on a free text address within a specified geographical area.</li>
+ <li>Get place coordinates based on a structured address (a structure with fields, such as city, street, and building number).</li>
+ </ul>
+ <p>The geocode response is a geographical location, specified with latitude and longitude values.</p>
+ <p>Only 1 type of reverse geocode request is provided:</p>
+ <ul>
+ <li>Get a structured address based on place coordinates.</li>
+ </ul>
+ <p>The reverse geocode response is structured address information, comprising, for example, of a street name, building number, city name, postal code, district name, state name, and country.</p>
+
+
+<h2 id="search_place">Place Search</h2>
+ <p>The following place search request types are provided:</p>
+ <ul>
+ <li>Query place information within a specific distance around a specified geographical location.</li>
+ <li>Query place information within a specified geographical area.</li>
+ <li>Query place information based on a free text address within a specified geographical area.</li>
+ </ul>
+ <p>The place search response is structured place information, comprising, for example, of a place ID, name and URL, address, geographical location and distance from the center of the search area, place category, rating, review, and image.</p>
+
+ <table class="note">
+<tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">Depending on the map provider, some types of place information can be unavailable.</td>
+ </tr>
+ </tbody>
+ </table>
+
+<h2 id="search_route">Route Search</h2>
+ <p>The following route search request types are provided:</p>
+ <ul>
+ <li>Query a route from a starting point to a destination specified as a geographical location.</li>
+ <li>Query a route passing through a number of geographical locations.</li>
+ </ul>
+ <p>The route calculation response is structured route information, comprising, for example, of a route ID, geographical coordinates of the start and destination point, route bounding box, transportation mode, and total distance and duration.</p>
+
+
+ <table class="note">
+<tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">Depending on the map provider, the route can be presented as a list of geographical points or segments. The segment list can also be presented as a list of geographical points or maneuvers.</td>
+ </tr>
+ </tbody>
+ </table>
+
+
+
+<h2 id="response" name="response">Map Service Responses</h2>
+
+ <p>The asynchronous map service responses are implemented with callback interfaces (functions whose names end with <span style="font-family: Courier New,Courier,monospace;">cb</span>).</p>
+ <p>To handle the responses, you can use the map service response states:</p>
+ <ul>
+ <li><span style="font-family: Courier New,Courier,monospace;">MAPS_SERVICE_ERROR_NONE</span>: The map service is working correctly.</li>
+ <li><span style="font-family: Courier New,Courier,monospace;">MAPS_ERROR_PERMISSION_DENIED</span>: The user has revoked a permission for the application to use the map service.</li>
+ <li><span style="font-family: Courier New,Courier,monospace;">MAPS_ERROR_NOT_SUPPORTED</span>: The map request or feature you are trying to use is not supported in the map provider.</li>
+ <li><span style="font-family: Courier New,Courier,monospace;">MAPS_ERROR_NETWORK_UNREACHABLE</span>, <span style="font-family: Courier New,Courier,monospace;">MAPS_ERROR_SERVICE_NOT_AVAILABLE</span>, or <span style="font-family: Courier New,Courier,monospace;"> MAPS_ERROR_CONNECTION_TIME_OUT</span>: The map provider cannot access the map server for various reasons.</li>
+ </ul>
+
+
+</div></div></div>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+<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>
+<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>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
</div>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.tutorials/html/native/messaging/email_tutorial_n.htm">Email Tutorial</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MESSAGING__EMAIL__MODULE.html">Email API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MESSAGING__EMAIL__MODULE.html">Email API for Mobile Native</a></li>
</ul>
</div></div>
</div>
<h1>Email</h1>
<p>Email is a method of exchanging digital messages. Email systems are based on a store-and-forward model, in which email server computer systems accept, forward, deliver, and store messages on behalf of users, who only need to connect to the email infrastructure, typically an email server, with a network-enabled device for the duration of a message submission or retrieval.</p>
+ <table class="note">
+<tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">This feature is supported in mobile applications only.</td>
+ </tr>
+ </tbody>
+ </table>
<p>Email provides features for composing, saving, and sending email messages using an SMTP (SMTP used for sending emails through the Internet is described in the RFC5321/5322 standards). It provides services to applications that make use of the email service.</p>
<p>The Email API can be utilized by any component in the application layer which facilitates the end user to perform email messaging. For example, the Email APIs can be invoked by a multimedia module when the user wants to send a media file through email, or by an email application when the user tries to send an email message.</p>
-
<p class="figure">Figure: Email service architecture</p>
- <p
style="text-align:center;"><img alt="Email service architecture" src="../../images/email_architecture.png" /></p>
+ <p class="figure">Figure: Email service architecture</p>
+ <p
align="center"><img alt="Email service architecture" src="../../images/email_architecture.png" /></p>
<p>The main features of the Email API include:</p>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.tutorials/html/native/messaging/sms_mms_tutorial_n.htm">Messages Tutorial</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MESSAGING__MESSAGES__MODULE.html">Messages API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MESSAGING__MESSAGES__MODULE.html">Messages API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MESSAGING__MESSAGES__MODULE.html">Messages API for Wearable Native</a></li>
</ul>
</div></div>
</div>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.tutorials/html/native/messaging/messaging_tutorials_n.htm">Messaging Tutorials</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MESSAGING__FRAMEWORK.html">Messaging API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MESSAGING__FRAMEWORK.html">Messaging API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MESSAGING__FRAMEWORK.html">Messaging API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<p>The main messaging features are:</p>
<ul>
<li><a href="messages_n.htm">Messages</a> <p>Provides you with access to the device text and multimedia messaging capabilities.</p></li>
- <li><a href="email_n.htm">Email</a><p>Allows you to create and send emails.</p></li>
<li><a href="push_n.htm">Push</a><p>Allows you to push events from an application server to your application on a Tizen device.</p></li>
</ul>
+ <p>The following guides apply in <span style="color: red">mobile applications only</span>:</p>
+ <ul>
+ <li><a href="email_n.htm">Email</a><p>Allows you to create and send emails.</p></li>
+ </ul>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.tutorials/html/native/messaging/push_tutorial_n.htm">Push Tutorial</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MESSAGING__PUSH__PUBLIC__MODULE.html">Push API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MESSAGING__PUSH__PUBLIC__MODULE.html">Push API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MESSAGING__PUSH__PUBLIC__MODULE.html">Push API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<p>Push enables you to push events from an application server to your application on a Tizen device.</p>
<p class="figure">Figure: Push messaging service</p>
- <p
style="text-align:center;"><img alt="Push messaging service" src="../../images/ui_push_message.png" /></p>
+ <p
align="center"><img alt="Push messaging service" src="../../images/ui_push_message.png" /></p>
<p>Once your application is successfully registered in the push server through the push daemon on the device, your application server can send push messages to the application in that particular device.</p>
<p>When a push message arrives when the application is running, it is automatically delivered to the application. If not, the daemon makes a sound or vibrates and adds a ticker or a badge notification to notify the user. By touching this notification, the user can check the message. The application server may send a message with a <span style="font-family: Courier New,Courier,monospace">LAUNCH</span> option. In this case, the daemon forcibly launches the application and hands over the message to the application as an <a href="../app/application_n.htm#app_controls">app control</a>.</p>
<h2 id="service" name="service">Service Architecture</h2>
<p>The following figure illustrates the service architecture of the Tizen push messaging service.</p>
<p class="figure">Figure: Service architecture</p>
- <p
style="text-align:center;"><img alt="Service architecture" src="../../images/service_architecture.png" /></p>
+ <p
align="center"><img alt="Service architecture" src="../../images/service_architecture.png" /></p>
<p>The following steps illustrate a typical scenario for using the push messaging service on a Tizen device:</p>
<ol>
<li>The application on the device registers for the push messaging service.</li>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.tutorials/html/native/multimedia/camera_tutorial_n.htm">Camera Tutorial</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html">Camera API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html">Camera API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html">Camera API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<p>Tizen offers basic camera features, including preview and capture. It allows you to capture still images with the device's internal camera and keep images on your target device.</p>
<p class="figure">Figure: Camera image examples</p>
-
<p style="text-align:center;"><img src="../../images/camera_images.png" alt="Camera image examples" /></p>
+
<p align="center"><img src="../../images/camera_images.png" alt="Camera image examples" /></p>
<p>The main features of the Camera API include:</p>
<ul>
<p>The following figure illustrates the camera state changes in the normal mode:</p>
<p class="figure">Figure: Camera states in the normal mode</p>
- <p
style="text-align:center;"><img src="../../images/using_camera_states.png" alt="Camera states in the normal mode" /></p>
+ <p
align="center"><img src="../../images/using_camera_states.png" alt="Camera states in the normal mode" /></p>
<p>To display the camera preview, use the <span style="font-family: Courier New,Courier,monospace">StartPreview()</span> function.</p>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.tutorials/html/native/multimedia/image_util_tutorial_n.htm">Image Util Tutorial</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__IMAGE__UTIL__MODULE.html">Image Util API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__IMAGE__UTIL__MODULE.html">Image Util API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__IMAGE__UTIL__MODULE.html">Image Util API for Wearable Native</a></li>
</ul>
</div></div>
</div>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.tutorials/html/native/multimedia/media_codec_tutorial_n.htm">Media Codec Tutorial</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CODEC__MODULE.html">Media Codec API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CODEC__MODULE.html">Media Codec API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__CODEC__MODULE.html">Media Codec API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<p>The following figures illustrate the general media state changes.</p>
<p class="figure">Figure: Media state changes</p>
- <p
style="text-align:center;"><img src="../../images/codec_state.png" alt="Media state changes" /></p>
+ <p
align="center"><img src="../../images/codec_state.png" alt="Media state changes" /></p>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.tutorials/html/native/multimedia/media_tools_tutorial_n.htm">Media Tool Tutorial</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__TOOL__MODULE.html">Media Tool API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__TOOL__MODULE.html">Media Tool API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__TOOL__MODULE.html">Media Tool API for Wearable Native</a></li>
</ul>
</div></div>
</div>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.tutorials/html/native/multimedia/metadata_extractor_tutorial_n.htm">Metadata Extractor Tutorials</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__METADATA__EXTRACTOR__MODULE.html">Metadata Extractor API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__METADATA__EXTRACTOR__MODULE.html">Metadata Extractor API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__METADATA__EXTRACTOR__MODULE.html">Metadata Extractor API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<p>Media files, such as mp3 and mp4 files, contain metadata. Metadata extractor enables you to extract metadata from the media files.</p>
<p class="figure">Figure: Getting metadata</p>
-
<p style="text-align:center;"><img src="../../images/metadata.png" alt="Getting metadata" /></p>
+
<p align="center"><img src="../../images/metadata.png" alt="Getting metadata" /></p>
<p>The metadata extractor can only be used with video and audio files only. It is not supported in the image files.</p>
<p>The following table lists the extractable metadata.</p>
<p>Enables you to play WAV files.</p></li>
<li><a href="sound_manager_n.htm">Sound Manager</a>
<p>Enables you to control the audio behavior of your application.</p></li>
+ <li><a href="screen_mirroring_n.htm">Screen Mirroring Sink</a>
+ <p>Enables you to mirror the device screen and sound to another device wirelessly.</p></li>
</ul>
<p>The following guides apply in <span style="color: red">mobile applications only</span>:</p>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.tutorials/html/native/multimedia/player_tutorial_n.htm">Player Tutorial</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__PLAYER__MODULE.html">Player API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__PLAYER__MODULE.html">Player API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__PLAYER__MODULE.html">Player API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<p>Enables you to set specific URLs for streaming media playback.</p></li>
</ul>
-<p>The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__PLAYER__MODULE.html">Player</a> API enables your application to play video and sound. It supports 3 content formats: file, network stream, and memory. It also provides the following features:</p>
+<p>The Player API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__PLAYER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__PLAYER__MODULE.html">wearable</a> applications) enables your application to play video and sound. It supports 3 content formats: file, network stream, and memory. It also provides the following features:</p>
<ul><li>Operating general controls for the <a href="#audio">audio</a> or <a href="#video">video</a> content, such as play, pause, resume, and stop</li>
<li>Moving the audio or video content based on time</li>
<li>Playing multiple <a href="#stream">audio streams</a></li></ul>
<p>The maximum count of a player instance is limited by the system and multimedia resources. The maximum count is a system-wide count and it can be applied depending on the CPU model, CPU speed, CPU core number, CPU load from other applications, and the available memory. Thus, the exact count can be smaller than the maximum count, in which case the prepare functions fail. A reasonable working player count is under 10.</p>
-<p>The player works based on the audio session manager policy. This means that an application can be interrupted by another application if a resource is in conflict or it has an audio policy rule to follow. You can change the session's property directly by using the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__MODULE.html">Sound Manager</a> API.</p>
+<p>The player works based on the audio session manager policy. This means that an application can be interrupted by another application if a resource is in conflict or it has an audio policy rule to follow. You can change the session's property directly by using the Sound Manager API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__SOUND__MANAGER__MODULE.html">wearable</a> applications).</p>
<p>The callback interface specifies the functions used to notify the player status during playback events. Since the player engine works asynchronously, you must implement this listener to ensure that the player flows correctly. When each player operation is completed, an event is generated, and the <span style="font-family: Courier New,Courier,monospace;">player_completed_cb()</span> function is called. If an error occurs in the player engine, you are notified if you have registered the <span style="font-family: Courier New,Courier,monospace;">player_error_cb()</span> callback.</p>
<p>If the player state is changed to <span style="font-family: Courier New,Courier,monospace;">ready</span>, the multimedia resource is available and you can get content information of the media. You can also get content information in a playing state in some cases of playback streaming.</p>
<p>The following figure illustrates the general player state changes:</p>
<p class="figure">Figure: Player state changes</p>
- <p><img src="../../images/using_players_state_changes.png" alt="Player state changes" style="display: block; text-align: center; margin-left: auto; margin-right: auto;"/></p>
+ <p
align="center"><img src="../../images/using_players_state_changes.png" alt="Player state changes" style="display: block; text-align: center; margin-left: auto; margin-right: auto;"/></p>
<p>The following figure illustrates what happens when the player gets interrupted by the system:</p>
<p class="figure">Figure: Player states when interrupted by system</p>
- <p
style="text-align: center;"><img alt="Player states when interrupted by system" src="../../images/using_players_interrupted_state.png"/></p>
+ <p
align="center"><img alt="Player states when interrupted by system" src="../../images/using_players_interrupted_state.png"/></p>
<h2 id="video" name="video">Handling Video</h2>
<p>Tizen enables your application to play video, and it uses its own user surface. The surface requires a drawing area, so you have to get an overlay region and set it to the player instance to display the drawing area:</p>
<p>In case of a video interruption, the state can be <span style="font-family: Courier New,Courier,monospace;">READY</span> due to the resource restriction in the system. </p>
<p>The following figure illustrates what happens when the player gets interrupted by the system.</p>
-
<p class="figure">Figure: Player states when interrupted by system</p>
-<p
style="text-align: center;"><img alt="Player states when interrupted by system" src="../../images/using_videoplayer_interrupted_state.png"/></p>
+<p class="figure">Figure: Player states when interrupted by system</p>
+<p
align="center"><img alt="Player states when interrupted by system" src="../../images/using_videoplayer_interrupted_state.png"/></p>
<h2 id="features" name="features">Features</h2>
The main features of the Player API include:
<ul>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.tutorials/html/native/multimedia/radio_tutorial_n.htm">Radio Tutorial</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__RADIO__MODULE.html">Radio API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__RADIO__MODULE.html">Radio API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__RADIO__MODULE.html">Radio API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<p>The following figure illustrates the general radio state changes.</p>
<p class="figure">Figure: Radio state changes</p>
- <p
style="text-align:center;"><img src="../../images/radio_state_changes.png" alt="Radio state changes" /></p>
+ <p
align="center"><img src="../../images/radio_state_changes.png" alt="Radio state changes" /></p>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
</div></div></div>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.tutorials/html/native/multimedia/recorder_tutorial_n.htm">Recorder Tutorial</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__RECORDER__MODULE.html">Recorder API</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html">Camera API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__RECORDER__MODULE.html">Recorder API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html">Camera API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__RECORDER__MODULE.html">Recorder API for Wearable Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html">Camera API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<p>The following figure illustrates the general recorder state changes.</p>
<p class="figure">Figure: Recorder states</p>
- <p
style="text-align:center;"><img src="../../images/using_recorder_states.png" alt="Recorder states" /></p>
+ <p
align="center"><img src="../../images/using_recorder_states.png" alt="Recorder states" /></p>
<table class="note">
<tbody>
<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>Screen Mirroring</title>
+ <title>Screen Mirroring Sink</title>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
</div>
<div id="toc_border"><div id="toc">
- <p class="toc-title">Content</p>
- <ul class="toc">
- <li><a href="#screen_mirroring_sink">Screen Mirroring sink</a></li>
- </ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a href="../../../../org.tizen.tutorials/html/native/multimedia/screen_mirroring_n.htm">Screen Mirroring Tutorial</a></li>
- <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__SCMIRRORING_SINK__MODULE.html">Screen Mirroring sink API</a></li>
+ <li><a href="../../../../org.tizen.tutorials/html/native/multimedia/screen_mirroring_tutorial_n.htm">Screen Mirroring Sink Tutorial</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SCMIRRORING_SINK__MODULE.html">Screen Mirroring Sink API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__SCMIRRORING_SINK__MODULE.html">Screen Mirroring Sink API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
-<h1>Screen Mirroring</h1>
+<h1>Screen Mirroring Sink</h1>
- <p>Screen Mirroring enables your application to mirror device’s screen and sound to other device wirelessly. It follows Wi-Fi Display Technical Specification and supports a feature as sink.</p>
- <p>The main features of Screen Mirroring API include :</p>
+ <p>You can mirror the device screen and sound to another device wirelessly using the screen mirroring feature. It follows the Wi-Fi Display Technical Specification and supports the feature as a sink, which receives shared data from a source device that supports the Wi-Fi Display, and displays it.</p>
+ <p>The main features of the Screen Mirroring Sink API include:</p>
<ul>
- <li><a href="#screen_mirroring_sink">Screen Mirroring sink</a>
- <p>The screen mirroring sink receives shared data from the source device which support Wi-Fi Display and display it.</p></li>
- </ul>
- <h2 id="screen_mirroring_sink" name="screen_mirroring_sink">Screen Mirroring sink</h2>
- <p>The screen mirroring sink receives shared data from the source device which support Wi-Fi Display and display it.</p>
- <p>The screen mirroring sink API gives you the ability to connect / disconnect with screen mirroring source, start / pause / resume screen mirroring sink, set resolution or display, register callback function to check state change.</P>
- <p>You should register the callback function using <span style="font-family: Courier New,Courier,monospace">scmirroring_sink_set_state_changed_cb()</span> to check screen mirroring state. The callback is called for state and error of screen mirroring.</p>
- <p>All functions that change the state are synchronous except <span style="font-family: Courier New,Courier,monospace">scmirroring_sink_connect()</span>, <span style="font-family: Courier New,Courier,monospace">scmirroring_sink_start()</span>, <span style="font-family: Courier New,Courier,monospace">scmirroring_sink_pause()</span>, and <span style="font-family: Courier New,Courier,monospace">scmirroring_sink_resume()</span>. </p>
- <p>Thus the result is passed to the application via the callback mechanism.</p>
- <br />
-
- <p>The following figure illustrates the state diagram of screen mirroring sink:</p>
- <p class="figure">Figure 1 The state diagram of screen mirroring sink</p>
- <p style="text-align:center;"><img src="../../images/capi_media_screen_mirroring_sink_state_diagram.png" alt="The state diagram of screen mirroring sink" /></p>
+ <li>Managing the connection to the screen mirroring source
+ <p>You can connect to and disconnect from a screen mirroring source, and start, pause, and resume the screen mirroring sink.</p>
+ </li>
+ <li>Setting the properties
+ <p>You can set the resolution or display for the mirror.</p>
+ </li>
+ <li>Monitoring state changes in the screen mirroring source
+ <p>To track state changes, you can register a callback with the <span style="font-family: Courier New,Courier,monospace">scmirroring_sink_set_state_changed_cb()</span> function. The callback is triggered when the screen mirroring state changes or an error occurs.</p>
+ <p>Since all functions that change the state are synchronous (except for <span style="font-family: Courier New,Courier,monospace">scmirroring_sink_connect()</span>, <span style="font-family: Courier New,Courier,monospace">scmirroring_sink_start()</span>, <span style="font-family: Courier New,Courier,monospace">scmirroring_sink_pause()</span>, and <span style="font-family: Courier New,Courier,monospace">scmirroring_sink_resume()</span>) most function results are passed to the application through the callback mechanism.</p>
+ </li>
+ </ul>
+ <p>The following figures illustrates the state and function call diagrams of the screen mirroring sink.</p>
+ <p class="figure">Figure: State diagram</p>
+ <p align="center"><img src="../../images/capi_media_screen_mirroring_sink_state_diagram.png" alt="State diagram" /></p>
- <p>The following figure illustrates the function call diagram of screen mirroring sink:</p>
- <p class="figure">Figure 2 The function call diagram of screen mirroring sink</p>
- <p style="text-align:center;"><img src="../../images/screen_mirroring_sink_call_diagram.png" alt="The function call diagram of screen mirroring sink" /></p>
+ <p class="figure">Figure: Function call diagram</p>
+ <p align="center"><img src="../../images/screen_mirroring_sink_call_diagram.png" alt="Function call diagram" /></p>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.tutorials/html/native/multimedia/sound_manager_tutorial_n.htm">Sound Manager Tutorial</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__MODULE.html">Sound Manager API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__MODULE.html">Sound Manager API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__SOUND__MANAGER__MODULE.html">Sound Manager API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<p>The alarm, notification, emergency, and VOIP sessions are prioritized over the media session. For example, when an alarm is activated while you are playing a media file, the system pauses the media session, and the alarm session gets the permission to play its sound.</p>
-<p>You can set options for how to start a new media session or respond to an audio interruption during an active media session using the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__SESSION__MODULE.html#ga26a030df874992a461af04255c6c3eef">sound_session_option_for_start_e</a> and <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__SESSION__MODULE.html#ga132bd49bd7d0f5037cc292f9c7ad1c32">sound_session_option_for_during_play_e</a> enumerators. A media session is not able to interrupt or block the other types of sound sessions, no matter what options you have set.</p>
+<p>You can set options for how to start a new media session or respond to an audio interruption during an active media session using the <span style="font-family: Courier New, Courier, monospace">sound_session_option_for_start_e</span> (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__SESSION__MODULE.html#ga26a030df874992a461af04255c6c3eef">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__SOUND__MANAGER__SESSION__MODULE.html#ga26a030df874992a461af04255c6c3eef">wearable</a> applications) and <span style="font-family: Courier New, Courier, monospace">sound_session_option_for_during_play_e</span> (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__SESSION__MODULE.html#ga132bd49bd7d0f5037cc292f9c7ad1c32">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__SOUND__MANAGER__SESSION__MODULE.html#ga132bd49bd7d0f5037cc292f9c7ad1c32">wearable</a> applications) enumerators. A media session is not able to interrupt or block the other types of sound sessions, no matter what options you have set.</p>
-<p>You can also set options for resuming the media session when the interruption ends by using the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__SESSION__MODULE.html#ga20d1d7fa84dc322f03b58d42806cd9d9">sound_session_option_for_resumption_e</a> enumerator. The sound system notifies the media session when the interruption ends, and you are able to resume your session.</p>
+<p>You can also set options for resuming the media session when the interruption ends by using the <span style="font-family: Courier New, Courier, monospace">sound_session_option_for_resumption_e</span> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__SESSION__MODULE.html#ga20d1d7fa84dc322f03b58d42806cd9d9">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__SOUND__MANAGER__SESSION__MODULE.html#ga20d1d7fa84dc322f03b58d42806cd9d9">wearable</a> applications). The sound system notifies the media session when the interruption ends, and you are able to resume your session.</p>
<h2 id="query" name="query">Sound Device Query</h2>
<p>The audio behavior of your application must differ in accordance with the various sound devices that are connected.</p>
<p>To get a notification when the sound device connection or information has changed, register the <span style="font-family: Courier New,Courier,monospace">sound_manager_set_device_connected_cb()</span> and <span style="font-family: Courier New,Courier,monospace">sound_manager_set_device_information_changed_cb()</span> callbacks. The initial state of the connected sound device is deactivated.</p>
-<p>When getting a sound device list or setting callbacks, use the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__DEVICE__MODULE.html#ga5938ab712f44677173b74ec226aa25b3">sound_device_mask_e</a> enumerator to specify the sound devices that you want. With a combination of the masks, you can to narrow down the sound devices to those you actually need.</p>
+<p>When getting a sound device list or setting callbacks, use the <span style="font-family: Courier New, Courier, monospace">sound_device_mask_e</span> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__DEVICE__MODULE.html#ga5938ab712f44677173b74ec226aa25b3">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__SOUND__MANAGER__DEVICE__MODULE.html#ga5938ab712f44677173b74ec226aa25b3">wearable</a> applications) to specify the sound devices that you want. With a combination of the masks, you can to narrow down the sound devices to those you actually need.</p>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.tutorials/html/native/multimedia/tone_player_tutorial_n.htm">Tone Player Tutorial</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__TONE__PLAYER__MODULE.html">Tone Player API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__TONE__PLAYER__MODULE.html">Tone Player API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__TONE__PLAYER__MODULE.html">Tone Player API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<p>The following figures illustrate the general tone player states, and how the state changes when your application calls the Tone player API.</p>
<p class="figure">Figure: Tone player states</p>
- <p
style="text-align:center;"><img src="../../images/tone.png" alt="Tone player states" /></p>
+ <p
align="center"><img src="../../images/tone.png" alt="Tone player states" /></p>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
</div>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.tutorials/html/native/multimedia/video_util_tutorial_n.htm">Video Util Tutorial</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__VIDEO__UTIL__MODULE.html">Video Util API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__VIDEO__UTIL__MODULE.html">Video Util API for Mobile Native</a></li>
</ul>
</div></div>
</div>
<li>Trim
<p>A trim chapter is available in the video editor.</p></li></ul>
+ <table class="note">
+<tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">This feature is supported in mobile applications only.</td>
+ </tr>
+ </tbody>
+ </table>
+
<p>The following figure shows the result of the video file size change (due to scaling and container and codec format change).</p>
<p class="figure">Figure: Transcoder</p>
-
<p style="text-align:center;"><img src="../../images/transcoder.png" alt="Transcoder" /></p>
+
<p align="center"><img src="../../images/transcoder.png" alt="Transcoder" /></p>
<p>The following table lists the supported audio and video codecs (decoder).</p>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.tutorials/html/native/multimedia/wav_player_tutorial_n.htm">WAV Player Tutorial</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__WAV__PLAYER__MODULE.html">WAV Player API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__WAV__PLAYER__MODULE.html">WAV Player API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__WAV__PLAYER__MODULE.html">WAV Player API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<p>The following figure illustrates the general WAV player state changes.</p>
<p class="figure">Figure: WAV player state changes</p>
- <p
style="text-align:center;"><img src="../../images/wav_player_state_changes.png" alt="WAV player state changes" /></p>
+ <p
align="center"><img src="../../images/wav_player_state_changes.png" alt="WAV player state changes" /></p>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
</li>
<li>Controlling remote audio and video devices with Bluetooth AVRCP
<p>The Bluetooth AVRCP API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__BLUETOOTH__AVRCP__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__BLUETOOTH__AVRCP__MODULE.html">wearable</a> applications) provides functions for remotely controlling audio and video devices.</p>
- <p>Bluetooth AVRCP is used with A2DP. You can handle remote controls(such as play, pause, stop, equalizer, repeat, shuffle, and scan) through AVRCP.</p></li>
+ <p>Bluetooth AVRCP is used with A2DP. You can handle remote controls (such as play, pause, stop, equalizer, repeat, shuffle, and scan) through AVRCP.</p></li>
</ul>
<p>Bluetooth use is based on profiles. Tizen Bluetooth features support the Audio, GATT, HDP, HID, and OPP client and server profiles.</p>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.tutorials/html/native/network/connection_tutorial_n.htm">Connection Tutorial</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__CONNECTION__MODULE.html">Connection API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__CONNECTION__MODULE.html">Connection API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__CONNECTION__MODULE.html">Connection API for Wearable Native</a></li>
</ul>
</div></div>
</div>
</table>
<h2 id="manager" name="manager">Connection Manager</h2>
-<p>The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__CONNECTION__MANAGER__MODULE.html">Connection Manager</a> API provides functions for managing data connections. It allows you to get a state of the connection interface such as Bluetooth, cellular, and Wi-Fi. It also contains functions for getting the IP address, proxy information, and gateway information.</p>
+<p>The Connection Manager API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__CONNECTION__MANAGER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__CONNECTION__MANAGER__MODULE.html">wearable</a> applications) provides functions for managing data connections. It allows you to get a state of the connection interface such as Bluetooth, cellular, and Wi-Fi. It also contains functions for getting the IP address, proxy information, and gateway information.</p>
-<p>The Connection Manager API is related with <a href="http://curl.haxx.se/libcurl/" target="_blank">libcurl</a> and sockets. After a network connection is established, you can create a socket on the kernel Linux stack to be used directly or by libcurl or any other network library.</p>
+<p>The Connection Manager API is related with <a href="http://curl.haxx.se/libcurl/" target="_blank">libcurl</a> and sockets. After a network connection is established, you can create a socket on the kernel Linux stack to be used directly or by libcurl or any other network library. If you want to create a socket directly without libcurl, you must check whether you are using the IPv4 or IPv6 environment, and create an applicable IP socket.</p>
<p>The Connection Manager provides the following typedefs and enumerators for managing data connections:</p>
<p>Enumeration for the address family. It provides IPv4 and IPv6. You can use it as a parameter when you get the IP address of the current connection or proxy.</p></li></ul>
<h2 id="con_profile" name="con_profile">Connection Profile</h2>
-<p>The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__CONNECTION__PROFILE__MODULE.html">Connection Profile</a> API provides functions for mapping a connection profile. It allows you to use a <span style="font-family: Courier New,Courier,monospace">connection_profile_h</span> handle for getting details about the connection.</p>
+<p>The Connection Profile API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__CONNECTION__PROFILE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__CONNECTION__PROFILE__MODULE.html">wearable</a> applications) provides functions for mapping a connection profile. It allows you to use a <span style="font-family: Courier New,Courier,monospace">connection_profile_h</span> handle for getting details about the connection.</p>
<p>Each profile is defined by a set of configuration information defined in the <span style="font-family: Courier New,Courier,monospace">connection_profile_h</span> handle. The profile provides different information according to the connection type (such as Bluetooth, cellular, ethernet, and Wi-Fi).</p>
<h2 id="statistics" name="statistics">Connection Statistics</h2>
-<p>Use the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__CONNECTION__STATISTICS__MODULE.html">Connection Statistics</a> API to gather and reset statistics on the network usage, such as the amount of sent or received data. The statistics also provide functions for getting the cumulative size of packets sent or received since the last reset based on the operation mode, such as packet switching (PS).</p>
+<p>Use the Connection Statistics API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__CONNECTION__STATISTICS__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__CONNECTION__STATISTICS__MODULE.html">wearable</a> applications) to gather and reset statistics on the network usage, such as the amount of sent or received data. The statistics also provide functions for getting the cumulative size of packets sent or received since the last reset based on the operation mode, such as packet switching (PS).</p>
<table class="note">
<tbody>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.tutorials/html/native/network/network_tutorials_n.htm">Network Tutorials</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__FRAMEWORK.html">Network API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__FRAMEWORK.html">Network API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__FRAMEWORK.html">Network API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<li><a href="connection_n.htm">Connection</a> <p>Enables you to get information about the connected network, set up and configure network connections, and track information, such as sent and received size.</p></li>
<li><a href="bluetooth_n.htm">Bluetooth</a><p>Enables you to use Bluetooth functionalities, such as managing the local Bluetooth adapter, bonding, and exchanging data between Bluetooth-enabled devices.</p></li>
<li><a href="nfc_n.htm">NFC</a><p>Enables you to use Near Field Communication (NFC) functionalities, such as reading and writing tags, and emulating a smart card.</p></li>
+ <li><a href="smartcard_n.htm">SmartCard</a><p>Enables you to access secure elements (SE) through smart card features.</p></li>
<li><a href="wifi_n.htm">Wi-Fi</a><p>Enables you to connect to a Wireless Local Area Network (WLAN) and transfer data over the network.</p></li>
+ </ul>
+<p>The following guides apply in <span style="color: red">mobile applications only</span>:</p>
+ <ul>
<li><a href="wifi_direct_n.htm">Wi-Fi Direct</a><p>Enables you to connect to Wi-Fi Direct™ devices and manage Wi-Fi Direct™ connections.</p></li>
</ul>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.tutorials/html/native/network/nfc_tutorial_n.htm">NFC Tutorial</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__NFC__MODULE.html">NFC API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__NFC__MODULE.html">NFC API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__NFC__MODULE.html">NFC API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<ul>
<li>NFC management
- <p>The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__NFC__MANAGER__MODULE.html">Manager</a> API provides functions, for example, for:</p>
+ <p>The Manager API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__NFC__MANAGER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__NFC__MANAGER__MODULE.html">wearable</a> applications) provides functions, for example, for:</p>
<ul>
<li>Initializing and deinitializing NFC</li>
<li>Enabling and disabling NFC</li>
<p>The NFC Data Exchange Format (NDEF) is a packet message format used in the reader/writer and peer-to-peer modes.</p>
-<p>The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__NFC__NDEF__MODULE.html">NDEF</a> API provides functions for:</p>
+<p>The NDEF API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__NFC__NDEF__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__NFC__NDEF__MODULE.html">wearable</a> applications) provides functions for:</p>
<ul>
<li>Creating NDEF records</li>
</ul>
</li>
<li>Reader/writer mode
- <p>The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__NFC__TAG__MODULE.html">TAG</a> API provides functions, for example, for:</p>
+ <p>The TAG API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__NFC__TAG__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__NFC__TAG__MODULE.html">wearable</a> applications) provides functions, for example, for:</p>
<ul>
<li>Retrieving the tag type</li>
</ul>
</li>
<li>Peer-to-peer mode
- <p>The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__NFC__P2P__MODULE.html">Peer to Peer</a> API provides functions for:</p>
+ <p>The Peer to Peer API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__NFC__P2P__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__NFC__P2P__MODULE.html">wearable</a> applications) provides functions for:</p>
<ul>
<li>Sending an NDEF message to a peer device</li>
</li>
<li>Card emulation mode
<p>The card emulation mode allows an NFC device to function as a smart card. The mode provides access to secure elements (SEs).</p>
+<p>The NFC controller in the device routes all data from the reader directly to the secure element, and an applet handles all of the data in the SE. The user does not participate at all in the operation.</p>
-<p>The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__NFC__SE__MODULE.html">Card Emulation</a> API provides functions for:</p>
+<p class="figure">Figure: Traditional card emulation</p>
+<p align="center"> <img alt="Traditional card emulation" src="../../images/nfc_card_emulation.png" /> </p>
+
+<p>The Card Emulation API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__NFC__SE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__NFC__SE__MODULE.html">wearable</a> applications) provides functions for:</p>
<ul>
<li>Enabling and disabling the card emulation mode</li>
</tbody>
</table>
</li>
+ <li>Host-based card emulation (HCE)
+<p>HCE is on-device technology that permits a phone to perform card emulation on an NFC-enabled device without relying on access to a secure element (SE). The data is routed to the user space on which Tizen applications reside, instead of routing the data to a secure element.</p>
+
+<p class="figure">Figure: Card emulation with HCE</p>
+<p align="center"> <img alt="Card emulation with HCE" src="../../images/nfc_card_emulation_hce.png" /> </p>
+<p>HCE allows you to create your own card emulation system and bypass the SE. This approach brings 2 advantages:</p>
+
+<ul>
+<li>In case of UICC type SE, the mobile service provider is involved in the card emulation behavior. With HCE, you are free from the provider influence.</li>
+<li>You do not need SE hardware chips within the device.</li></ul>
+
+<p>The understand HCE behavior, mainly how data is internally routed to the correct application, consider how Tizen handles NFC routing:</p>
+
+<ol><li>Assume that the user has an HCE application or installs one.
+<p>The application has a "AID" value, which is stored in NFC routing table (blue arrow in the following figure).</p></li>
+<li>When the NFC reader attempts card emulation, the NFC controller checks the routing table to find the application to which the data is sent for emulation (red arrows in the following figure).</li>
+<li>When the application is uninstalled, the AID value is deleted from the routing table.</li></ol>
+
+<p class="figure">Figure: HCE routing</p>
+<p align="center"> <img alt="HCE routing" src="../../images/nfc_hce_routing.png" /> </p>
+ </li>
</ul>
+<p>NFC applications can be launched by a card emulation transaction using the application control functionalities. NFC devices can communicate with the point of sales (POS) terminals using the card emulation functionality to, for example, make a payment.</p>
+<p>If an application control with a following operation is defined in the configuration file and an event caused by the card emulation functionality occurs, the NFC application is launched:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/nfc/transaction</span>
+<p>A transaction caused by the card emulation functionality occurs.</p>
+</li>
+<li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/nfc/card_emulation/default_changed</span>
+<p>The user selects a default wallet in Tap&Pay.</p>
+</li>
+<li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/nfc/card_emulation/host_apdu_service</span>
+<p>A host APDU service (HCE) APDU event occurs.</p>
+</li>
+<li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/nfc/card_emulation/off_host_apdu_service</span>
+<p>An off-host APDU service (eSE, UICC) APDU event occurs.</p>
+</li>
+</ul>
+
+
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
</div></div></div>
--- /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>SmartCard</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="toc-navigation">
+ <div id="profile">
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+ </div>
+
+ <div id="toc_border"><div id="toc">
+ <p class="toc-title">Related Info</p>
+ <ul class="toc">
+ <li><a href="../../../../org.tizen.tutorials/html/native/network/smartcard_tutorial_n.htm">SmartCard Tutorial</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__SMARTCARD__MODULE.html">SmartCard API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__SMARTCARD__MODULE.html">SmartCard API for Wearable Native</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>SmartCard</h1>
+
+<p>Tizen enables you to use smart card functionalities, such as accessing a secure element (SE). Before using the SmartCard API, make sure you have a secure element on the device. The smart card service allow you to open a session on an SE, open a channel to the applet in the SE, send a command to the channel, and finally receive a response to the command.</p>
+
+<p>The main components of the SmartCard API include:</p>
+
+<ul>
+ <li>SE service
+ <p>The SE Service API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__SMARTCARD__SE__SERVICE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__SMARTCARD__SE__SERVICE__MODULE.html">wearable</a> applications) allows you to initialize and deinitialize the smart card features, and get the available readers. The SE service functions as a connector to the SE framework system.</p>
+ </li>
+ <li>Reader
+<p>The Reader API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__SMARTCARD__READER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__SMARTCARD__READER__MODULE.html">wearable</a> applications) allows you to access the SE connected with the selected reader. You can get the reader name and open and close sessions.</p>
+ </li>
+ <li>Session
+ <p>A session is an open connection between an application on the device and a SE. The Session API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__SMARTCARD__SESSION__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__SMARTCARD__SESSION__MODULE.html">wearable</a> applications) allows you to open and close basic and logical channels, and get ATR (answer to reset).</p>
+ </li>
+ <li>Channel
+ <p>A channel is an open connection between an application on the device and an applet on the SE. The Channel API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__SMARTCARD__CHANNEL__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__SMARTCARD__CHANNEL__MODULE.html">wearable</a> applications) allows you to close channels and transmit application protocol data units (APDU).</p>
+ </li>
+</ul>
+
+<p>The following figure illustrates the smart card service architecture in Tizen. The smart card service sends and receives data through the terminal of each SE.</p>
+<p class="figure">Figure: Smart card service architecture</p>
+<p align="center"> <img alt="Smart card service architecture" src="../../images/smartcard_architecture.png" /> </p>
+
+<p>The SmartCard API is a reference implementation of the SIMalliance Open Mobile 3.0 API specification that enables Tizen applications to communicate with secure elements. For more information, see the <a href="http://simalliance.org/" target="_blank">SimAlliance</a>. The Tizen implementation differs from the original as follows:</p>
+
+<ul><li>Only the transport layer is provided. There is no service layer support in Tizen.</li>
+<li>The "get version" function does not exist. In Tizen, version management is not performed through a function.</li>
+<li>Allocation style differs dramatically.
+The Open Mobile API can facilitate the memory management by calling the API twice (for an example, see section 6.3.1, Usage pattern, in the SIMalliance Open Mobile 3.0 API specification). However, Tizen SmartCard API does not follow this allocation style.</li>
+<li>For the <span style="font-family: Courier New,Courier,monospace;">SE Service</span> object management, Tizen provides functions for initialization and deinitialization.</li></ul>
+
+
+<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
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
</div>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.tutorials/html/native/network/wifi_direct_tutorial_n.htm">Wi-Fi Direct Tutorial</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__WIFI__DIRECT__MODULE.html">Wi-Fi Direct API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__WIFI__DIRECT__MODULE.html">Wi-Fi Direct API for Mobile Native</a></li>
</ul>
</div></div>
</div>
<p>Wi-Fi Direct™ (synonym for Wi-Fi P2P (Peer-to-Peer)) is a technology that allows you to find nearby Wi-Fi Direct™ devices and form a Wi-Fi Direct™ group to communicate over a peer-to-peer link without wireless access points (base stations) in the infrastructure mode.</p>
+ <table class="note">
+<tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">This feature is supported in mobile applications only.</td>
+ </tr>
+ </tbody>
+ </table>
+
<p>In a Wi-Fi Direct™ group, the group owner works as an access point in the Wi-Fi infrastructure mode and the other devices join the group as clients. A group can be created either by negotiation between 2 devices or in an autonomous mode by a single group owner device. In a negotiation-based group creation, 2 devices compete based on the group owner intent value and the higher intent device becomes a group owner, while the other device becomes a group client. In an autonomous group creation, a device becomes a group owner by itself without any group client.</p>
<p>A Wi-Fi Direct™ device can join an existing group by associating itself with the group owner, as long as the allowed number of clients is not exceeded.</p>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.tutorials/html/native/network/wifi_tutorial_n.htm">Wi-Fi Tutorial</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__WIFI__MODULE.html">Wi-Fi API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__WIFI__MODULE.html">Wi-Fi API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__WIFI__MODULE.html">Wi-Fi API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<h2 id="wifi_manager" name="wifi_manager">Wi-Fi Manager</h2>
-<p>The Tizen <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__WIFI__MANAGER__MODULE.html">Wi-Fi Manager</a> API provides functions for managing Wi-Fi connection. </p>
+<p>The Tizen Wi-Fi Manager API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__WIFI__MANAGER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__WIFI__MANAGER__MODULE.html">wearable</a> applications) provides functions for managing Wi-Fi connection. </p>
<p>Using the Wi-Fi Manager, you can implement features that allow the users of your application to:</p>
<ul><li>Activate and deactivate a Wi-Fi device
<h2 id="ap" name="ap">Access Point</h2>
-<p>The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__WIFI__AP__MODULE.html">Access Point</a> API provides functions for managing access points (AP). You need to create an AP handle (<span style="font-family: Courier New,Courier,monospace">wifi_ap_h</span>) for using the API functions. </p>
+<p>The Access Point API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__WIFI__AP__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__WIFI__AP__MODULE.html">wearable</a> applications) provides functions for managing access points (AP). You need to create an AP handle (<span style="font-family: Courier New,Courier,monospace">wifi_ap_h</span>) for using the API functions. </p>
<p>The Access Point API supports the following main features:</p>
<ul><li>Creating and destroying an AP handle</li>
<li>Getting the network information</li>
<li>Getting the security information</li></ul>
-<p>The following table lists the network information details you can access with the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__WIFI__AP__NETWORK__MODULE.html">Network Information</a> API.</p>
+<p>The following table lists the network information details you can access with the Network Information API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__WIFI__AP__NETWORK__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__WIFI__AP__NETWORK__MODULE.html">wearable</a> applications).</p>
<table>
<caption>
Table: Network information details
</table>
-<p>The following table lists the security information details you can access with the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__WIFI__AP__SECURITY__MODULE.html">Security Information</a> API.</p>
+<p>The following table lists the security information details you can access with the Security Information API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__WIFI__AP__SECURITY__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__WIFI__AP__SECURITY__MODULE.html">wearable</a> applications).</p>
<table>
<caption>
Table: Security information details
<h2 id="wifi_monitor" name="wifi_monitor">Wi-Fi Monitor</h2>
-<p>The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__WIFI__MONITOR__MODULE.html">Wi-Fi Monitor</a> API provides functions for monitoring the Wi-Fi connection state.</p>
+<p>The Wi-Fi Monitor API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__WIFI__MONITOR__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__WIFI__MONITOR__MODULE.html">wearable</a> applications) provides functions for monitoring the Wi-Fi connection state.</p>
<p>The Wi-Fi Monitor allows you to get the state of the Wi-Fi connection. The state can be:</p>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a href="../../../../org.tizen.tutorials/html/native/oauth2/oauth2_tutorial_n.htm">OAuth2 Tutorial</a></li>
+ <li><a href="../../../../org.tizen.tutorials/html/native/oauth2/oauth2_tutorials_n.htm">OAuth2 Tutorial</a></li>
<li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__OAUTH2__MODULE.html">OAuth2 API for Mobile Native</a></li>
<li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__OAUTH2__MODULE.html">OAuth2 API for Wearable Native</a></li>
</ul>
<div id="container"><div id="contents"><div class="content">
<h1>OAuth2</h1>
- <p>The OAuth 2.0 authorization framework enables a 3<sup>rd</sup>-party application to obtain limited access to an HTTP service, either on behalf of a resource owner by orchestrating an approval interaction between the resource owner and the HTTP service, or by allowing the 3<sup>rd</sup>-party application to obtain access on its own behalf.</p>
+ <p>The OAuth 2.0 authorization framework enables a 3<sup>rd</sup> party application to obtain limited access to an HTTP service, either on behalf of a resource owner by orchestrating an approval interaction between the resource owner and the HTTP service, or by allowing the 3<sup>rd</sup> party application to obtain access on its own behalf.</p>
<p class="figure">Figure: Protocol flow</p>
<p style="text-align: center;"> <img alt="Protocol flow" src="../../images/oauth2_protocol_flow.png" /></p>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a href="#content">Content</a></li>
+ <li><a href="#content_ns">Content</a></li>
<li><a href="#locales">Locales</a></li>
<li><a href="#locations">Locations</a></li>
<li><a href="#media">Media</a></li>
<h1>API Comparison</h1>
<p>The following table shows where to find information related to the 2.2.1 and 2.3 version APIs.</p>
+
+ <table class="note">
+<tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">This feature is supported in mobile applications only.</td>
+ </tr>
+ </tbody>
+ </table>
+
<table>
<caption>Table: API Comparison</caption>
<tbody>
<li><a href="https://developer.tizen.org/dev-guide/2.2.1/org.tizen.native.appprogramming/html/guide/ui/ui_namespace.htm" target="_blank">Guide</a>: <strong>Tizen Native App Programming > Programming Guide > UI: Creating the Application UI</strong></li>
<li><a href="https://developer.tizen.org/dev-guide/2.2.1/org.tizen.native.appprogramming/html/tutorials/ui_tutorial/ui_tutorial.htm" target="_blank">Tutorial</a>: <strong>Tizen Native App Programming > Tutorials > UI Tutorial</strong></li></ul></td>
<td><ul><li><a href="../../../../org.tizen.tutorials/html/native/graphics/graphics_tutorials_n.htm">Graphics Tutorials</a></li>
- <li><a href="../../../../org.tizen.tutorials/html/native/ui/ui_tutorials_n.htm">UI Tutorials</a></li></ul></td>
+ <li><a href="../../../../org.tizen.tutorials/html/native/ui/ui_tutorials_n.htm">UI Framework Tutorials</a></li></ul></td>
</tr>
<tr>
<td>Uix: Interaction for Advanced UX</td>
</tr>
</tbody></table>
-<h2 id="content" name="content">Content</h2>
+<h2 id="content_ns" name="content_ns">Content</h2>
<p>The Content API has the same functionality as earlier, providing features to manage the local device content. However, the API model has changed.</p>
<h3 id="create" name="create">Creating Content</h3>
if (MEDIA_CONTENT_ERROR_NONE == error)
{
// Database was successfully updated
- if(path)
+ if (path)
dlog_print(DLOG_INFO, LOG_TAG, "path : %s", path);
- if(uuid)
+ if (uuid)
dlog_print(DLOG_INFO, LOG_TAG, "uuid : %s", uuid);
- if(mime_type)
+ if (mime_type)
dlog_print(DLOG_INFO, LOG_TAG, "mime_type : %s", mime_type);
}
}
_state_changed_cb(int download_id, download_state_e state, void *user_data)
{
- // The state of the downloading process can be checked here.
+ // The state of the downloading process can be checked here
}
</pre>
<pre class="prettyprint">
static void position_updated(double latitude, double longitude, double altitude, time_t timestamp, void *user_data)
{
- // You can manipulate the obtained location information here. For example:
+ // You can manipulate the obtained location information here, for example:
dlog_print(DLOG_INFO, LOG_TAG, "The latitude value is: %d", latitude);
}
</pre>
static void _messages_incoming_cb(messages_message_h incoming_message, void *user_data)
{
- // Manage the received message here.
+ // Manage the received message here
}
</pre>
static void _search_messages_cb(messages_message_h message, int index, int result_count, int total_count, void *user_data)
{
// Manage the found matching message here
- return true; // To continue the iteration. To stop the iteration, return false
+ return true; // To continue the iteration, return true; otherwise, return false
}
</pre>
static void email_send_status(email_h email, email_sending_e result, void *user_data)
{
- if(EMAIL_SENDING_SUCCEEDED == result)
+ if (EMAIL_SENDING_SUCCEEDED == result)
{
dlog_print(DLOG_INFO, LOG_TAG, "Email was sent successfully");
}
char *message = NULL;
long long int time_stamp;
-// Retrieve the application data stored in the notification
+ // Retrieve the application data stored in the notification
push_service_get_notification_data(notification, &data);
-// Retrieve the message carried by the notification
+ // Retrieve the message carried by the notification
push_service_get_notification_message(notification, &message);
-// Retrieve the time of the notification creation
+ // Retrieve the time of the notification creation
push_service_get_notification_time(noti, &time_stamp);
}
</pre>
app_control_get_operation(app_control, &operation);
-// Retrieve notification data
+ // Retrieve notification data
notification_data = push_service_app_control_to_noti_data(app_control, operation); from the bundle.
}
</pre>
static bool account_callback(account_h account, void* user_data)
{
- // Called once for each account in the database matching the given package name.
+ // Called once for each account in the database matching the given package name
}
</pre>
<p>The <span style="font-family: Courier New,Courier,monospace">GetAccountProvidersByCapabilityN()</span> method is covered by the <span style="font-family: Courier New,Courier,monospace">account_type_query_by_provider_feature()</span> function. It does not return the list of account providers, but it invokes the callback specified as the first parameter for each account type that supports the mentioned capability. It takes the capability type as its second parameter. For example, the <span style="font-family: Courier New,Courier,monospace">"http://tizen.org/account/capability/contact"</span> or <span style="font-family: Courier New,Courier,monospace">ACCOUNT_SUPPORTS_CAPABILITY_CONTACT</span> can be used.</p>
static bool account_type_callback(account_type_h account_type, void* user_data)
{
- // Called once for each account type in the database matching given provider capability.
+ // Called once for each account type in the database matching given provider capability
}
</pre>
<p> In 2.2.1 API, it was done this way: </p>
<ol>
<li>Create the <span style="font-family: Courier New,Courier,monospace">Tizen::Web::Controls::Web *__pWeb</span> object.</li>
- <li>Set the shape with the <span style="font-family: Courier New,Courier,monospace">__pWeb->Construct()</span> function.</li>
+ <li>Set the shape with the <span style="font-family: Courier New,Courier,monospace">__pWeb->Construct()</span> function.</li>
<li>Add the control to a window with the <span style="font-family: Courier New,Courier,monospace">form->AddControl(__pWeb)</span> function.</li>
</ol>
<p>Initializing in 2.3 is vastly different. A very brief outline is below. For more information, see the tutorial.</p>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
</div>
<h1>Porting</h1>
<p>The Tizen 2.3 release comes with a new version of the native API, created to give you a possibility to make fast and lightweight native applications. It replaces the native API used in the previous versions of Tizen (2.2.1). Combined with the Enlightenment Foundation libraries (EFL), the new native API provides powerful tools to create fantastic applications for Tizen.</p>
+
+ <table class="note">
+<tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">This feature is supported in mobile applications only.</td>
+ </tr>
+ </tbody>
+ </table>
+
<p>The purpose of this guide is to allow all the current Tizen application developers to port their current 2.2.1 native API-based applications to the new 2.3 native API as simply and quickly as possible. This guide contains basic guides on how to port your 2.2.1 native API application to the 2.3 native API. To fully understand the new API, familiarize yourself with the specifications and tutorials. This guide helps you to understand the main differences and start porting your applications.</p>
<p>For information about the differences between each module of the 2.2.1 and 2.3 version APIs, see <a href="api_comparison_n.htm">API Comparison</a>.</p>
<p>The following figure shows the old 2.2.1 application life-cycle model.</p>
<p class="figure">Figure: 2.2.1 life-cycle model</p>
- <p><img src="../../images/life_cycle_model_old.png" alt="2.2.1 life-cycle model" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
+ <p
align="center"><img src="../../images/life_cycle_model_old.png" alt="2.2.1 life-cycle model" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
<p>The following figure shows the current application life-cycle model.</p>
<p class="figure">Figure: 2.3 life-cycle model</p>
- <p><img src="../../images/life_cycle_model_new.png" alt="2.3 life-cycle model" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
+ <p
align="center"><img src="../../images/life_cycle_model_new.png" alt="2.3 life-cycle model" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
<p>The following figures show the 2.2.1 and 2.3 state models.</p>
<p class="figure">Figure: 2.2.1 state model</p>
- <p><img src="../../images/state_model_old.png" alt="2.2.1 state model" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
+ <p
align="center"><img src="../../images/state_model_old.png" alt="2.2.1 state model" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
<p class="figure">Figure: 2.3 state model</p>
- <p><img src="../../images/state_model_new.png" alt="2.3 state model" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
+ <p
align="center"><img src="../../images/state_model_new.png" alt="2.3 state model" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
<p>The models have some differences, but basically they work very similarly. In both models, there are specific callbacks called during specific application states.</p>
<p>The main difference is that the old model has 2 life-cycles, one for the backend of the application and another one for the UI. The current model is more unified, so the backend code and the UI of the application are executed in the same callback functions.</p>
<p>The installation process in the new Native API is very similar to the one in the old API. The following figure shows the scheme.</p>
<p class="figure">Figure: Installation process</p>
- <p><img src="../../images/porting_installation_process.png" alt="Installation process" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
+ <p
align="center"><img src="../../images/porting_installation_process.png" alt="Installation process" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
<p>The installation process looks similar to the one from the 2.2.1 Native API. In the new API, the Package Manager is still responsible for managing packages. Use this API for installing, uninstalling, and updating the packages.</p>
<p>In comparison with the 2.2.1 application package, the 2.3 native application package has fewer directories.</p>
<p class="figure">Figure: 2.2.1 package structure</p>
- <p><img src="../../images/package_structure_old.png" alt="2.2.1 package structure" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
+ <p
align="center"><img src="../../images/package_structure_old.png" alt="2.2.1 package structure" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
<p class="figure">Figure: 2.3 package structure</p>
- <p><img src="../../images/package_structure_new.png" alt="2.3 package structure" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
+ <p
align="center"><img src="../../images/package_structure_new.png" alt="2.3 package structure" style="display: block; text-align: center; margin-left: auto; margin-right: auto" /></p>
<p>In the current package structure, there are no separate <span style="font-family: Courier New,Courier,monospace">info</span>, <span style="font-family: Courier New,Courier,monospace">setting</span>, and <span style="font-family: Courier New,Courier,monospace">shared</span> directories. Despite this change, the rest of the directories are the same. The file extension remains <span style="font-family: Courier New,Courier,monospace">.tpk</span>.</p>
<table>
<p>The tutorial for the new 2.3 version is <a href="../../../../org.tizen.tutorials/html/native/app_framework/application_tutorial_n.htm">here</a>.</p>
<h2 id="io" name="io">I/O Overview</h2>
-<p>In the old Tizen 2.2.1 applications, the operations related to accessing the file system and managing input and output were all defined in the <a href="https://developer.tizen.org/dev-guide/2.2.1/org.tizen.native.mobile.apireference/namespaceTizen_1_1Io.html" target="_blank">Tizen::Io</a> namespace. Now, all the functionalities of this namespace have been discarded in favor of open source libraries and other modules of the native API. To provide the same functionality as the previous Tizen::Io namespace, the current version of Tizen uses sqlite3 and EGlibc open libraries. It also uses the Message Port and Storage (a System submodule) from the native API, so handle I/O operations using these libraries and API modules.</p>
+<p>In the old Tizen 2.2.1 applications, the operations related to accessing the file system and managing input and output were all defined in the <a href="https://developer.tizen.org/dev-guide/2.2.1/org.tizen.native.apireference/namespaceTizen_1_1Io.html" target="_blank">Tizen::Io</a> namespace. Now, all the functionalities of this namespace have been discarded in favor of open source libraries and other modules of the native API. To provide the same functionality as the previous Tizen::Io namespace, the current version of Tizen uses sqlite3 and EGlibc open libraries. It also uses the Message Port and Storage (a System submodule) from the native API, so handle I/O operations using these libraries and API modules.</p>
<h2 id="object" name="object">Object Ownership Policy</h2>
<p>In the native API, the 'N' postfix for functions that return a new instance of an object with its ownership is no more supported. In this API, use the <span style="font-family: Courier New,Courier,monospace">object_create()</span> function, and free the memory with a function, such as <span style="font-family: Courier New,Courier,monospace">object_destroy()</span>. The following example is taken from the App Control module:</p>
error_code = app_control_get_uri(app_control, &uri);
-if(uri != NULL)
+if (uri != NULL)
{
free(uri);
uri = NULL;
<p>When the memory levels in the system are extremely low, the system terminates the application and removes it from the memory. However, it is possible to save the application state or context right before this happens. In the 2.2.1 version, it was done using the <span style="font-family: Courier New,Courier,monospace">Tizen::App::IAppCheckpointEventListener</span> interface. In the new native API, every time when the low level memory situation occurs on the device and the system wants to terminate some application, the <span style="font-family: Courier New,Courier,monospace">app_event_cb()</span> callback in that application is called. When you create your application, remember to place the code that must be executed in case of a low memory level in this callback and set the callback using the <span style="font-family: Courier New,Courier,monospace">ui_app_add_event_handler()</span> function.</p>
<h2 id="scene" name="scene">Scene Transitions</h2>
-<p>In the old 2.2.1 model, the UI scene transitions were handled by specific listeners, such as the <span style="font-family: Courier New,Courier,monospace">Tizen::Ui::Controls::IFormBackEventListener</span> and its <span style="font-family: Courier New,Courier,monospace">OnFormBackRequested()</span> event handler to listen to the <strong>Back </strong>key events for a backward scene transition. In the 2.3 model, all such actions are handled using the EFL and <a href="../ui/efl_extension_n.htm">EFL Extension</a>. The EFL has its own view manager for applications, called naviframe. A naviframe is a stack which holds views or pages as its items. When another view is launched, it is pushed on the top of the stack. Only the topmost view is displayed. The old views are stored on the stack. The EFL Extension provides functions to send key events to the naviframe top item or to pop it. Every time the user presses the <strong>Back</strong> key, the current view is removed from the stack and the view that was right under it becomes the topmost view and is displayed. The transition animation between views is handled by the EFL and depends on the theme applied to the widget.</p>
+<p>In the old 2.2.1 model, the UI scene transitions were handled by specific listeners, such as the <span style="font-family: Courier New,Courier,monospace">Tizen::Ui::Controls::IFormBackEventListener</span> and its <span style="font-family: Courier New,Courier,monospace">OnFormBackRequested()</span> event handler to listen to the <strong>Back </strong>key events for a backward scene transition. In the 2.3 model, all such actions are handled using the EFL and <a href="../ui/efl_extension_n.htm">EFL Extension</a>. The EFL has its own view manager for applications, called naviframe. A naviframe is a stack which holds views or pages as its items. When another view is launched, it is pushed on the top of the stack. Only the topmost view is displayed. The old views are stored on the stack. The EFL Extension provides functions to send key events to the naviframe top item or to pop it. Every time the user presses the <strong>Back</strong> key, the current view is removed from the stack and the view that was right under it becomes the topmost view and is displayed. The transition animation between views is handled by the EFL and depends on the theme applied to the UI component.</p>
<h2 id="keys" name="keys">Hardware Keys</h2>
-<p>With the arrival of the EFL, handling the hardware key events has changed. Until now, the 2.2.1 model provided the <a href="https://developer.tizen.org/dev-guide/2.2.1/org.tizen.native.
mobile.apireference/classTizen_1_1Ui_1_1Controls_1_1IFormMenuEventListener.html" target="_blank">Tizen::Ui::Controls::IFormMenuEventListener</a> interface. This interface delivered the <span style="font-family: Courier New,Courier,monospace">OnFormMenuRequested()</span> event handler to listen to the hardware <strong>Menu</strong> key events. Now, all this functionality is obtained using the EFL. In the <a href="../ui/efl_extension_n.htm">EFL Extension</a> documentation, find functions which enable you to manipulate the key modifiers. Use them to add handling for the hardware key events.</p>
-
+<p>With the arrival of the EFL, handling the hardware key events has changed. Until now, the 2.2.1 model provided the <a href="https://developer.tizen.org/dev-guide/2.2.1/org.tizen.native.apireference/classTizen_1_1Ui_1_1Controls_1_1IFormMenuEventListener.html" target="_blank">Tizen::Ui::Controls::IFormMenuEventListener</a> interface. This interface delivered the <span style="font-family: Courier New,Courier,monospace">OnFormMenuRequested()</span> event handler to listen to the hardware <strong>Menu</strong> key events. Now, all this functionality is obtained using the EFL. In the <a href="../ui/efl_extension_n.htm">EFL Extension</a> documentation, find functions which enable you to manipulate the key modifiers. Use them to add handling for the hardware key events.</p>
+
<h2 id="ex" name="ex">Exceptions</h2>
<p>Normally in the 2.3 API version, the exceptions model functions return an integer which indicates an error value. Usually, the value is 0 if there are no errors and the name format for this value is MODULE_NAME_ERROR_NONE. As in 2.2.1, the current API provides functions to get and set the last error value in the thread. In the 2.3 version, this functionality and the error enumerations are in the Base module. The following example shows how the current native API returns errors.</p>
<pre class="prettyprint">
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.tutorials/html/native/security/key_tutorial_n.htm">Key Manager Tutorial</a></li>
- <li> <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__KEY__MANAGER__MODULE.html">Key Manager API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__KEY__MANAGER__MODULE.html">Key Manager API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__KEY__MANAGER__MODULE.html">Key Manager API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<p>The key manager provides functions to securely store keys, certificates, and sensitive data related to users and their password-protected APPs. Additionally, it provides secure cryptographic operations for non-exportable keys without revealing the key values to clients.</p>
<p class="figure">Figure: Key manager process</p>
-
<p style="text-align:center;"><img alt="Key manager process" src="../../images/key_manager.png" /></p>
+
<p align="center"><img alt="Key manager process" src="../../images/key_manager.png" /></p>
<p> A key manager stores keys, certificates, and sensitive user data in a central secure repository. The central secure repository is protected by a password.</p>
</ul>
-<p>The key manager provides 2 types of <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__KEY__MANAGER__MODULE.html">APIs</a>:</p>
+<p>The key manager provides 2 types of APIs (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__KEY__MANAGER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__KEY__MANAGER__MODULE.html">wearable</a> applications):</p>
<ul>
<li>Secure repository APIs <p>All APPs can use the secure repository APIs to:</p>
<ul>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.tutorials/html/native/security/privilege_tutorial_n.htm">Privilege Info Tutorial</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SECURITY__FRAMEWORK__PRIVILEGE__INFO__MODULE.html">Privilege Info API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SECURITY__FRAMEWORK__PRIVILEGE__INFO__MODULE.html">Privilege Info API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SECURITY__FRAMEWORK__PRIVILEGE__INFO__MODULE.html">Privilege Info API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Privilege Info</h1>
-<p>Tizen provides <a href="../../../../org.tizen.gettingstarted/html/details/sec_privileges.htm#native">privilege</a> information for user notification.</p>
+<p>Tizen provides <a href="../../../../org.tizen.gettingstarted/html/native/details/sec_privileges_n.htm">privilege</a> information for user notification.</p>
<p>The following information can be retrieved:</p>
<ul>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.tutorials/html/native/security/security_tutorials_n.htm">Security Tutorials</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SECURITY__FRAMEWORK.html">Security API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SECURITY__FRAMEWORK.html">Security API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SECURITY__FRAMEWORK.html">Security API for Wearable Native</a></li>
</ul>
</div></div>
</div>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
</div>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.tutorials/html/native/social/account_tutorial_n.htm">Account Manager Tutorial</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__ACCOUNT__MANAGER__MODULE.html">Account Manager API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__ACCOUNT__MANAGER__MODULE.html">Account Manager API for Mobile Native</a></li>
</ul>
</div></div>
</div>
<h1>Account Manager</h1>
<p>An account is a collection of information representing the user of a specific provider.</p>
+
+ <table class="note">
+<tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">This feature is supported in mobile applications only.</td>
+ </tr>
+ </tbody>
+ </table>
+
<p>The main features of the Account Manager API include:
</p>
<ul>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
</div>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.tutorials/html/native/social/calendar_tutorial_n.htm">Calendar Tutorial</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CALENDAR__SVC__MODULE.html">Calendar API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CALENDAR__SVC__MODULE.html">Calendar API for Mobile Native</a></li>
</ul>
</div></div>
</div>
<h1>Calendar</h1>
<p>A calendar is a system of organizing days for social purposes. It is composed of <a href="#record2">records</a>, such as events and todos. The records consist of subrecords, such as alarms, attendees, or extensions. For example, if an event has a recurrence rule (meaning that it happens multiple times), separate instances are generated for each time the event occurs.</p>
+
+ <table class="note">
+<tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">This feature is supported in mobile applications only.</td>
+ </tr>
+ </tbody>
+ </table>
-
<p class="figure">Figure: Calendar model</p>
- <p
style="text-align:center;"><img alt="Calendar model" src="../../images/calendar_model.png" /></p>
+ <p class="figure">Figure: Calendar model</p>
+ <p
align="center"><img alt="Calendar model" src="../../images/calendar_model.png" /></p>
<p>The Calendar Service supports <a href="#vcal">vCalendars</a>.</p>
<p>The following figure illustrates the different Calendar entities and their relationships.</p>
-
<p class="figure">Figure: Calendar entities</p>
- <p
style="text-align:center;"><img alt="Calendar entities" src="../../images/calendar_entity.png" /></p>
+ <p class="figure">Figure: Calendar entities</p>
+ <p
align="center"><img alt="Calendar entities" src="../../images/calendar_entity.png" /></p>
<p>vCalendar supports ver1.0 (vcs) and 2.0 (ics). For more information about vCalendar, see <a href="http://www.ietf.org/rfc/rfc2445.txt" target="blank">rfc2445</a>.</p>
<p>An event record describes various properties, such as description, categories, and priority. It also contains information on when the event takes place. In a recurring event, there are more than one instance of the event. Each instance has its corresponding instance record.</p>
<p>If an event is inserted with rrule (recurrence rule), alarm, and attendee, its data is saved to each database. Generated instances based on the rrule are also stored in the instance database.</p>
-
<p class="figure">Figure: Views and databases</p>
- <p
style="text-align:center;"><img alt="Views and databases" src="../../images/calendar_db.png" /></p>
+ <p class="figure">Figure: Views and databases</p>
+ <p
align="center"><img alt="Views and databases" src="../../images/calendar_db.png" /></p>
<p>The following table illustrates and example of a recurring event and its instances.</p>
<p>The following figure illustrates how the alarm process works.</p>
-
<p class="figure">Figure: Alarm process</p>
- <p
style="text-align:center;"><img alt="Alarm process" src="../../images/calendar_alarm.png" /></p>
+ <p class="figure">Figure: Alarm process</p>
+ <p
align="center"><img alt="Alarm process" src="../../images/calendar_alarm.png" /></p>
<p>After you add a receiver, the registered alarm is triggered at the reserved time if you insert the alarm as a child to an event record:</p>
<pre class="prettyprint">// Set alarm
<p>The record types that have <span style="font-family: Courier New,Courier,monospace">*_id</span> as their property hold identifiers of other records. For example, the attendee and alarm views hold the ID of their corresponding events or todos in the <span style="font-family: Courier New,Courier,monospace">event_id</span> or <span style="font-family: Courier New,Courier,monospace">todo_id</span> property (as children of the corresponding event or todo records).</p>
<p>The <span style="font-family: Courier New,Courier,monospace">record</span> type properties are other records. For example, an event record has <span style="font-family: Courier New,Courier,monospace">attendee</span> and <span style="font-family: Courier New,Courier,monospace">alarm</span> properties, which means that records of those types can be children of the event type records. The following figure illustrates macros in a <span style="font-family: Courier New,Courier,monospace">calendar_view.h</span> header file.</p>
-
<p class="figure">Figure: Properties</p>
- <p
style="text-align:center;"><img alt="Properties" src="../../images/calendar_property.png" /></p>
+ <p class="figure">Figure: Properties</p>
+ <p
align="center"><img alt="Properties" src="../../images/calendar_property.png" /></p>
<pre class="prettyprint">// Create an event with _calendar_event view
calendar_record_h event = NULL;
</head>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
</div>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.tutorials/html/native/social/contact_tutorial_n.htm">Contacts Tutorial</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__MODULE.html">Contacts API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__MODULE.html">Contacts API for Mobile Native</a></li>
</ul>
</div></div>
</div>
<h1>Contacts</h1>
<p>Contact features provide functions for managing contact information, such as address books, groups, persons, and phone logs.</p>
+
+ <table class="note">
+<tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">This feature is supported in mobile applications only.</td>
+ </tr>
+ </tbody>
+ </table>
+
<p>A contact object is always associated with a specific address book. A person object is an aggregation of one or more contacts associated with the same person.</p>
<p>The following figure illustrates the contact structure. There are 3 instances of the same contact in different address books. Person1 is an aggregation of those instances (Contact1, Contact2, and Contact3).</p>
-
<p class="figure">Figure: Contact structure</p>
- <p
style="text-align:center;"><img alt="Contact structure" src="../../images/contacts_contact_structure.png" /></p>
+ <p class="figure">Figure: Contact structure</p>
+ <p
align="center"><img alt="Contact structure" src="../../images/contacts_contact_structure.png" /></p>
<p>The Contact Service supports <a href="#vcard">vCards</a>.</p>
<p>The following figure illustrates the different entities in the Contact Service, and their relationships.</p>
-
<p class="figure">Figure: Contact entities</p>
- <p
style="text-align:center;"><img alt="Contact entities" src="../../images/contacts_contact_entity.png" /></p>
+ <p class="figure">Figure: Contact entities</p>
+ <p
align="center"><img alt="Contact entities" src="../../images/contacts_contact_entity.png" /></p>
<h2 id="bulk" name="bulk">Batch Operations</h2>
<p>The following figure illustrates the process of creating a person record.</p>
<p class="figure">Figure: Creating a person</p>
-
<p style="text-align:center;"><img alt="Creating a person" src="../../images/contacts_person_record.png" /></p>
+
<p align="center"><img alt="Creating a person" src="../../images/contacts_person_record.png" /></p>
<p>A person record can be linked to another person. Linking is possible even though the contacts have different address books.</p>
<p>The following figure illustrates the process of linking a person.</p>
<p class="figure">Figure: Linking a person</p>
-
<p style="text-align:center;"><img alt="Linking a person" src="../../images/contacts_link_person.png" /></p>
+
<p align="center"><img alt="Linking a person" src="../../images/contacts_link_person.png" /></p>
<p>A contact record can also be separated from the person record. As a result of unlinking the contact record, a new person is created.</p>
<p>The following figure illustrates the process of unlinking a contact.</p>
<p class="figure">Figure: Unlinking a contact</p>
-
<p style="text-align:center;"><img alt="Unlinking a contact" src="../../images/contacts_unlink_contact.png" /></p>
+
<p align="center"><img alt="Unlinking a contact" src="../../images/contacts_unlink_contact.png" /></p>
<h2 id="record" name="record">Records</h2>
<p>A record can have properties of the <span style="font-family: Courier New,Courier,monospace">record</span> type - called child records. A record can contain several records of a given type. For example, a contact record (parent) can contain many address records (children).</p>
<p class="figure">Figure: Children</p>
-<p
style="text-align:center;"><img alt="Children" src="../../images/contacts_children.png" /></p>
+<p
align="center"><img alt="Children" src="../../images/contacts_children.png" /></p>
<p>The following code example inserts an address record into a contact record. Note that it is not necessary to insert or destroy all records - just the parent record needs to be inserted into the database to store all the information, and when the parent record is destroyed, the child records are also destroyed automatically.</p>
<p>The property type <span style="font-family: Courier New,Courier,monospace">record</span> means that the parent record can have child records. For example, a contact record has <span style="font-family: Courier New,Courier,monospace">name</span>, <span style="font-family: Courier New,Courier,monospace">number</span>, and <span style="font-family: Courier New,Courier,monospace">email</span> properties, which means that records of those types can be children of the contact type records. The following figure illustrates macros in a <span style="font-family: Courier New,Courier,monospace">contacts_view.h</span> header file.</p>
-
<p class="figure">Figure: Properties</p>
- <p
style="text-align:center;"><img alt="Properties" src="../../images/contact_property.png" /></p>
+ <p class="figure">Figure: Properties</p>
+ <p
align="center"><img alt="Properties" src="../../images/contact_property.png" /></p>
<p>For more information, see the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__VIEW__MODULE.html">View/Property</a> API.</p>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a href="../../../../org.tizen.tutorials/html/native/phonenumber_util_tutorial_n.htm">Phonenumber-utils Tutorial</a></li>
+ <li><a href="../../../../org.tizen.tutorials/html/native/social/phonenumber_util_tutorial_n.htm">Phonenumber-utils Tutorial</a></li>
<li><a href="../../../../org.tizen.native.mobile.apireference/XX.html">Phonenumber-utils API for Mobile Native</a></li>
<li><a href="../../../../org.tizen.native.wearable.apireference/XX.html">Phonenumber-utils API for Wearable Native</a></li>
</ul>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.tutorials/html/native/social/social_tutorials_n.htm">Social Tutorials</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__FRAMEWORK.html">Social API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__FRAMEWORK.html">Social API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SOCIAL__FRAMEWORK.html">Social API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<p>The main social features are:</p>
<ul>
+ <li><a href="phonenumber_util_n.htm">Phonenumber-utils</a>
+ <p>Allows you to parse and format phone numbers.</p></li>
+ </ul>
+
+ <p>The following guides apply in <span style="color: red">mobile applications only</span>:</p>
+
+ <ul>
<li><a href="account_manager_n.htm">Account Manager</a>
<p>Allows you to work with accounts in your application by creating, managing and removing individual accounts.</p></li>
<li><a href="calendar_n.htm">Calendar</a> <p>Allows you to work with personal scheduling data by managing calendars, events, and todos, and setting reminders and recurrence properties. You can also search for calendar book entries and receive calendar book change notifications.</p></li>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
</div>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.tutorials/html/native/sync/sync_tutorials_n.htm">Sync Tutorial</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYNC__ADAPTER__FRAMEWORK.html">Sync Adapter API</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYNC__MANAGER__FRAMEWORK.html">Sync Manager API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYNC__FRAMEWORK.html">Sync API for Mobile Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Sync</h1>
-<p>Sync Manager provides notification for service application for maintaining consistency of application's data between server and device. The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYNC__FRAMEWORK.html">Sync API</a> enables to manage synchronization schedule for apps.</p>
+<p>Tizen provides notifications for a service application to maintain data consistency between a server and the device. You can manage the synchronization schedule for applications.</p>
-<br>
-<p>The main features of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYNC__ADAPTER__FRAMEWORK.html">Sync Adapter</a> API include:</p>
-<ul>
-<li>Register callbacks for notification of a time to start / cancel sync job</li>
-<li>Use app control to start or cancel sync operation, then an application's daemon doesn't need to stay awake</li>
-</ul>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">You can test the Sync Adapter functionality only on mobile device and SDK. The wearable device does not support this feature.</td>
- </tr>
- </tbody>
- </table>
-<br>
-
-<p>The main features of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYNC__MANAGER__FRAMEWORK.html">Sync Manager</a> API include:</p>
-<ul>
-<li>Add / Remove On demand sync job schedule</li>
-<li>Add / Remove Periodic sync job schedule</li>
-</ul>
<table class="note">
<tbody>
<tr>
<th class="note">Note</th>
</tr>
<tr>
- <td class="note">You can test the Sync Manager functionality only on mobile device and SDK. The wearable device does not support this feature.</td>
+ <td class="note">The Sync API domain is supported in mobile applications only.</td>
</tr>
</tbody>
</table>
-<br>
-
-<h2 name="sync_rules" id="sync_rules">Sync Rules</h2>
+<p>On the device, you can receive notifications when the data changes in the calendar or contacts. To receive the notifications, you must define the applicable capabilities (<span style="font-family: Courier New,Courier,monospace">http://tizen.org/account/capability/calendar</span> for the calendar changes and <span style="font-family: Courier New,Courier,monospace">http://tizen.org/account/capability/contact</span> for the contact changes). If you use the <a href="../../../../org.tizen.native.mobile.apireference/group__CORE__LIB__BUNDLE__MODULE.html">Bundle</a> API, you can deliver the change data to the callback function in the form of <span style="font-family: Courier New,Courier,monospace">user_data</span> by using a key-value pair.</p>
-<p>Sync Manager operates sync job based on following five rules:</p>
-<p class="figure">Table: Five rules for sync job scheduling</p>
- <table border="1">
+<p>The main sync features are:</p>
+
+ <ul><li>Sync adapter
+ <p>The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYNC__ADAPTER__FRAMEWORK.html">Sync Adapter</a> API allows you to:</p>
+<ul>
+<li>Register callbacks for notifications about the sync job start and cancellation.</li>
+<li>Use an app control to start or cancel the sync operation, so that the application daemon does not need to stay awake.
+
+<p>With the app control mechanism, you can use specific operations exported by other Tizen applications. The mechanism allows you to receive notifications when starting or canceling a sync job without using the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APP__CONTROL__MODULE.html">App Control</a> API separately. When an app control is used, the application does not need to be in the running state to receive the notifications.</p>
+<p>The following table defines the app control operation details related to a sync operation. The applications does not need to know about them, because the operations are set primitively in the daemon.</p>
+ <table>
+ <caption>Table: App control operations
+ </caption>
<tbody>
<tr>
- <th>Rules</th>
- <th>Descriptions</th>
- </tr>
- <tr>
- <td><br>Data on server changes</td>
- <td><span style="font-family: Courier New,Courier,monospace"><p>When data changed on server, a push message arrives from a server. The server sends the push message to Account Provider Service and service applications.</p></span></td>
- </tr>
- <tr>
- <td><br>Data on device changes</td>
- <td><span style="font-family: Courier New,Courier,monospace"><p>It is based on capabilities. Data Change Listener notices changes by using Calendar <b>/</b> Contacts API. If there are any changes of Calendar <b>/</b> Contacts data, Sync Manager notices the changes and scheduls a sync job. <br>Changing data on Calendar DB includes in the case of Book, Event, and Todo changes. Changing data on Contacts DB includes add, remove, and modify a contacts.</p></span></td>
+ <th>Operation</th>
+ <th>Value</th>
+ <th>Description</th>
</tr>
<tr>
- <td><br>Network availability</td>
- <td><span style="font-family: Courier New,Courier,monospace"><p>When a change in network status detected, a sync job occurs in the case of changing status of BT, WiFi, and Data Network.</p></span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_START_SYNC</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/start_sync</span></td>
+ <td>Start a sync operation by invoking the service application callback.</td>
</tr>
<tr>
- <td><br>On demand</td>
- <td><p><span style="font-family: Courier New,Courier,monospace"><p>Sync schedule on demand is provided through the <a href="../../../../org.tizen.mobile.native.apireference/group__CAPI__SYNC__MANAGER__MODULE.html">Sync Manager</a> API. For using this feature, you can use the API, <b>'sync_manager_add_sync_job(account_h account, const char *capability, bundle *extra)'</b> function. It provides feature for scheduling sync job just one time.</p><p></p></span></td>
- </tr>
- <tr>
- <td><br>Sync schedule intervals</td>
- <td><span style="font-family: Courier New,Courier,monospace"><p>Sync schedule intervals is provided through the <a href="../../../../org.tizen.mobile.native.apireference/group__CAPI__SYNC__MANAGER__MODULE.html">Sync Manager</a> API. For using this feature, you can use the API, <b>'sync_manager_add_periodic_sync_job(account_h account, const char *capability, bundle *extra, sync_period_e sync_period)'</b> function.
-It provides feature for scheduling sync job regularly. Also, you can appoint intervals with using several enum values which provided through the Sync Manager API. <b>'sync_period'</b>.</p></span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_CANCEL_SYNC</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/cancel_sync</span></td>
+ <td>Cancel a sync operation by invoking the service application callback.</td>
</tr>
</tbody>
- </table><br>
-
+ </table>
-<h2 name="sync_capabilities" id="sync_capabilities">Sync Capabilities</h2>
+</li>
+</ul></li>
-<p>There are two capabilities. Those can receive data changed notifications of calendar, contacts by setting these capabilities. Also, if you use bundle API, you can deliver in the form of user_data to callback function by using key value pair.</p>
-<p class="figure">Table: The kind of sync job options</p>
- <table border="1">
+<li>Sync manager
+<p>The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYNC__MANAGER__FRAMEWORK.html">Sync Manager</a> API include allows you to:</p>
+<ul>
+<li>Add and remove the on-demand sync job schedule.</li>
+<li>Add and remove the periodic sync job schedule.</li>
+</ul>
+<p>The sync manager operates the sync jobs based on the rules defined in the following table.</p>
+ <table>
+ <caption>Table: Sync job scheduling rules
+ </caption>
<tbody>
<tr>
- <th>Options</th>
- <th>Descriptions</th>
+ <th>Rule</th>
+ <th>Description</th>
</tr>
<tr>
- <td><br>"http://tizen.org/account/capability/calendar"</td>
- <td><span style="font-family: Courier New,Courier,monospace"><p>An capability for receiving notification when calendar data changed. Adding, updating, and deleting calendar data such as event, book, and todo.</p></span></td>
+ <td>Data on the server changes</td>
+ <td>When the data changes on a server, a push message arrives from a server. The server sends the push message to the account provider service and service applications.</td>
</tr>
<tr>
- <td><br>"http://tizen.org/account/capability/contact"</td>
- <td><span style="font-family: Courier New,Courier,monospace"><p>An capability for receiving notification when contacts data changed. Adding, updating, and deleting contacts data such as name, phone number, E-mail.</p></span></td>
+ <td>Data on the device changes</td>
+ <td>Changes are based on capabilities. The data change listener notices the changes by using the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CALENDAR__SVC__MODULE.html">Calendar</a> or <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__MODULE.html">Contacts</a> API. If there are any changes in the calendar or contacts data, the sync manager notices the changes and schedules a sync job.
+ <p>Changing data in the Calendar database includes adding, updating, and deleting books, events, and todos. Changing data in the Contacts database includes adding, removing, and modifying contacts.</p></td>
</tr>
- </tbody>
- </table><br>
-
-
-<h2 name="sync_options" id="sync_options">Sync Options</h2>
-
-<p>There are two options which can set attributes of the sync job. It is required using bundle API to set the sync job. So, with the <a href="../../tutorials/sync_tutorial/sync_manager_tutorial.htm">Sync Manager Tutorial</a> and <a href="../../tutorials/app_tutorial/bundle_tutorial.htm">Bundle Tutorial</a>, you can set the sync option for syncing 'On demand' and 'Periodic' job. Also, if you use bundle API, you can deliver in the form of user_data to callback function by using key value pair.</p>
-<p class="figure">Table: The kind of sync job options</p>
- <table border="1">
- <tbody>
<tr>
- <th>Options</th>
- <th>Descriptions</th>
+ <td>Network availability</td>
+ <td>When a change in the Bluetooth, Wi-Fi, or data network status is detected, a sync job occurs.</td>
</tr>
<tr>
- <td><br>SYNC_OPTION_NO_RETRY</td>
- <td><span style="font-family: Courier New,Courier,monospace"><p>An sync option to denote if retrying the sync request is allowed or not. If the option is set as false, a sync operation will retry when the job failed.</p></span></td>
+ <td>On demand</td>
+ <td>The on-demand sync means that you can schedule a sync job for one time only. You can use this feature with the <span style="font-family: Courier New,Courier,monospace">sync_manager_add_sync_job()</span> function.</td>
</tr>
<tr>
- <td><br>SYNC_OPTION_EXPEDITED</td>
- <td><span style="font-family: Courier New,Courier,monospace"><p>All of sync jobs are passed into sync job queue. This option is limited to the case of priorities. So, it just means giving priority. If the option is set as true, it gives a priority relative to the other jobs. In other words, both 'On demand' and 'Periodic' jobs which came to the queue simultaneously are influenced by the option.</p></span></td>
+ <td>Sync schedule intervals</td>
+ <td>Sync schedule intervals mean that you can schedule a sync job to be performed regularly. You can use this feature with the <span style="font-family: Courier New,Courier,monospace">sync_manager_add_periodic_sync_job()</span> function. You can define the sync intervals with various enumerators provided through the Sync Manager API.</td>
</tr>
</tbody>
- </table><br>
+ </table>
+<p>When you create a sync job, you can define options that set the sync job attributes. You need the Bundle API to set the sync job options for both the on-demand and periodic jobs:</p>
+<ul><li><span style="font-family: Courier New,Courier,monospace">SYNC_OPTION_NO_RETRY</span>
+<p>This sync option defines whether retrying the sync request is allowed. If the option is set to <span style="font-family: Courier New,Courier,monospace">false</span>, the sync operation tries again after the job fails.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">SYNC_OPTION_EXPEDITED</span>
+<p>All sync jobs are passed into a sync job queue. If this sync option is set to <span style="font-family: Courier New,Courier,monospace">true</span>, it gives a priority to its job relative to the other queued jobs. Both the on-demand and periodic jobs in the queue are simultaneously influenced by this option.</p>
-<h2 id="app_control" name="app_control">App Control</h2>
-
-<p>App Control is a standard mechanism for using specific operations exported by applications in Tizen. With the <a href="../../../../org.tizen.mobile.native.apireference/group__CAPI__SYNC__ADAPTER__MODULE.html">Sync Adapter</a> API, you can receive notifications without using separately App Control API when starting <b>/</b> canceling sync job is scheduled. Also, apps doesn't be running state for receiving the notification anymore.
-Below table is explaining the state of App Control operation which is related to a sync operation. Apps doesn't need to know about it, because those operations are set in daemon primitively.
-<p class="figure">Table: The kind of App Control operations</p>
- <table border="1">
- <tbody>
- <tr>
- <th>Operations</th>
- <th>Values</th>
- <th>Descriptions</th>
- </tr>
- <tr>
- <td><br>APP_CONTROL_OPERATION_START_SYNC</td>
- <td><span style="font-family: Courier New,Courier,monospace"><p>"http://tizen.org/appcontrol/operation/start_sync"</p></span></td>
- <td><span style="font-family: Courier New,Courier,monospace"><p>start a sync operation by invoking service application callback.</p></span></td>
- </tr>
- <tr>
- <td><br>APP_CONTROL_OPERATION_CANCEL_SYNC</td>
- <td><span style="font-family: Courier New,Courier,monospace"><p>"http://tizen.org/appcontrol/operation/cancel_sync"</p></span></td>
- <td><span style="font-family: Courier New,Courier,monospace"><p>cancel a sync operation by invoking service application callback.</p></span></td>
- </tr>
- </tbody>
- </table><br>
-
+ </li></ul></li></ul>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.tutorials/html/native/system/device_tutorial_n.htm">Device Tutorial</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__MODULE.html">Device API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__MODULE.html">Device API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__DEVICE__MODULE.html">Device API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<p>Device features provide functions to control attached devices. The following functionalities are supported:</p>
<ul><li>Battery
- <p>Get the current percentage, the charging state, and the current level state using the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__BATTERY__MODULE.html">Battery</a> API.</p></li>
+ <p>Get the current percentage, the charging state, and the current level state using the Battery API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__BATTERY__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__DEVICE__BATTERY__MODULE.html">wearable</a> applications).</p></li>
<li>Display
- <p>Get the number of displays, the maximum brightness of the display, the current brightness, and the display state. You can also change the current brightness and the display state using the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__DISPLAY__MODULE.html">Display</a> API.</p></li>
+ <p>Get the number of displays, the maximum brightness of the display, the current brightness, and the display state. You can also change the current brightness and the display state using the Display API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__DISPLAY__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__DEVICE__DISPLAY__MODULE.html">wearable</a> applications).</p></li>
<li>Haptic
- <p>Get the number of haptic devices. You can also open or close the haptic handle, and request the vibration effects to play or stop using the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__HAPTIC__MODULE.html">Haptic</a> API.</p></li>
+ <p>Get the number of haptic devices. You can also open or close the haptic handle, and request the vibration effects to play or stop using the Haptic API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__HAPTIC__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__DEVICE__HAPTIC__MODULE.html">wearable</a> applications).</p></li>
<li>LED
- <p>Get the maximum and current brightness of the camera flash LED. You can also change the current brightness of the camera flash LED, and request the service LED to play or stop effects using the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__LED__MODULE.html">Led</a> API.</p></li>
+ <p>Get the maximum and current brightness of the camera flash LED. You can also change the current brightness of the camera flash LED, and request the service LED to play or stop effects using the Led API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__LED__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__DEVICE__LED__MODULE.html">wearable</a> applications).</p></li>
<li>Power
- <p>Request the power state to be locked or unlocked, and change the power state using the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__POWER__MODULE.html">Power</a> API.</p></li></ul>
+ <p>Request the power state to be locked or unlocked, and change the power state using the Power API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__POWER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__DEVICE__POWER__MODULE.html">wearable</a> applications).</p></li></ul>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.tutorials/html/native/system/dlog_tutorial_n.htm">dlog Tutorial</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DLOG.html">dlog API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DLOG.html">dlog API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__DLOG.html">dlog API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<p class="figure">Figure: Architecture</p>
-<p
style="text-align:center;"><img alt="Architecture" src="../../images/dlog_architecture.png" /></p>
+<p
align="center"><img alt="Architecture" src="../../images/dlog_architecture.png" /></p>
<p>The dlog service sends a log message to the circular buffer with APIs, including <strong>Priority</strong> and <strong>Tag</strong> information. With this information, it is easy to filter and check the messages with dlogutil.</p>
<p>For each log level (info, debug, and error), there is a separate macro:</p>
-<ul class="ul">
+<ul>
<li>Info
<p> Use dlog_print(or dlog_vprint) function with DLOG_INFO priority when you need info messages to be displayed with a specified tag.</p>
<pre class="prettyprint">
</ul>
<p>Log macros belong to Info, Debug, Error, and Warn log levels. To filter logs based on their levels, select the applicable log type in the Log view. You can also search logs by keywords, such as Pid, Tid, Tag, and Message. The following figure shows the output of a log macro.</p>
-<p align="center"><b>Figure: Log macro output</b></p>
-<center><img width='50%' src='../../images/debugging.png'/></center>
+<p class="figure">Figure: Log macro output</p>
+<p align="center"><img width="70%" alt="Figure: Log macro output" src="../../images/debugging.png"/></p>
+
<h2 id="tag" name="tag">Tag</h2>
<p>A tag is used to identify the source of the log message.</p>
dlog_vprint(DLOG_INFO, "USR_TAG", format, ap);
va_end(ap);
}
+
int main(void)
{
my_debug_print("%s", "test dlog");
<p>The tag of a log message is a short name indicating the system component from which the message originates.</p>
<p>The priority is one of the following character values, ordered from the lowest to the highest priority:</p>
-<ul class="ul"><li>D - debug</li>
+<ul><li>D - debug</li>
<li>I - info</li>
<li>W - warning</li>
<li>E - Error</li></ul>
<h3 id="control_output" name="control_output">Controlling Log Output Format</h3>
<p>The log messages contain a number of metadata fields in addition to tag and priority. You can modify the output format for messages so that they display a specific metadata field. To do so, use the <span style="font-family: Courier New,Courier,monospace">-v</span> option when starting dlogutil and specify one of the supported output formats:</p>
-<ul class="ul">
+<ul>
<li>brief: Displays the priority/tag and PID of the originating process (the default format)</li>
<li>process: Displays the PID only</li>
<li>tag: Displays the priority/tag only</li>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.tutorials/html/native/system/media_key_tutorial_n.htm">Media key Tutorial</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__MEDIA__KEY__MODULE.html">Media key API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__MEDIA__KEY__MODULE.html">Media key API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__MEDIA__KEY__MODULE.html">Media key API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Media key</h1>
- <p>Tizen enables you to manage media key events. The media key events are generated by the remote control buttons in a Bluetooth headset or Bluetooth earphone. The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__MEDIA__KEY__MODULE.html#ga7ef8e87127474ddcb068a06dd53eeb8b">media_key_e</a> enumerator defines the available key types.</p>
+ <p>Tizen enables you to manage media key events. The media key events are generated by the remote control buttons in a Bluetooth headset or Bluetooth earphone. The <span style="font-family: Courier New, Courier, monospace">media_key_e</span> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__MEDIA__KEY__MODULE.html#ga7ef8e87127474ddcb068a06dd53eeb8b">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__MEDIA__KEY__MODULE.html#ga7ef8e87127474ddcb068a06dd53eeb8b">wearable</a> applications) defines the available key types.</p>
<p>The main features of the Media key API include:</p>
<ul>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.tutorials/html/native/system/runtime_tutorial_n.htm">Runtime information Tutorial</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__RUNTIME__INFO__MODULE.html">Runtime information API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__RUNTIME__INFO__MODULE.html">Runtime information API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__RUNTIME__INFO__MODULE.html">Runtime information API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<p>The accelerometer provides 3 components of acceleration (X, Y, and Z), as the following figure illustrates.</p>
<p class="figure">Figure: Accelerometer vector and axes</p>
-<p
style="text-align:center;"><img alt="Accelerometer vector and axes" src="../../images/sensor_types_accelerometer_vector.png" /></p>
+<p
align="center"><img alt="Accelerometer vector and axes" src="../../images/sensor_types_accelerometer_vector.png" /></p>
<p>The accelerometer outputs 4 values: 3 Cartesian axis values and a timestamp. The accelerometer sensor measures and returns axes values in "m/s<sup>2</sup>" (meters per second squared). When a device is moved in the ±X, ±Y, or ±Z direction, the corresponding output increases (+) or decreases (-).</p>
<p>The following table lists the measurement data that the accelerometer provides.</p>
<h3 id="gravity" name="gravity">Gravity Sensor</h3>
<p>The gravity sensor is a virtual sensor derived from the 3-axis acceleration sensor. The 3-axis gravity components provide a measure of the effect of Earth's gravity observed on the device reference axes. The gravity components measured on a device vary based on the change in the device orientation, and hence they provide a measure of the rotation subjected to the device.</p>
<p class="figure">Figure: Gravity sensor vector and axes</p>
- <p
style="text-align:center;"><img alt="Gravity sensor vector and axes" src="../../images/sensor_types_gravity_frame.png" /></p>
+ <p
align="center"><img alt="Gravity sensor vector and axes" src="../../images/sensor_types_gravity_frame.png" /></p>
<p>The gravity sensor outputs 4 values: 3 Cartesian axis values and a timestamp. The gravity sensor measures and returns axes values in "m/s<sup>2</sup>" (meters per second squared). When a device is rotated in the ±X, ±Y, or ±Z direction, the corresponding output increases (+) or decreases (-).</p>
<p>The following table lists the measurement data that the gravity sensor provides.</p>
<p>The linear acceleration sensor is derived from the accelerometer by excluding the gravity value, and it measures the user-driven changes in the velocity. The linear acceleration sensor is used to detect the dynamic movement of the device and analyze the user's motion profile. The 3-axes linear acceleration components provide a measure of the combined linear motion subjected to the device in the euclidean space.</p>
<p>The linear acceleration sensor provides 3 components of acceleration (X, Y, and Z), as the following figure illustrates.</p>
<p class="figure">Figure: User-acceleration sensor vector and axes</p>
- <p
style="text-align:center;"><img alt="User-acceleration sensor vector and axes" src="../../images/sensor_types_useracceleration_vector.png" /></p>
+ <p
align="center"><img alt="User-acceleration sensor vector and axes" src="../../images/sensor_types_useracceleration_vector.png" /></p>
<p>The linear acceleration sensor outputs 4 values: 3 Cartesian axis values and a timestamp. The linear acceleration sensor measures and returns axes values in "m/s<sup>2</sup>" (meters per second squared). When a device is accelerated in the ±X, ±Y, or ±Z direction, the corresponding output increases (+) or decreases (-). The acceleration output is shown in the same direction as the user-driven force.</p>
<p>The following table lists the measurement data that the linear acceleration sensor provides.</p>
<table border="1" style="width: 100%">
<p></p>
<p>The magnetic sensor uses the 3-axis Cartesian space coordinate system, as the following figure illustrates.</p>
<p class="figure">Figure: Magnetic field vector and axes</p>
- <p
style="text-align:center;"><img alt="Magnetic field vector and axes" src="../../images/sensor_types_magnetic_vector.png" /></p>
+ <p
align="center"><img alt="Magnetic field vector and axes" src="../../images/sensor_types_magnetic_vector.png" /></p>
<h3 id="uncal_magnetic" name="uncal_magnetic">Uncalibrated Magnetic Sensor</h3>
<p>The uncalibrated magnetic sensor is a 3-axis electronic compass (sometimes referred to as a "magnetometer" or "geomagnetic sensor"). It can also be used in determining the azimuth component of the device orientation provided that the tilt of the device is already computed. It measures the Earth's magnetic field strength and fluctuations, and splits the measurement into X, Y, and Z components. The uncalibrated magnetic sensor is similar in functionality to a magnetic sensor, but does not perform hard iron calibration. Factory calibration and temperature compensation are applied.</p>
<p>The angular positions are measured using a fixed frame reference (X<sub>E</sub>, Y<sub>E</sub>, Z<sub>E</sub>).</p>
-
<p class="figure">Figure: Angular positions and the fixed frame reference</p>
- <p
style="text-align:center;"><img alt="Angular positions and the fixed frame reference" src="../../images/sensor_types_deviceorientation_frame.png" /></p>
+ <p class="figure">Figure: Angular positions and the fixed frame reference</p>
+ <p
align="center"><img alt="Angular positions and the fixed frame reference" src="../../images/sensor_types_deviceorientation_frame.png" /></p>
<h3 id="gyro" name="gyro">Gyroscope</h3>
<p>The gyroscope detects angular velocity or angular rates of a device. The 3D gyroscope data is considered to be very sensitive in detecting incremental rotation angles. The rotation angles obtained by integrating the angular rates over longer duration is inaccurate due to the build-up of drift.</p>
<p class="figure">Figure: Gyroscope vector and axes</p>
- <p
style="text-align:center;"><img alt="Gyroscope vector and axes" src="../../images/sensor_types_gyro_vector.png" /></p>
+ <p
align="center"><img alt="Gyroscope vector and axes" src="../../images/sensor_types_gyro_vector.png" /></p>
<p>The following table lists the measurement data that the gyroscope provides.</p>
<table border="1" style="width: 100%">
<caption>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.tutorials/html/native/system/system_setting_tutorial_n.htm">System Settings Tutorial</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__SYSTEM__SETTINGS__MODULE.html">System Settings API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__SYSTEM__SETTINGS__MODULE.html">System Settings API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__SYSTEM__SETTINGS__MODULE.html">System Settings API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.tutorials/html/native/system/storage_tutorial_n.htm">Storage Tutorial</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__STORAGE__MODULE.html">Storage API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__STORAGE__MODULE.html">Storage API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__STORAGE__MODULE.html">Storage API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.tutorials/html/native/system/sysinfo_tutorial_n.htm">System Information Tutorial</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__SYSTEM__INFO__MODULE.html">System Information API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__SYSTEM__INFO__MODULE.html">System Information API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__SYSTEM__INFO__MODULE.html">System Information API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<tr>
<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/input.keyboard</span></td>
<td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device provides a built-in keyboard supporting any keyboard layout.</td>
+ <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device provides a built-in keyboard supporting any keyboard layout.</td>
</tr>
<tr>
<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/input.keyboard.layout</span></td>
<td>The platform returns the keyboard layout (such as <span style="font-family: Courier New,Courier,monospace">qwerty</span>) supported by the built-in keyboard for this key and returns <span style="font-family: Courier New,Courier,monospace">true</span> for the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/input.keyboard</span> key.
<p>If the device does not provide a built-in keyboard, the platform returns an empty string for this key and returns <span style="font-family: Courier New,Courier,monospace">false</span> for the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/input.keyboard</span> key.</p></td>
</tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/input.rotating_bezel</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the rotating bezel feature.</td>
- </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/input.rotating_bezel</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
+ <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the rotating bezel feature.</td>
+ </tr>
</tbody>
</table>
<p>The following table lists the LED feature keys.</p>
</tr>
<tr>
<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports Adapter APIs, and NDEF APIs which require Near Field Communication (NFC).</td>
+ <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
+ <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports Adapter and NDEF APIs which require Near Field Communication (NFC).</td>
</tr>
<tr>
<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc.card_emulation</span></td>
<td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
<td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device is recognized by the NFC card readers.</td>
</tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc.card_emulation.hce</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the HCE card emulation feature.</td>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc.p2p</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports p2p APIs which require Near Field Communication (NFC).</td>
- </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc.card_emulation.hce</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
+ <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the HCE card emulation feature.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc.p2p</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
+ <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports P2P APIs which require Near Field Communication (NFC).</td>
+ </tr>
<tr>
<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc.reserved_push</span></td>
<td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
<td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key and the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc</span> key, if the device supports the NFC reserved push feature.</td>
</tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc.tag</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports tag APIs which require Near Field Communication (NFC).</td>
- </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.nfc.tag</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
+ <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports Tag APIs which require Near Field Communication (NFC).</td>
+ </tr>
<tr>
<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.push</span></td>
<td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
<td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
<td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports RCA output.</td>
</tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.shape.circle</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
+ <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports a circular screen shape.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.shape.rectangle</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
+ <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports a rectangular screen shape.</td>
+ </tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.shape.rectangle</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the rectangle screen shape.</td>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.shape.circle</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the circle screen shape.</td>
- </tr>
<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/screen.size.large</span></td>
<td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
<td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the large screen size.</td>
<tr>
<td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/shell.appwidget</span></td>
<td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
- <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the AppWidget (Dynamic Box).</td>
+ <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the AppWidget.</td>
</tr>
</tbody>
</table>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.tutorials/html/native/system/system_tutorials_n.htm">System Tutorials</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__FRAMEWORK.html">System API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__FRAMEWORK.html">System API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__FRAMEWORK.html">System API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<p>The following figure illustrates the Telephony Service and APIs.</p>
<p class="figure">Figure: Telephony API and Telephony Service</p>
- <p
style="text-align:center;"><img alt="Telephony API and Telephony Service" src="../../images/telephony.png" /></p>
+ <p
align="center"><img alt="Telephony API and Telephony Service" src="../../images/telephony.png" /></p>
<h2 id="call" name="call">Call Information</h2>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a href="../../../../org.tizen.tutorials/html/native/ui/events_effects_tutorials_n.htm">Event and Effect Tutorials</a></li>
- </ul>
+ <li><a href="../../../../org.tizen.tutorials/html/native/ui/events_effects_tutorials_n.htm">Event and Effect Tutorials</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Ecore__Group.html">Ecore API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje__Group.html">Edje API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Eina__Group.html">Eina API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Ecore__Group.html">Ecore API for Wearable Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje__Group.html">Edje API for Wearable Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Eina__Group.html">Eina API for Wearable Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>
+ </ul>
</div></div>
</div>
</ul>
<p class="figure">Figure: Position mappings</p>
-<p
style="text-align:center;"><img alt="Position mappings" src="../../images/pos_map_all.png" /></p>
+<p
align="center"><img alt="Position mappings" src="../../images/pos_map_all.png" /></p>
<h3>Using Position Mappings</h3>
<p>When using the animation callback function, the animator passes a timeline position parameter with a value between 0.0 (start) and 1.0 (end) to indicate where along the timeline the animator is running.</p>
<p>For this transition, define a new state. This state changes the color and the position of the rectangle.</p>
<pre class="prettyprint">
-// To be place in the "part" definition
+// To be placed in the "part" definition
description
{
state: "color" 0.0;
<th class="note">Note</th>
</tr>
<tr>
-<td class="note">To find a complete example, use <span style="font-family: Courier New,Courier,monospace;">elm_object_signal_emit</span> in the <a href="../../../../org.tizen.tutorials/html/native/ui/menu_tutorial_n.htm">Menu Tutorial</a>.</td>
+<td class="note">To find a complete example, use <span style="font-family: Courier New,Courier,monospace;">elm_object_signal_emit</span> in the <a href="../../../../org.tizen.tutorials/html/native/ui/menu_tutorial_mn.htm">Menu Tutorial</a>.</td>
</tr>
</tbody>
</table>
<th class="note">Note</th>
</tr>
<tr>
-<td class="note"><p>The Evas object can be a low-level component, such as a rectangle, but also a widget, such as a button, image, or calendar.</p>
+<td class="note"><p>The Evas object can be a low-level component, such as a rectangle, but also a UI component, such as a button, image, or calendar.</p>
<p>If you want to animate an Evas object handled by a container, such as a box, you need to either unpack the object before the animation or animate the whole container.</p></td>
</tr>
</tbody>
<h4>Adding Images to an Animation</h4>
-<p>If you do not want to manage widgets for animating images, <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> provides a helper function for directly manipulating images:</p>
+<p>If you do not want to manage UI components for animating images, <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> provides a helper function for directly manipulating images:</p>
<pre class="prettyprint">
elm_transit_effect_image_animation_add(Elm_Transit *transit, Eina_List *images)
<p>The third argument is the direction of the rotation:</p>
<ul>
<li><span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span> is clockwise.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">EINA_FALSE</span> is counterclockwise.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">EINA_FALSE</span> is counter-clockwise.</li>
</ul>
-<p>The following example shows how to create a coin that flips indefinitely. Note that we use images as Elementary widgets for demonstration purposes. You can use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_effect_image_animation_add()</span> function if you do not want to bother creating widgets.</p>
+<p>The following example shows how to create a coin that flips indefinitely. Note that we use images as Elementary UI components for demonstration purposes. You can use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_effect_image_animation_add()</span> function if you do not want to bother creating UI components.</p>
<pre class="prettyprint">
// Coin Heads
</pre>
<p class="figure">Figure: Coin flip</p>
-<p
style="text-align:center;"><img alt="Coin flip" src="../../images/coin_flip_effect.png" /></p>
+<p
align="center"><img alt="Coin flip" src="../../images/coin_flip_effect.png" /></p>
<h4>Resizable Flip Effect</h4>
<p>In the flip example above, we used two objects that have the same size. However, you may sometimes want to flip from one object to another object with different size attributes. The most common example would be using buttons with dimensions that depend on their contents (such as labels). If you decide to use the classic <span style="font-family: Courier New,Courier,monospace;">elm_transit_effect_flip_add()</span> function, the size of the object will change at the moment one object becomes completely hidden and the other one begins to show up. If you wish to interpolate the size attributes as well, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_effect_resizable_flip_add()</span> function:</p>
<p>The third argument is the direction of the rotation:</p>
<ul>
<li><span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span> is clockwise.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">EINA_FALSE</span> is counterclockwise.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">EINA_FALSE</span> is counter-clockwise.</li>
</ul>
<p>This function works the exact same way as the standard flip effect function.</p>
<p>Now that we have listed all the effects that can be implemented using <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span>, we will see how to chain transitions into sequences. To create complex, chained animations without worrying about synchronization between the transitions, use the <span style="font-family: Courier New,Courier,monospace;">elm_transit_chain_transit_add()</span> function. This function takes as arguments two <span style="font-family: Courier New,Courier,monospace;">Elm_Transit</span> objects and will automatically take care of the chaining for you: the second transition will start as soon as the first transition is finished.</p>
-<p>The following example shows how to move a datetime widget on a square trajectory:</p>
+<p>The following example shows how to move a datetime component on a square trajectory:</p>
<pre class="prettyprint">
Evas_Object *dt = elm_datetime_add(ad->win);
</pre>
<p class="figure">Figure: Map</p>
-<p
style="text-align:center;"><img alt="Map" src="../../images/evas_map_1.png" /></p>
+<p
align="center"><img alt="Map" src="../../images/evas_map_1.png" /></p>
<p>The following examples all produce the same result as the above example, but with simpler code:</p>
<p>You can apply several effects to an object by simply setting each point of the map to the appropriate coordinates. The following example shows how to create a simulated perspective:</p>
<p class="figure">Figure: Simulated perspective</p>
-<p
style="text-align:center;"><img alt="Simulated perspective" src="../../images/evas_map_2.png" /></p>
+<p
align="center"><img alt="Simulated perspective" src="../../images/evas_map_2.png" /></p>
<pre class="prettyprint">
evas_map_point_coord_set(m, 0, 100, 100, 0);
<pre class="prettyprint">evas_map_util_rotate(Evas_Map *m, double degrees, Evas_Coord cx, Evas_Coord cy)</pre>
-<p>This function rotates the map based on the angle and the center coordinates of the rotation provided as arguments. A positive angle rotates the map clockwise, while a negative angle rotates the map counterclockwise.</p>
+<p>This function rotates the map based on the angle and the center coordinates of the rotation provided as arguments. A positive angle rotates the map clockwise, while a negative angle rotates the map counter-clockwise.</p>
<p>The following example shows how to rotate an object around its center point by 45 degrees clockwise. In the following figure, the center of rotation is the red dot.</p>
</pre>
<p class="figure">Figure: Rotating around the center point</p>
-<p
style="text-align:center;"><img alt="Rotating around the center point" src="../../images/evas_map_3.png" /></p>
+<p
align="center"><img alt="Rotating around the center point" src="../../images/evas_map_3.png" /></p>
<p>You can rotate the object around any other point simply by setting the last two arguments of the <span style="font-family: Courier New,Courier,monospace;">evas_map_util_rotate()</span> function to the appropriate values:</p>
<pre class="prettyprint">evas_map_util_rotate(m, 45, x + w - 20, y + h - 20);</pre>
<p class="figure">Figure: Rotating around other points</p>
-<p
style="text-align:center;"><img alt="Rotating around other points" src="../../images/evas_map_4.png" /></p>
+<p
align="center"><img alt="Rotating around other points" src="../../images/evas_map_4.png" /></p>
<p>You can also set the center of the window as the center of the rotation using the appropriate coordinates of the Evas canvas:</p>
<p>Maps can also be used to achieve a 3D effect. In a 3D effect, the Z coordinate of each point is meaningful: the higher the value, the further back the point is located. Smaller values (usually negative) mean that the point is closer to the user.</p>
-<p>3D also introduces the concept of the back face of an object. An object is said to be facing the user when all its points are placed in a clockwise formation, as shown in the left map in the following figure. Rotating the map around its Y axis swaps the order of the points into a counterclockwise formation, making the object face away from the user, as shown in the right map in the following figure. The back face is especially relevant in lighting (see below).</p>
+<p>3D also introduces the concept of the back face of an object. An object is said to be facing the user when all its points are placed in a clockwise formation, as shown in the left map in the following figure. Rotating the map around its Y axis swaps the order of the points into a counter-clockwise formation, making the object face away from the user, as shown in the right map in the following figure. The back face is especially relevant in lighting (see below).</p>
<p class="figure">Figure: Rotating around the Y axis</p>
-<p
style="text-align:center;"><img alt="Rotating around the Y axis" src="../../images/evas_map_5.png" /></p>
+<p
align="center"><img alt="Rotating around the Y axis" src="../../images/evas_map_5.png" /></p>
<p>To determine whether a map is facing the user, use the <span style="font-family: Courier New,Courier,monospace;">evas_map_util_clockwise_get()</span> function. This function returns <span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span> if the map is facing the user and <span style="font-family: Courier New,Courier,monospace;">EINA_FALSE</span> if the map is facing away from the user. This is normally done after all the other operations are applied to the map.</p>
<p>Starting from this simple setup, and setting the maps so that the blue square rotates around the Y axis, we get the following:</p>
<p class="figure">Figure: 3D rotation</p>
-<p
style="text-align:center;"><img alt="3D rotation" src="../../images/evas_map_6.png" /></p>
+<p
align="center"><img alt="3D rotation" src="../../images/evas_map_6.png" /></p>
<p>A simple overlay over the image shows the original geometry of each object and the axis around which they are being rotated. The Z axis is not shown, since it is orthogonal to the screen. To show the Z axis, that is, to add 3D perspective to the transformation, use the <span style="font-family: Courier New,Courier,monospace;">evas_map_util_3d_perspective()</span> function on the map after its position has been set:</p>
<p>The result makes the vanishing point the center of each object:</p>
<p class="figure">Figure: Adding perspective</p>
-<p
style="text-align:center;"><img alt="Adding perspective" src="../../images/evas_map_7.png" /></p>
+<p
align="center"><img alt="Adding perspective" src="../../images/evas_map_7.png" /></p>
<h3 id="Color_Light" name="Color_Light">Color and Lighting</h3>
<pre class="prettyprint">evas_map_util_3d_lighting(Evas_Map *m, Evas_Coord lx, Evas_Coord ly, Evas_Coord lz, int lr, int lg, int lb, int ar, int ag, int ab)</pre>
-<p>If the map points are defined counterclockwise, the object faces away from the user and is therefore obscured, since no light is reflecting back from it.</p>
+<p>If the map points are defined counter-clockwise, the object faces away from the user and is therefore obscured, since no light is reflecting back from it.</p>
<p class="figure">Figure: Obscured object</p>
-<p
style="text-align:center;"><img alt="Obscured object" src="../../images/evas_map_8.png" /></p>
+<p
align="center"><img alt="Obscured object" src="../../images/evas_map_8.png" /></p>
<h3 id="Mapping" name="Mapping">Mapping</h3>
<p>Let's get started with the following three images, each sized at 200 × 200 pixels:</p>
<p class="figure">Figure: Starting point</p>
-<p
style="text-align:center;"><img alt="Starting point" src="../../images/evas_map_9.png" /></p>
+<p
align="center"><img alt="Starting point" src="../../images/evas_map_9.png" /></p>
<p>The following three images illustrate the case where a map is set to an image object without setting the right UV mapping for each map point. The objects themselves are mapped properly to their new geometries, but the images are not displayed correctly within the mapped objects.</p>
<p class="figure">Figure: Questionable result</p>
-<p
style="text-align:center;"><img alt="Questionable result" src="../../images/evas_map_10.png" /></p>
+<p
align="center"><img alt="Questionable result" src="../../images/evas_map_10.png" /></p>
<p>To transform an image correctly, Evas needs to know how to handle the image within the map. You can do this using the <span style="font-family: Courier New,Courier,monospace;">evas_map_point_image_uv_set()</span> function, which allows you to map a given point in a map to a given pixel in a source image:</p>
</pre>
<p class="figure">Figure: Correct result</p>
-<p
style="text-align:center;"><img alt="Correct result" src="../../images/evas_map_11.png" /></p>
+<p
align="center"><img alt="Correct result" src="../../images/evas_map_11.png" /></p>
<p>You can also set a map to use only part of an image, or you can even map the points in inverted order. Combined with the <span style="font-family: Courier New,Courier,monospace;">evas_object_image_source_set()</span> function, you can achieve more interesting results still.</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>Circle Components</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="toc-navigation">
+ <div id="profile">
+ <p><img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+ </div>
+
+ <div id="toc_border"><div id="toc">
+ <p class="toc-title">Content</p>
+ <ul class="toc">
+ <li><a href="#datetime">Circle Datetime</a></li>
+ <li><a href="#genlist">Circle Genlist</a></li>
+ <li><a href="#object">Circle Object</a></li>
+ <li><a href="#progressbar">Circle Progressbar</a></li>
+ <li><a href="#scroller">Circle Scroller</a></li>
+ <li><a href="#slider">Circle Slider</a></li>
+ <li><a href="#surface">Circle Surface</a></li>
+ </ul>
+ <p class="toc-title">Related Info</p>
+ <ul class="toc">
+ <li><a href="../../../../org.tizen.tutorials/html/native/ui/circle_components_tutorial_wn.htm">Circle Components Tutorial</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Circle Components</h1>
+
+<p>Circle components extend the UI features and provide functionalities optimized for the circular UI.</p>
+
+ <table class="note">
+<tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">This feature is supported in wearable applications only.</td>
+ </tr>
+ </tbody>
+ </table>
+
+<p>Generally, circle components can be added with the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_[component_name]_add()</span> function, which returns a circle object handle. Circle components are shown in a form of an arch with radius, line width, and color. These properties can be set with the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item*</span> APIs. The circle object can also take a rotary event. Generally, a clockwise rotary event increases the value of the rotary event activated by the circle object, and a counter clockwise rotary event decreases the value.</p>
+
+<h2 id="datetime">Circle Datetime</h2>
+
+
+<p class="figure">Figure: Circle Datetime</p>
+<p align="center"><img alt="Circle Datetime" src="../../images/circle_datetime.png" /></p>
+
+<p>The circle datetime extends <span style="font-family: Courier New,Courier,monospace">elm_datetime</span> by visualizing the selected field. If a rotary event is activated by <span style="font-family: Courier New,Courier,monospace">eext_rotary_object_event_activated_set()</span>, a circle datetime increases or decreases value of selected field in <span style="font-family: Courier New,Courier,monospace">elm_datetime</span> by the clockwise or counter clockwise rotary event.</p>
+
+<h3>Creating a Circle Datetime</h3>
+
+<p>You can use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_datetime_add()</span> function to create a circle object. When creating a circle datetime, the <span style="font-family: Courier New,Courier,monospace">elm_datetime</span> handle must be passed as an argument. If a circle surface is passed as an argument, a circle object connected with a circle surface is created, and it is rendered by the circle surface. When <span style="font-family: Courier New,Courier,monospace">NULL</span> is passed as a surface argument, the new circle object is managed and rendered by itself.</p>
+<pre class="prettyprint">
+Evas_Object *datetime;
+Evas_Object *circle_datetime;
+
+datetime = elm_datetime_add(parent);
+circle_datetime = eext_circle_object_datetime_add(datetime, surface);
+</pre>
+
+<h3>Activating a Rotary Event</h3>
+
+<p>You can activate and deactivate the circle datetime by using the <span style="font-family: Courier New,Courier,monospace">eext_rotary_object_event_activated_set()</span> function. If the second parameter is <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span>, the circle datetime can receive the rotary event. Otherwise, the circle datetime cannot receive the rotary event.</p>
+<pre class="prettyprint">
+eext_rotary_object_event_activated_set(circle_datetime, EINA_TRUE);
+</pre>
+
+<h3>Using the Circle Object Property</h3>
+
+<p>A circle datetime has the following styles:</p>
+<ul>
+ <li><span style="font-family: Courier New,Courier,monospace">default</span></li>
+</ul>
+<p>When created, the circle datetime has default style automatically.</p>
+
+<p>The circle datetime objects support the following circle object API calls:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_line_width_set()</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_line_width_get()</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_radius_set()</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_radius_get()</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_color_set()</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_color_get()</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_disabled_set()</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_disabled_get()</span></li>
+</ul>
+<p>A circle datetime has the following item:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">default</span>: Default circle item that draws a marker.</li>
+</ul>
+
+<p>You can change the properties of the items by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item*</span> APIs.</p>
+<p>For more information, see the <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__CIRCLE__DATETIME__MODULE.html">Efl Extension Circle Datetime</a> API.</p>
+
+<h2 id="genlist">Circle Genlist</h2>
+
+<p class="figure">Figure: Circle Genlist</p>
+<p align="center"><img alt="Circle Genlist" src="../../images/circle_genlist.png" /></p>
+
+<p>Use the circle genlist to visualize and utilize the scroll effect for <span style="font-family: Courier New,Courier,monospace">elm_genlist</span>. While <span style="font-family: Courier New,Courier,monospace">elm_genlist</span> provides a scrollbar with straight horizontal and vertical movement, the circle genlist provides scrollbar with circular movement. It is also operated with rotary events to move to the next or previous item.</p>
+
+<h3>Creating a Circle Genlist</h3>
+
+<p>A genlist and a surface are necessary when creating the circle genlist. The circle genlist is added with the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_genlist_add()</span> function.</p>
+<pre class="prettyprint">
+Evas_Object *genlist, *circle_genlist, *parent;
+
+genlist = elm_genlist_add(parent);
+circle_genlist = eext_circle_object_genlist_add(genlist, surface);
+</pre>
+
+<h3>Configuring the Circle Genlist</h3>
+
+<p>You can set the circle genlist scroller policy by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_genlist_scroller_policy_set()</span> function.</p>
+<pre class="prettyprint">
+eext_circle_object_genlist_scroller_policy_set(circle_genlist,
+ ELM_SCROLLER_POLICY_OFF,
+ ELM_SCROLLER_POLICY_ON);
+</pre>
+<p>This sets the scrollbar visibility policy of a given scroller. <span style="font-family: Courier New,Courier,monospace">ELM_SCROLLER_POLICY_AUTO</span> indicates the scrollbar is made visible if it is needed, and otherwise is kept hidden. <span style="font-family: Courier New,Courier,monospace">ELM_SCROLLER_POLICY_ON</span> turns the scrollbar on all the time, and <span style="font-family: Courier New,Courier,monospace">ELM_SCROLLER_POLICY_OFF</span> turns it off. This applies to the horizontal and vertical scrollbars respectively.</p>
+<p>The following enum values are available for circle genlist.</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">ELM_SCROLLER_POLICY_AUTO</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">ELM_SCROLLER_POLICY_ON</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">ELM_SCROLLER_POLICY_OFF</span></li>
+</ul>
+
+<h3>Activating a Rotary Event</h3>
+
+<p>You can activate and deactivate the circle genlist by using the <span style="font-family: Courier New,Courier,monospace">eext_rotary_object_event_activated_set()</span> function. If the second parameter is <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span>, the circle genlist can receive the rotary event. Otherwise, the circle genlist cannot receive the rotary event.</p>
+<pre class="prettyprint">
+eext_rotary_object_event_activated_set(circle_genlist, EINA_TRUE);
+</pre>
+
+<h3>Using the Circle Object Property</h3>
+
+<p>Circle genlist objects support the following circle object API calls:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_line_width_set()</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_line_width_get()</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_radius_set()</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_radius_get()</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_color_set()</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_color_get()</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_disabled_set()</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_disabled_get()</span></li>
+</ul>
+<p>A circle genlist has the following item:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">default</span>: Default circle item. It draws vertical scroll bar.</li>
+<li><span style="font-family: Courier New,Courier,monospace">vertical,scroll,bg</span>: Vertical scroll background circle item.</li>
+</ul>
+<p>You can change the properties of the items by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item*</span> APIs.</p>
+<p>For more information, see the <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__CIRCLE__GENLIST__MODULE.html">Efl Extension Circle Genlist</a> API.</p>
+
+
+
+<h2 id="object">Circle Object</h2>
+
+<p>A circle object extends elementary components in a form of circular design. Sometimes, a circle object merely provides additional UI features to elementary component, and sometimes it works as an independent component with UI and functionalities.</p>
+
+<h3>Creating a Circle Object</h3>
+
+<p>You can use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_add()</span> function to create a circle object. When creating a circle object, you can choose whether the circle object is rendered by itself or by the circle surface. If the circle surface is passed as an argument, a circle object connected with circle surface is created, and it is rendered by the circle surface.</p>
+<pre class="prettyprint">
+Evas_Object *circle_obj;
+
+circle_obj = eext_circle_object_add(parent, surface);
+</pre>
+
+<p>When <span style="font-family: Courier New,Courier,monospace">NULL</span> is passed as a surface argument, the new circle object is managed and rendered by itself. Here, a circle object without a circle surface is created and showed in a size of 360 x 360.</p>
+<pre class="prettyprint">
+Evas_Object *circle_obj;
+
+circle_obj = eext_circle_object_add(parent, NULL);
+evas_object_size_hint_min_set(circle_obj, 360, 360);
+evas_object_show(circle_obj);
+</pre>
+
+<h3>Setting the Line Width</h3>
+
+<p>You can set the line width of the circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_line_width_set()</span> function. Here, circle object with a surface is created and its line width set to 20. You can get the current line width of a circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_line_width_get()</span> function.</p>
+<pre class="prettyprint">
+Evas_Object *circle_obj;
+
+circle_obj = eext_circle_object_add(parent, surface);
+eext_circle_object_line_width_set(circle_obj, 20);
+</pre>
+
+<p>You can set the line width of a certain item in a circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_line_width_set()</span> function. If the name of the item is passed as <span style="font-family: Courier New,Courier,monospace">default</span>, it works the same way as the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_line_width_set()</span> function. Similar to the above example, a circle object with a surface is created and its line width is set to 20. You can get the current line width of the item by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_line_width_get()</span> function.</p>
+<pre class="prettyprint">Evas_Object *circle_obj;
+
+circle_obj = eext_circle_object_add(parent, surface);
+eext_circle_object_item_line_width_set(circle_obj, "default", 20);
+</pre>
+
+<h3>Setting the Angle</h3>
+
+<p>You can set the angle of the circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_set()</span> function. Here, circle object with surface is created and its angle set to a 45.0 degree angle. You can get the current angle of a circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_get()</span> function.</p>
+<pre class="prettyprint">
+Evas_Object *circle_obj;
+
+circle_obj = eext_circle_object_add(parent, surface);
+eext_circle_object_angle_set(circle_obj, 45.0);
+</pre>
+
+<p>You can set the angle of a certain item in a circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_angle_set()</span> function. If name of the item is passed as <span style="font-family: Courier New,Courier,monospace">default</span>, it works the same way as <span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_set()</span> function. Similar to the above example, a circle object with surface is created and its angle is set to a 45.0 degree angle. You can get the current angle of the item by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_angle_get()</span> function.</p>
+<pre class="prettyprint">
+Evas_Object *circle_obj;
+
+circle_obj = eext_circle_object_add(parent, surface);
+eext_circle_object_item_angle_set(circle_obj, "default", 45.0);
+</pre>
+
+<h3>Setting the Angle Offset</h3>
+
+<p>You can set the angle offset of the circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_offset_set()</span> function. Here, a circle object with a 45.0 degree angle is created and its angle offset set to 30.0 degrees. As a result, the circle object has an arch of 45.0 degree angle line starting from 30.0 degrees to 75.0 degrees. You can get the current angle offset of a circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_offset_get()</span> function.</p>
+<pre class="prettyprint">
+Evas_Object *circle_obj;
+
+circle_obj = eext_circle_object_add(parent, surface);
+eext_circle_object_angle_set(circle_obj, 45.0);
+eext_circle_object_angle_offset_set(circle_obj, 30.0);
+</pre>
+
+<p>You can set the angle offset of a certain item in a circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_angle_offset_set()</span> function. If name of the item is passed as <span style="font-family: Courier New,Courier,monospace">default</span>, it works the same way as <span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_offset_set()</span> function. The following code works the same way as in the above example. You can get the current angle of the item by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_angle_offset_get()</span> function.</p>
+<pre class="prettyprint">
+Evas_Object *circle_obj;
+
+circle_obj = eext_circle_object_add(parent, surface);
+eext_circle_object_item_angle_set(circle_obj, "default", 45.0);
+eext_circle_object_item_angle_offset_set(circle_obj, "default", 30.0);
+</pre>
+
+<h3>Setting the Minimum and Maximum Angle</h3>
+
+<p>You can set the minimum and maximum angle of the circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_min_max_set()</span> function. Here, a circle object with a surface is created and its minimum angle set to 0.0 degrees and maximum angle to 90.0 degrees. You can get the current minimum and maximum angle of the circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_min_max_get()</span> function.</p>
+<pre class="prettyprint">
+Evas_Object *circle_obj;
+
+circle_obj = eext_circle_object_add(parent, surface);
+eext_circle_object_angle_min_max_set(circle_obj, 0.0, 90.0);
+</pre>
+
+<p>You can set the minimum and maximum angles of a certain item in a circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_angle_min_max_set()</span> function. If name of the item is passed as <span style="font-family: Courier New,Courier,monospace">default</span>, it works the same way as the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_min_max_set()</span> function. Similar to the above example, a circle object with a minimum and maximum angles of 0.0 and 90.0 is created. You can get the current minimum and maximum angle of the item by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_angle_min_max_get()</span> function.</p>
+<pre class="prettyprint">
+Evas_Object *circle_obj;
+
+circle_obj = eext_circle_object_add(parent, surface);
+eext_circle_object_item_angle_min_max_set(circle_obj, "default", 0.0, 90.0);
+</pre>
+
+<h3>Setting the Minimum and Maximum Value</h3>
+
+<p>You can set the minimum and maximum values of the circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_min_max_set()</span> function. Here, a circle object with a surface is created and its minimum value is set to 0.0 degrees and maximum value to 10.0 degrees. You can get the current minimum and maximum value of the circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_min_max_get()</span> function.</p>
+<pre class="prettyprint">
+Evas_Object *circle_obj;
+
+circle_obj = eext_circle_object_add(parent, surface);
+eext_circle_object_value_min_max_set(circle_obj, 0.0, 10.0);
+</pre>
+
+<p>You can set the value of a certain item in a circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_angle_min_max_set()</span> function. If name of the item is passed as <span style="font-family: Courier New,Courier,monospace">default</span>, it works the same way as the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_min_max_set()</span> function. Similar to the above example, a circle object with a minimum and maximum value of 0.0 to 10.0 degrees is created. You can get the current minimum and maximum values of the item by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_value_min_max_get()</span> function.</p>
+<pre class="prettyprint">
+Evas_Object *circle_obj;
+
+circle_obj = eext_circle_object_add(parent, surface);
+eext_circle_object_item_value_min_max_set(circle_obj, "default", 0.0, 10.0);
+</pre>
+
+<h3>Setting the Value</h3>
+
+<p>You can set the value of the circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_set()</span> function. Here, a circle object with a surface is created and its value set to 5.0. You can get the current value of the circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_get()</span> function.</p>
+<pre class="prettyprint">
+Evas_Object *circle_obj;
+
+circle_obj = eext_circle_object_add(parent, surface);
+eext_circle_object_value_set(circle_obj, 5.0);
+</pre>
+
+<p>You can set the value of a certain item in a circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_value_set()</span> function. If name of the item is passed as <span style="font-family: Courier New,Courier,monospace">default</span>, it works the same as the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_set()</span> function. Similar to the above example, a circle object with a surface is created and its value is set to 5.0 degree angle. You can get the current value of the item by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_value_get()</span> function.</p>
+<pre class="prettyprint">
+Evas_Object *circle_obj;
+
+circle_obj = eext_circle_object_add(parent, surface);
+eext_circle_object_item_value_set(circle_obj, "default", 5.0);
+</pre>
+
+<table class="note">
+<tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">The value cannot be lower than the minimum value or higher than the maximum value.</td>
+ </tr>
+ </tbody>
+ </table>
+
+<h3>Setting the Color</h3>
+
+<p>You can set the color of the circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_color_set()</span> function. To set the color, red, green, blue, and alpha values in range from 0 to 255 must be passed. Here, a circle object with a surface is created and its color set to blue. You can get the current color of circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_color_get()</span> function.</p>
+<pre class="prettyprint">
+Evas_Object *circle_obj;
+
+circle_obj = eext_circle_object_add(parent, surface);
+eext_circle_object_color_set(circle_obj, 255, 0, 0, 255);
+</pre>
+
+<p>You can set the color of a certain item in a circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_color_set()</span> function. If name of the item is passed as <span style="font-family: Courier New,Courier,monospace">default</span>, it works the same way as the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_color_set()</span> function. Similar to the above example, a circle object with a surface is created and its color is set to red. You can get the current color of the item by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_color_get()</span> function.</p>
+<pre class="prettyprint">
+Evas_Object *circle_obj;
+
+circle_obj = eext_circle_object_add(parent, surface);
+eext_circle_object_item_value_set(circle_obj, "default", 255, 0, 0, 255);
+</pre>
+
+<h3>Setting the Radius</h3>
+
+<p>You can set the radius of the circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_radius_set()</span> function. Here, a circle object with radius of 50.0 is created. You can get the current radius of the circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_radius_get()</span> function.</p>
+<pre class="prettyprint">
+Evas_Object *circle_obj;
+
+circle_obj = eext_circle_object_add(parent, surface);
+eext_circle_object_radius_set(circle_obj, 50.0);
+</pre>
+
+<p>You can set the radius of a certain item in a circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_radius_set()</span> function. If name of the item is passed as <span style="font-family: Courier New,Courier,monospace">default</span>, it works the same way as the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_radius_set()</span> function. Similar to the above example, a circle object with a radius of 50.0 is created. You can get the current radius of the item by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item_radius_get()</span> function.</p>
+<pre class="prettyprint">
+Evas_Object *circle_obj;
+
+circle_obj = eext_circle_object_add(parent, surface);
+eext_circle_object_item_radius_set(circle_obj, "default", 50.0);
+</pre>
+
+<h3>Disabling a Circle Object</h3>
+
+<p>You can disable the circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_disabled_set()</span> function. Here, a circle object is disabled. You can get the current disabled status of circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_disabled_get()</span> function.</p>
+<pre class="prettyprint">
+Evas_Object *circle_obj;
+
+circle_obj = eext_circle_object_add(parent, surface);
+eext_circle_object_disabled_set(circle_obj, EINA_TRUE);
+</pre>
+
+<p>You can enable a disabled circle object by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_disabled_set()</span> function with <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span> argument.</p>
+<pre class="prettyprint">
+eext_circle_object_disabled_set(circle_obj, EINA_FALSE);
+</pre>
+
+
+
+
+<h2 id="progressbar">Circle Progressbar</h2>
+
+<p class="figure">Figure: Circle Progressbar</p>
+<p align="center"><img alt="Circle Progressbar" src="../../images/circle_progressbar.png" /></p>
+
+<p>The circle progressbar aims to show the progress status of a given task with circular design. It visualizes the progress status within a range.</p>
+
+<h3>Creating a Circle Progressbar</h3>
+
+<p>You can create the circle progressbar by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_progressbar_add()</span> function. When creating the circle progressbar, a surface is necessary to render on the surface.</p>
+<pre class="prettyprint">
+Evas_Object *circle_progressbar, *parent;
+circle_progressbar = eext_circle_object_progressbar_add(parent, surface);
+</pre>
+
+<h3>Using the Circle Object Property</h3>
+<p>Circle progressbar supports the following circle object API calls:</p>
+<ul>
+ <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_min_max_set()</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_min_max_get()</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_set()</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_get()</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_min_max_set()</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_min_max_get()</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_offset_set()</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_offset_get()</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_set()</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_get()</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_line_width_set()</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_line_width_get()</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_radius_set()</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_radius_get()</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_color_set()</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_color_get()</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_disabled_set()</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_disabled_get()</span></li>
+</ul>
+<p>A circle progressbar has the following items:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">default</span>: Default circle item that draws the progressbar.</li>
+<li><span style="font-family: Courier New,Courier,monospace">bg</span>: Progress bar background circle item.</li>
+</ul>
+<p>You can change the properties of the items by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item*</span> APIs.</p>
+<p>For more information, see the <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__CIRCLE__PROGRESSBAR__MODULE.html">Efl Extension Circle Progressbar</a> API.</p>
+
+<h3>Configuring Circle Progressbar</h3>
+
+<p>Before using the circle progressbar, its minimum and maximum values are set with the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_min_max_set()</span> function. The current value is set with <span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_set()</span>.</p>
+<p>Here, the minimum value is set to 0.0, the maximum value to 100.0, and the current value to 3.0.</p>
+<pre class="prettyprint">
+eext_circle_object_value_min_max_set(circle_progressbar, 0.0, 100.0);
+eext_circle_object_value_set(circle_progressbar, 3.0);
+</pre>
+
+<h2 id="scroller">Circle Scroller</h2>
+
+<p class="figure">Figure: Circle Scroller</p>
+<p align="center"><img alt="Circle Scroller" src="../../images/circle_scroller.png" /></p>
+
+<p>The circle scroller changes corresponding to the rotary events. It shows the whole scrollable area with a circular scroll bar. It wraps the <span style="font-family: Courier New,Courier,monospace">elm_scroller</span> internally only to draw a circular scroll bar to the edge of the circular screen. This means you can use <span style="font-family: Courier New,Courier,monospace">elm_scroller</span> callbacks and APIs excluding <span style="font-family: Courier New,Courier,monospace">elm_scroller_policy_set()</span> and <span style="font-family: Courier New,Courier,monospace">elm_scroller_policy_get()</span> APIs.</p>
+
+<h3>Creating a Circle Scroller</h3>
+
+<p>To create a circle scroller, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_scroller_add()</span> function. <span style="font-family: Courier New,Courier,monospace">elm_scroller</span> has to be passed by the first parameter of this function.</p>
+<pre class="prettyprint">
+Evas_Object *scroller;
+Evas_Object *circle_scroller;
+
+scroller = elm_scroller_add(parent);
+circle_scroller = eext_circle_object_scroller_add(scroller, surface);
+</pre>
+
+<h3>Activating the Rotary Event</h3>
+
+<p>You can activate and deactivate the circle scroller by using the <span style="font-family: Courier New,Courier,monospace">eext_rotary_object_event_activated_set()</span> function. If the second parameter is <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span>, the circle scroller can receive the rotary event. Otherwise, the circle scroller cannot receive the rotary event.</p>
+<pre class="prettyprint">
+eext_rotary_object_event_activated_set(circle_scroller, EINA_TRUE);
+</pre>
+
+<h3>Using the Circle Object Property</h3>
+
+<p>A circle scroller has the following styles:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">default</span></li>
+</ul>
+<p>When created, the circle scroller has default style automatically.</p>
+
+<p>Circle scroller objects support the following circle object API calls:</p>
+<ul>
+ <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_line_width_set()</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_line_width_get()</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_radius_set()</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_radius_get()</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_color_set()</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_color_get()</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_disabled_set()</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_disabled_get()</span></li>
+</ul>
+<p>A circle slider has the following items:</p>
+<ul>
+ <li><span style="font-family: Courier New,Courier,monospace">default</span>: Default circle item that draws the vertical scroll bar.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">vertical,scroll,bg</span>: Vertical scroll background circle item.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">horizontal,scroll,bar</span>: Horizontal scroll bar circle item.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">horizontal,scroll,bg</span> : Horizontal scroll background circle item.</li>
+</ul>
+<p>You can change the properties of the items by using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item*</span> APIs.</p>
+<p>For more information, see the <a href="../../../..//org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__CIRCLE__SCROLLER__MODULE.html">Efl Extension Circle Scroller</a> API.</p>
+
+<h3>Configuring the Circle Scroller</h3>
+
+<p>You can use <span style="font-family: Courier New,Courier,monospace">elm_scroller</span> APIs to configure a circle scroller, except <span style="font-family: Courier New,Courier,monospace">elm_scroller_policy_set()</span> and <span style="font-family: Courier New,Courier,monospace">elm_scroller_policy_get()</span> APIs.</p>
+<p>Instead of excluded APIs, <span style="font-family: Courier New,Courier,monospace">eext_circle_object_scroller_policy_set()</span> and <span style="font-family: Courier New,Courier,monospace">eext_circle_object_scroller_policy_get()</span> functions are provided for the circle scroller.</p>
+<p>A policy parameter has the following value.</p>
+<ul>
+ <li><span style="font-family: Courier New,Courier,monospace">ELM_SCROLLER_POLICY_AUTO</span>: indicates the scrollbar is made visible if it is needed, and otherwise is kept hidden.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">ELM_SCROLLER_POLICY_ON</span>: Turns the scrollbar on all the time.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">ELM_SCROLLER_POLICY_OFF</span>: Turns the scrollbar off. This applies to the horizontal and vertical scrollbars respectively.</li>
+</ul>
+<p>The following example shows how to set the scroll bar visibility policy to <span style="font-family: Courier New,Courier,monospace">ELM_SCROLLER_POLICY_AUTO</span> for horizontal scroll bar and <span style="font-family: Courier New,Courier,monospace">ELM_SCROLLER_POLICY_OFF</span> for vertical scroll bar.</p>
+<pre class="prettyprint">
+eext_circle_object_scroller_policy_set(circle_scroller, ELM_SCROLLER_POLICY_AUTO, ELM_SCROLLER_POLICY_OFF);
+</pre>
+
+<h2 id="slider">Circle Slider</h2>
+
+<p class="figure">Figure: Circle Slider</p>
+<p align="center"><img alt="Circle Slider" src="../../images/circle_slider.png" /></p>
+
+<p>The circle slider changes corresponding to rotary events. The circle slider not only extends the UI feature of the <span style="font-family: Courier New,Courier,monospace">elm_slider</span>, but also replaces the functionalities of the <span style="font-family: Courier New,Courier,monospace">elm_slider</span> in a circular design.</p>
+
+<h3>Adding an Eext Slider object</h3>
+
+<p>To create a circle slider, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_slider_add()</span> function.</p>
+<pre class="prettyprint">
+Evas_Object *circle_slider = NULL;
+circle_slider = eext_circle_object_slider_add(parent, surface);
+</pre>
+
+<h3>Activating the Rotary Event</h3>
+
+<p>You can activate or deactivate the circle slider by using the <span style="font-family: Courier New,Courier,monospace">eext_rotary_object_event_activated_set()</span> function. If the second parameter is <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span>, the circle slider can receive the rotary event. Otherwise, the circle slider cannot receive the rotary event.</p>
+<pre class="prettyprint">
+eext_rotary_object_event_activated_set(circle_slider, EINA_TRUE);
+</pre>
+
+<h3>Using the Circle Slider Property</h3>
+
+<p>A circle slider has the following styles:</p>
+<ul>
+ <li><span style="font-family: Courier New,Courier,monospace">default</span></li>
+</ul>
+
+<p>When created, the circle slider has default style automatically.</p>
+<p>Circle slider objects support the following circle object API calls:</p>
+<ul>
+ <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_min_max_set()</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_min_max_get()</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_set()</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_get()</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_min_max_set()</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_min_max_get()</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_offset_set()</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_offset_get()</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_set()</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_angle_get()</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_line_width_set()</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_line_width_get()</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_radius_set()</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_radius_get()</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_color_set()</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_color_get()</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_disabled_set()</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">eext_circle_object_disabled_get()</span></li>
+</ul>
+<p>A circle slider has the following items:</p>
+<ul>
+ <li><span style="font-family: Courier New,Courier,monospace">default</span>: Default circle item, It draws slider bar.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">bg</span>: Background circle item.</li>
+</ul>
+<p>You can change the properties of the items by using <span style="font-family: Courier New,Courier,monospace">eext_circle_object_item*</span> APIs.</p>
+<p>For more information, see the <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__CIRCLE__SLIDER__MODULE.html">Efl Extension Circle Slider</a> API.</p>
+
+<h3>Configuring the Circle Slider</h3>
+
+<p>The circle slider step value is used when the rotary event increases or decreases the circle slider value. It can be set with the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_slider_step_set()</span> function.</p>
+<p>Here, the step value is set to 0.5.</p>
+<pre class="prettyprint">
+eext_circle_object_slider_step_set(circle_slider, 0.5);
+</pre>
+<p>Before using the circle slider, its minimum and maximum values are set with <span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_min_max_set()</span>. The current value is set with <span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_set()</span>.</p>
+<p>Here, the minimum value is set to 0.0, the maximum value to 15.0, and the current value to 3.0.</p>
+<pre class="prettyprint">
+eext_circle_object_value_min_max_set(circle_slider, 0.0, 15.0);
+eext_circle_object_value_set(circle_slider, 3.0);
+</pre>
+<p>You can retrieve the current value of the circle slider with the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_get()</span> function.</p>
+<pre class="prettyprint">
+double value = eext_circle_object_value_get(circle_slider);
+</pre>
+
+<h3>Using Circle Slider Callbacks</h3>
+
+<p>The circle slider emits the following signal:</p>
+<ul>
+ <li><span style="font-family: Courier New,Courier,monospace">value,changed</span>: The rotary event changes the circle slider value.</li>
+</ul>
+<p>For this signal, <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+<p>This is how to register a callback on the <span style="font-family: Courier New,Courier,monospace">value,changed</span> signal.</p>
+<pre class="prettyprint">
+{
+ evas_object_smart_callback_add(slider, "value,changed", _value_changed_cb, data);
+}
+
+// Callback function for the "value,changed" signal
+// This callback is called when a value of the circle slider is changed
+static void
+_value_changed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ dlog_print(DLOG_INFO, LOG_TAG, "Circle slider value changed. \n");
+}
+</pre>
+
+<h2 id="surface">Circle Surface</h2>
+
+<p>The circle surface manages and renders circle objects. Multiple circle objects can be connected to one circle surface as candidates of an object to be rendered. When one of circle objects is set as visible, the surface renders the circle object and hides the others.</p>
+
+<h3>Creating a Circle Surface</h3>
+
+<p>To create a new circle surface:</p>
+<pre class="prettyprint">
+Eext_Circle_Surface *surface;
+Evas_Object *conformant;
+
+conformant = elm_conformant_add(parent);
+surface = eext_circle_surface_conformant_add(conformant);
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">eext_circle_surface_conformant_add()</span> function creates a circle surface in the conformant layer. If you want to create a circle surface in the layout layer, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_surface_layout_add()</span> function:</p>
+<pre class="prettyprint">
+Eext_Circle_Surface *surface;
+Evas_Object *layout;
+
+layout = elm_layout_add(parent);
+surface = eext_circle_surface_layout_add(layout);
+</pre>
+
+<p>If you want to create a circle surface in the naviframe layer, use the <span style="font-family: Courier New,Courier,monospace">eext_circle_surface_naviframe_add()</span> function:</p>
+<pre class="prettyprint">
+Eext_Circle_Surface *surface;
+Evas_Object *naviframe;
+
+naviframe = elm_naviframe_add(parent);
+surface = eext_circle_surface_naviframe_add(naviframe);
+</pre>
+
+<table class="note">
+<tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">A circle surface is a non-graphical object. It adds no graphics to or around the objects it holds.</td>
+ </tr>
+ </tbody>
+ </table>
+
+<h3>Adding Circle Objects to the Circle Surface</h3>
+
+<p>You can add any circle object to a circle surface. The following example shows how to create an <span style="font-family: Courier New,Courier,monospace">eext_slider</span> component and add it to a circle surface in conformant layer:</p>
+<pre class="prettyprint">
+Eext_Circle_Surface *surface;
+Evas_Object *slider;
+
+surface = eext_circle_surface_conformant_add(conformant);
+slider = eext_circle_object_slider_add(parent, surface);
+</pre>
+
+<h3>Deleting Circle Surface</h3>
+
+<p>Deleting an Evas object automatically deletes the circle surface in the same layer. However, you can explicitly use the <span style="font-family: Courier New,Courier,monospace">eext_circle_surface_del()</span> function to delete a circle surface.</p>
+<pre class="prettyprint">
+eext_circle_surface_del(surface);
+</pre>
+
+<table class="note">
+<tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">The <span style="font-family: Courier New,Courier,monospace">eext_circle_surface_del()</span> function does not delete the connected circle objects.</td>
+ </tr>
+ </tbody>
+ </table>
+
+<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>Components</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+ <div id="profile">
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ </div>
+ <div id="toc_border"><div id="toc">
+ <p class="toc-title">Content</p>
+ <ul class="toc">
+ <li><a href="#background">Background</a></li>
+ <li><a href="#button">Button</a></li>
+ <li><a href="#check">Check</a></li>
+ <li><a href="#colorselector">Colorselector</a></li>
+ <li><a href="#ctxpopup">Ctxpopup</a></li>
+ <li><a href="#datetime">Datetime</a></li>
+ <li><a href="#entry">Entry</a></li>
+ <li><a href="#flip">Flip</a></li>
+ <li><a href="#gengrid">Gengrid</a></li>
+ <li><a href="#genlist">Genlist</a></li>
+ <li><a href="#glview">GLView</a></li>
+ <li><a href="#icon">Icon</a></li>
+ <li><a href="#image">Image</a></li>
+ <li><a href="#index">Index</a></li>
+ <li><a href="#label">Label</a></li>
+ <li><a href="#list">List</a></li>
+ <li><a href="#map">Map</a></li>
+ <li><a href="#notify">Notify</a></li>
+ <li><a href="#panel">Panel</a></li>
+ <li><a href="#photo">Photo</a></li>
+ <li><a href="#photocam">Photocam </a></li>
+ <li><a href="#plug">Plug</a></li>
+ <li><a href="#popup">Popup</a></li>
+ <li><a href="#progressbar">Progressbar</a></li>
+ <li><a href="#radio">Radio</a></li>
+ <li><a href="#segmentcontrol">Segmentcontrol</a></li>
+ <li><a href="#slider">Slider</a></li>
+ <li><a href="#spinner">Spinner</a></li>
+ <li><a href="#toolbar_component">Toolbar</a></li>
+ <li><a href="#tooltip">Tooltip</a></li>
+ <li><a href="#win">Win</a></li>
+ </ul>
+ <p class="toc-title">Related Info</p>
+ <ul class="toc">
+ <li><a href="../../../../org.tizen.tutorials/html/native/ui/ui_component_tutorials_mn.htm">UI Components Tutorials</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje__Group.html">Edje API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Eina__Group.html">Eina API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Components</h1>
+
+ <table class="note">
+<tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">This feature is supported in mobile applications only.</td>
+ </tr>
+ </tbody>
+ </table>
+
+ <h2 id="background" name="background">Background</h2>
+
+<p class="figure">Figure: Red color background</p>
+<p align="center"><img alt="Red color background" src="../../images/bg.png" /></p>
+
+<p class="figure">Figure: Background hierarchy</p>
+<p align="center"><img alt="Background hierarchy" src="../../images/bg_tree.png" /></p>
+
+<p>The background component can be used to set a solid background decoration to a window or to a container object. It works like an image, but has some background specific properties, for example it can be set to a tiled, centered, scaled, or stretched mode. There are no specific signals relative to background object.</p>
+
+<h3>Adding a Background Component</h3>
+
+<p>A background is created with the <span style="font-family: Courier New,Courier,monospace">elm_bg_add()</span> function.</p>
+
+<pre class="prettyprint">
+Evas_Object *bg, *parent;
+
+// Create a background
+bg = elm_bg_add(parent);
+</pre>
+
+<h3>Changing the Color of the Background</h3>
+
+<p>You can set the color of the background with the <span style="font-family: Courier New,Courier,monospace">elm_bg_color_set()</span> function. The following example sets the background color to red.</p>
+
+<pre class="prettyprint">
+Evas_Object *bg;
+
+// Use red color for background
+elm_bg_color_set(bg, 0xFF, 0x00, 0x00);
+</pre>
+
+<h3>Changing the Image of the Background</h3>
+
+<p>It is also possible to set an image or an Edje group as a background using the <span style="font-family: Courier New,Courier,monospace">elm_bg_file_set()</span> function. The display mode of the image in the background can be chosen with <span style="font-family: Courier New,Courier,monospace">elm_bg_option_set()</span>, where the following modes are available:</p>
+
+<ul>
+ <li><span style="font-family: Courier New,Courier,monospace">ELM_BG_OPTION_CENTER</span>: center the background image.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">ELM_BG_OPTION_SCALE</span>: scale the background image, retaining aspect ratio.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">ELM_BG_OPTION_STRETCH</span>: stretch the background image to fill the UI component's area.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">ELM_BG_OPTION_TILE</span>: tile the background image at its original size.</li>
+</ul>
+
+<pre class="prettyprint">
+Evas_Object *bg;
+
+// Set a file on the disk as a background image
+elm_bg_file_set(bg, "/path/to/the/image", NULL);
+// Set an Edje group as a background image
+elm_bg_file_set(bg, "/path/to/the/edje", "edje_group");
+elm_bg_option_set(bg, ELM_BG_OPTION_STRETCH)
+</pre>
+
+<h3>Using Overlay</h3>
+
+<p>An overlay can be set using the <span style="font-family: Courier New,Courier,monospace">overlay</span> part name.</p>
+
+<pre class="prettyprint">
+elm_object_part_content_set(bg, "overlay", over);
+</pre>
+
+<p>Here, the overlay is an Edje object that is displayed on top of the current background object.</p>
+
+
+ <h2 id="button" name="button">Button</h2>
+
+<p class="figure">Figure: Button component</p>
+<p align="center"><img alt="Button component" src="../../images/button.png" /></p>
+
+<p class="figure">Figure: Button hierarchy</p>
+<p align="center"><img alt="Button hierarchy" src="../../images/button_tree.png" /></p>
+
+<p>The Elementary button component is a simple push button. It is composed of a label icon and an icon object and has an autorepeat feature.</p>
+
+<h3>Adding a Button Component</h3>
+
+<p>Create a button.</p>
+<pre class="prettyprint">
+Evas_Object *button, *parent;
+
+// Create a button
+button = elm_button_add(parent);</pre>
+
+<h3>Adding an Icon Inside a Button</h3>
+
+<p>The icon can be updated with <span style="font-family: Courier New,Courier,monospace">elm_object_part_content_set()</span> function with the <span style="font-family: Courier New,Courier,monospace">icon</span> part name.</p>
+
+<pre class="prettyprint">
+Evas_Object *ic;
+ic = elm_icon_add(button);
+elm_image_file_set(ic, "icon.png", NULL);
+elm_object_part_content_set(button, "icon", ic);
+</pre>
+
+<h3>Adding Text Inside a Button</h3>
+
+<p>The label can be modified using the <span style="font-family: Courier New,Courier,monospace">elm_object_text_set()</span> function.</p>
+
+<pre class="prettyprint">
+elm_object_text_set(button, "Click me!");
+</pre>
+
+<h3>Using Button Styles</h3>
+
+<p>Various styles can be used on the button. Tizen supports the following styles:</p>
+
+<ul>
+ <li><span style="font-family: Courier New,Courier,monospace">icon_reorder</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">icon_expand_add</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">icon_expand_delete</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">default</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">circle</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">bottom</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">contacts</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">option</span></li>
+</ul>
+
+<p>You can see these themes in action on the following screenshot (in the above order).</p>
+
+<p class="figure">Figure: Button component</p>
+<p align="center"><img alt="Button component" src="../../images/button.png" /></p>
+
+<p>To change the style of the button, call the <span style="font-family: Courier New,Courier,monospace">elm_object_style_set()</span> function on the button object.</p>
+
+<pre class="prettyprint">
+elm_object_style_set(button,"icon_expand_add");
+</pre>
+
+<h3>Using the Button Callbacks</h3>
+
+<p>The button emits the following signals:</p>
+
+<ul>
+ <li><span style="font-family: Courier New,Courier,monospace">clicked</span>: The user clicked the button (press/release).</li>
+ <li><span style="font-family: Courier New,Courier,monospace">repeated</span>: The user pressed the button without releasing it.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">pressed</span>: The user pressed the button.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">unpressed</span>: The user released the button after pressing it.</li>
+</ul>
+
+<p>For all these signals the <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter returned in the callback is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+
+<p>This is an example to register and define a callback function called by the clicked signal.</p>
+
+<pre class="prettyprint">
+{
+ evas_object_smart_callback_add(button, "clicked", clicked_cb, data);
+}
+// Callback function for the "clicked" signal
+// This callback is called when the button is clicked by the user
+void clicked_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ dlog_print(DLOG_INFO, LOG_TAG, "Button clicked\n");
+}
+</pre>
+
+<h3>Using the Autorepeat Feature</h3>
+
+<p>The autorepeat feature is enabled by default. It consists of calling the <span style="font-family: Courier New,Courier,monospace">repeated</span> signal when the user keeps the button pressed. This feature can be disabled with the <span style="font-family: Courier New,Courier,monospace">elm_button_autorepeat_set()</span> function. The autorepeat is configured with the following functions:</p>
+<ul>
+ <li><span style="font-family: Courier New,Courier,monospace">elm_button_autorepeat_initial_timeout_set()</span>: to set the initial timeout before the autorepeat event is generated</li>
+ <li><span style="font-family: Courier New,Courier,monospace">elm_button_autorepeat_gap_timeout_set()</span>: to set the interval between two autorepeat events</li>
+</ul>
+
+<p>Disable the autorepeat feature.</p>
+<pre class="prettyprint">
+elm_button_autorepeat_set(button, EINA_FALSE);
+</pre>
+
+<p>Enable the autorepeat feature.</p>
+<pre class="prettyprint">
+elm_button_autorepeat_set(button, EINA_TRUE);
+</pre>
+
+<p>Set the initial timeout to five seconds.</p>
+<pre class="prettyprint">
+elm_button_autorepeat_initial_timeout_set(button, 5.0);
+</pre>
+
+<p>Set the gap between two signals to 0.5 seconds.</p>
+<pre class="prettyprint">
+elm_button_autorepeat_gap_timeout_set(button, 0.5);
+</pre>
+
+
+ <h2 id="check" name="check">Check</h2>
+
+<p class="figure">Figure: Check component</p>
+<p align="center"><img alt="Check component" src="../../images/check.png" /></p>
+
+<p class="figure">Figure: Check hierarchy</p>
+<p align="center"><img alt="Check hierarchy" src="../../images/check_tree.png" /></p>
+
+<p>The check component is similar to the radio component, except that it does not work as a group. It toggles the value of a boolean between true and false.</p>
+
+<p>This UI component inherits from the layout component. All layout functions can be used on the check component.</p>
+
+<h3 id="Adding" name="Adding">Adding a Check Component</h3>
+
+<p>The following example shows how to create a check component.</p>
+
+<pre class="prettyprint">
+Evas_Object *check, *parent;
+check = elm_check_add(parent);
+</pre>
+
+<h3 id="Modifying" name="Modifying">Modifying the Check Styles</h3>
+
+<p>The check component style can be set with the <span style="font-family: Courier New,Courier,monospace;">elm_object_style_set()</span> function. The following styles are available:</p>
+<ul>
+ <li><span style="font-family: Courier New,Courier,monospace;">default</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace;">favorite</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace;">on</span> and <span style="font-family: Courier New,Courier,monospace;">off</span></li>
+</ul>
+
+<p>The following example sets the <span style="font-family: Courier New,Courier,monospace">favorite</span> style on our check object.</p>
+<pre class="prettyprint">
+elm_object_style_set(check, "favorite");
+</pre>
+
+<p>To get the current style, use the <span style="font-family: Courier New,Courier,monospace;">elm_object_style_get()</span> function.</p>
+<pre class="prettyprint">
+char *style = elm_object_style_get(check);
+</pre>
+
+<h3 id="Using_Check" name="Using_Check">Using the Check Component</h3>
+
+<p>After having created a check object, it is possible to set its boolean value to <span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span>.</p>
+<pre class="prettyprint">
+elm_check_state_set(check, EINA_TRUE);
+</pre>
+
+<p>You can also retrieve the current value of the check object.</p>
+<pre class="prettyprint">
+Eina_Bool value = elm_check_state_get(check);
+</pre>
+
+<p>As with a radio object, an icon and a label can be set.</p>
+<pre class="prettyprint">
+// Create a Home icon
+Evas_Object *icon;
+
+icon = elm_icon_add(parent);
+elm_icon_standard_set(icon, "home");
+
+// Set it to the check object
+elm_object_part_content_set(check, "icon", icon);
+
+// Set the check label
+elm_object_text_set(check, "Check label");
+</pre>
+
+<p>You can also modify the <span style="font-family: Courier New,Courier,monospace">on</span> and <span style="font-family: Courier New,Courier,monospace">off</span> labels.</p>
+
+<pre class="prettyprint">
+elm_object_part_text_set(check, "on", "True");
+elm_object_part_text_set(check, "off", "False");
+</pre>
+
+<p>The get functions of the elementary object API can be used to retrieve the content set to the check object.</p>
+
+<pre class="prettyprint">
+// Get the current set text of the check label
+char *text = elm_object_text_get(check);
+
+// Get the content set in the icon part
+Evas_Object *icon = elm_object_part_content_get(check, "icon");
+</pre>
+
+<h3 id="Using_Check_Callbacks" name="Using_Check_Callbacks">Using the Check Callbacks</h3>
+
+<p>When the value is changed by the user, the changed signal is emitted. The <span style="font-family: Courier New,Courier,monospace;">event_info</span> parameter is <span style="font-family: Courier New,Courier,monospace;">NULL</span>.</p>
+
+<p>The following example shows how to register a callback on this signal.</p>
+<pre class="prettyprint">
+{
+ evas_object_smart_callback_add(check, "changed", changed_cb, data);
+}
+
+// Callback function for the "changed" signal
+// This callback is called when the check value changes
+void changed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ dlog_print(DLOG_INFO, LOG_TAG, "The value has changed\n");
+}
+</pre>
+
+ <h2 id="colorselector" name="colorselector">Colorselector</h2>
+
+ <p class="figure">Figure: Colorselector component</p>
+ <p align="center"><img alt="Colorselector component" src="../../images/colorsel.png" /></p>
+
+ <p class="figure">Figure: Colorselector hierarchy</p>
+ <p align="center"><img alt="Colorselector hierarchy" src="../../images/colorselector_tree.png" /></p>
+
+
+<p>The colorselector component provides a color selection solution to the user. There are different modes available, each of them showing a different configuration of the colorselector component.</p>
+
+<p>Currently only the Palette mode is available in Tizen.</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">ELM_COLORSELECTOR_PALETTE</span></li>
+</ul>
+
+<p>The Palette mode displays several color items that enable the user to choose a color in the items displayed. It is possible to add new items, or to update the color of the current item. The list of color items is called a palette, and it is associated with a unique identifier. This enables the developers to create new series of colors (a new palette) and save it under another identifier. By default, the color palette is using the <span style="font-family: Courier New,Courier,monospace">default</span> identifier.</p>
+
+<p>This UI component inherits from the layout component, so all function concerning the layout component can also be used on the colorselector component.</p>
+
+<h3>Adding a Colorselector Component</h3>
+
+<p>The following example shows how to create a colorselector object.</p>
+
+<pre class="prettyprint">
+Evas_Object *colorsel, *parent;
+
+colorsel = elm_colorselector_add(parent);
+</pre>
+
+<h3>Setting the Colorselector Modes</h3>
+
+<p>The following example shows how to set the mode of the colorselector to the palette mode.</p>
+
+<pre class="prettyprint">
+elm_colorselector_mode_set(colorsel, ELM_COLORSELECTOR_PALETTE);
+</pre>
+
+<p>The following example shows how to create a new palette called <span style="font-family: Courier New,Courier,monospace">mypalette</span>. This new palette is saved by elementary config and you can to load it again later. You then add three colors in <span style="font-family: Courier New,Courier,monospace">mypalette</span>: red, green, and blue.</p>
+
+<pre class="prettyprint">
+elm_colorselector_palette_name_set(colorsel, "mypalette");
+elm_colorselector_palette_color_add(colorsel, 255, 0, 0, 255);
+elm_colorselector_palette_color_add(colorsel, 0, 255, 0, 255);
+elm_colorselector_palette_color_add(colorsel, 0, 0, 255, 255);
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">default</span> palette already contains 14 colors.</p>
+
+<pre class="prettyprint">
+elm_colorselector_palette_name_set(colorsel, "default");
+</pre>
+
+<p>When the user clicks on the color elements, the element changes the color that is set to the colorselector component. You can use the following function to retrieve the current selected color.</p>
+<pre class="prettyprint">
+int r, g, b, a;
+
+elm_colorselector_color_get(colorsel, &r, &g, &b, &a);
+</pre>
+
+<h3>Using the Colorselector Callbacks</h3>
+
+<p>You can register callbacks on the following signals:</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">changed</span> - The color value changes on the selector. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
+<li><span style="font-family: Courier New,Courier,monospace">color,item,selected</span> - The user clicks on a color item. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter of the callback is the selected color item.</li>
+<li><span style="font-family: Courier New,Courier,monospace">color,item,longpressed</span> - The user long presses on a color item. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter of the callback contains the selected color item.</li>
+</ul>
+
+<p>The following example shows how to register a callback on the <span style="font-family: Courier New,Courier,monospace">changed</span> signal.</p>
+<pre class="prettyprint">
+{
+ evas_object_smart_callback_add(colorselector, "changed", changed_cb, data);
+}
+
+// Callback function for the "changed" signal
+// This callback is called when the colorselector value changes
+void changed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ dlog_print(DLOG_INFO, LOG_TAG, "The color has changed\n");
+}
+</pre>
+
+
+ <h2 id="ctxpopup" name="ctxpopup">Ctxpopup</h2>
+
+ <p class="figure">Figure: Context popup component</p>
+ <p align="center"><img alt="Context popup component" src="../../images/ctxpopup1.png" /></p>
+
+ <p class="figure">Figure: Context popup hierarchy</p>
+ <p align="center"><img alt="Context popup hierarchy" src="../../images/ctxpopup_tree.png" /></p>
+
+
+<p>Ctxpopup is a contextual popup that can show a list of items.</p>
+
+<h3>Adding a Ctxpopup Component</h3>
+
+<p>A ctxpopup can be created with the <span style="font-family: Courier New,Courier,monospace">elm_ctxpopup_add()</span> function, and when shown, it automatically chooses an area inside its parent object's view (set using <span style="font-family: Courier New,Courier,monospace">elm_ctxpopup_hover_parent_set()</span>) to optimally fit into it.</p>
+
+<pre class="prettyprint">
+Evas_Object *ctxpopup, *parent;
+
+// Create a ctxpopup
+ctxpopup = elm_ctxpopup_add(parent);
+</pre>
+
+<h3>Modifying the Ctxpopup Style</h3>
+
+<p>The following styles are available:</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">dropdown/list</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">dropdown/label</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">more/default</span></li>
+</ul>
+
+ <p class="figure">Figure: Context popup more/default style</p>
+ <p align="center"><img alt="Context popup more/default style" src="../../images/ctxpopup1.png" /></p>
+
+ <p class="figure">Figure: Context popup dropdown/list</p>
+ <p align="center"><img alt="Context popup dropdown/list" src="../../images/ctxpopup2.png" /></p>
+
+ <p class="figure">Figure: Context popup dropdown/label</p>
+ <p align="center"><img alt="Context popup dropdown/label" src="../../images/ctxpopup3.png" /></p>
+
+<p>The following example shows how to set the <span style="font-family: Courier New,Courier,monospace">more/default</span> style.</p>
+
+<pre class="prettyprint">
+elm_object_style_set(ctxpopup, "more/default");
+</pre>
+
+<h3>Configuring the Ctxpopup</h3>
+
+<p>The context popup orientation can be set with <span style="font-family: Courier New,Courier,monospace">elm_ctxpopup_horizontal_set()</span>. Here it is set to horizontal.</p>
+<pre class="prettyprint">
+elm_ctxpopup_horizontal_set(ctxpopup, EINA_TRUE);
+</pre>
+
+<p>Auto hide is enabled by default. You can also disable auto hiding if you want the ctxpopup never to be hidden.</p>
+<pre class="prettyprint">
+elm_ctxpopup_auto_hide_disabled_set(ctxpopup, EINA_TRUE);
+</pre>
+
+<h3>Managing the Ctxpopup Items</h3>
+
+<p>The ctxpopup can contain a small number of items. Each of them can have a label and an icon. The following example shows how to append an item with the <span style="font-family: Courier New,Courier,monospace">Test</span> label and no icon.</p>
+<pre class="prettyprint">
+Elm_Object_Item *it;
+
+it = elm_ctxpopup_item_append(ctxpopup, "test", NULL, _ctxpopup_item_cb,
+ NULL);
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">_ctxpopup_item_cb()</span> callback is called when the item is clicked. The following example shows how to write the definition of this callback.</p>
+<pre class="prettyprint">
+static void
+_ctxpopup_item_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ dlog_print(DLOG_INFO, LOG_TAG, "ctxpopup item selected\n");
+}
+</pre>
+
+<p>After that the item label is set to <span style="font-family: Courier New,Courier,monospace">New label</span>.</p>
+
+<pre class="prettyprint">elm_object_item_part_text_set(it, "default", "New label");
+</pre>
+
+<p>And its icon is modified to the standard <span style="font-family: Courier New,Courier,monospace">home</span> icon.</p>
+
+<pre class="prettyprint">
+Evas_Object *home_icon = elm_icon_add(ctxpopup);
+elm_icon_standard_set(home_icon, "home");
+
+elm_object_item_part_content_set(it, "icon", home_icon);
+</pre>
+
+<h3>Using the Ctxpopup Callbacks</h3>
+
+<p>The context popup emits the <span style="font-family: Courier New,Courier,monospace">dismissed</span> signal when it is dismissed. You can register a callback to this signal. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+
+<pre class="prettyprint">
+{
+ evas_object_smart_callback_add(ctxpopup, "dismissed", dismissed_cb, data);
+}
+
+// Callback function for the "dismissed" signal
+// This callback is called when the ctxpopup is dismissed
+void dismissed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ dlog_print(DLOG_INFO, LOG_TAG, "Ctxpopup dismissed\n");
+}
+</pre>
+
+ <h2 id="datetime" name="datetime">Datetime</h2>
+
+<p class="figure">Figure: Datetime selection</p>
+<p align="center"> <img alt="Datetime selection" src="../../images/date2.png" /> </p>
+
+<p class="figure">Figure: Datetime hierarchy</p>
+<p align="center"> <img alt="Datetime hierarchy" src="../../images/datetime_tree.png" /> </p>
+
+<p>The datetime component displays and adds date and time values.</p>
+
+<h3>Adding a Datetime Component</h3>
+
+<p>The UI component is created with <span style="font-family: Courier New,Courier,monospace">elm_datetime_add()</span>. It is possible to select the visible fields with <span style="font-family: Courier New,Courier,monospace">elm_datetime_field_visible_set()</span>. The following fields can be controlled:</p>
+ <ul>
+ <li><span style="font-family: Courier New,Courier,monospace">ELM_DATETIME_YEAR</span>: the year field</li>
+ <li><span style="font-family: Courier New,Courier,monospace">ELM_DATETIME_MONTH</span>: the month field</li>
+ <li><span style="font-family: Courier New,Courier,monospace">ELM_DATETIME_DATE</span>: the date field</li>
+ <li><span style="font-family: Courier New,Courier,monospace">ELM_DATETIME_HOUR</span>: the hour field</li>
+ <li><span style="font-family: Courier New,Courier,monospace">ELM_DATETIME_MINUTE</span>: the minute field</li>
+ <li><span style="font-family: Courier New,Courier,monospace">ELM_DATETIME_AMPM</span>: the AM/PM field</li>
+ </ul>
+
+<p>The following example shows how to create a datetime component and set the <span style="font-family: Courier New,Courier,monospace">HOUR</span> and <span style="font-family: Courier New,Courier,monospace">MINUTE</span> fields visible.</p>
+
+<pre class="prettyprint">
+Evas_Object *datetime, *parent;
+
+datetime = elm_datetime_add(parent);
+
+elm_datetime_field_visible_set(datetime, ELM_DATETIME_HOUR, EINA_TRUE);
+elm_datetime_field_visible_set(datetime, ELM_DATETIME_MINUTE, EINA_TRUE);
+
+elm_datetime_field_visible_set(datetime, ELM_DATETIME_YEAR, EINA_FALSE);
+elm_datetime_field_visible_set(datetime, ELM_DATETIME_MONTH, EINA_FALSE);
+elm_datetime_field_visible_set(datetime, ELM_DATETIME_DATE, EINA_FALSE);
+elm_datetime_field_visible_set(datetime, ELM_DATETIME_AMPM, EINA_FALSE);
+</pre>
+
+<h3>Using the Datetime Styles</h3>
+
+<p>The following styles are available:</p>
+ <ul>
+ <li><span style="font-family: Courier New,Courier,monospace">date_layout</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">time_layout</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">time_layout_24h</span></li>
+ </ul>
+
+<p>The following example creates the <span style="font-family: Courier New,Courier,monospace">date_layout</span> style:</p>
+
+<pre class="prettyprint">
+elm_object_style_set(datetime, "date_layout");
+</pre>
+
+<h3>Setting the Datetime Format</h3>
+
+<p>The format of the date and time can be configured with <span style="font-family: Courier New,Courier,monospace">elm_datetime_format_set()</span> using a combination of allowed Libc date format specifiers. In the following example the format is set to HH : MM.</p>
+
+<pre class="prettyprint">
+elm_datetime_format_set(datetime, "%H : %M");
+</pre>
+
+<p>Please refer to the API documentation for a complete list of all the options available.</p>
+
+<h3>Using the Datetime Callbacks</h3>
+
+<p>A callback can be registered on the <span style="font-family: Courier New,Courier,monospace">changed</span> signal to detect when the Datetime field values are changed. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+
+<pre class="prettyprint">
+{
+ evas_object_smart_callback_add(datetime, "changed", changed_cb, data);
+}
+
+// Callback function for the "changed" signal
+// This callback is called when the datetime fields change
+void changed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ dlog_print(DLOG_INFO, LOG_TAG, "Datetime field changed. \n");
+}</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">language,changed</span> signal is emitted when the system locale changes.</p>
+
+
+<h3>UX Issue in Tizen 2.3</h3>
+
+<ul>
+ <li><span style="font-family: Courier New,Courier,monospace">date_layout</span> (default): Year, Month, Day</li>
+ <li><span style="font-family: Courier New,Courier,monospace">time_layout</span>: Hour, Minute, AM/PM button</li>
+ <li><span style="font-family: Courier New,Courier,monospace">time_layout_24hr</span>: Hour, Minute</li>
+</ul>
+
+<p>Basically, the <span style="font-family: Courier New,Courier,monospace">elm_datetime</span> component needs a full-length format that includes the Year, Month, Day, Hour, Minute, and AM/PM. Each style then shows specific fields according their style, limited by the UX concept. If you call the <span style="font-family: Courier New,Courier,monospace">elm_datetime_field_visible_set()</span> function for a field that is not supported in the style, it does not work.</p>
+
+
+ <h2 id="entry" name="entry">Entry</h2>
+
+<p class="figure">Figure: Entry component</p>
+<p align="center"> <img alt="Entry component" src="../../images/entry.png" /> </p>
+
+<p class="figure">Figure: Entry component</p>
+<p align="center"> <img alt="Entry component" src="../../images/entry2.png" /> </p>
+
+<p class="figure">Figure: Entry hierarchy</p>
+<p align="center"> <img alt="Entry hierarchy" src="../../images/entry_tree.png" /> </p>
+
+<p>The entry component is a box where the user can enter text. It supports the following features:</p>
+ <ul>
+ <li>text wrapping</li>
+ <li>multiline</li>
+ <li>scrolling</li>
+ <li>formatted markup text</li>
+ <li>password mode</li>
+ <li>filtering text</li>
+ <li>read/write from a file</li>
+ <li>theme style overrides</li>
+ </ul>
+
+<h3>Adding an Entry Component</h3>
+
+<p>The entry component is created with the <span style="font-family: Courier New,Courier,monospace">elm_entry_add()</span> function, and the text inside the entry can be set with <span style="font-family: Courier New,Courier,monospace">elm_entry_entry_set()</span>.</p>
+
+<pre class="prettyprint">
+Evas_Object *entry, *parent;
+
+entry = elm_entry_add(parent);
+elm_entry_entry_set(entry, "A short text.");
+</pre>
+
+<h3>Using the Text Editor</h3>
+
+<p>You can append text to the end of existing content.</p>
+
+<pre class="prettyprint">
+elm_entry_entry_append(entry, "END");
+</pre>
+
+<p>You can also insert text at the current cursor position.</p>
+
+<pre class="prettyprint">
+elm_entry_entry_insert(entry, "CURSOR");
+Eina_Bool Empty = elm_entry_is_empty(entry);
+</pre>
+
+<p>Call <span style="font-family: Courier New,Courier,monospace">elm_entry_is_empty()</span> to see whether the entry is empty. Here, the boolean variable <span style="font-family: Courier New,Courier,monospace">Empty</span> returns <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span>.</p>
+
+<p>By default, the user can enter text in the entry component when it is in focus. It is possible to prevent the user from editing text if needed.</p>
+
+<pre class="prettyprint">
+elm_entry_editable_set(entry, EINA_FALSE);
+</pre>
+
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">It is still possible to use the previous functions to modify the text of a non-editable entry.</td>
+ </tr>
+ </tbody>
+ </table>
+
+<h3>Setting the Password Mode</h3>
+
+<p>When dealing with password content, the password mode activates to hide what the user is typing. In this mode, the display of any text is replaced by asterisks (*), and the entry is single line (there is no line wrap).</p>
+
+<pre class="prettyprint">
+elm_entry_password_set(entry, EINA_TRUE);
+</pre>
+
+<h3>Entry Line Modes And Wrapping</h3>
+
+<p>The entry component has two line modes:</p>
+ <ul>
+ <li>single line mode</li>
+ <li>multiline mode</li>
+ </ul>
+
+<p>First, set the entry in single line mode.</p>
+
+<pre class="prettyprint">
+elm_entry_single_line_set(entry, EINA_TRUE);
+</pre>
+
+<p>In this mode, the text does not wrap when reaching the edge, but the entry grows horizontally instead. Pressing the Enter key in this mode generates an <span style="font-family: Courier New,Courier,monospace">activate</span> event instead of adding a new line.</p>
+
+<p>When the entry is set to multiline mode (single line off), the text wraps at the end of the entry and pressing Enter creates a new line.</p>
+
+<pre class="prettyprint">
+elm_entry_single_line_set(entry, EINA_FALSE);
+elm_entry_line_wrap_set(entry, ELM_WRAP_WORD);
+</pre>
+
+<p>In multiline entries, <span style="font-family: Courier New,Courier,monospace">elm_entry_line_wrap_set()</span> provides a way to cut the text implicitly into a new line when it reaches the far edge of the UI component. The following wrap modes are available:</p>
+ <ul>
+ <li><span style="font-family: Courier New,Courier,monospace">ELM_WRAP_NONE</span>: No wrap</li>
+ <li><span style="font-family: Courier New,Courier,monospace">ELM_WRAP_CHAR</span>: Wrap between characters</li>
+ <li><span style="font-family: Courier New,Courier,monospace">ELM_WRAP_WORD</span>: Wrap in allowed wrapping points (as defined in the unicode standard)</li>
+ <li><span style="font-family: Courier New,Courier,monospace">ELM_WRAP_MIXED</span>: Word wrap, and if that fails, char wrap</li>
+ </ul>
+
+<h3>Selecting Text</h3>
+
+<p>Text selections can be made with different functions:</p>
+<ul>
+<li>To select all the content of the entry component:
+<pre class="prettyprint">
+elm_entry_select_all(entry);
+</pre>
+</li>
+
+<li>To deselect the current selection:
+<pre class="prettyprint">
+elm_entry_select_none(entry);
+</pre>
+</li>
+
+<li>To select part of the text, use <span style="font-family: Courier New,Courier,monospace">elm_entry_select_region_set()</span>. The following code selects the first twenty characters of the entry content.
+<pre class="prettyprint">
+elm_entry_select_region_set(entry, 0, 20);
+</pre>
+</li>
+
+<li>To retrieve the currently selected text in an entry:
+<pre class="prettyprint">
+const char *selection;
+
+selection = elm_entry_selection_get(entry);
+</pre>
+</li>
+</ul>
+
+<p>If the entry text is empty, <span style="font-family: Courier New,Courier,monospace">elm_entry_selection_get()</span> returns <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+
+<p>You can copy or cut the selection to the clipboard.</p>
+<pre class="prettyprint">
+elm_entry_selection_cut(entry);
+</pre>
+
+<p>The selection can be pasted in the same or a different entry.</p>
+<pre class="prettyprint">
+elm_entry_selection_paste(entry);
+</pre>
+
+<h3>Controlling the Cursor</h3>
+
+<p>The cursor represents the current position in the entry, where the next action, for example, text insertion or deletion, is done. Usually, the cursor is represented as a blinking character, but its appearance depends on the theme configuration. The cursor position can be modified by using several functions.</p>
+<ul>
+<li>To move the cursor to the beginning of the entry:
+<pre class="prettyprint">
+elm_entry_cursor_begin_set(entry);
+</pre>
+</li>
+
+<li>To move the cursor to the end of the entry:
+<pre class="prettyprint">
+elm_entry_cursor_end_set(entry);
+</pre>
+</li>
+
+<li>To move the cursor one line down or up:
+<pre class="prettyprint">
+elm_entry_cursor_down(entry);
+elm_entry_cursor_up(entry);
+</pre>
+</li>
+<li>To move the cursor one character to the left or right:
+<pre class="prettyprint">
+elm_entry_cursor_prev(entry);
+elm_entry_cursor_next(entry);
+</pre>
+</li>
+
+<li>To set the cursor at a specific position (15th character, for example):
+<pre class="prettyprint">
+elm_entry_cursor_pos_set(entry, 15);
+</pre>
+</li>
+</ul>
+
+<p>It is possible to start a selection at the current cursor position, move five characters to the right and end the selection.</p>
+
+<pre class="prettyprint">
+elm_entry_cursor_selection_begin(entry);
+
+for (i = 0; i < 5; i++)
+{
+ elm_entry_cursor_next(entry);
+}
+
+elm_entry_cursor_selection_end(entry);
+</pre>
+
+<h3>Formatting Text</h3>
+
+<p>Text within an entry can be formatted by using markups tags that are defined in the theme. The following markups are available:</p>
+ <ul>
+ <li><span style="font-family: Courier New,Courier,monospace"><br></span>: Inserts a line break.</li>
+ <li><span style="font-family: Courier New,Courier,monospace"><ps></span>: Inserts a paragraph separator. This is preferred over line breaks.</li>
+ <li><span style="font-family: Courier New,Courier,monospace"><tab></span>: Inserts a tab.</li>
+ <li><span style="font-family: Courier New,Courier,monospace"><em>...</em></span>: Emphasis. Sets the oblique style for the enclosed text.</li>
+ <li><span style="font-family: Courier New,Courier,monospace"><b>...</b></span>: Sets the bold style for the enclosed text.</li>
+ <li><span style="font-family: Courier New,Courier,monospace"><link>...</link></span>: Underlines the enclosed text.</li>
+ <li><span style="font-family: Courier New,Courier,monospace"><hilight>...</hilight></span>: Highlights the enclosed text.</li>
+ </ul>
+
+<h3>Using Special Markups</h3>
+
+<p>Special markups can be added within the text of the entry:</p>
+ <ul>
+ <li><span style="font-family: Courier New,Courier,monospace"><a href = ..>...</a></span>: Anchors</li>
+ <li><span style="font-family: Courier New,Courier,monospace"><item size = .. vsize = .. href = ..>...</item></span>: Items</li>
+ </ul>
+
+<p>The anchors generate an <span style="font-family: Courier New,Courier,monospace">anchor,clicked</span> signal when the user clicks on them. The <span style="font-family: Courier New,Courier,monospace">href</span> attribute is used to identify the anchor. It also reacts to the <span style="font-family: Courier New,Courier,monospace">anchor,in</span> (mouse in), <span style="font-family: Courier New,Courier,monospace">anchor,out</span> (mouse out), <span style="font-family: Courier New,Courier,monospace">anchor,down</span> (mouse down), and <span style="font-family: Courier New,Courier,monospace">anchor,up</span> (mouse up) events.</p>
+
+<p>The item markup provides a way to insert any <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> in the text. The <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> name has to be specified in the <span style="font-family: Courier New,Courier,monospace">href</span> attribute.</p>
+
+<h3>Overriding Style</h3>
+
+<p>To tweak the style of the text within the entry component, it is possible to override parts of the theme style to the textblock object by using <span style="font-family: Courier New,Courier,monospace">elm_entry_text_style_user_push()</span>. This function pushes a new style on top of the user style stack that overrides the current style. Remove the style in the top of user style stack with <span style="font-family: Courier New,Courier,monospace">elm_entry_text_style_user_pop()</span>.</p>
+
+<h3>Filtering Text</h3>
+
+<p>Text within an entry can be filtered in size. The following example sets the maximum number of characters allowed in the entry to 8.</p>
+
+<pre class="prettyprint">
+static Elm_Entry_Filter_Limit_Size limit_size =
+{
+ .max_char_count = 8,
+ .max_byte_count = 0
+};
+
+// Append a new callback to the list, this function is called each time
+// a text is inserted in the entry. Pass the limit_size struct previously
+// created to set the maximum number of characters allowed to 8
+
+elm_entry_markup_filter_append(entry, elm_entry_filter_limit_size, limit_size);
+</pre>
+
+<p>The content can be filtered by passing an <span style="font-family: Courier New,Courier,monospace">Elm_Entry_Filter_Accept_Set</span> structure. This structure contains the accepted characters and rejected characters. The following example shows how to reject the '+', '-', '*', and '/' characters.</p>
+<pre class="prettyprint">
+static Elm_Entry_Filter_Accept_Set accept_set =
+{
+ .accepted = NULL,
+ .rejected = "+*-/"
+};
+
+elm_entry_markup_filter_append(entry, elm_entry_filter_accept_set, accept_set);
+</pre>
+
+<h3>Loading and Saving Files</h3>
+
+<p>The entry content can be saved to a file (<span style="font-family: Courier New,Courier,monospace">/tmp/test.txt</span>, for example).</p>
+
+<pre class="prettyprint">
+// Set the file in which the entry text is saved. This function
+// implicitly loads the existing file content
+elm_entry_file_set(entry, "/tmp/test.txt", ELM_TEXT_FORMAT_MARKUP_UTF8);
+</pre>
+
+<p>Autosave is activated by default and changes are written back to the file after a short delay. This feature can be deactivated and you can manually save the content when needed.</p>
+
+<pre class="prettyprint">
+// Disable autosaving
+elm_entry_autosave_set(entry, EINA_FALSE);
+
+// Trigger saving when needed
+elm_entry_file_save(entry);
+</pre>
+
+<h3>Using Entry Theme Content</h3>
+
+<p>Two content parts of the default theme are available: <span style="font-family: Courier New,Courier,monospace">icon</span> and <span style="font-family: Courier New,Courier,monospace">end</span>. The following example shows how to set an icon in the <span style="font-family: Courier New,Courier,monospace">end</span> content part.</p>
+<pre class="prettyprint">
+Evas_Object *icon;
+
+ic = elm_icon_add(entry);
+elm_image_file_set(ic, "icon.png", NULL);
+elm_object_part_content_set(entry, "end", icon);
+</pre>
+
+<h3>Using Entry Theme Texts</h3>
+
+<p>The default theme allows the use of the following text parts:</p>
+ <ul>
+ <li><span style="font-family: Courier New,Courier,monospace">default</span> - text of the entry</li>
+ <li><span style="font-family: Courier New,Courier,monospace">guide</span> - placeholder of the entry</li>
+ </ul>
+
+<p>The following example shows how to set the placeholder text of the entry to <span style="font-family: Courier New,Courier,monospace">Hello World</span>.</p>
+
+<pre class="prettyprint">
+elm_object_part_text_set(entry, "Hello World");
+</pre>
+
+<h3>Using Entry Callbacks</h3>
+
+<p>The entry component emits the following signals:</p>
+ <ul>
+ <li><span style="font-family: Courier New,Courier,monospace">aborted</span>: The escape key is pressed on a single line entry.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">activated</span>: The enter key is pressed on a single line entry.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">anchor,clicked</span>: An anchor is clicked. <span style="font-family: Courier New,Courier,monospace">event_info</span> points to an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Entry_Anchor_Info</span>.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">anchor,down</span>: Mouse button is pressed on an anchor. <span style="font-family: Courier New,Courier,monospace">event_info</span> points to an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Entry_Anchor_Info</span>.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">anchor,hover,opened</span>: The anchor is clicked. <span style="font-family: Courier New,Courier,monospace">event_info</span> points to an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Entry_Anchor_Info</span>.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">anchor,in</span>: Mouse cursor is moved into an anchor. <span style="font-family: Courier New,Courier,monospace">event_info</span> points to an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Entry_Anchor_Info</span>.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">anchor,out</span>: Mouse cursor is moved out of an anchor. <span style="font-family: Courier New,Courier,monospace">event_info</span> points to an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Entry_Anchor_Info</span>.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">anchor,up</span>: Mouse button is unpressed on an anchor. <span style="font-family: Courier New,Courier,monospace">event_info</span> points to an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Entry_Anchor_Info</span>.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">changed</span>: The text within the entry is changed.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">changed,user</span>: The text within the entry is changed because of user interaction. <span style="font-family: Courier New,Courier,monospace">event_info</span> points to an object of the type <span style="font-family: Courier New,Courier,monospace">Edje_Entry_Change_Info</span>.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">clicked</span>: The entry is clicked (mouse press and release).</li>
+ <li><span style="font-family: Courier New,Courier,monospace">clicked,double</span>: The entry is double clicked.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">clicked,triple</span>: The entry is triple clicked.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">cursor,changed</span>: The cursor position is changed.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">cursor,changed,manual</span>: The cursor position is changed manually.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">focused</span>: The entry receives focus. <span style="font-family: Courier New,Courier,monospace">event_info</span> points to an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Focus_Info</span>.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">unfocused</span>: The entry loses focus.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">language,changed</span>: Program language is changed.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">longpressed</span>: A mouse button is pressed and held for a couple of seconds.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">maxlength,reached</span>: A maximum length is reached.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">preedit,changed</span>: The preedit string is changed.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">press</span>: A mouse button is pressed on the entry.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">redo,request</span>: The request is redone.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">selection,changed</span>: The current selection is changed.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">selection,cleared</span>: The current selection is cleared.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">selection,copy</span>: A copy of the selected text into the clipboard is requested.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">selection,cut</span>: A cut of the selected text into the clipboard is requested.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">selection,paste</span>: A paste of the clipboard contents is requested.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">selection,start</span>: A selection is begun and no previous selection exists.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">text,set,done</span>: The whole text is set to the entry.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">theme,changed</span>: The theme is changed.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">undo,request</span>: The request is undone.</li>
+ </ul>
+
+<p>For signals, where <span style="font-family: Courier New,Courier,monospace">event_info</span> has not been explicitly described, it is set to <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+
+<p>The following example shows how to register a callback to the <span style="font-family: Courier New,Courier,monospace">focused</span> signal.</p>
+
+<pre class="prettyprint">
+{
+ evas_object_smart_callback_add(entry, "focused", focused_cb, data);
+}
+
+// Callback function for the "focused" signal
+// This callback is called when the entry receive the focus
+void focused_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ dlog_print(DLOG_INFO, LOG_TAG, "Entry focused\n");
+}
+</pre>
+
+
+ <h2 id="flip" name="flip">Flip</h2>
+
+<p class="figure">Figure: Flip hierarchy</p>
+<p align="center"> <img alt="Flip hierarchy" src="../../images/flip_tree.png" /> </p>
+
+<p>The flip component can hold two <span style="font-family: Courier New,Courier,monospace">Evas_Objects</span> and allows the user flip between them using several pre-defined animations.</p>
+
+<h3>Adding a Flip Component</h3>
+
+<p>The following example shows how to create a flip component.</p>
+
+<pre class="prettyprint">
+Evas_Object *flip, *parent, *content1, *content2;
+flip = elm_flip_add(parent);
+</pre>
+
+<p>You can add content to the flip component. <span style="font-family: Courier New,Courier,monospace">content1</span> is set to the <span style="font-family: Courier New,Courier,monospace">front</span> content and <span style="font-family: Courier New,Courier,monospace">content2</span> is set to the <span style="font-family: Courier New,Courier,monospace">back</span> mode.</p>
+
+<pre class="prettyprint">
+elm_object_part_content_set(flip, "front", content1);
+elm_object_part_content_set(flip, "back", content2);
+</pre>
+
+<h3>Configuring Flip Animation</h3>
+
+<p>Now you can run an flip animation.</p>
+<pre class="prettyprint">
+elm_flip_go(flip, ELM_FLIP_CUBE_UP);
+</pre>
+
+<p>This animation flips up the <span style="font-family: Courier New,Courier,monospace">front</span> content object as if it was on a side of a cube, letting the down facing side of the cube appear with the <span style="font-family: Courier New,Courier,monospace">back</span> content object. Several animations are available:</p>
+ <ul>
+ <li><span style="font-family: Courier New,Courier,monospace">ELM_FLIP_ROTATE_X_CENTER_AXIS</span>: Rotate the content around a horizontal axis.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">ELM_FLIP_ROTATE_Y_CENTER_AXIS</span>: Rotate the content around a vertical axis.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">ELM_FLIP_ROTATE_XZ_CENTER_AXIS</span>: Rotate the content around a diagonal axis.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">ELM_FLIP_ROTATE_YZ_CENTER_AXIS</span>: Rotate the content around a diagonal axis.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">ELM_FLIP_CUBE_LEFT</span>: Rotate the content left as if it was on a side of a cube.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">ELM_FLIP_CUBE_RIGHT</span>: Rotate the content right as if it was on a side of a cube.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">ELM_FLIP_CUBE_UP</span>: Rotate the content up as if it was on a side of a cube.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">ELM_FLIP_CUBE_DOWN</span>: Rotate the content down as if it was on a side of a cube.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">ELM_FLIP_PAGE_LEFT</span>: Move the content to the left as if the flip was a book.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">ELM_FLIP_PAGE_RIGHT</span>: Move the content to the right as if the flip was a book.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">ELM_FLIP_PAGE_UP</span>: Move the content up as if the flip was a book.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">ELM_FLIP_PAGE_DOWN</span>: Move the content down as if the flip was a book.</li>
+ </ul>
+
+<h3>Interacting With the User</h3>
+
+<p>By default, the user cannot interact with the flip. You can set the interaction to be possible, but you have to choose which animation appears on the interaction (rotation has been selected in the following example).</p>
+
+<pre class="prettyprint">
+elm_flip_interaction_set(flip, ELM_FLIP_INTERACTION_ROTATE);
+</pre>
+
+<p>The available modes of interaction are</p>
+ <ul>
+ <li><span style="font-family: Courier New,Courier,monospace">ELM_FLIP_INTERACTION_NONE</span>: No interaction is allowed</li>
+ <li><span style="font-family: Courier New,Courier,monospace">ELM_FLIP_INTERACTION_ROTATE</span>: Interaction causes a rotating animation</li>
+ <li><span style="font-family: Courier New,Courier,monospace">ELM_FLIP_INTERACTION_CUBE</span>: Interaction causes a cube animation</li>
+ <li><span style="font-family: Courier New,Courier,monospace">ELM_FLIP_INTERACTION_PAGE</span>: Interaction causes a page animation</li>
+ </ul>
+
+<p>You must also choose which interaction directions are enabled. Only right and left are enabled in the following example.</p>
+
+<pre class="prettyprint">
+elm_flip_interaction_direction_enabled_set(flip, ELM_FLIP_DIRECTION_LEFT, EINA_TRUE);
+elm_flip_interaction_direction_enabled_set(flip, ELM_FLIP_DIRECTION_RIGHT, EINA_TRUE);
+</pre>
+
+<p>You can also set the amount of the flip that is sensitive to user interaction. In the following example, it is set to the entire flip (1) to make the flip easy to interact with.</p>
+
+<pre class="prettyprint">
+elm_flip_interaction_direction_hitsize_set(flip, ELM_FLIP_DIRECTION_LEFT, 1);
+elm_flip_interaction_direction_hitsize_set(flip, ELM_FLIP_DIRECTION_RIGHT, 1);
+</pre>
+
+<h3>Using the Flip Callbacks</h3>
+
+<p>Two signals are emitted by the flip: one when an animation starts and one when it ends. For these signals, <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+
+<pre class="prettyprint">
+"animate,begin" - A flip animation is started
+"animate,done" - A flip animation is finished
+</pre>
+
+<p>You can register a callback on the "animation,begin" signal.</p>
+
+<pre class="prettyprint">
+{
+ evas_object_smart_callback_add(entry, "animate,begin", anim_start_cb, data);
+}
+
+// Callback function for the "animate,begin" signal
+// This callback is called when the flip animation starts
+void anim_start_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ dlog_print(DLOG_INFO, LOG_TAG, "Animation starts\n");
+}</pre>
+
+ <h2 id="gengrid" name="gengrid">Gengrid</h2>
+
+<p class="figure">Figure: Gengrid component</p>
+<p align="center"> <img alt="Gengrid component" src="../../images/gengrid.png" /> </p>
+
+<p class="figure">Figure: Gengrid hierarchy</p>
+<p align="center"> <img alt="Gengrid hierarchy" src="../../images/gengrid_tree.png" /> </p>
+
+<p>Gengrid component is based on the same idea as the genlist. It aims at displaying objects on a grid layout and rendering only the visible ones. As for the genlist, callbacks are called at item creation or deletion.</p>
+
+<p>This UI component inherits from the layout component and implements the scroller interface. Because of this, the scroller and layout functions can be used with this UI component.</p>
+
+<p>A gengrid can display its items using a horizontal or vertical layout. In the first layout, the items are displayed in columns from top to bottom, starting a new column when the space for the current column is filled. In the second one, items are set in rows from left to right.</p>
+
+<h3>Adding a Gengrid Component</h3>
+
+<p>You can add a gengrid component with the following code.</p>
+<pre class="prettyprint">
+Evas_Object *gengrid, *parent;
+gengrid = elm_gengrid_add(parent);
+</pre>
+
+<h3>Gengrid Items</h3>
+
+<p>A gengrid item is composed of 0 or more texts, 0 or more contents and 0 or more boolean states. The number of the text and content depends on the theme used for gengrid items. In the default Tizen gengrid item theme, items can have two content parts that can be set with the <span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span> and <span style="font-family: Courier New,Courier,monospace">elm.swallow.end</span> part names.</p>
+
+<h3>Creating and Deleting Items</h3>
+
+<p>As with genlists, the items are allocated and deleted on the go, while the user is scrolling the gengrid. The following example shows how to declare a <span style="font-family: Courier New,Courier,monospace">Elm_Gengrid_Item_Class</span> structure to inform the gengrid how to manage items.</p>
+<pre class="prettyprint">
+static Elm_Gengrid_Item_Class *gic = elm_gengrid_item_class_new();
+gic->item_style = "default";
+gic->func.text_get = _grid_label_get;
+gic->func.content_get = _grid_content_get;
+gic->func.state_get = _grid_state_get;
+gic->func.del = _grid_del;
+</pre>
+
+<p>The parameters of this structure are not be detailed here, because they are very similar to that of the genlist. Please refer to the genlist component page for more detailed information.</p>
+
+<h3>Managing Items</h3>
+
+<p>As with genlists, items can be added with the <span style="font-family: Courier New,Courier,monospace">elm_gengrid_item_append()</span>, <span style="font-family: Courier New,Courier,monospace">elm_gengrid_item_prepend()</span>, <span style="font-family: Courier New,Courier,monospace">elm_gengrid_item_insert_before()</span>, and <span style="font-family: Courier New,Courier,monospace">elm_gengrid_item_insert_after()</span> functions. With the gengrid, there is no need to pass the <span style="font-family: Courier New,Courier,monospace">type</span> parameters. They can be cleared with the <span style="font-family: Courier New,Courier,monospace">elm_gengrid_clear()</span> function.</p>
+
+<p>You can set the multiselection mode on.</p>
+<pre class="prettyprint">
+elm_gengrid_multi_select_set(gengrid, EINA_TRUE);
+</pre>
+
+<p>When the multiselection mode is on, the selected items are retrieved with the <span style="font-family: Courier New,Courier,monospace">elm_gengrid_selected_items_get()</span> function. The function returns a list of all the selected items.</p>
+
+<p>When the content of an item changes, you can call <span style="font-family: Courier New,Courier,monospace">elm_gengrid_item_update()</span> to ask the gengrid to update this item's content.</p>
+
+<p>It is also possible to select or disable some items manually with the <span style="font-family: Courier New,Courier,monospace">elm_gengrid_item_selected_set()</span> and <span style="font-family: Courier New,Courier,monospace">elm_object_item_disabled_set()</span> functions.</p>
+
+<h3>Using Gengrid Callbacks</h3>
+
+<p>The gengrid component emits the following signals:</p>
+ <ul>
+ <li><span style="font-family: Courier New,Courier,monospace">activated</span>: The user has double-clicked or pressed (enter | return | spacebar) on an item. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter is the gengrid item that is activated.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">clicked,double</span>: The user has double-clicked an item. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter is the gengrid item that is double-clicked.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">longpressed</span>: The item is pressed for a certain amount of time. By default it is one second.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">selected</span>: The user has selected an item. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter is the gengrid item that is selected.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">unselected</span>: The user has unselected an item. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter is the gengrid item that is unselected.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">realized</span>: The item in the gengrid has its implementing Evas object instantiated, de facto. <span style="font-family: Courier New,Courier,monospace">event_info</span> is the gengrid item that is created. The object can be deleted at any time, so it is strongly advisable not to use the object pointer returned from <span style="font-family: Courier New,Courier,monospace">elm_gengrid_item_object_get()</span>, because it can point to freed objects.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">unrealized</span>: The implementing Evas object for this item is deleted. <span style="font-family: Courier New,Courier,monospace">event_info</span> is the gengrid item that is deleted.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">changed</span>: An item is added, removed, resized or moved and the gengrid is resized or has <span style="font-family: Courier New,Courier,monospace">horizontal</span> property changes.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">scroll,anim,start</span>: Scrolling animation starts.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">scroll,anim,stop</span>: Scrolling animation stops.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">drag,start,up</span>: The item in the gengrid is dragged (not scrolled) up.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">drag,start,down</span>: The item in the gengrid has dragged (not scrolled) down.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">drag,start,left</span>: The item in the gengrid is dragged (not scrolled) left.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">drag,start,right</span>: The item in the gengrid is dragged (not scrolled) right.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">drag,stop</span>: The item in the gengrid stops being dragged.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">drag</span>: The item in the gengrid is dragged.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">scroll</span>: The content is scrolled (moved).</li>
+ <li><span style="font-family: Courier New,Courier,monospace">scroll,drag,start</span>: Dragging the content starts.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">scroll,drag,stop</span>: Dragging the content stops.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">edge,top</span>: The gengrid is scrolled to the top edge.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">edge,bottom</span>: The gengrid is scrolled to the bottom edge.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">edge,left</span>: The gengrid is scrolled to the left edge.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">edge,right</span>: The gengrid is scrolled to the right edge.</li>
+ </ul>
+
+ <h2 id="genlist" name="genlist">Genlist</h2>
+
+<p class="figure">Figure: Genlist component</p>
+<p align="center"> <img alt="Genlist component" src="../../images/genlist.png" /> </p>
+
+<p class="figure">Figure: Genlist hierarchy</p>
+<p align="center"> <img alt="Genlist hierarchy" src="../../images/genlist_htree.png" /> </p>
+
+<p>Genlist is a UI component that displays a scrollable list of items. It allows a lot of entries while being fast and has a low memory footprint, as only the visible items are allocated in the memory.</p>
+
+<p>For more information, see the <a href="../../../../org.tizen.tutorials/html/native/ui/genlist_tutorial_mn.htm">Genlist Tutorial</a>.</p>
+
+<h3>Genlist Item Style</h3>
+
+<p>An item can have 0 or more texts, 0 or more contents, and 0 or more boolean states. This is defined in the Edje item theme style. Genlist looks for data items named respectively <span style="font-family: Courier New,Courier,monospace">labels</span>, <span style="font-family: Courier New,Courier,monospace">contents</span>, and <span style="font-family: Courier New,Courier,monospace">states</span> in the Edje file. The <span style="font-family: Courier New,Courier,monospace">default</span> item style provides one text part (<span style="font-family: Courier New,Courier,monospace">elm.text</span>), two content parts (<span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span> and <span style="font-family: Courier New,Courier,monospace">elm.swallow.end</span>) and no state parts.</p>
+
+<p>The following item styles are available:</p>
+ <ul>
+ <li><span style="font-family: Courier New,Courier,monospace">default</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">full</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">one_icon</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">end_icon</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">group_index</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">double_label</span></li>
+ </ul>
+
+<p>Here are some examples of the item styles.</p>
+
+<p class="figure">Figure: Default item style</p>
+<p align="center"> <img alt="Default item style" src="../../images/gl-default.png" /> </p>
+
+<p class="figure">Figure: end_icon item style</p>
+<p align="center"> <img alt="end_icon item style" src="../../images/gl-end-icon.png" /> </p>
+
+<p class="figure">Figure: double_label item style</p>
+<p align="center"> <img alt="double_label item style" src="../../images/gl-double-label.png" /> </p>
+
+<p>For more information on creating a new genlist item style, see <a href="preferences_n.htm#customize">Customizing UI Components</a>.</p>
+
+<h3>Adding a Genlist Component</h3>
+
+<p>A genlist component is added with the <span style="font-family: Courier New,Courier,monospace">elm_genlist_add()</span> function.</p>
+<pre class="prettyprint">
+Evas_Object *genlist, *parent;
+genlist = elm_genlist_add(parent);
+</pre>
+
+<h3>Creating And Deleting Items</h3>
+
+<p>To save up memory, genlist allocates and deletes items on the go, while the user is scrolling the list. To enable that, the user creates and fills a <span style="font-family: Courier New,Courier,monospace">Elm_Genlist_Item_Class</span> structure that informs the genlist component which callbacks to call when an item is created or deleted.</p>
+
+<pre class="prettyprint">
+Elm_Genlist_Item_Class *itc = elm_genlist_item_class_new();
+
+itc->item_style = "default";
+itc->decorate_item_style = NULL;
+itc->decorate_all_item_style = NULL;
+itc->func.text_get = _item_label_get;
+itc->func.content_get = _item_content_get;
+itc->func.state_get = _item_state_get;
+itc->func.del = _item_del;
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">item_style</span>, <span style="font-family: Courier New,Courier,monospace">decorate_item_style</span>, and <span style="font-family: Courier New,Courier,monospace">decorate_all_item_style</span> attributes define the names of the item style, the decorate mode item style and the decorate all item style.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">func</span> structure contains pointers to functions that are called when an item is going to be created or deleted. All of them receive a data parameter that points to the same data passed to the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span> and related item creation functions, and an <span style="font-family: Courier New,Courier,monospace">obj</span> parameter that points to the genlist object itself.</p>
+ <ul>
+ <li><span style="font-family: Courier New,Courier,monospace">text_get</span>
+ <p>This function receives a <span style="font-family: Courier New,Courier,monospace">PART</span> parameter that is the name string of one of the existing text parts in the Edje group implementing the item's theme. It has to return a string (duplicated with the <span style="font-family: Courier New,Courier,monospace">strdup()</span> function) corresponding to the <span style="font-family: Courier New,Courier,monospace">PART</span> parameter. The caller is in charge of freeing the string when done.</p></li>
+
+ <li><span style="font-family: Courier New,Courier,monospace">content_get</span>
+ <p>The <span style="font-family: Courier New,Courier,monospace">PART</span> parameter is the name string of one of the existing swallow parts in the Edje group. When no content is desired, it must return <span style="font-family: Courier New,Courier,monospace">NULL</span>, or otherwise, a valid object handle. The object is deleted by the genlist on its deletion or when the item is <span style="font-family: Courier New,Courier,monospace">unrealized</span>.</p></li>
+
+ <li><span style="font-family: Courier New,Courier,monospace">state_get</span>
+ <p>The <span style="font-family: Courier New,Courier,monospace">PART</span> parameter is the name string of one of the state parts in the Edje group implementing the item's theme. It returns <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span> for false/off or <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> for true/on. The default is false. Genlists emit a signal to the <span style="font-family: Courier New,Courier,monospace">PART</span> parameter's theming Edje object with <span style="font-family: Courier New,Courier,monospace">elm,state,xxx,active</span> as <span style="font-family: Courier New,Courier,monospace">emission</span> and <span style="font-family: Courier New,Courier,monospace">elm</span> as <span style="font-family: Courier New,Courier,monospace">source</span> argument, when the state is true. xxx is the name of the (state) part.</p></li>
+
+ <li><span style="font-family: Courier New,Courier,monospace">del</span>
+ <p>This function is called when the genlist item is deleted. It deletes any data that is allocated at the item creation.</p></li>
+</ul>
+
+<h3>Managing Items</h3>
+
+<p>To add an item, several functions can be used. <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span> adds an item to the end of the list, or if there is a parent list, to the end of all the child items of the parent list. <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_prepend()</span> is otherwise the same but adds to the beginning of the list or children lists. <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_insert_before()</span> inserts an item before the indicated item and <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_insert_after()</span> inserts an item after the indicated item.</p>
+
+<p>The previous functions take a <span style="font-family: Courier New,Courier,monospace">type</span> parameter that can be one of the following.</p>
+ <ul>
+ <li><span style="font-family: Courier New,Courier,monospace">ELM_GENLIST_ITEM_NONE</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">ELM_GENLIST_ITEM_TREE</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">ELM_GENLIST_ITEM_GROUP</span></li>
+ </ul>
+
+<p>If <span style="font-family: Courier New,Courier,monospace">ELM_GENLIST_ITEM_TREE</span> is set, this item is displayed as being able to expand and have child items. If <span style="font-family: Courier New,Courier,monospace">ELM_GENLIST_ITEM_GROUP</span> is set, this item is a group index item that is displayed at the top until the next group appears.</p>
+
+<p class="figure">Figure: Genlist tree</p>
+<p align="center"> <img alt="Genlist tree" src="../../images/genlist_tree.png" /> </p>
+
+<p>The application clears the list with <span style="font-family: Courier New,Courier,monospace">elm_genlist_clear()</span>, which deletes all the items in the list. <span style="font-family: Courier New,Courier,monospace">elm_object_item_del()</span> deletes a specific item. <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_subitems_clear()</span> clears all items that are children of the indicated parent item.</p>
+
+<p>To help inspect the list items, move to the item at the top of the list with <span style="font-family: Courier New,Courier,monospace">elm_genlist_first_item_get()</span>, which returns the item pointer. <span style="font-family: Courier New,Courier,monospace">elm_genlist_last_item_get()</span> moves to the item at the end of the list. <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_next_get()</span> and <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_prev_get()</span> move to the next and previous items relative to the indicated item. Using these calls you can go through the entire item list or tree.</p>
+
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">As a tree, the items are flattened on the list, so <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_parent_get()</span> gives you the name of the parent item (even to skip them if needed).</td>
+ </tr>
+ </tbody>
+ </table>
+
+<p><span style="font-family: Courier New,Courier,monospace">elm_genlist_item_show()</span> scrolls the scroller to show the desired item as visible. </p>
+<p><span style="font-family: Courier New,Courier,monospace">elm_object_item_data_get()</span> returns the data pointer set by the item creation functions.</p>
+
+<p>If an item changes (state, boolean, text or content change), use <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_update()</span> for the genlist to update the item. Genlist re-realizes the item and calls the functions in the <span style="font-family: Courier New,Courier,monospace">_Elm_Genlist_Item_Class</span> for it.</p>
+
+<h3>Selection</h3>
+
+<p>Items are manually selected or deselected with <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_selected_set()</span> or disabled with <span style="font-family: Courier New,Courier,monospace">elm_object_item_disabled_set()</span>. In case there is a tree or a group item, the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_expanded_set()</span> function is used to expand or contract the item.</p>
+
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">Calling this function does not show or hide any child of an item (if it is a parent). You must manually delete and create them on the callbacks of the <span style="font-family: Courier New,Courier,monospace">expanded</span> or <span style="font-family: Courier New,Courier,monospace">contracted</span> signals.</td>
+ </tr>
+ </tbody>
+ </table>
+
+<p>By default, the genlist is in single-selection mode: only one item can be selected at a time. You can use <span style="font-family: Courier New,Courier,monospace">elm_genlist_multi_select_set()</span> to select multiple items. In the single-selection mode, the <span style="font-family: Courier New,Courier,monospace">elm_genlist_selected_item_get()</span> function can be called to retrieve the selected item. If several items are selected, the <span style="font-family: Courier New,Courier,monospace">elm_genlist_selected_items_get()</span> returns a list of the current selected items.</p>
+
+<p>In the following figure, there is a genlist in multi-selection mode with two items selected (#4 and #5) and one item disabled (#2).</p>
+
+<p class="figure">Figure: Genlist component</p>
+<p align="center"> <img alt="Genlist component" src="../../images/genlist_multi.png"/> </p>
+
+<h3>Using Genlist Callbacks</h3>
+
+<p>The genlist component emits the following signals:</p>
+ <ul>
+ <li><span style="font-family: Courier New,Courier,monospace">activated</span>: The user has double-clicked or pressed (enter | return | spacebar) on an item. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">clicked,double</span>: The user has double-clicked an item. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">selected</span>: The user selects an item. event_info in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">unselected</span>: The user unselects an item. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">expanded</span>: The item is to be expanded with <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_expanded_set()</span>. This callback fills in the child items. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">contracted</span>: The item is to be contracted with <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_expanded_set()</span>. This callback deletes the child items. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">expand,request</span>: The user wants to expand a tree branch item. The callback decides if the item can expand (if it has any children) and calls <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_expanded_set()</span> to set the state. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">contract,request</span>: The user wants to contract a tree branch item. The callback decides if the item can contract (if it has any children) and calls <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_expanded_set()</span> to set the state. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">realized</span>: The item is created as a real evas object. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span>, that contains the activated item.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">unrealized</span>: An item is going to be unrealized. Content objects provided are deleted and the item object is deleted or put into a floating cache. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">drag,start,up</span>: The item in the list is dragged (not scrolled) up. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">drag,start,down</span>: The item in the list is dragged (not scrolled) down. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">drag,start,left</span>: The item in the list is dragged (not scrolled) left. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">drag,start,right</span>: The item in the list is dragged (not scrolled) right. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">drag,stop</span>: The item in the list has stopped being dragged. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">drag</span>: The item in the list is being dragged. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">longpressed</span>: The item is pressed for a certain amount of time. The default specified time is one second. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">scroll,anim,start</span>: The scrolling animation is started. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">scroll,anim,stop</span>: The scrolling animation is stopped. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">scroll,drag,start</span>: Dragging the content is started. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">scroll,drag,stop</span>: Dragging the content is stopped. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">edge,top</span>: The genlist is scrolled to the top edge. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">edge,bottom</span>: The genlist is scrolled to the bottom edge. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">edge,left</span>: The genlist is scrolled to the left edge. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">edge,right</span>: The genlist is scrolled to the right edge. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">multi,swipe,left</span>: The genlist is multi-touch swiped left. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">multi,swipe,right</span>: The genlist is multi-touch swiped right. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">multi,swipe,up</span>: The genlist is multi-touch swiped up. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">multi,swipe,down</span>: The genlist is multi-touch swiped down. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">multi,pinch,out</span>: The genlist is multi-touch pinched out. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">multi,pinch,in</span>: The genlist is multi-touch pinched in. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">swipe</span>: The genlist is swiped. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">moved</span>: A genlist item is moved in the reorder mode. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">moved,after</span>: A genlist item is moved after another item in the reorder mode. To access the relative previous item, use <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_prev_get()</span>. This signal is called along with the <span style="font-family: Courier New,Courier,monospace">moved</span> signal. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">moved,before</span>: A genlist item is moved before another item in the reorder mode. To access the relative previous item, use <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_next_get()</span>. This signal is called along with the <span style="font-family: Courier New,Courier,monospace">moved</span> signal. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">language,changed</span> The program's language is changed. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">tree,effect,finished</span>: A genlist tree effect is finished. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
+ </ul>
+
+
+ <h2 id="glview" name="glview">GLView</h2>
+
+ <p class="figure">Figure: GLView gears example</p>
+ <p align="center"><img alt="GLView gears example" src="../../images/glview.png" /></p>
+
+ <p class="figure">Figure: GLView hierarchy</p>
+ <p align="center"><img alt="GLView hierarchy" src="../../images/glview_tree.png" /></p>
+
+
+<p> The GLView component renders OpenGL in an elementary object, which hides Evas GL complexity. For more information, see <a href="../../../../org.tizen.guides/html/native/graphics/opengles_n.htm">OpenGL ES</a>.</p>
+
+<h3>Adding a GLView Component</h3>
+
+<p>Create a GLView component with the <span style="font-family: Courier New,Courier,monospace">elm_glview_add()</span> function.</p>
+<pre class="prettyprint">
+Evas_Object *glview, *parent;
+
+glview = elm_glview_add(parent);
+</pre>
+
+<p>In this example, the size of the GLView is set to 200x200 pixels.</p>
+<pre class="prettyprint">
+elm_glview_size_set(glview, 200, 200);
+</pre>
+
+<h3>Using the GLView API</h3>
+
+<p>You can configure the GLView rendering mode by activating the following rendering modes:</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">ELM_GLVIEW_ALPHA</span>: Alpha channel rendering mode</li>
+<li><span style="font-family: Courier New,Courier,monospace">ELM_GLVIEW_DEPTH</span>: Depth buffer rendering mode</li>
+<li><span style="font-family: Courier New,Courier,monospace">ELM_GLVIEW_STENCIL</span>: Stencil buffer rendering mode</li>
+<li><span style="font-family: Courier New,Courier,monospace">ELM_GLVIEW_DIRECT</span>: Direct rendering mode</li>
+<li><span style="font-family: Courier New,Courier,monospace">ELM_GLVIEW_CLIENT_SIDE_ROTATION</span>: The client handles the GL view rotation if direct rendering is enabled</li>
+</ul>
+
+<p>In the following example, the alpha channel and depth buffer rendering mode are enabled.</p>
+<pre class="prettyprint">
+elm_glview_mode_set(glview, ELM_GLVIEW_ALPHA | ELM_GLVIEW_DEPTH);
+</pre>
+
+<p>The following example shows how to decide what to do with the GL surface when the GLView component is resized.</p>
+<pre class="prettyprint">
+elm_glview_resize_policy_set(glview, ELM_GLVIEW_RESIZE_POLICY_RECREATE);
+</pre>
+
+<p>The GL surface is destroyed and recreated to the new size (default function). The resize policy can also be set to <span style="font-family: Courier New,Courier,monospace">ELM_GLVIEW_RESIZE_POLICY_SCALE</span>. In that case, only the image object is scaled, not the underlying GL surface.</p>
+
+<p>The following example shows how to set the GLView rendering policy.</p>
+<pre class="prettyprint">
+elm_glview_render_policy_set(glview, ELM_GLVIEW_RENDER_POLICY_ALWAYS);
+</pre>
+
+<p>The GLView object is always redrawn during the rendering loop. It can also be set to <span style="font-family: Courier New,Courier,monospace">ELM_GLVIEW_RENDER_POLICY_ON_DEMAND</span> (default function), where the GLView component is redrawn only when it is visible.</p>
+
+<p>Register the callbacks:</p>
+
+<pre class="prettyprint">elm_glview_init_func_set(glview, _init_gl_cb);
+elm_glview_del_func_set(glview, _del_gl_cb);
+elm_glview_resize_func_set(glview, _resize_gl_cb);
+elm_glview_render_func_set(glview, _draw_gl_cb);
+</pre>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">elm_glview_init_func_set()</span> registers an init callback that is called at the GLView object creation.</li>
+<li><span style="font-family: Courier New,Courier,monospace">elm_glview_del_func_set()</span> registers a del function that is called when the GLView object is deleted.</li>
+<li><span style="font-family: Courier New,Courier,monospace">elm_glview_resize_func_set()</span> registers the resize function that is called during the rendering loop when the GLView object is resized.</li>
+<li><span style="font-family: Courier New,Courier,monospace">elm_glview_render_func_set()</span> registers the render function that is called when the GLView object must be redrawn.</li>
+</ul>
+
+<h3>Using GLView Callbacks</h3>
+
+<p>The GLView component emits the following signals:</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">focused</span>: The Glview component is focused. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Focus_Info</span>.</li>
+<li><span style="font-family: Courier New,Courier,monospace">unfocused</span>: The GLView object is unfocused.</li>
+</ul>
+
+<p>To register a callback:</p>
+<pre class="prettyprint">
+{
+ evas_object_smart_callback_add(glview, "focused", focused_cb, data);
+}
+
+// Callback function for the "focused" signal
+// This callback is called when the GLView is focused
+void focused_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ Elm_Focus_Info *fi = event_info;
+
+ dlog_print(DLOG_INFO, LOG_TAG, "GLView is focused\n");
+}
+</pre>
+
+ <h2 id="icon" name="icon">Icon</h2>
+
+<p class="figure">Figure: Icon component</p>
+<p align="center"> <img alt="Icon component" src="../../images/icon.png" /> </p>
+
+<p class="figure">Figure: Icon hierarchy</p>
+<p align="center"> <img alt="Icon hierarchy" src="../../images/icon_tree.png" /> </p>
+
+<p>The icon component inherits from the image component. It is used to display images in an icon context.</p>
+
+<h3>Adding an Icon Component</h3>
+
+<p>You can create an icon and set it as a freedesktop.org <span style="font-family: Courier New,Courier,monospace">Home</span> standard icon.</p>
+
+<pre class="prettyprint">
+Evas_Object *icon, *parent;
+icon = elm_icon_add(parent);
+elm_icon_standard_set(icon, "Home");
+</pre>
+
+<h3>Changing Image File</h3>
+
+<p>You can change the image by using an image in the filesystem (for example, <span style="font-family: Courier New,Courier,monospace">/tmp/Home.png</span>).</p>
+<pre class="prettyprint">
+elm_image_file_set(icon, "/tmp/Home.png", NULL);
+</pre>
+
+<p>You can also use a group in an Edje file (for example, <span style="font-family: Courier New,Courier,monospace">/tmp/Home.edj</span>).</p>
+<pre class="prettyprint">
+elm_image_file_set(icon, "/tmp/Home.edj", "elm/icon/Home/default");
+</pre>
+
+<p>A thumbnail can be generated and cached for future use. For this, you need the Ethumb library support.</p>
+
+<pre class="prettyprint">
+elm_icon_thumb_set(icon, "/tmp/Home.png", NULL);
+</pre>
+
+<p>This function sets the file in the icon and enables the use of a cached thumbnail if it already exists. Otherwise, it creates a new thumbnail and caches it for future use.</p>
+
+<h3>Using Icon Callbacks</h3>
+
+<p>The icon component emits the following signals:</p>
+ <ul>
+ <li><span style="font-family: Courier New,Courier,monospace">thumb,done</span>: <span style="font-family: Courier New,Courier,monospace">elm_icon_thumb_set()</span> is completed with success.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">thumb,error</span>: <span style="font-family: Courier New,Courier,monospace">elm_icon_thumb_set()</span> fails.</li>
+ </ul>
+
+<p>In both cases, <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+
+
+ <h2 id="image" name="image">Image</h2>
+
+<p class="figure">Figure: Image component</p>
+<p align="center"> <img alt="Image component" src="../../images/image.png" /> </p>
+
+<p class="figure">Figure: Image hierarchy</p>
+<p align="center"> <img alt="Image hierarchy" src="../../images/image_tree.png" /> </p>
+
+<p>The image component can load and display an image from a disk file or a memory region.</p>
+
+<h3>Adding an Image Component</h3>
+
+<p>This object is created with <span style="font-family: Courier New,Courier,monospace">elm_image_add()</span>.</p>
+
+<pre class="prettyprint">
+Evas_Object *image, *parent;
+image = elm_image_add(parent);
+</pre>
+
+<h3>Configuring the Image Component</h3>
+
+<p>Various properties of the image can be tuned. First, you can disable the elementary scaling so that the image does not scale but resizes on both directions.</p>
+<pre class="prettyprint">
+elm_image_no_scale_set(image, EINA_TRUE);
+elm_image_resizable_set(image, EINA_TRUE, EINA_TRUE);
+</pre>
+
+<p>When scaling images, the smooth scaling algorithm can be used. It provides a better quality image but is slower than the default algorithm.</p>
+<pre class="prettyprint">
+elm_image_smooth_set(image, EINA_TRUE);
+</pre>
+
+<p>Preloading is used to load images without blocking the user interface. This preserves the reactivity of the user experience. The image is loaded in a thread. It can be disabled if desired.</p>
+<pre class="prettyprint">
+elm_image_preload_disabled_set(image, EINA_TRUE);
+</pre>
+
+<p>The image can be rotated or flipped. Here the image is rotated 180 degrees.</p>
+<pre class="prettyprint">
+elm_image_orient_set(image, ELM_IMAGE_ROTATE_180);
+</pre>
+
+<p>The following orientations are available:</p>
+ <ul>
+ <li><span style="font-family: Courier New,Courier,monospace">ELM_IMAGE_ORIENT_0</span>: No orientation change</li>
+ <li><span style="font-family: Courier New,Courier,monospace">ELM_IMAGE_ROTATE_90</span>: Rotate the image 90 degrees clockwise</li>
+ <li><span style="font-family: Courier New,Courier,monospace">ELM_IMAGE_ROTATE_180</span>: Rotate the image 180 degrees clockwise</li>
+ <li><span style="font-family: Courier New,Courier,monospace">ELM_IMAGE_ROTATE_270</span>: Rotate the image 90 degrees counter-clockwise</li>
+ <li><span style="font-family: Courier New,Courier,monospace">ELM_IMAGE_FLIP_HORIZONTAL</span>: Flip the image horizontally</li>
+ <li><span style="font-family: Courier New,Courier,monospace">ELM_IMAGE_FLIP_VERTICAL</span>: Flip the image vertically</li>
+ <li><span style="font-family: Courier New,Courier,monospace">ELM_IMAGE_FLIP_TRANSPOSE</span>: Flip the image along the bottom-left to top-right line</li>
+ <li><span style="font-family: Courier New,Courier,monospace">ELM_IMAGE_FLIP_TRANSVERSE</span>: Flip the image along the top-left to bottom-right line</li>
+ </ul>
+
+<p>If you want to keep the original aspect ration when resizing the image, you must define how the image fits into the object's area.</p>
+<pre class="prettyprint">
+// Tell the image to keep original aspect ratio
+elm_image_aspect_fixed_set(image, EINA_TRUE);
+// Then let the image fill the entire object
+elm_image_fill_outside_set(image, EINA_TRUE);
+</pre>
+
+<p>In this configuration, part of the image can go outside the object. If <span style="font-family: Courier New,Courier,monospace">elm_image_fill_outside_set</span> is set to <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span>, the image stays inside the limits of the parent object.</p>
+
+<h3>Using Image Callbacks</h3>
+
+<p>The image component emits the following signals:</p>
+ <ul>
+ <li><span style="font-family: Courier New,Courier,monospace">drop</span>: The user drops an image typed object onto the object in question - the event info argument is the path to that image file</li>
+ <li><span style="font-family: Courier New,Courier,monospace">clicked</span>: The user clicks the image. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
+ </ul>
+
+<p>To register a callback when a user clicks on the image:</p>
+<pre class="prettyprint">
+{
+ evas_object_smart_callback_add(image, "clicked", clicked_cb, data);
+}
+
+// Callback function for the "clicked" signal
+// This callback is called when the image is clicked
+void clicked_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ dlog_print(DLOG_INFO, LOG_TAG, "Image clicked\n");
+}
+</pre>
+
+ <h2 id="index" name="index">Index</h2>
+
+<p class="figure">Figure: Index component</p>
+<p align="center"> <img alt="Index component" src="../../images/index.png" /> </p>
+
+<p class="figure">Figure: Index hierarchy</p>
+<p align="center"> <img alt="Index hierarchy" src="../../images/index_tree.png" /> </p>
+
+<p>An index component gives you an index for fast access to whichever group of other UI items you have. The index component is by default hidden, but it appears when the user clicks over its reserved area in the canvas. In the default theme, it is a one finger wide area on the right side of the index component's container. Generally, an index is used together with lists, generic lists, or generic grids.</p>
+
+<h3>Adding an Index Component</h3>
+
+<p>Call the <span style="font-family: Courier New,Courier,monospace">elm_index_add()</span> function to create a new index component.</p>
+<pre class="prettyprint">
+Evas_Object *index, *parent;
+index = elm_index_add(parent);
+</pre>
+
+<h3>Adding Items</h3>
+
+<p>The following example shows how to add the listitem object at the letter <span style="font-family: Courier New,Courier,monospace">A</span>, calling the smart callback <span style="font-family: Courier New,Courier,monospace">it_select_cb()</span> when this item is selected.</p>
+<pre class="prettyprint">
+Elm_Object_Item *list_item1, *list_item2;
+elm_index_item_append(index, "A", it_select_cb, list_item1);
+</pre>
+
+<p>The following example shows how to define the smart callback.</p>
+<pre class="prettyprint">
+// Callback function called when the list_item1 object
+// is selected
+void it_select_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ dlog_print(DLOG_INFO, LOG_TAG, "Item1 selected\n");
+}
+</pre>
+
+<p>In the previous case, the indexes are appended to the existing ones. It is also possible to prepend index items with <span style="font-family: Courier New,Courier,monospace">elm_index_item_prepend()</span>.</p>
+
+<h3>Sorting Index Items</h3>
+
+<p>You can insert index items using a sorting function. Indexes can be sorted, for example, by alphabetic order.</p>
+
+<p>You must write a compare function that returns a positive <span style="font-family: Courier New,Courier,monospace">int</span>, 0 or a negative <span style="font-family: Courier New,Courier,monospace">int</span> when the <span style="font-family: Courier New,Courier,monospace">data2</span> item parameter is respectively greater than, equal to or lower than the <span style="font-family: Courier New,Courier,monospace">data1</span> parameter.</p>
+
+<pre class="prettyprint">
+static int
+_index_icmp(const void *data1,
+ const void *data2)
+{
+ int result;
+
+ // Code that does the item comparison is written here
+
+ return result;
+}
+</pre>
+
+<p>This example shows how to add a new item at the <span style="font-family: Courier New,Courier,monospace">B</span> index using the compare function to sort the indexes.</p>
+
+<pre class="prettyprint">
+elm_index_item_sorted_insert(index, "B", NULL, list_item2, _index_icmp, NULL);
+</pre>
+
+<h3>Using Index Callbacks</h3>
+
+<p>The index component emits the following signals:</p>
+ <ul>
+ <li><span style="font-family: Courier New,Courier,monospace">changed</span>: The selected index item changes. <span style="font-family: Courier New,Courier,monospace">event_info</span> is the selected item's data pointer.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">delay,changed</span>: The selected index item changes, but after a small idling period. <span style="font-family: Courier New,Courier,monospace">event_info</span> is the selected item's data pointer.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">selected</span>: The user releases a mouse button and selects an item. <span style="font-family: Courier New,Courier,monospace">event_info</span> is the selected item's data pointer.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">level,up</span>: The user moves a finger from the first level to the second level.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">level,down</span>: The user moves a finger from the second level to the first level.</li>
+ </ul>
+
+<p>When the user selects an item in the index, the <span style="font-family: Courier New,Courier,monospace">selected</span> signal is emitted. The developer can then implement the associated callback to do the appropriate action (to show a given area or child object depending on the index item selected, for example). Here is an example of such a callback.</p>
+<pre class="prettyprint">
+static void
+_index_selected_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ Elm_Object_Item *lit = event_info;
+
+ // Code that does the desired action
+}
+</pre>
+
+<p>After that, the callback to the <span style="font-family: Courier New,Courier,monospace">selected</span> signal is registered.</p>
+<pre class="prettyprint">
+evas_object_smart_callback_add(index, "selected", _index_selected_cb, NULL);
+</pre>
+
+
+ <h2 id="label" name="label">Label</h2>
+
+<p class="figure">Figure: Label component</p>
+<p align="center"> <img alt="Label component" src="../../images/label.png" /> </p>
+
+<p class="figure">Figure: Label hierarchy</p>
+<p align="center"> <img alt="Label hierarchy" src="../../images/label_tree.png" /> </p>
+
+<p>The label component displays text with simple html-like markup.</p>
+
+<h3>Adding a Label Component</h3>
+
+<p>To add a label and set the text in it, use the following functions.</p>
+
+<pre class="prettyprint">
+Evas_Object *label = elm_label_add(win);
+
+elm_object_text_set(label, "Some long text for our label, that is not so long");
+</pre>
+
+<h3>Using the Label Styles</h3>
+
+<p>Label displays the text with several predefined styles.</p>
+ <ul>
+ <li><span style="font-family: Courier New,Courier,monospace">default</span>: No animation</li>
+ <li><span style="font-family: Courier New,Courier,monospace">marker</span>: The text is centered and bolded.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">slide_long</span>: The text appears from the right of the screen and slides until it disappears in the left of the screen(reappearing on the right again).</li>
+ <li><span style="font-family: Courier New,Courier,monospace">slide_short</span>: The text appears in the left of the label and slides to the right to show the overflow. When all of the text has been shown the position is reset.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">slide_bounce</span>: The text appears in the left of the label and slides to the right to show the overflow. When all of the text has been shown, the animation reverses, moving the text to the left.</li>
+ </ul>
+
+<p>Here the style is set to <span style="font-family: Courier New,Courier,monospace">slide_long</span>.</p>
+
+<pre class="prettyprint">
+elm_object_style_set(label, "slide_long");
+</pre>
+
+<h3>Configuring the Label</h3>
+
+<p>The duration of the animation and the slide mode can be set with the following functions.</p>
+<pre class="prettyprint">
+elm_label_slide_duration_set(label, 3);
+elm_label_slide_mode_set(label, ELM_LABEL_SLIDE_MODE_ALWAYS);
+</pre>
+
+<p>Use the following function to modify the style.</p>
+<pre class="prettyprint">
+elm_object_style_set(label, "slide_bounce");
+</pre>
+
+<h3>Using the Label Callbacks</h3>
+
+<p>This UI component emits the following signals:</p>
+ <ul>
+ <li><span style="font-family: Courier New,Courier,monospace">language,changed</span>: The program's language changes.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">slide,end</span>: The slide reaches the end.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">anchor,clicked</span>: The anchor is clicked. <span style="font-family: Courier New,Courier,monospace">event_info</span> points to an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Label_Anchor_Info</span>.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">anchor,mouse,down</span> <span style="font-family: Courier New,Courier,monospace">event_info</span> points to an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Label_Anchor_Info</span>.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">anchor,mouse,up</span> <span style="font-family: Courier New,Courier,monospace">event_info</span> points to an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Label_Anchor_Info</span>.</li>
+ </ul>
+
+<p>The following example registers a callback on the <span style="font-family: Courier New,Courier,monospace">slide,end</span> signal.</p>
+
+<pre class="prettyprint">
+{
+ evas_object_smart_callback_add(label, "slide,end", slide_end_cb, data);
+}
+
+// Callback function for the "slide,end" signal
+// This callback is called when the label slide reaches the end
+void slide_end_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ dlog_print(DLOG_INFO, LOG_TAG, "Slide has reach the end.\n");
+}
+</pre>
+
+ <h2 id="list" name="list">List</h2>
+
+ <p class="figure">Figure: List component</p>
+<p align="center"> <img alt="List component" src="../../images/list.png" /> </p>
+
+ <p class="figure">Figure: List hierarchy</p>
+<p align="center"> <img alt="List hierarchy" src="../../images/list_tree.png" /> </p>
+
+
+ <p>This UI component is a very simple type of a list component. It is not to be used to manage a lot of items. For that, genlists are a better option. </p>
+
+ <p>The list items can contain a text and two contents (<span style="font-family: Courier New,Courier,monospace">start</span> and <span style="font-family: Courier New,Courier,monospace">end</span>). These are set with the <span style="font-family: Courier New,Courier,monospace">elm_object_item_*()</span> functions. </p>
+
+<h3>Adding a List Component</h3>
+
+<pre class="prettyprint">
+Evas_Object *list, *parent;
+
+// Create a list
+list = elm_list_add(parent);
+</pre>
+
+<h3>Using the List</h3>
+
+<p>This UI component implements the scrollable interface, so the scroller component functions can be used on it. For example, if you want to change the bounce property of the scroller or the scrolling policy:</p>
+
+<pre class="prettyprint">
+Evas_Object *list;
+
+// Change the scroller policy to fix the scroll only vertically
+elm_scroller_policy_set(list, ELM_SCROLLER_POLICY_ON, ELM_SCROLLER_POLICY_OFF);
+// Enable bounce effect when the list reaches the upper and lower limits
+elm_scroller_bounce_set(list, EINA_TRUE, EINA_TRUE);
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">elm_list_multi_select_set()</span> function can be called to enable multi-selection of items. Each time an item is clicked, the state changes to <span style="font-family: Courier New,Courier,monospace">selected</span>.</p>
+
+<pre class="prettyprint">
+Evas_Object *list;
+
+// Activate multi selection
+elm_list_multi_select_set(list, EINA_TRUE);
+</pre>
+
+<h3>Adding Item to the List</h3>
+
+ <p>Items are added with <span style="font-family: Courier New,Courier,monospace">elm_list_item_append()</span> or <span style="font-family: Courier New,Courier,monospace">elm_list_item_prepend()</span>. Here an example of adding ten items with text and one icon on the front: The last two arguments are the callback function when the created item is clicked and the data passed to the callback function.</p>
+
+<pre class="prettyprint">
+Evas_Object *list;
+int i;
+
+// This function is called when the list item is selected
+static void _selected_item_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ Elm_Object_Item *list_it = elm_list_selected_item_get(obj);
+ Eina_Bool selected = elm_list_item_selected_get(list_it);
+ dlog_print(DLOG_INFO, LOG_TAG, "item is %s\n", selected? "selected": "unselected");
+}
+
+for (i = 0; i < 10; i++)
+{
+ Evas_Object *ic;
+ char tmp[8];
+ snprintf(tmp, sizeof(tmp), "Item %02d", i);
+ // Create an icon
+ ic = elm_icon_add(win);
+ // Set the file to the icon file
+ elm_image_file_set(ic, "path/to/file", NULL);
+ // Add item to the list
+ elm_list_item_append(list, tmp, ic, NULL, _selected_item_cb, NULL);
+}
+
+</pre>
+
+<h3>Changing the Text or Icon of an Item</h3>
+
+<p>If you want to change the state of an item, you can do it by using all the functions relative to <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span>. Each item of the list contains two instances of an <span style="font-family: Courier New,Courier,monospace">evas_object</span>. Give those as the third and the fourth arguments when you append or prepend the item in the list. The <span style="font-family: Courier New,Courier,monospace">evas_object</span> instances are changed with <span style="font-family: Courier New,Courier,monospace">elm_object_item_part_content_set</span>. The first object is referenced as the <span style="font-family: Courier New,Courier,monospace">start</span> object in the theme, whereas the second one is referenced as the <span style="font-family: Courier New,Courier,monospace">end</span> object. Give these names when you use the <span style="font-family: Courier New,Courier,monospace">elm_object_item_part_content_set</span>. The label of the item is changed by using <span style="font-family: Courier New,Courier,monospace">elm_object_item_text_set</span>.</p>
+
+<pre class="prettyprint">
+Evas_Object *list;
+Eina_List *l;
+Elm_Object_Item *it;
+
+// Retrieve the current selected item
+it = elm_list_selected_item_get(list);
+if (!it)
+ return;
+
+ic = elm_icon_add(win);
+// Set the file to the icon file
+elm_image_file_set(ic, "path/to/file", NULL);
+// Change the first icon
+elm_object_item_part_content_set(it, "start", ic);
+// Change the second icon
+elm_object_item_part_content_set(it, "end", ic);
+// Change the label
+elm_object_item_text_set(it, "I've been selected !");
+</pre>
+
+<h3>Retrieving Selected Items</h3>
+
+ <p>The list of the currently selected items is retrieved with <span style="font-family: Courier New,Courier,monospace">elm_list_selected_items_get()</span>. If the multiselect mode is false, you can retrieve the only selected item with <span style="font-family: Courier New,Courier,monospace">elm_list_selected_item_get()</span>. For example, this is how to unselect all previously selected items.</p>
+
+<pre class="prettyprint">
+Evas_Object *list; Eina_List *l;
+Eina_List *selected_items;
+// List of Elm_Object_Item
+Elm_Object_Item *it;
+
+selected_items = elm_list_selected_items_get(list);
+EINA_LIST_FOREACH(selected_items, l, it)
+ elm_list_item_selected_set(it, EINA_FALSE);
+</pre>
+
+<h3>List Item Operations</h3>
+
+ <p>To find out if an item is selected, call <span style="font-family: Courier New,Courier,monospace">elm_list_item_selected_get</span>. This function returns <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> if the item is selected, otherwise <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span>.</p>
+
+ <p>Elementary list provides two functions for sliding a list to a specific item. <span style="font-family: Courier New,Courier,monospace">elm_list_item_show</span> shows the item passed as an argument, whereas <span style="font-family: Courier New,Courier,monospace">elm_list_item_bring_in</span> shows the item, but only after animating the slide.</p>
+
+ <p>You can go to the item immediately preceding a specific item with the function <span style="font-family: Courier New,Courier,monospace">elm_list_item_prev</span>, or to the one immediately following a specific item with the function <span style="font-family: Courier New,Courier,monospace">elm_list_item_next</span>.</p>
+
+ <p>The following example shows selecting the item immediately following the currently selected one, unselecting it, selecting the next one and bringing it to the screen. </p>
+
+<pre class="prettyprint">
+Evas_Object *list;
+Elm_Object_Item *current, *next;
+current = elm_list_selected_item_get(list);
+elm_list_item_selected_set(current, EINA_FALSE);
+next = elm_list_item_next(current);
+elm_list_item_selected_set(next, EINA_TRUE);
+elm_list_item_bring_in(next);
+</pre>
+
+<h3>Using List Callbacks</h3>
+
+ <p>The list emits the following signals: </p>
+ <ul>
+ <li><span style="font-family: Courier New,Courier,monospace">activated</span>: The user double-clicks or presses (enter | return | spacebar) on an item. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter of the callback function contains a pointer to the item activated.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">clicked,double</span>: The user double-clicks an item. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter of the callback function contains a pointer to the item activated.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">selected</span>: The user selects an item. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter of the callback function contains a pointer to the item activated.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">unselected</span>: The user unselects an item. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter of the callback function contains a pointer to the item activated.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">longpressed</span>: The user long-presses an item. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter of the callback function contains a pointer to the item activated.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">edge,top</span>: The list is scrolled to the top edge.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">edge,bottom</span>: The list is scrolled to the bottom edge.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">edge,left</span>: The list is scrolled to the left edge.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">edge,right</span>: The list is scrolled to the right edge.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">highlighted</span>: The user highlights an item on the list. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter of the callback function contains a pointer to the item activated.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">unhighlighted</span>: The user unhighlights an item in the list. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter of the callback function contains a pointer to the item activated.</li>
+ </ul>
+
+<p>You can register to the <span style="font-family: Courier New,Courier,monospace">clicked,double</span> signal with the following code. Note that the currently double-clicked item can be retrieved using the <span style="font-family: Courier New,Courier,monospace">event_info</span> pointer. This code registers to the <span style="font-family: Courier New,Courier,monospace">double,clicked</span> signal and unselects the item that has been double-clicked.</p>
+
+<pre class="prettyprint">
+{
+ Evas_Object *list;
+
+ evas_object_smart_callback_add(list, "clicked,double", double_clicked_cb, data);
+}
+
+// Callback function for the "clicked" signal
+// This callback is called when the button is clicked by the user
+void double_clicked_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ elm_Object_Item *it = event_info;
+ elm_list_selected_item_set(it, EINA_FALSE);
+}
+</pre>
+
+<h2 id="map" name="map">Map</h2>
+
+<p class="figure">Figure: Map hierarchy</p>
+<p align="center"> <img alt="Map hierarchy" src="../../images/map_tree.png" /> </p>
+
+<p>The map component displays a geographic map. The default map data are provided by the OpenStreetMap project <a href="http://www.openstreetmap.org/" target="_blank">(http://www.openstreetmap.org/)</a>. Custom providers can also be added.</p>
+
+<p>This UI component supports:</p>
+ <ul>
+ <li>Zooming</li>
+ <li>Scrolling</li>
+ <li>Markers with content to be displayed when the user clicks over them</li>
+ <li>Group of markers</li>
+ <li>Routes</li>
+ </ul>
+
+<p>The map component implements the scroller interface so that all the functions that work with the scroller component also work with maps.</p>
+
+<h3>Adding a Map Component</h3>
+
+<p>Once created with the <span style="font-family: Courier New,Courier,monospace">elm_map_add()</span> function, zoom level x12 can be set.</p>
+
+<pre class="prettyprint">
+Evas_Object *map, *parent;
+
+map = elm_map_add(parent);
+elm_map_zoom_mode_set(map, ELM_MAP_ZOOM_MODE_MANUAL);
+elm_map_zoom_set(map, 12);
+</pre>
+
+<p>Here the zoom mode is set to manual, but it can also be set to the <span style="font-family: Courier New,Courier,monospace">ELM_MAP_ZOOM_MODE_AUTO_FIT</span> mode and the <span style="font-family: Courier New,Courier,monospace">ELM_MAP_ZOOM_MODE_AUTO_FILL</span> mode. In that case however, the <span style="font-family: Courier New,Courier,monospace">elm_map_zoom_set()</span> function cannot be used.</p>
+
+<h3>Playing with the Map</h3>
+
+<p>If you have coordinates of a specific area (2 2 N, 48 8 E), it can be shown on the map.</p>
+<pre class="prettyprint">
+elm_map_region_show(map, 2.2, 48.8);
+</pre>
+
+<p>This shows the desired coordinates. The location can also be shown with a bring-in animation.</p>
+<pre class="prettyprint">
+elm_map_region_bring_in(map, 2.2, 48.8);
+</pre>
+
+<p>The map is rotated 90 degrees around the current position.</p>
+<pre class="prettyprint">
+elm_map_rotate_set(map, 90, 2.2, 48.8);
+</pre>
+
+<h3>Drawing Overlays</h3>
+
+<p>Overlays are markers that can be placed anywhere on the map. They can represent any object you want to put on the map.</p>
+
+<h4>Creating an Overlay Class</h4>
+
+<p>Overlay classes can be created if several objects are of the same type. For example, you can create a forest overlay class to represent the forests visible on the map. To do this, set the minimum zoom level at which this class is visible. The forest class overlay is visible when the zoom level is superior to eight.</p>
+
+<p>Set an icon ("Home" icon) to the forest class. This icon is displayed in place of the forest class on the map.</p>
+<pre class="prettyprint">
+Evas_Object *icon;
+Elm_Map_Overlay *forest_class = elm_map_overlay_class_add(map);
+
+// Set min zoom level at which class is displayed
+elm_map_overlay_displayed_zoom_min_set(forest_class, 8);
+
+// Create a Home icon object and set it to the forest class
+icon = elm_icon_add(map);
+elm_icon_standard_set(icon, "home");
+elm_map_overlay_icon_set(forest_class, icon);
+</pre>
+
+<h4>Adding Overlays to a Class</h4>
+
+<p>After creating a forest class, it is possible to add overlay objects to it. Here an overlay for the Meudon forest is created. The data is linked to the overlay with the <span style="font-family: Courier New,Courier,monospace">elm_map_overlay_data_set()</span> function. Set the name of the forest in the data. The icon can be set to the overlay with the <span style="font-family: Courier New,Courier,monospace">elm_map_overlay_icon_set()</span> function.</p>
+
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">Do not use the same icon object for two different overlays. Create a new icon object each time you need one.</td>
+ </tr>
+ </tbody>
+ </table>
+
+<pre class="prettyprint">
+Elm_Map_Overlay *ovl;
+const char* data_meudon = "Meudon forest";
+const char* data_fausses = "Fausse forest";
+
+// Add an overlay
+ovl = elm_map_overlay_add(map, 2.20718, 48.79759);
+icon = elm_icon_add(map);
+elm_icon_standard_set(icon, "stop");
+elm_map_overlay_icon_set(ovl, icon);
+elm_map_overlay_data_set(ovl, &data_meudon);
+
+// Add the new ovl object to the forest class
+elm_map_overlay_class_append(forest_class, ovl);
+
+// Add another overlay next to the first one
+ovl = elm_map_overlay_add(map, 2.1699, 48.8189);
+icon = elm_icon_add(map);
+elm_icon_standard_set(icon, "stop");
+elm_map_overlay_icon_set(ovl, icon);
+elm_map_overlay_data_set(ovl, &data_fausses);
+elm_map_overlay_class_append(forest_class, ovl);
+</pre>
+
+<p>If you add another overlay to the forest class, the two overlays can be grouped under the forest class icon on certain zoom level conditions. You can define on which zoom level items are grouped.</p>
+<pre class="prettyprint">
+elm_map_overlay_class_zoom_max_set(forest_class, 8);
+</pre>
+
+<p>In this case, overlay members of the forest class are grouped when the map is displayed at less than zoom level eight.</p>
+
+<h4>Creating Bubbles Following Overlays</h4>
+
+<p>The following example shows how to set a content in a bubble following an overlay.</p>
+
+<pre class="prettyprint">
+// Add an overlay bubble object
+Elm_Map_Overlay *bubble = elm_map_overlay_bubble_add(map);
+
+// Set it to follow a specific overlay (the last created one here)
+elm_map_overlay_bubble_follow(bubble, ovl);
+</pre>
+
+<p>Once following an overlay, the bubble appears, moves or hides following the parent overlay's behavior.</p>
+
+<p>Content is added to the bubble with the <span style="font-family: Courier New,Courier,monospace">elm_map_overlay_bubble_content_append()</span> function.</p>
+
+<h3>Adding Other Overlays</h3>
+
+<p>You can draw a circle on the map with coordinates and a radius size.</p>
+<pre class="prettyprint">
+Elm_Map_Overlay *circle = elm_map_overlay_circle_add(map, 2.2, 48.8, 0.02);
+</pre>
+
+<p>You can also add a scale at the 200x0 coordinate (in pixels).</p>
+<pre class="prettyprint">
+Elm_Map_Overlay *scale = elm_map_overlay_scale_add(map, 200, 0);
+</pre>
+
+<p>You can also draw a line, a polygon, or a route. For a full description of these functions, see the <a href="../../../../org.tizen.native.mobile.apireference/group__Map.html">Map API</a>.</p>
+
+<h3>Calculating Routes</h3>
+
+<p>A route between a starting point and an ending point is calculated with the <span style="font-family: Courier New,Courier,monospace">elm_map_route_add()</span> call. The type of transport and the routing calculation method can be provided so as to have the desired result.</p>
+
+<p>The following example shows how to get a route calculation between the first and the second overlay. It is configured to use the bicycle, and to find the fastest route possible.</p>
+
+<pre class="prettyprint">
+Elm_Map_Route *route = elm_map_route_add(map,
+ ELM_MAP_ROUTE_TYPE_BICYCLE,
+ ELM_MAP_ROUTE_METHOD_FASTEST,
+ 2.20718, 48.79759,
+ 2.1699, 48.8189,
+ NULL, NULL);
+
+// Add a callback to when the route has been calculated and loaded
+evas_object_smart_callback_add(map, "route,loaded", _route_loaded_cb, route);
+</pre>
+
+<p>Once the route is calculated, create a route overlay object and change its color. In this example, the <span style="font-family: Courier New,Courier,monospace">route,loaded</span> callback is used.</p>
+<pre class="prettyprint">
+static void
+_route_loaded_cb(void *data, Evas_Object *obj, void *ev)
+{
+ Elm_Map_Route *route = data;
+
+ Elm_Map_Overlay *route_ovl = elm_map_overlay_route_add(obj, route);
+ elm_map_overlay_color_set(route_ovl, 0, 255, 0, 255);
+}
+</pre>
+
+<h3>Using Map Callbacks</h3>
+
+<p>The map component emits the following callbacks:</p>
+<ul>
+ <li><span style="font-family: Courier New,Courier,monospace">clicked</span>: The user has clicked the map without dragging around.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">clicked,double</span>: The user has double-clicked the map.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">press</span>: The user has pressed down on the map.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">longpressed</span>: The user has pressed down on the map for a long time without dragging around.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">scroll</span>: The content is scrolled (moved).</li>
+ <li><span style="font-family: Courier New,Courier,monospace">scroll,drag,start</span>: Dragging the contents around starts.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">scroll,drag,stop</span>: Dragging the contents around stops.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">scroll,anim,start</span>: Scrolling animation starts.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">scroll,anim,stop</span>: Scrolling animation stops.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">zoom,start</span>: Zoom animation starts.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">zoom,stop</span>: Zoom animation stops.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">zoom,change</span>: The zoom is changed when using an auto zoom mode.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">tile,load</span>: A map tile image load begins.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">tile,loaded</span>: A map tile image load ends.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">tile,loaded,fail</span>: A map tile image load fails.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">route,load</span>: Route request begins.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">route,loaded</span>: Route request ends.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">route,loaded,fail</span>: Route request fails.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">name,load</span>: Name request begins.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">name,loaded</span>: Name request ends.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">name,loaded,fail</span>: Name request fails.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">overlay,clicked</span>: An overlay is clicked.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">loaded</span>: The map is loaded.</li>
+</ul>
+
+
+ <h2 id="notify" name="notify">Notify</h2>
+
+ <p class="figure">Figure: Notify hierarchy</p>
+<p align="center"> <img alt="Notify hierarchy" src="../../images/notify_tree.png" /> </p>
+
+ <p>The notify component displays a container in a particular region of the parent object. It can receive some content, and can be automatically hidden after a certain amount of time.</p>
+
+<h3>Adding a Notify Component</h3>
+
+<p>The following example shows how to create a notify object.</p>
+
+<pre class="prettyprint">
+Evas_Object *notify, *parent;
+notify = elm_notify_add(parent);
+</pre>
+
+<h3>Configuring the Notify Component</h3>
+
+<p>Create a label and add it to the notify object.</p>
+
+<pre class="prettyprint">
+Evas_Object *content;
+
+// Create the label and set some text to it
+content = elm_label_add(parent);
+
+elm_object_text_set(content, "A label text");
+evas_object_show(content);
+
+// Add the label object to the notify component
+elm_object_content_set(notify, content);
+</pre>
+
+<p>In the following example the notify object is shown on the bottom left corner of the parent object.</p>
+
+<pre class="prettyprint">
+elm_notify_align_set(notify, 1.0, 1.0);
+evas_object_show(notify);
+</pre>
+
+<p>Set a timeout interval, after which the notify component is hidden. In the following example the timeout interval is five seconds.</p>
+
+<pre class="prettyprint">
+elm_notify_timeout_set(notify, 5.0);
+</pre>
+
+<h3>Using Notify Callbacks</h3>
+
+<p>The notify component emits the following signals:</p>
+ <ul>
+ <li><span style="font-family: Courier New,Courier,monospace">timeout</span>: The timeout count ends and the notify component is hidden</li>
+ <li><span style="font-family: Courier New,Courier,monospace">block,clicked</span>: The user clicks outside of the notify component</li>
+ </ul>
+
+<p>For both these signals <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+
+<p>The following example shows how to register a callback on the <span style="font-family: Courier New,Courier,monospace">timeout</span> signal.</p>
+
+<pre class="prettyprint">
+{
+ evas_object_smart_callback_add(notify, "timeout", timeout_cb, data);
+}
+
+// Callback function for the "timeout" signal
+// The timeout expires and the notify object is hidden
+
+void timeout_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ dlog_print(DLOG_INFO, LOG_TAG, "Notify is hidden\n");
+}
+</pre>
+
+
+ <h2 id="panel" name="panel">Panel</h2>
+
+
+ <p class="figure">Figure: Panel hierarchy</p>
+<p align="center"> <img alt="Panel hierarchy" src="../../images/panel_tree.png" /> </p>
+ <p>The panel component is an animated object that can contain subobjects. It can be expanded or contracted by clicking on the button on its edge.</p>
+
+ <p>Panel inherits from layout component, so the layout API can be used on this UI component.</p>
+
+<h3 id="add_panel">Adding a Panel Component</h3>
+
+<p>The following example shows how to add a panel and set its orientation to the left.</p>
+
+<pre class="prettyprint">
+Evas_Object *panel, *parent;
+
+panel = elm_panel_add(parent);
+elm_panel_orient_set(panel, ELM_PANEL_ORIENT_LEFT);
+</pre>
+
+<h3 id="use_panel">Using the Panel</h3>
+
+<p>The panel can be manually hidden.</p>
+<pre class="prettyprint">
+elm_panel_hidden_set(pan, EINA_TRUE);
+</pre>
+
+<p>The panel can be toggled if you do not know the hidden state of the UI component.</p>
+<pre class="prettyprint">
+elm_panel_toggle(pan);
+</pre>
+
+<p>The panel can be set scrollable.</p>
+<pre class="prettyprint">
+elm_panel_scrollable_set(pan, EINA_TRUE);
+</pre>
+
+<h3 id="create_drawer">Creating a Drawer</h3>
+
+<p>Tizen SDK has implemented a layout theme to add a drawer in the application. This example shows how to add a new Elementary layout object and set the theme of this layout to the drawer.</p>
+
+<pre class="prettyprint">
+Evas_Object *layout;
+
+// Create a new layout object
+layout = elm_layout_add(parent);
+
+// Set the "drawer" group theme and "panel" style to it
+elm_layout_theme_set(layout,"layout", "drawer", "panel");
+
+// Show the new layout
+evas_object_show(layout);
+</pre>
+
+<p>Once the panel object is created, it can be swallowed in the new layout.</p>
+
+<pre class="prettyprint">
+elm_object_part_content_set(layout, "elm.swallow.left", pan);
+</pre>
+
+<p>You can set content to the <span style="font-family: Courier New,Courier,monospace">elm.swallow.bg</span> and <span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span> parts of the layout.</p>
+<pre class="prettyprint">
+// Panel Background (Dimmed Area)
+Evas_Object *bg = create_bg(layout);
+elm_object_part_content_set(layout, "elm.swallow.bg", bg);
+
+// Add content to the drawer
+Evas_Object *content;
+elm_object_part_content_set(layout, "elm.swallow.content", content);
+</pre>
+
+<h3 id="panel_cb">Using Panel Callbacks</h3>
+
+<p>You can register a callback on the <span style="font-family: Courier New,Courier,monospace">scroll</span> signal, when the user scrolls the panel. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter is of the type <span style="font-family: Courier New,Courier,monospace">Elm_Panel_Scroll_Info</span>.</p>
+
+<pre class="prettyprint">
+{
+ evas_object_smart_callback_add(pan, "scroll", scroll_cb, data);
+}
+// Callback function for the "scroll" signal
+// This callback is called when the user scrolls the panel
+void scroll_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ Elm_Panel_Scroll_Info *scrollinfo = event_info;
+ dlog_print(DLOG_INFO, LOG_TAG, "The panel was scrolled.\n");
+}
+</pre>
+
+
+ <h2 id="photo" name="photo">Photo</h2>
+
+ <p class="figure">Figure: Photo hierarchy</p>
+<p align="center"> <img alt="Photo hierarchy" src="../../images/photo_tree.png" /> </p>
+
+ <p>The photo component is used to display a photo, such as a contact image. If no photo is set on it, it displays a person icon to show that it is a photo placeholder.</p>
+
+<h3 id="add_photo">Adding a Photo Component</h3>
+
+ <p>The following example shows how to create a photo object.</p>
+
+ <pre class="prettyprint">
+Evas_Object *photo, *parephotoslider = elm_photo_add(parent);
+photo = elm_photo_add(parent);
+</pre>
+
+<h3 id="use_photo">Using a Photo Component</h3>
+
+ <p>A file can be set to the photo component. Here, <span style="font-family: Courier New,Courier,monospace">PHOTO_FILENAME</span> is a string corresponding to the photo file name on the system.</p>
+<pre class="prettyprint">
+elm_photo_file_set(photo, PHOTO_FILENAME);</pre>
+
+<p>The photo can be set as editable, and it can be copied, cut, or dragged in another region of the screen.</p>
+<pre class="prettyprint">
+elm_photo_editable_set(photo, EINA_TRUE);</pre>
+
+<p>The photo can also be completely visible on the screen.</p>
+
+<pre class="prettyprint">
+elm_photo_fill_inside_set(photo, EINA_TRUE);</pre>
+
+<h3 id="use_photo_cb">Using Photo Callbacks</h3>
+
+ <p>The following callbacks are registered on the photo component.</p>
+ <ul>
+ <li><span style="font-family: Courier New,Courier,monospace">clicked</span>: The user has clicked the photo.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">drag,start</span>: The user starts dragging the inner image out of the photo's frame.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">drag,end</span>: The user drops the dragged image.</li>
+ </ul>
+
+<p><span style="font-family: Courier New,Courier,monospace">event_info</span> is always <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+
+
+ <h2 id="photocam" name="photocam">Photocam</h2>
+
+ <p class="figure">Figure: Photocam hierarchy</p>
+<p align="center"> <img alt="Photocam hierarchy" src="../../images/photocam_tree.png" /> </p>
+
+ <p>The photocam component displays high resolution photos taken from digital cameras. It provides a way to zoom in the photo, load it fast, and fit it nicely on the screen. It is optimized for <span style="font-family: Courier New,Courier,monospace">.jpeg</span> images format and has a low memory footprint.</p>
+
+ <p>This UI component implements the scroller interface, so all the functions concerning the scroller can be used with the photocam component.</p>
+
+<h3 id="add_photocam">Adding a Photocam Component</h3>
+
+<p>The following example shows how to create a photocam component and set an image file on it.</p>
+
+<pre class="prettyprint">
+Evas_Object *photocam;
+photocam = elm_photocam_add(win);
+elm_photocam_file_set(photocam, "/tmp/photo.jpeg");
+</pre>
+
+<h3 id="use_zoom">Using Photocam Zoom</h3>
+
+<p>You can choose between two automatic zoom modes and a manual zoom mode. In the following example the zoom mode is set to manual and a double zoom is requested.</p>
+<pre class="prettyprint">
+elm_photocam_zoom_mode_set(photocam, ELM_PHOTOCAM_ZOOM_MODE_MANUAL);
+elm_photocam_zoom_set(photocam, 2.0);
+</pre>
+
+<p>The zoom mode can be set to <span style="font-family: Courier New,Courier,monospace">ELM_PHOTOCAM_ZOOM_MODE_AUTO_FIT</span>. In this case, the photo fits exactly inside the scroll frame with no pixels outside this region. The zoom mode can also be set to <span style="font-family: Courier New,Courier,monospace">ELM_PHOTOCAM_ZOOM_MODE_AUTO_FILL</span> to fill all the pixels of the photocam component.</p>
+
+<p>Multi-touch zooming is activated by enabling gestures.</p>
+<pre class="prettyprint">
+elm_photocam_gesture_enabled_set(photocam, EINA_TRUE);
+</pre>
+
+<p>You can zoom in a specific region. The following example shows how to zoom in the region starting at the coordinates (200x200), with a width of 400px and a height of 300px.</p>
+
+<pre class="prettyprint">
+elm_photocam_image_region_bring_in(photocam, 200, 200, 400, 300);
+</pre>
+
+<h3 id="photocam_cb">Using Photocam Callbacks</h3>
+
+<p>The photocam component emits the following signals:</p>
+<ul>
+ <li><span style="font-family: Courier New,Courier,monospace">clicked</span>: The user has clicked the photo without dragging around.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">press</span>: The user has pressed down on the photo.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">longpressed</span>: The user has pressed down on the photo for a long time without dragging around.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">clicked,double</span>: The user has double-clicked the photo.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">load</span>: The photo load begins.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">loaded</span>: The image file load is complete for the first view (a low resolution blurry version).</li>
+ <li><span style="font-family: Courier New,Courier,monospace">load,detail</span>: A photo detailed data load begins.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">loaded,detail</span>: The image file load is complete for the detailed image data (full resolution is needed).</li>
+ <li><span style="font-family: Courier New,Courier,monospace">zoom,start</span>: Zoom animation starts.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">zoom,stop</span>: Zoom animation stops.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">zoom,change</span>: The zoom is changed when using an auto zoom mode.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">scroll</span>: The content is scrolled.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">scroll,anim,start</span>: Scrolling animation starts.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">scroll,anim,stop</span>: Scrolling animation stops.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">scroll,drag,start</span>: Dragging the content around starts.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">scroll,drag,stop</span>: Dragging the content around stops.</li>
+ </ul>
+
+<p>For all these signals, <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+
+<p>The following example shows how to register a callback on the <span style="font-family: Courier New,Courier,monospace">loaded</span> signal.</p>
+
+<pre class="prettyprint">
+void message_port_cb(int local_port_id, const char *remote_app_id, bundle *message)
+{
+ evas_object_smart_callback_add(photocam, "loaded", loaded_cb, data);
+}
+
+// Callback function for the "loaded" signal
+// The photocam has loaded the photo file in a low resolution
+
+void loaded_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ dlog_print(DLOG_INFO, LOG_TAG, "The photo has been loaded\n");
+}
+</pre>
+
+ <h2 id="plug" name="plug">Plug</h2>
+
+ <p class="figure">Figure: Plug hierarchy</p>
+<p align="center"> <img alt="Plug hierarchy" src="../../images/plug_tree.png" /> </p>
+
+<p>The plug component shows an <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> created by an other process. It can be used anywhere the same way as any other elementary UI component.</p>
+
+<h3 id="add_plug">Adding a Plug Component</h3>
+
+<p>The following example shows how to create a plug.</p>
+
+<pre class="prettyprint">
+Evas_Object *plug, *parent;
+plug = elm_plug_add(parent);
+</pre>
+
+<h3 id="use_plug">Using the Plug</h3>
+
+<p>The socket image provides the service where to connect the plug object with the <span style="font-family: Courier New,Courier,monospace">elm_plug_connect()</span> function. In this process, use the service name and number set by the socket you want to connect to.</p>
+
+<p>As an example, connect to a service named <span style="font-family: Courier New,Courier,monospace">plug_test</span> on the number 0.</p>
+
+<pre class="prettyprint">
+elm_plug_connect(plug, "plug_test", 0, EINA_FALSE);
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> corresponding to the distant image is retrieved with the <span style="font-family: Courier New,Courier,monospace">elm_plug_image_object_get()</span> function.</p>
+
+<pre class="prettyprint">
+Evas_Object *plug_img = elm_plug_image_object_get(plug);
+</pre>
+
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">The socket to connect to must be started with the <span style="font-family: Courier New,Courier,monospace">elm_win_socket_listen()</span> function in the other process on the remote window object (it is called <span style="font-family: Courier New,Courier,monospace">remote_win</span> here).</td>
+ </tr>
+ </tbody>
+ </table>
+
+<pre class="prettyprint">
+// Create a remote window in the other process
+Elm_Win *remote_win = elm_win_add(NULL, "Window Socket",
+ ELM_WIN_SOCKET_IMAGE);
+// Create a socket named "plug_test" and listen to it
+elm_win_socket_listen(remote_win, "plug_test", 0, EINA_FALSE);
+</pre>
+
+ <h2 id="popup" name="popup">Popup</h2>
+
+<p class="figure">Figure: Popup component</p>
+<p align="center"><img alt="Popup component" src="../../images/popup.png" /></p>
+
+<p class="figure">Figure: Popup hierarchy</p>
+<p align="center"><img alt="Popup hierarchy" src="../../images/popup_tree.png" /></p>
+
+
+<p> The popup component shows a popup area that can contain:</p>
+<ul>
+<li>a title area (optional)</li>
+<li>a content area</li>
+<li>an action area (optional)</li>
+</ul>
+
+<p>The optional title area can contain an icon and text, the action area can contain up to three buttons.</p>
+
+<h3>Adding a Popup Component</h3>
+
+<p>The following example shows how to create a popup component.</p>
+<pre class="prettyprint">
+Evas_Object *popup, *parent;
+
+// Create a popup
+popup = elm_popup_add(parent);
+</pre>
+
+<h3>Using Popup Styles</h3>
+
+<p>The following item styles are available for the popup:</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">popup</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">toast</span></li>
+</ul>
+
+<p>The following example sets the style of the popup to <span style="font-family: Courier New,Courier,monospace">toast</span>.</p>
+
+<pre class="prettyprint">elm_object_style_set(popup, "toast");</pre>
+
+<h3>Setting the Popup Areas</h3>
+
+<p>Configure the title area. Set the icon object using the part name <span style="font-family: Courier New,Courier,monospace">title,icon</span>. Set the title text to <span style="font-family: Courier New,Courier,monospace">Test popup</span> using the partname <span style="font-family: Courier New,Courier,monospace">title,text</span>.</p>
+
+<pre class="prettyprint">
+Evas_Object *icon;
+
+// Add an icon to the title area
+elm_object_part_content_set(popup, "title,icon", icon);
+
+// Set the title text
+elm_object_part_text_set(popup, "title,text", "Test popup");
+</pre>
+
+<p>Set the content of the popup. The content can be simple text.</p>
+
+<pre class="prettyprint">
+elm_object_part_text_set(popup, "default", "Test popup");
+</pre>
+
+<p>The content can also be an Evas object.</p>
+
+<pre class="prettyprint">
+Evas_Object *content;
+
+elm_object_content_set(popup, content);
+</pre>
+
+<p>Set the buttons of the action area by creating an <strong>OK</strong> button, a <strong>Cancel</strong> button, and a <strong>Help</strong> button.</p>
+
+<pre class="prettyprint">
+Evas_Object *button1, *button2, *button3;
+
+// Create the 3 buttons
+
+button1 = elm_button_add(popup);
+elm_object_text_set(button1, "OK");
+
+button2 = elm_button_add(popup);
+elm_object_text_set(button2, "Cancel");
+
+button3 = elm_button_add(popup);
+elm_object_text_set(button3, "Help");
+
+// Set the buttons to the action area
+elm_object_part_content_set(popup, "button1", button1);
+elm_object_part_content_set(popup, "button2", button2);
+elm_object_part_content_set(popup, "button3", button3);
+</pre>
+
+<h3>Using Popup Callbacks</h3>
+<p>The popup emits the following signals:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">timeout</span>: The popup is closed as a result of timeout.</li>
+<li><span style="font-family: Courier New,Courier,monospace">block,clicked</span>: The user clicks on the Blocked Event area.</li>
+</ul>
+
+<p><span style="font-family: Courier New,Courier,monospace">elm_popup_timeout_set()</span> is used to hide the popup after a certain time. In this example, the timeout is set to five seconds.</p>
+
+<pre class="prettyprint">
+elm_popup_timeout_set(popup, 5.0);
+</pre>
+
+<p>When the timeout expires, the <span style="font-family: Courier New,Courier,monospace">timeout</span> signal is sent to the user.</p>
+
+<pre class="prettyprint">
+{
+ evas_object_smart_callback_add(popup, "timeout", _timeout_cb, data);
+}
+
+static void
+_timeout_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ dlog_print(DLOG_INFO, LOG_TAG, "Timeout \n");
+}
+</pre>
+
+<p>The visible region of the popup is surrounded by a translucent region called <strong>Blocked Event</strong> area. By clicking on this area, the signal <span style="font-family: Courier New,Courier,monospace">block,clicked</span> is sent to the application.</p>
+
+
+ <h2 id="progressbar" name="progressbar">Progressbar</h2>
+
+ <p class="figure">Figure: Progressbar component</p>
+ <p align="center"><img alt="Progressbar component" src="../../images/progressbar.png" /></p>
+
+ <p class="figure">Figure: Progressbar hierarchy</p>
+ <p align="center"><img alt="Progressbar hierarchy" src="../../images/progressbar_tree.png" /></p>
+
+
+ <h3>Adding a Progressbar Component</h3>
+
+<p>This UI component is used to display the progress status of a given job. It inherits from the layout component, so all function concerning the layout component is used on the progressbar component.</p>
+<p>The following example shows how to create a progressbar component.</p>
+
+<pre class="prettyprint">
+Evas_Object *pb = elm_progressbar_add(win);
+</pre>
+
+<h3>Using the Progressbar Styles</h3>
+
+<p>The progressbar has several styles:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">default</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">pending_list</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">process_large</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">process_medium</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">process_small</span></li>
+</ul>
+
+<p>Set the style of the progressbar to <span style="font-family: Courier New,Courier,monospace">pending_list</span>.</p>
+
+<pre class="prettyprint">elm_object_style_set(pb, "pending_list");</pre>
+
+<h3>Using the Progressbar</h3>
+
+<p>By default, the progressbar does not show a label or an icon, and the unit label is set to <span style="font-family: Courier New,Courier,monospace">%.0f %%</span>.</p>
+
+<p>The following example shows how to set a label. In this example it is named <span style="font-family: Courier New,Courier,monospace">Test label</span>.</p>
+
+<pre class="prettyprint">
+elm_object_text_set(pb, "Test label");
+</pre>
+
+<p>An icon is set with <span style="font-family: Courier New,Courier,monospace">elm_object_part_content_set()</span> using the partname <span style="font-family: Courier New,Courier,monospace">icon</span>.</p>
+<pre class="prettyprint">
+elm_object_part_content_set(pb, "icon", icon_object);
+</pre>
+
+<p>The unit label format string can be modified using a <span style="font-family: Courier New,Courier,monospace">printf</span> style format. Set it to be a float number with two decimals.</p>
+<pre class="prettyprint">
+elm_progressbar_unit_format_set(pb, "%1.2f%%");
+</pre>
+
+<h3>Configuring the Progressbar</h3>
+
+<p>The progressbar pulse mode is activated to make the progressbar loop infinitely between the start and end position.</p>
+<pre class="prettyprint">
+elm_progressbar_pulse_set(pb, EINA_TRUE);
+elm_progressbar_pulse(pb, EINA_TRUE);
+</pre>
+
+<p>The progressbar can be inverted. In that mode, the values are inverted so that the high values are on the left and the low values on the right.</p>
+<pre class="prettyprint">
+elm_progressbar_inverted_set(pb, EINA_TRUE);
+</pre>
+
+<p>The progressbar emits the <span style="font-family: Courier New,Courier,monospace">changed</span> signal when the progress value changes. The value is changed with the <span style="font-family: Courier New,Courier,monospace">elm_progressbar_value_set()</span> function. Here the <span style="font-family: Courier New,Courier,monospace">pb</span> progress value is set to 20%.</p>
+<pre class="prettyprint">
+elm_progressbar_value_set(pb, 0.2);
+</pre>
+
+<p>The current value can be read.</p>
+<pre class="prettyprint">
+double value = elm_progressbar_value_get(pb);
+</pre>
+
+<p>You can set the orientation of the progressbar to vertical instead of the default horizontal orientation.</p>
+<pre class="prettyprint">
+elm_progressbar_horizontal_set(pb, EINA_FALSE);
+</pre>
+
+<h3>Using the Progressbar Callbacks</h3>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">changed</span> signal is the only signal specifically emitted by the progressbar component.</p>
+
+<p>The following example shows how to register a callback on this signal.</p>
+
+<pre class="prettyprint">
+{
+ evas_object_smart_callback_add(pb, "changed", changed_cb, data);
+}
+
+// Callback function for the "changed" signal
+// This callback is called when the progressbar value changes
+void changed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ dlog_print(DLOG_INFO, LOG_TAG, "The value has changed\n");
+}
+</pre>
+
+
+ <h2 id="radio" name="radio">Radio</h2>
+
+<p class="figure">Figure: Radio component</p>
+<p align="center"><img alt="Radio component" src="../../images/radio.png" /></p>
+
+<p class="figure">Figure: Radio hierarchy</p>
+<p align="center"><img alt="Radio hierarchy" src="../../images/radio_tree.png" /></p>
+
+<p> This UI component displays one or more options, but the user can only select one of them. It is composed of an indicator (selected or unselected), an optional icon and an optional label. Even though it is usually grouped with two or more other radio objects, it can also be used alone.</p>
+<p>The radio component inherits from the layout component. All the layout functions can be used with radio objects.</p>
+
+<h3>Adding a Radio Component</h3>
+
+<p>Create a radio component and set a label to it.</p>
+<pre class="prettyprint">
+Evas_Object *radio, *parent;
+
+// Create a radio
+radio = elm_radio_add(parent);
+
+// Set a label to it
+elm_object_text_set(radio, "Radio component");
+</pre>
+
+<p>Set an icon to the radio object.</p>
+<pre class="prettyprint">
+// Create a Home icon
+Evas_Object *icon;
+
+icon = elm_icon_add(parent);
+elm_icon_standard_set(icon, "home");
+
+// Set it to the radio component
+elm_object_part_content_set(radio, "icon", icon);
+</pre>
+
+<h3>Changing the Radio Value</h3>
+
+<p>The user can select one of a set of values with the radio component. Each radio object from a group of radio objects represents an integer value. Here the value 1 is set to the new radio object.</p>
+<pre class="prettyprint">
+elm_radio_state_value_set(radio, 1);
+</pre>
+
+<h3>Managing the Radio Groups</h3>
+
+<p>The following example shows how to create a group of radio objects with at least two radio components.</p>
+
+<pre class="prettyprint">
+// Create another radio object
+Evas_Object *radio2 = elm_radio_add(parent);
+elm_radio_state_value_set(radio2, 2);
+
+// Create a group composed of radio and radio2
+Evas_Object *group = radio;
+elm_radio_group_add(radio2, group);
+</pre>
+
+<p>Now that a group composed of two radio objects has been created, you can choose which one is selected. In this example radio2 is selected.</p>
+
+<pre class="prettyprint">
+elm_radio_value_set(group, 2);
+</pre>
+
+<p>You can use <span style="font-family: Courier New,Courier,monospace">elm_radio_value_get()</span> to see the currently selected radio of the group.</p>
+
+<h3>Using the Radio Callbacks</h3>
+
+<p>When the state of a radio is modified in a group of radio objects, the <span style="font-family: Courier New,Courier,monospace">changed</span> signal is emitted.</p>
+<p>The following example shows how to register a callback on this signal.</p>
+
+<pre class="prettyprint">
+{
+ evas_object_smart_callback_add(radio, "changed", changed_cb, data);
+}
+
+// Callback function for the "changed" signal
+// This callback is called when the radio value changes
+void changed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ dlog_print(DLOG_INFO, LOG_TAG, "The value has changed\n");
+}
+</pre>
+
+
+ <h2 id="segmentcontrol" name="segmentcontrol">Segmentcontrol</h2>
+
+<p class="figure">Figure: Segmentcontrol with text</p>
+<p align="center"><img alt="Segmentcontrol with text" src="../../images/segment_text.png" /></p>
+
+<p class="figure">Figure: Segmentcontrol with icons</p>
+<p align="center"><img alt="Segmentcontrol with icons" src="../../images/segment.png" /></p>
+
+<p class="figure">Figure: Segmentcontrol hierarchy</p>
+<p align="center"><img alt="Segmentcontrol hierarchy" src="../../images/segment_control_tree.png" /></p>
+
+<p>This UI component consists of several segment items. A segment item is similar to a discrete two state button. Any time, only one segment item can be selected. A segment item is composed of a label (text) and an icon.</p>
+<p>This UI component inherits from the layout component, so all the layout components API can be used on segmentcontrol objects.</p>
+
+<h3>Adding a Segmentcontrol Component</h3>
+
+<p>The following example shows how to add a segmentcontrol component.</p>
+
+<pre class="prettyprint">
+Evas_Object *segcontrol, *parent;
+
+segcontrol = elm_segment_control_add(parent);
+</pre>
+
+<h3>Adding Items</h3>
+
+<p>You can add items to the UI component. In the following example four items containing only text labels (no icons) are added.</p>
+<pre class="prettyprint">
+Elm_Object_Item *it;
+
+elm_segment_control_item_add(segcontrol, NULL, "item1");
+elm_segment_control_item_add(segcontrol, NULL, "item2");
+elm_segment_control_item_add(segcontrol, NULL, "item3");
+it = elm_segment_control_item_add(segcontrol, NULL, "item4");
+</pre>
+
+<p>You can also:</p>
+<ul>
+<li>Insert an item at a specific position starting at 0.
+<pre class="prettyprint">
+elm_segment_control_item_insert_at(segcontrol, NULL, "item7", 2);
+</pre></li>
+
+<li>Delete an item.
+<pre class="prettyprint">
+elm_segment_control_item_del_at(segcontrol, 2);
+</pre></li>
+
+<li>Set the selected state of an item manually.
+<pre class="prettyprint">
+elm_segment_control_item_selected_set(it, EINA_TRUE);
+</pre></li>
+<li>Disable the whole segment control.
+<pre class="prettyprint">elm_object_disabled_set(segcontrol, EINA_TRUE);</pre></li>
+</ul>
+
+<h3>Using the Segmentcontrol Callbacks</h3>
+
+<p>This is how to register a callback on the <span style="font-family: Courier New,Courier,monospace">changed</span>signal. It is called when the user clicks on a segment item which is not previously selected. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter is the segment item pointer.</p>
+<pre class="prettyprint">
+{
+ evas_object_smart_callback_add(segcontrol, "changed", changed_cb, data);
+}
+
+// Callback function for the "changed" signal
+// This callback is called when the segcontrol selected item changes
+void changed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ Elm_Segment_Item *it = event_info;
+
+ dlog_print(DLOG_INFO, LOG_TAG, "The selected segment item has changed\n");
+}
+</pre>
+
+
+ <h2 id="slider" name="slider">Slider</h2>
+
+<p class="figure">Figure: Slider component</p>
+<p align="center"><img alt="Slider component" src="../../images/slider.png" /></p>
+
+<p class="figure">Figure: Slider hierarchy</p>
+<p align="center"><img alt="Slider hierarchy" src="../../images/slider_tree.png" /></p>
+
+<p> The slider component is a draggable bar that is used to select a value within a certain range.</p>
+
+<h3>Adding a Slider Component</h3>
+
+<p>The following example shows how to create a slider object.</p>
+<pre class="prettyprint">
+Evas_Object *slider, *parent;
+
+slider = elm_slider_add(parent);
+</pre>
+
+<h3>Using the Slider Styles</h3>
+
+<p>A slider has the following styles:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">default</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">center_point</span></li>
+</ul>
+
+<p>The following example sets the style to <span style="font-family: Courier New,Courier,monospace">center_point</span>.</p>
+<pre class="prettyprint">
+elm_object_style_set(slider, "center_point");
+</pre>
+
+<p>With this style, the slider <span style="font-family: Courier New,Courier,monospace">0</span> point is in the middle of the UI component.</p>
+
+<h3>Configuring the Slider</h3>
+
+<p>The orientation is set with the <span style="font-family: Courier New,Courier,monospace">elm_slider_horizontal_set()</span> function, and it is inverted the same way as the progressbar component. In the following example it is set to vertical and inverted.</p>
+<pre class="prettyprint">
+elm_slider_horizontal_set(slider, EINA_FALSE);
+elm_slider_inverted_set(slider, EINA_TRUE);
+</pre>
+
+<p>The slider can contain icons (<span style="font-family: Courier New,Courier,monospace">icon</span> and <span style="font-family: Courier New,Courier,monospace">end</span> partnames), a label, a unit label, and an indicator label.</p>
+<pre class="prettyprint">
+Evas_Object *icon1, *icon2;
+
+// Set the icons
+elm_object_part_content_set(slider, "icon", icon1);
+elm_object_part_content_set(slider, "end", icon2);
+
+// Set the label
+elm_object_part_text_set(slider, "default", "slider label");
+
+// Set the unit format
+elm_slider_unit_format_set(slider, "%1.2f meters");
+</pre>
+
+<p>Before using the slider, its minimum and maximum values are set with <span style="font-family: Courier New,Courier,monospace">elm_slider_min_max_set()</span>. The current value is set with (<span style="font-family: Courier New,Courier,monospace">elm_slider_value_set()</span>). The following example sets the minimum value to 0, the maximum value to 100, and the current value to 50.</p>
+<pre class="prettyprint">
+elm_slider_min_max_set(slider, 0.0, 100.0);
+elm_slider_value_set(slider, 50.0);
+</pre>
+
+<p>The span of the slider represents its length horizontally or vertically. It is set with <span style="font-family: Courier New,Courier,monospace">elm_slider_span_size_set()</span> and is scaled by the object or applications scaling factor.</p>
+<p>You can retrieve the current value of the slider anytime.</p>
+<pre class="prettyprint">
+double value = elm_slider_value_get(slider);
+</pre>
+
+<p>By default, the slider indicator becomes bigger when the user drags it. This can be disabled if you want the slider indicator to keep its default size. The following example sets the state of the indicator enlargement and then inverts the behavior.</p>
+<pre class="prettyprint">
+// Get the current state of the indicator
+Eina_Bool enlarge = elm_slider_indicator_show_get(slider);
+
+// Invert the behavior
+elm_slider_indicator_show_set(slider, !enlarge);
+</pre>
+
+<h3>Using the Slider Callbacks</h3>
+
+<p>This UI component emits the following signals:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">changed</span>: The user changes the slider value.</li>
+<li><span style="font-family: Courier New,Courier,monospace">slider,drag,start</span>: Dragging the slider indicator around starts.</li>
+<li><span style="font-family: Courier New,Courier,monospace">slider,drag,stop</span>: Dragging the slider indicator around stops.</li>
+<li><span style="font-family: Courier New,Courier,monospace">delay,changed</span>: A short time after the user changes the value. This is called only when the user stops dragging for a very short period or when releases the finger or mouse, so that it avoids possibly expensive reactions to the value change.</li>
+</ul>
+
+<p>For all these signals, <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+<p>The following example shows how to register a callback on the <span style="font-family: Courier New,Courier,monospace">changed</span> signal.</p>
+<pre class="prettyprint">
+{
+ evas_object_smart_callback_add(slider, "changed", changed_cb, data);
+}
+
+// Callback function for the "changed" signal
+// This callback is called when the slider value changes
+void changed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ dlog_print(DLOG_INFO, LOG_TAG, "The slider has changed\n");
+}
+</pre>
+
+ <h2 id="spinner" name="spinner">Spinner</h2>
+
+
+<p class="figure">Figure: Spinner component</p>
+<p align="center"><img alt="Spinner component" src="../../images/spin.png" /></p>
+
+<p class="figure">Figure: Spinner hierarchy</p>
+<p align="center"><img alt="Spinner hierarchy" src="../../images/spinner_tree.png" /></p>
+
+<p> The spinner component increases or decreases a numeric value with the arrow buttons.</p>
+
+<p>This UI component inherits from the layout component, so all functions concerning the layout component are used on the spinner component.</p>
+
+<h3>Adding a Spinner Component</h3>
+<p>The following example shows how to create a spinner object.</p>
+
+<pre class="prettyprint">
+Evas_Object *spin, *parent;
+
+spin = elm_spinner_add(parent);
+</pre>
+
+<h3>Configuring the Spinner</h3>
+
+<p>The label format is set to a different value:</p>
+<pre class="prettyprint">
+elm_spinner_label_format_set(spin, "%1.2f meters");
+</pre>
+
+<p>You can determine the result of clicking the arrow buttons. In this example, a click on an arrow increases or decreases with 2.0 units:</p>
+<pre class="prettyprint">
+elm_spinner_step_set(spin, 2.0);
+</pre>
+<p>The wrapping mode is activated. In this mode, the spinner wraps when it reaches its minimum or maximum value.</p>
+<pre class="prettyprint">
+elm_spinner_wrap_set(spin, EINA_TRUE);
+</pre>
+
+<p>You can set the minimum and maximum values of the spinner.</p>
+<pre class="prettyprint">
+elm_spinner_min_max_set(spin, -25.0, 100.0);
+</pre>
+
+<p>The spinner object can be set vertical, and the change interval when the user presses the arrows long can be modified so that it changes faster.</p>
+<pre class="prettyprint">
+elm_object_style_set(spin, "vertical");
+elm_spinner_interval_set(spin, 0.1);
+</pre>
+
+<p>If the user has to select between text values instead of numerical values, it is possible to add our own text labels. Here spin2 object shows three numbers written in text characters.</p>
+<pre class="prettyprint">Evas_Object *spin2 = elm_spinner_add(parent);
+elm_spinner_min_max_set(spin2, 1, 3);
+elm_spinner_special_value_add(spin2, 1, "One");
+elm_spinner_special_value_add(spin2, 2, "Two");
+elm_spinner_special_value_add(spin2, 3, "Three");
+</pre>
+
+<h3>Using the Spinner Callbacks</h3>
+
+<p>This UI component emits the following signals:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">changed</span>: The spinner value changes.</li>
+<li><span style="font-family: Courier New,Courier,monospace">delay,changed</span>: A short time after the user changes the value. This is called only when the user stops dragging for a very short period or releases the finger or mouse, so that it avoids possibly expensive reactions to the value change.</li>
+</ul>
+
+<p>The following example shows how to register a callback on the <span style="font-family: Courier New,Courier,monospace">delay,changed</span> signal.</p>
+
+<pre class="prettyprint">
+{
+ evas_object_smart_callback_add(spin, "delay,changed", delay_changed_cb, data);
+}
+
+// Callback function for the "delay,changed" signal
+// This callback is called a short time after the spinner value changes
+void delay_changed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ dlog_print(DLOG_INFO, LOG_TAG, "The spinner value has changed\n");
+}
+</pre>
+
+ <h2 id="toolbar_component" name="toolbar_component">Toolbar</h2>
+
+ <p class="figure">Figure: Toolbar component</p>
+ <p align="center"><img alt="toolbar component" src="../../images/toolbar.png" /></p>
+
+ <p class="figure">Figure: Toolbar hierarchy</p>
+ <p align="center"><img alt="Toolbar hierarchy" src="../../images/toolbar_tree.png" /></p>
+
+
+<p> This UI component is a scrollable list of items and shows a menu when an item is selected. Only one item can be selected at a time.</p>
+
+<h3>Adding and Configuring a Toolbar Component</h3>
+
+<p>Use the following function to create a toolbar.</p>
+<pre class="prettyprint">
+Evas_Object *toolbar, *parent;
+
+toolbar = elm_toolbar_add(parent);
+</pre>
+
+<h3>Using the Toolbar Styles</h3>
+<p>The toolbar has the following styles:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">default</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">tabbar</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">tabbar_with_title</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">navigationbar</span></li>
+</ul>
+<p>The following example sets the style to <span style="font-family: Courier New,Courier,monospace">navigationbar</span>.</p>
+<pre class="prettyprint">
+elm_object_style_set(toolbar, "navigationbar");
+</pre>
+
+<h3>Configuring the Toolbar</h3>
+<p>The toolbar displays its items in one of the following options.</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">ELM_TOOLBAR_SHRINK_NONE</span>: The toolbar sets a minimum size to its items so that all of them fit without scrolling.</li>
+<li><span style="font-family: Courier New,Courier,monospace">ELM_TOOLBAR_SHRINK_HIDE</span>: The toolbar does not scroll or show the items that do not fit in.</li>
+<li><span style="font-family: Courier New,Courier,monospace">ELM_TOOLBAR_SHRINK_SCROLL</span>: The toolbar scrolls to show the items that do not fit in.</li>
+<li><span style="font-family: Courier New,Courier,monospace">ELM_TOOLBAR_SHRINK_MENU</span>: The toolbar creates a button to popup hidden items.</li>
+</ul>
+
+<p>Here the toolbar is set to <span style="font-family: Courier New,Courier,monospace">ELM_TOOLBAR_SHRINK_NONE</span>.</p>
+<pre class="prettyprint">
+elm_toolbar_shrink_mode_set(toolbar, ELM_TOOLBAR_SHRINK_NONE);
+</pre>
+<p>By default, the toolbar displays items homogeneously. Items with long labels occupy a lot of space. To avoid that, you can disable the homogeneous mode.</p>
+<pre class="prettyprint">
+elm_toolbar_homogeneous_set(toolbar, EINA_FALSE);
+</pre>
+
+<h3>Adding Items to the Toolbar</h3>
+<p>The following example shows how to add two items and choose the associated icon, label, and function to call when the item is clicked.</p>
+<pre class="prettyprint">
+{
+ Elm_Object_Item *home_it, *help_it;
+
+ home_it = elm_toolbar_item_append(toolbar, "home", "Home",
+ _home_item_pressed_cb, NULL);
+ help_it = elm_toolbar_item_append(toolbar, "help", "Help",
+ _help_item_pressed_cb, NULL);
+}
+
+static void
+_home_item_pressed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ dlog_print(DLOG_INFO, LOG_TAG, "Home item clicked \n");
+}
+
+static void
+_help_item_pressed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ dlog_print(DLOG_INFO, LOG_TAG, "Help item clicked \n");
+}
+</pre>
+
+<p>An item can be disabled. This is how to disable the help item. The disabled item does not receive input and, if the theme supports it, is themed differently (usually greyed out) from its normal state.</p>
+<pre class="prettyprint">
+elm_object_item_disabled_set(help_it, EINA_TRUE);
+</pre>
+
+<h3>Adding Items with States</h3>
+<p>Items have two or more states. Each state has its own icon, label, and function to call when an item is clicked. The following example shows how to create two states to the help item with the same icon but two different labels.</p>
+<pre class="prettyprint">
+elm_toolbar_item_state_add(help_it, "help", "Help state 1",
+ _help_item_pressed_cb, NULL);
+elm_toolbar_item_state_add(help_it, "help", "Help state 2",
+ _help_item_pressed_cb, NULL);
+</pre>
+<p>It is possible to cycle through the states of the help item by using the following code.</p>
+<pre class="prettyprint">
+elm_toolbar_item_state_set(help_it, elm_toolbar_item_state_next(help_it));
+</pre>
+
+<h3>Using the Toolbar Callbacks</h3>
+<p>This UI component emits the following signals:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">clicked</span>: The user clicks on a toolbar item, which is selected. <span style="font-family: Courier New,Courier,monospace">event_info</span> is an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Toolbar_Item</span>.</li>
+<li><span style="font-family: Courier New,Courier,monospace">clicked,double</span>: The user double-clicks on a toolbar item. <span style="font-family: Courier New,Courier,monospace">event_info</span> is an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Toolbar_Item</span>.</li>
+<li><span style="font-family: Courier New,Courier,monospace">longpressed</span>: The toolbar is pressed for a certain amount of time. <span style="font-family: Courier New,Courier,monospace">event_info</span> is an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Toolbar_Item</span>.</li>
+<li><span style="font-family: Courier New,Courier,monospace">language,changed</span>: The program language changes.</li>
+<li><span style="font-family: Courier New,Courier,monospace">item,focused</span>: The item is highlighted. <span style="font-family: Courier New,Courier,monospace">event_info</span> is an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Toolbar_Item</span>.</li>
+<li><span style="font-family: Courier New,Courier,monospace">item,unfocused</span>: The highlight is removed from the item. <span style="font-family: Courier New,Courier,monospace">event_info</span> is an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Toolbar_Item</span>.</li>
+<li><span style="font-family: Courier New,Courier,monospace">scroll</span>: The toolbar scrolls. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
+<li><span style="font-family: Courier New,Courier,monospace">scroll,anim,start</span>: The toolbar scrolling animation starts. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
+<li><span style="font-family: Courier New,Courier,monospace">scroll,anim,stop</span>: The toolbar scrolling animation stops. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
+<li><span style="font-family: Courier New,Courier,monospace">scroll,drag,start</span>: The user starts dragging the toolbar. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
+<li><span style="font-family: Courier New,Courier,monospace">scroll,drag,stop</span>: The user stops dragging the toolbar. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
+</ul>
+<p>The following example shows how to register a callback on the <span style="font-family: Courier New,Courier,monospace">clicked</span> signal.</p>
+<pre class="prettyprint">
+{
+ evas_object_smart_callback_add(toolbar, "clicked", clicked_cb, data);
+}
+
+// Callback function for the "clicked" signal
+// This callback is called when a toolbar item is clicked
+void clicked_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ Elm_Toolbar_Item * item = event_info;
+
+ dlog_print(DLOG_INFO, LOG_TAG, "Item clicked\n");
+}
+</pre>
+
+ <h2 id="tooltip" name="tooltip">Tooltip</h2>
+
+<p>The tooltip component is a smart object that shows a content in a frame when mouse hovers a parent object. The UI component provides tips or information about the parent object.</p>
+
+<h3>Adding a Tooltip</h3>
+<p>The tooltip component cannot be created with the <span style="font-family: Courier New,Courier,monospace">elm_tooltip_add()</span> function. This component is already contained in a parent component when it is created. You can only activate or disable it.</p>
+
+<h3>Activating the Tooltip</h3>
+<p>To activate the tooltip on a parent object, you can set a tooltip text to the parent object.</p>
+<pre class="prettyprint">
+Evas_Object *parent;
+
+elm_object_tooltip_text_set(parent, "The tooltip text";
+</pre>
+<p>You can also set a content to the parent object.</p>
+<pre class="prettyprint">
+{
+ elm_object_tooltip_content_cb_set(parent, tooltip_content_cb, NULL, tooltip_content_del_cb);
+}
+
+Evas_Object*
+tooltip_content_cb(void*data, Evas_Object *obj, Evas_Object *tooltip)
+{
+ // Create the tooltip content
+}
+
+void tooltip_content_del_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ // Destroy the tooltip content
+}
+</pre>
+
+<p>When passing content to the tooltip, the <span style="font-family: Courier New,Courier,monospace">tooltip_content_cb</span> function is called each time the tooltip is showed. The role of this function is to create the content to set in the tooltip. It returns a pointer to an <span style="font-family: Courier New,Courier,monospace">Evas_Object</span>.</p>
+<p>When the tooltip disappears, the <span style="font-family: Courier New,Courier,monospace">tooltip_content_del_cb</span> function is called. This function is in charge of deleting the previously allocated <span style="font-family: Courier New,Courier,monospace">Evas_Object</span>.</p>
+<p>Once set, the tooltip can be manually hidden or shown.</p>
+
+<pre class="prettyprint">
+elm_object_tooltip_hide(parent);
+elm_object_tooltip_show(parent);
+</pre>
+
+<p>The tooltip can be removed from the parent object when it is not needed.</p>
+<pre class="prettyprint">
+elm_object_tooltip_unset(parent);
+</pre>
+
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">When content is set into the tooltip object, unsetting it calls the callback provided as <span style="font-family: Courier New,Courier,monospace">del_cb</span> to notify that the tooltip cannot be used any longer.</td>
+ </tr>
+ </tbody>
+ </table>
+
+<p>A tooltip object is not a UI component, so it does not emit signals. There are no registered callbacks for it.</p>
+
+
+ <h2 id="win" name="win">Win</h2>
+
+ <p class="figure">Figure: Win hierarchy</p>
+ <p align="center"><img alt="Win hierarchy" src="../../images/win_tree.png" /></p>
+
+
+<p>The window component is the root UI component that is often used in an application. It allows the developer create content in it, and it is handled by the window manager.</p>
+<p>The window component is created with the <span style="font-family: Courier New,Courier,monospace">elm_win_add()</span> or <span style="font-family: Courier New,Courier,monospace">elm_win_util_standard_add()</span> function. The content can be added in the window with <span style="font-family: Courier New,Courier,monospace">elm_win_resize_object_add()</span> so that a window resize also resizes the content inside.</p>
+
+<h3>Adding a Window Component</h3>
+
+<p>Create a new window and change the title.</p>
+<pre class="prettyprint">
+Evas_Object *window;
+
+// Create a window
+window = elm_win_add(NULL, "main", ELM_WIN_BASIC);
+
+// Change the window title
+elm_win_title_set(window, "Example Window");
+</pre>
+
+<p>The first element of <span style="font-family: Courier New,Courier,monospace">elm_win_add()</span> is the parent window. For example, for a dialog you want to have the main window as the parent. Here, it is <span style="font-family: Courier New,Courier,monospace">NULL</span>, meaning there is no parent. <span style="font-family: Courier New,Courier,monospace">main</span> is the name of the window used by the window manager for identifying the window uniquely amongst all the windows within this application (and all instances of the application). The type is a basic window (the final parameter).</p>
+
+<p>Create a new window with a title and a background. This API is a shortcut of the previous one. It also creates a standard background to the window with <span style="font-family: Courier New,Courier,monospace">elm_bg_add()</span>. The window created is of the type <span style="font-family: Courier New,Courier,monospace">ELM_WIN_BASIC</span>.</p>
+
+<pre class="prettyprint">
+Evas_Object *window;
+
+// Create a standard window
+window = elm_win_util_standard_add("main", "Example Window");
+</pre>
+
+<h3>Closing a Window</h3>
+<p>When the user closes the window outside of the program control, a <span style="font-family: Courier New,Courier,monospace">delete,request</span> signal is emitted to indicate that this event occurred. The developer can take any action, for example, destroy the window object.</p>
+<p>When the autodel parameter is set, the window is automatically destroyed after the signal is emitted. If autodel is <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span>, the window is not destroyed and the program does so when required. The default is <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span>, where the window is not destroyed automatically.</p>
+<p>The autodel is set using the following call:</p>
+<pre class="prettyprint">
+elm_win_autodel_set(window, EINA_TRUE);
+</pre>
+
+<p>To close the window, use the <span style="font-family: Courier New,Courier,monospace">evas_object_del()</span> function. The window is destroyed and the signal <span style="font-family: Courier New,Courier,monospace">delete,request</span> is sent.</p>
+
+<h3>Using the Window Callbacks</h3>
+<p>The window component emits the following signals:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">focus,in</span>: The window received focus.</li>
+<li><span style="font-family: Courier New,Courier,monospace">focus,out</span>: The window lost focus.</li>
+<li><span style="font-family: Courier New,Courier,monospace">moved</span>: The window that holds the canvas is moved.</li>
+<li><span style="font-family: Courier New,Courier,monospace">withdrawn</span>: The window is managed normally but is removed from the view.</li>
+<li><span style="font-family: Courier New,Courier,monospace">iconified</span>: The window is minimized (for example, into an icon or a taskbar).</li>
+<li><span style="font-family: Courier New,Courier,monospace">normal</span>: The window is in the normal state (not withdrawn or iconified).</li>
+<li><span style="font-family: Courier New,Courier,monospace">stick</span>: The window shows on all desktops.</li>
+<li><span style="font-family: Courier New,Courier,monospace">unstick</span>: The window shows only on one desktop.</li>
+<li><span style="font-family: Courier New,Courier,monospace">fullscreen</span>: The window is fullscreen.</li>
+<li><span style="font-family: Courier New,Courier,monospace">unfullscreen</span>: The window stops being fullscreen.</li>
+<li><span style="font-family: Courier New,Courier,monospace">maximized</span>: The window is maximized.</li>
+<li><span style="font-family: Courier New,Courier,monospace">unmaximized</span>: The window is diminished.</li>
+<li><span style="font-family: Courier New,Courier,monospace">wm,rotation,changed</span>: The rotation of the window is changed by the Windows Manager.</li>
+<li><span style="font-family: Courier New,Courier,monospace">ioerr</span>: A low-level I/O error occurred in the display system.</li>
+</ul>
+<p>With all these signals, <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+<p>The following example registers a callback function called on the <span style="font-family: Courier New,Courier,monospace">fullscreen</span> signal.</p>
+<pre class="prettyprint">
+{
+ evas_object_smart_callback_add(window, "fullscreen", fullscreen_cb, data);
+}
+
+// Callback function for the "fullscreen" signal
+// This callback is called when the window becomes fullscreen
+void fullscreen_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ dlog_print(DLOG_INFO, LOG_TAG, "Window fullscreen\n");
+}
+</pre>
+
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</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>Components</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+ <div id="profile">
+ <p><img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+ </div>
+ <div id="toc_border"><div id="toc">
+ <p class="toc-title">Content</p>
+ <ul class="toc">
+ <li><a href="#background">Background</a></li>
+ <li><a href="#button">Button</a></li>
+ <li><a href="#check">Check</a></li>
+ <li><a href="#ctxpopup">Ctxpopup</a></li>
+ <li><a href="#datetime">Datetime</a></li>
+ <li><a href="#entry">Entry</a></li>
+ <li><a href="#genlist">Genlist</a></li>
+ <li><a href="#glview">GLView</a></li>
+ <li><a href="#icon">Icon</a></li>
+ <li><a href="#image">Image</a></li>
+ <li><a href="#index">Index</a></li>
+ <li><a href="#label">Label</a></li>
+ <li><a href="#list">List</a></li>
+ <li><a href="#map">Map</a></li>
+ <li><a href="#notify">Notify</a></li>
+ <li><a href="#plug">Plug</a></li>
+ <li><a href="#popup">Popup</a></li>
+ <li><a href="#progressbar">Progressbar</a></li>
+ <li><a href="#radio">Radio</a></li>
+ <li><a href="#slider">Slider</a></li>
+ <li><a href="#win">Win</a></li>
+ </ul>
+ <p class="toc-title">Related Info</p>
+ <ul class="toc">
+ <li><a href="../../../../org.tizen.tutorials/html/native/ui/ui_component_tutorials_wn.htm">UI Components Tutorials</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje__Group.html">Edje API for Wearable Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Eina__Group.html">Eina API for Wearable Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Components</h1>
+
+ <table class="note">
+<tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">This feature is supported in wearable applications only.</td>
+ </tr>
+ </tbody>
+ </table>
+
+ <h2 id="background" name="background">Background</h2>
+
+<p class="figure">Figure: Red color background</p>
+<p align="center"><img alt="Red color background" src="../../images/bg_wn.png" /></p>
+
+<p class="figure">Figure: Background hierarchy</p>
+<p align="center"><img alt="Background hierarchy" src="../../images/bg_tree.png" /></p>
+
+<p>The background component can be used to set a solid background decoration to a window or to a container object. It works like an image, but has some background specific properties, for example it can be set to a tiled, centered, scaled, or stretched mode. There are no specific signals relative to background object.</p>
+
+<h3>Adding a Background Component</h3>
+
+<p>A background is created with the <span style="font-family: Courier New,Courier,monospace">elm_bg_add()</span> function.</p>
+
+<pre class="prettyprint">
+Evas_Object *bg, *parent;
+
+// Create a background
+bg = elm_bg_add(parent);
+</pre>
+
+<h3>Changing the Color of the Background</h3>
+
+<p>You can set the color of the background with the <span style="font-family: Courier New,Courier,monospace">elm_bg_color_set()</span> function. The following example sets the background color to red.</p>
+
+<pre class="prettyprint">
+Evas_Object *bg;
+
+// Use red color for background
+elm_bg_color_set(bg, 0xFF, 0x00, 0x00);
+</pre>
+
+<h3>Changing the Image of the Background</h3>
+
+<p>It is also possible to set an image or an Edje group as a background using the <span style="font-family: Courier New,Courier,monospace">elm_bg_file_set()</span> function. The display mode of the image in the background can be chosen with <span style="font-family: Courier New,Courier,monospace">elm_bg_option_set()</span>, where the following modes are available:</p>
+
+<ul>
+ <li><span style="font-family: Courier New,Courier,monospace">ELM_BG_OPTION_CENTER</span>: center the background image.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">ELM_BG_OPTION_SCALE</span>: scale the background image, retaining aspect ratio.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">ELM_BG_OPTION_STRETCH</span>: stretch the background image to fill the UI component's area.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">ELM_BG_OPTION_TILE</span>: tile the background image at its original size.</li>
+</ul>
+
+<pre class="prettyprint">
+Evas_Object *bg;
+
+// Set a file on the disk as a background image
+elm_bg_file_set(bg, "/path/to/the/image", NULL);
+// Set an Edje group as a background image
+elm_bg_file_set(bg, "/path/to/the/edje", "edje_group");
+elm_bg_option_set(bg, ELM_BG_OPTION_STRETCH)
+</pre>
+
+<h3>Using Overlay</h3>
+
+<p>An overlay can be set using the <span style="font-family: Courier New,Courier,monospace">overlay</span> part name.</p>
+
+<pre class="prettyprint">
+elm_object_part_content_set(bg, "overlay", over);
+</pre>
+
+<p>Here, the overlay is an Edje object that is displayed on top of the current background object.</p>
+
+
+ <h2 id="button" name="button">Button</h2>
+
+<p class="figure">Figure: Button component</p>
+<p align="center"><img alt="Button component" src="../../images/button_wn.png" /></p>
+
+<p class="figure">Figure: Button hierarchy</p>
+<p align="center"><img alt="Button hierarchy" src="../../images/button_tree.png" /></p>
+
+<p>The Elementary button component is a simple push button. It is composed of a label icon and an icon object and has an autorepeat feature.</p>
+
+<h3>Adding a Button Component</h3>
+
+<p>Create a button.</p>
+<pre class="prettyprint">
+Evas_Object *button, *parent;
+
+// Create a button
+button = elm_button_add(parent);</pre>
+
+<h3>Adding an Icon Inside a Button</h3>
+
+<p>The icon can be updated with <span style="font-family: Courier New,Courier,monospace">elm_object_part_content_set()</span> function with the <span style="font-family: Courier New,Courier,monospace">icon</span> part name.</p>
+
+<pre class="prettyprint">
+Evas_Object *ic;
+ic = elm_icon_add(button);
+elm_image_file_set(ic, "icon.png", NULL);
+elm_object_part_content_set(button, "icon", ic);</pre>
+
+<h3>Adding Text Inside a Button</h3>
+
+<p>The label can be modified using the <span style="font-family: Courier New,Courier,monospace">elm_object_text_set()</span> function.</p>
+
+<pre class="prettyprint">
+elm_object_text_set(button, "Click me!");
+</pre>
+
+<h3>Using Button Styles</h3>
+
+<p>Various styles can be used on the button. Tizen supports the following styles for wearable core controls:</p>
+<ul>
+ <li><span style="font-family: Courier New,Courier,monospace">default</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">green</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">orange</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">red</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">nextdepth</span></li>
+</ul>
+<p>Tizen supports the following styles for Gear O:</p>
+<ul>
+ <li><span style="font-family: Courier New,Courier,monospace">default</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">bottom</span></li>
+</ul>
+
+<p>To change the style of the button, call the <span style="font-family: Courier New,Courier,monospace">elm_object_style_set()</span> function on the button object.</p>
+
+<pre class="prettyprint">
+// Example for wearable core control
+elm_object_style_set(button, "nextdepth");
+
+// Example for Gear O
+elm_object_style_set(button, "bottom");
+</pre>
+
+<h3>Using the Button Callbacks</h3>
+
+<p>The button emits the following signals:</p>
+
+<ul>
+ <li><span style="font-family: Courier New,Courier,monospace">clicked</span>: The user clicked the button (press/release).</li>
+ <li><span style="font-family: Courier New,Courier,monospace">repeated</span>: The user pressed the button without releasing it.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">pressed</span>: The user pressed the button.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">unpressed</span>: The user released the button after pressing it.</li>
+</ul>
+
+<p>For all these signals the <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter returned in the callback is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+
+<p>This is an example to register and define a callback function called by the clicked signal.</p>
+<pre class="prettyprint">
+{
+ evas_object_smart_callback_add(button, "clicked", clicked_cb, data);
+}
+// Callback function for the "clicked" signal
+// This callback is called when the button is clicked by the user
+void clicked_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ dlog_print(DLOG_INFO, LOG_TAG, "Button clicked\n");
+}
+</pre>
+
+<h3>Using the Autorepeat Feature</h3>
+
+<p>The autorepeat feature is enabled by default. It consists of calling the <span style="font-family: Courier New,Courier,monospace">repeated</span> signal when the user keeps the button pressed. This feature can be disabled with the <span style="font-family: Courier New,Courier,monospace">elm_button_autorepeat_set()</span> function. The autorepeat is configured with the following functions:</p>
+<ul>
+ <li><span style="font-family: Courier New,Courier,monospace">elm_button_autorepeat_initial_timeout_set()</span>: to set the initial timeout before the autorepeat event is generated</li>
+ <li><span style="font-family: Courier New,Courier,monospace">elm_button_autorepeat_gap_timeout_set()</span>: to set the interval between two autorepeat events</li>
+</ul>
+
+<p>Disable the autorepeat feature.</p>
+<pre class="prettyprint">
+elm_button_autorepeat_set(button, EINA_FALSE);
+</pre>
+
+<p>Enable the autorepeat feature.</p>
+<pre class="prettyprint">
+elm_button_autorepeat_set(button, EINA_TRUE);
+</pre>
+
+<p>Set the initial timeout to five seconds.</p>
+<pre class="prettyprint">
+elm_button_autorepeat_initial_timeout_set(button, 5.0);
+</pre>
+
+<p>Set the gap between two signals to 0.5 seconds.</p>
+<pre class="prettyprint">
+elm_button_autorepeat_gap_timeout_set(button, 0.5);
+</pre>
+
+
+ <h2 id="check" name="check">Check</h2>
+
+<p class="figure">Figure: Check component</p>
+<p align="center"><img alt="Check component" src="../../images/check_wn.png" /></p>
+
+<p class="figure">Figure: Check hierarchy</p>
+<p align="center"><img alt="Check hierarchy" src="../../images/check_tree.png" /></p>
+
+<p>The check component is similar to the radio component, except that it does not work as a group. It toggles the value of a boolean between true and false.</p>
+
+<p>This UI component inherits from the layout component. All layout functions can be used on the check component.</p>
+
+<h3 id="Adding" name="Adding">Adding a Check Component</h3>
+
+<p>The following example shows how to create a check component.</p>
+<pre class="prettyprint">
+Evas_Object *check, *parent;
+check = elm_check_add(parent);
+</pre>
+
+<h3 id="Modifying" name="Modifying">Modifying the Check Styles</h3>
+
+<p>The check component style can be set with the <span style="font-family: Courier New,Courier,monospace;">elm_object_style_set()</span> function.</p>
+<p>The following styles are available for wearable core controls:</p>
+<ul>
+ <li><span style="font-family: Courier New,Courier,monospace;">default</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace;">on and off</span></li>
+</ul>
+<p>The following styles are available for Gear O:</p>
+<ul>
+ <li><span style="font-family: Courier New,Courier,monospace;">default</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace;">small</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace;">on and off</span></li>
+</ul>
+
+<p>The following example sets the <span style="font-family: Courier New,Courier,monospace">on and off</span> style on our check object.</p>
+<pre class="prettyprint">
+elm_object_style_set(check, "on and off");
+</pre>
+
+<p>To get the current style, use the <span style="font-family: Courier New,Courier,monospace;">elm_object_style_get()</span> function.</p>
+<pre class="prettyprint">
+char *style = elm_object_style_get(check);
+</pre>
+
+<h3 id="Using_Check" name="Using_Check">Using the Check Component</h3>
+
+<p>After having created a check object, it is possible to set its boolean value to <span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span>.</p>
+<pre class="prettyprint">
+elm_check_state_set(check, EINA_TRUE);
+</pre>
+
+<p>You can also retrieve the current value of the check object.</p>
+<pre class="prettyprint">
+Eina_Bool value = elm_check_state_get(check);
+</pre>
+
+<p>As with a radio object, an icon can be set for the wearable core control.</p>
+<pre class="prettyprint">
+// Create a Home icon
+Evas_Object *icon;
+
+icon = elm_icon_add(parent);
+elm_icon_standard_set(icon, "home");
+
+// Set it to the check object
+elm_object_part_content_set(check, "icon", icon);
+</pre>
+
+<p>The get functions of the elementary object API can be used to retrieve the content set to the check object.</p>
+<pre class="prettyprint">
+// Get the content set in the icon part
+Evas_Object *icon = elm_object_part_content_get(check, "icon");
+</pre>
+
+<h3 id="Using_Check_Callbacks" name="Using_Check_Callbacks">Using the Check Callbacks</h3>
+
+<p>When the value is changed by the user, the changed signal is emitted. The <span style="font-family: Courier New,Courier,monospace;">event_info</span> parameter is <span style="font-family: Courier New,Courier,monospace;">NULL</span>.</p>
+
+<p>The following example shows how to register a callback on this signal.</p>
+
+<pre class="prettyprint">
+{
+ evas_object_smart_callback_add(check, "changed", changed_cb, data);
+}
+
+// Callback function for the "changed" signal
+// This callback is called when the check value changes
+void changed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ dlog_print(DLOG_INFO, LOG_TAG, "The value has changed\n");
+}
+</pre>
+
+ <h2 id="ctxpopup" name="ctxpopup">Ctxpopup</h2>
+
+ <p class="figure">Figure: Context popup component</p>
+<p align="center"><img alt="Context popup component" src="../../images/ctxpopup_wn.png" /></p>
+
+ <p class="figure">Figure: Context popup hierarchy</p>
+<p align="center"><img alt="Context popup hierarchy" src="../../images/ctxpopup_tree.png" /></p>
+
+
+<p>Ctxpopup is a contextual popup that can show a list of items.</p>
+
+<h3>Adding a Ctxpopup Component</h3>
+
+<p>A ctxpopup can be created with the <span style="font-family: Courier New,Courier,monospace">elm_ctxpopup_add()</span> function, and when shown, it automatically chooses an area inside its parent object's view (set using <span style="font-family: Courier New,Courier,monospace">elm_ctxpopup_hover_parent_set()</span>) to optimally fit into it.</p>
+
+<pre class="prettyprint">
+Evas_Object *ctxpopup, *parent;
+
+// Create a ctxpopup
+ctxpopup = elm_ctxpopup_add(parent);
+</pre>
+
+<h3>Modifying the Ctxpopup Style</h3>
+
+<p>The following styles are available for wearable core controls:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">default</span></li>
+</ul>
+<p>The following styles are available for Gear O:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">select_mode</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">select_mode/top</span>, <span style="font-family: Courier New,Courier,monospace">select_mode/bottom</span> (These two styles can be used as a pair.)</li>
+</ul>
+
+
+<p>The following example shows how to set the <span style="font-family: Courier New,Courier,monospace">default</span> style.</p>
+<pre class="prettyprint">
+elm_object_style_set(ctxpopup, "default");
+</pre>
+
+<h3>Configuring the Ctxpopup</h3>
+
+<p>The context popup orientation can be set with <span style="font-family: Courier New,Courier,monospace">elm_ctxpopup_horizontal_set()</span>. Here it is set to horizontal.</p>
+<pre class="prettyprint">
+elm_ctxpopup_horizontal_set(ctxpopup, EINA_TRUE);
+</pre>
+
+<p>Auto hide is enabled by default. You can also disable auto hiding if you want the ctxpopup never to be hidden. </p>
+<pre class="prettyprint">
+elm_ctxpopup_auto_hide_disabled_set(ctxpopup, EINA_TRUE);
+</pre>
+
+<h3>Managing the Ctxpopup Items</h3>
+
+<p>The ctxpopup can contain a small number of items. Each of them can have a label and an icon. The following example shows how to append an item with the <span style="font-family: Courier New,Courier,monospace">Test</span> label and no icon.</p>
+<pre class="prettyprint">
+Elm_Object_Item *it;
+
+it = elm_ctxpopup_item_append(ctxpopup, "test", NULL, _ctxpopup_item_cb,
+ NULL);
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">_ctxpopup_item_cb()</span> callback is called when the item is clicked. The following example shows how to write the definition of this callback.</p>
+<pre class="prettyprint">
+static void
+_ctxpopup_item_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ dlog_print(DLOG_INFO, LOG_TAG, "ctxpopup item selected\n");
+}
+</pre>
+
+<p>After that the item label is set to <span style="font-family: Courier New,Courier,monospace">New label</span>.</p>
+<pre class="prettyprint">elm_object_item_part_text_set(it, "default", "New label");
+</pre>
+
+<p>And its icon is modified to the standard <span style="font-family: Courier New,Courier,monospace">home</span> icon.</p>
+<pre class="prettyprint">
+Evas_Object *home_icon = elm_icon_add(ctxpopup);
+elm_icon_standard_set(home_icon, "home");
+
+elm_object_item_part_content_set(it, "icon", home_icon);
+</pre>
+
+<h3>Using the Ctxpopup Callbacks</h3>
+
+<p>The context popup emits the <span style="font-family: Courier New,Courier,monospace">dismissed</span> signal when it is dismissed. You can register a callback to this signal. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+
+<pre class="prettyprint">
+{
+ evas_object_smart_callback_add(ctxpopup, "dismissed", dismissed_cb, data);
+}
+
+// Callback function for the "dismissed" signal
+// This callback is called when the ctxpopup is dismissed
+void dismissed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ dlog_print(DLOG_INFO, LOG_TAG, "Ctxpopup dismissed\n");
+}
+</pre>
+
+ <h2 id="datetime" name="datetime">Datetime</h2>
+
+<p class="figure">Figure: Datetime selection</p>
+<p align="center"><img alt="Datetime selection" src="../../images/datetime_wn.png" /> </p>
+
+<p class="figure">Figure: Datetime hierarchy</p>
+<p align="center"><img alt="Datetime hierarchy" src="../../images/datetime_tree.png" /> </p>
+
+<p>The datetime component displays and adds date and time values.</p>
+
+<h3>Adding a Datetime Component</h3>
+
+<p>The UI component is created with <span style="font-family: Courier New,Courier,monospace">elm_datetime_add()</span>.</p>
+<p>The following fields can be controlled:</p>
+ <ul>
+ <li><span style="font-family: Courier New,Courier,monospace">ELM_DATETIME_YEAR</span>: the year field</li>
+ <li><span style="font-family: Courier New,Courier,monospace">ELM_DATETIME_MONTH</span>: the month field</li>
+ <li><span style="font-family: Courier New,Courier,monospace">ELM_DATETIME_DATE</span>: the date field</li>
+ <li><span style="font-family: Courier New,Courier,monospace">ELM_DATETIME_HOUR</span>: the hour field</li>
+ <li><span style="font-family: Courier New,Courier,monospace">ELM_DATETIME_MINUTE</span>: the minute field</li>
+ <li><span style="font-family: Courier New,Courier,monospace">ELM_DATETIME_AMPM</span>: the AM/PM field</li>
+ </ul>
+
+<h3>Using the Datetime Styles</h3>
+
+<p>The following styles are available:</p>
+ <ul>
+ <li><span style="font-family: Courier New,Courier,monospace">datepicker_layout</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">timepicker_layout</span></li>
+ </ul>
+
+<p>The following example creates the <span style="font-family: Courier New,Courier,monospace">datepicker_layout</span> style:</p>
+<pre class="prettyprint">
+elm_object_style_set(datetime, "datepicker_layout");
+</pre>
+
+<h3>Setting the Datetime Format</h3>
+
+<p>The format of the date and time can be configured with <span style="font-family: Courier New,Courier,monospace">elm_datetime_format_set()</span> using a combination of allowed Libc date format specifiers. In the following example the format is set to HH : MM.</p>
+<pre class="prettyprint">
+elm_object_style_set(datetime, "timepicker_layout");
+elm_datetime_format_set(datetime, "%d/%b/%Y%I:%M");
+</pre>
+<p>Please refer to the API documentation for a complete list of all the options available.</p>
+
+<h3>Using the Datetime Callbacks</h3>
+
+<p>A callback can be registered on the <span style="font-family: Courier New,Courier,monospace">changed</span> signal to detect when the Datetime field values are changed. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+<pre class="prettyprint">
+{
+ evas_object_smart_callback_add(datetime, "changed", changed_cb, data);
+}
+
+// Callback function for the "changed" signal
+// This callback is called when the datetime fields change
+void changed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ dlog_print(DLOG_INFO, LOG_TAG, "Datetime field changed. \n");
+}</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">language,changed</span> signal is emitted when the system locale changes.</p>
+
+
+
+ <h2 id="entry" name="entry">Entry</h2>
+
+<p class="figure">Figure: Entry component</p>
+<p align="center"><img alt="Entry component" src="../../images/entry_wn.png" /> </p>
+
+<p class="figure">Figure: Entry component</p>
+<p align="center"><img alt="Entry component" src="../../images/entry2_wn.png" /> </p>
+
+<p class="figure">Figure: Entry hierarchy</p>
+<p align="center"><img alt="Entry hierarchy" src="../../images/entry_tree.png" /> </p>
+
+<p>The entry component is a box where the user can enter text. It supports the following features:</p>
+ <ul>
+ <li>text wrapping</li>
+ <li>multiline</li>
+ <li>scrolling</li>
+ <li>formatted markup text</li>
+ <li>password mode</li>
+ <li>filtering text</li>
+ <li>read/write from a file</li>
+ <li>theme style overrides</li>
+ </ul>
+
+<h3>Adding an Entry Component</h3>
+
+<p>The entry component is created with the <span style="font-family: Courier New,Courier,monospace">elm_entry_add()</span> function, and the text inside the entry can be set with <span style="font-family: Courier New,Courier,monospace">elm_entry_entry_set()</span>.</p>
+<pre class="prettyprint">
+Evas_Object *entry, *parent;
+
+entry = elm_entry_add(parent);
+elm_entry_entry_set(entry, "A short text.");
+</pre>
+
+<h3>Using the Text Editor</h3>
+
+<p>You can append text to the end of existing content.</p>
+<pre class="prettyprint">
+elm_entry_entry_append(entry, "END");
+</pre>
+
+<p>You can also insert text at the current cursor position.</p>
+<pre class="prettyprint">
+elm_entry_entry_insert(entry, "CURSOR");
+Eina_Bool Empty = elm_entry_is_empty(entry);
+</pre>
+
+<p>Call <span style="font-family: Courier New,Courier,monospace">elm_entry_is_empty()</span> to see whether the entry is empty. Here, the boolean variable <span style="font-family: Courier New,Courier,monospace">Empty</span> returns <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span>.</p>
+<p>The user can enter text in the entry component when it is in focus. It is possible to prevent the user from editing text if needed.</p>
+<pre class="prettyprint">
+elm_entry_editable_set(entry, EINA_FALSE);
+</pre>
+
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">It is still possible to use the previous functions to modify the text of a non-editable entry.</td>
+ </tr>
+ </tbody>
+ </table>
+
+<h3>Setting the Password Mode</h3>
+
+<p>When dealing with password content, the password mode activates to hide what the user is typing. In this mode, the display of any text is replaced by asterisks (*), and the entry is single line (there is no line wrap).</p>
+
+<pre class="prettyprint">
+elm_entry_password_set(entry, EINA_TRUE);
+</pre>
+
+<h3>Entry Line Modes And Wrapping</h3>
+
+<p>The entry component has two line modes:</p>
+ <ul>
+ <li>single line mode</li>
+ <li>multiline mode</li>
+ </ul>
+
+<p>First, set the entry in single line mode.</p>
+
+<pre class="prettyprint">
+elm_entry_single_line_set(entry, EINA_TRUE);
+</pre>
+
+<p>In this mode, the text does not wrap when reaching the edge, but the entry grows horizontally instead. Pressing the Enter key in this mode generates an <span style="font-family: Courier New,Courier,monospace">activate</span> event instead of adding a new line.</p>
+
+<p>When the entry is set to multiline mode (single line off), the text wraps at the end of the entry and pressing Enter creates a new line.</p>
+
+<pre class="prettyprint">
+elm_entry_single_line_set(entry, EINA_FALSE);
+elm_entry_line_wrap_set(entry, ELM_WRAP_WORD);
+</pre>
+
+<p>In multiline entries, <span style="font-family: Courier New,Courier,monospace">elm_entry_line_wrap_set()</span> provides a way to cut the text implicitly into a new line when it reaches the far edge of the UI component. The following wrap modes are available:</p>
+ <ul>
+ <li><span style="font-family: Courier New,Courier,monospace">ELM_WRAP_NONE</span>: No wrap</li>
+ <li><span style="font-family: Courier New,Courier,monospace">ELM_WRAP_CHAR</span>: Wrap between characters</li>
+ <li><span style="font-family: Courier New,Courier,monospace">ELM_WRAP_WORD</span>: Wrap in allowed wrapping points (as defined in the unicode standard)</li>
+ <li><span style="font-family: Courier New,Courier,monospace">ELM_WRAP_MIXED</span>: Word wrap, and if that fails, char wrap</li>
+ </ul>
+
+<h3>Selecting Text</h3>
+
+<p>Text selections can be made with different functions:</p>
+<ul>
+<li>To select all the content of the entry component:
+<pre class="prettyprint">
+elm_entry_select_all(entry);
+</pre>
+</li>
+
+<li>To deselect the current selection:
+<pre class="prettyprint">
+elm_entry_select_none(entry);
+</pre>
+</li>
+
+<li>To select part of the text, use <span style="font-family: Courier New,Courier,monospace">elm_entry_select_region_set()</span>. The following code selects the first twenty characters of the entry content.
+<pre class="prettyprint">
+elm_entry_select_region_set(entry, 0, 20);
+</pre>
+</li>
+
+<li>To retrieve the currently selected text in an entry:
+<pre class="prettyprint">
+const char *selection;
+
+selection = elm_entry_selection_get(entry);
+</pre>
+</li>
+</ul>
+
+<p>If the entry text is empty, <span style="font-family: Courier New,Courier,monospace">elm_entry_selection_get()</span> returns <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+
+<p>You can copy or cut the selection to the clipboard.</p>
+<pre class="prettyprint">
+elm_entry_selection_cut(entry);
+</pre>
+
+<p>The selection can be pasted in the same or a different entry.</p>
+<pre class="prettyprint">
+elm_entry_selection_paste(entry);
+</pre>
+
+<h3>Controlling the Cursor</h3>
+
+<p>The cursor represents the current position in the entry, where the next action, for example, text insertion or deletion, is done. Usually, the cursor is represented as a blinking character, but its appearance depends on the theme configuration. The cursor position can be modified by using several functions.</p>
+<ul>
+<li>To move the cursor to the beginning of the entry:
+<pre class="prettyprint">
+elm_entry_cursor_begin_set(entry);
+</pre>
+</li>
+
+<li>To move the cursor to the end of the entry:
+<pre class="prettyprint">
+elm_entry_cursor_end_set(entry);
+</pre>
+</li>
+
+<li>To move the cursor one line down or up:
+<pre class="prettyprint">
+elm_entry_cursor_down(entry);
+elm_entry_cursor_up(entry);
+</pre>
+</li>
+<li>To move the cursor one character to the left or right:
+<pre class="prettyprint">
+elm_entry_cursor_prev(entry);
+elm_entry_cursor_next(entry);
+</pre>
+</li>
+
+<li>To set the cursor at a specific position (15th character, for example):
+<pre class="prettyprint">
+elm_entry_cursor_pos_set(entry, 15);
+</pre>
+</li>
+</ul>
+
+<p>It is possible to start a selection at the current cursor position, move five characters to the right and end the selection.</p>
+<pre class="prettyprint">
+elm_entry_cursor_selection_begin(entry);
+
+for (i = 0; i < 5; i++)
+{
+ elm_entry_cursor_next(entry);
+}
+
+elm_entry_cursor_selection_end(entry);
+</pre>
+
+<h3>Formatting Text</h3>
+
+<p>Text within an entry can be formatted by using markups tags that are defined in the theme. The following markups are available in the default theme:</p>
+ <ul>
+ <li><span style="font-family: Courier New,Courier,monospace"><br></span>: Inserts a line break.</li>
+ <li><span style="font-family: Courier New,Courier,monospace"><ps></span>: Inserts a paragraph separator. This is preferred over line breaks.</li>
+ <li><span style="font-family: Courier New,Courier,monospace"><tab></span>: Inserts a tab.</li>
+ <li><span style="font-family: Courier New,Courier,monospace"><em>...</em></span>: Emphasis. Sets the oblique style for the enclosed text.</li>
+ <li><span style="font-family: Courier New,Courier,monospace"><b>...</b></span>: Sets the bold style for the enclosed text.</li>
+ <li><span style="font-family: Courier New,Courier,monospace"><link>...</link></span>: Underlines the enclosed text.</li>
+ <li><span style="font-family: Courier New,Courier,monospace"><hilight>...</hilight></span>: Highlights the enclosed text.</li>
+ </ul>
+
+<h3>Using Special Markups</h3>
+
+<p>Special markups can be added within the text of the entry:</p>
+ <ul>
+ <li><span style="font-family: Courier New,Courier,monospace"><a href = ..>...</a></span>: Anchors</li>
+ <li><span style="font-family: Courier New,Courier,monospace"><item size = .. vsize = .. href = ..>...</item></span>: Items</li>
+ </ul>
+
+<p>The anchors generate an <span style="font-family: Courier New,Courier,monospace">anchor,clicked</span> signal when the user clicks on them. The <span style="font-family: Courier New,Courier,monospace">href</span> attribute is used to identify the anchor. It also reacts to the <span style="font-family: Courier New,Courier,monospace">anchor,in</span> (mouse in), <span style="font-family: Courier New,Courier,monospace">anchor,out</span> (mouse out), <span style="font-family: Courier New,Courier,monospace">anchor,down</span> (mouse down), and <span style="font-family: Courier New,Courier,monospace">anchor,up</span> (mouse up) events.</p>
+
+<p>The item markup provides a way to insert any <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> in the text. The <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> name has to be specified in the <span style="font-family: Courier New,Courier,monospace">href</span> attribute.</p>
+
+<h3>Overriding Style</h3>
+
+<p>To tweak the style of the text within the entry component, it is possible to override parts of the theme style to the textblock object by using <span style="font-family: Courier New,Courier,monospace">elm_entry_text_style_user_push()</span>. This function pushes a new style on top of the user style stack that overrides the current style. Remove the style in the top of user style stack with <span style="font-family: Courier New,Courier,monospace">elm_entry_text_style_user_pop()</span>.</p>
+
+<h3>Filtering Text</h3>
+
+<p>Text within an entry can be filtered in size. The following example sets the maximum number of characters allowed in the entry to 8.</p>
+<pre class="prettyprint">
+static Elm_Entry_Filter_Limit_Size limit_size =
+{
+ .max_char_count = 8,
+ .max_byte_count = 0
+};
+
+// Append a new callback to the list, this function is called each time
+// a text is inserted in the entry. Pass the limit_size struct previously
+// created to set the maximum number of characters allowed to 8
+
+elm_entry_markup_filter_append(entry, elm_entry_filter_limit_size, limit_size);
+</pre>
+
+<p>The content can be filtered by passing an <span style="font-family: Courier New,Courier,monospace">Elm_Entry_Filter_Accept_Set</span> structure. This structure contains the accepted characters and rejected characters. The following example shows how to reject the '+', '-', '*', and '/' characters.</p>
+
+<pre class="prettyprint">
+static Elm_Entry_Filter_Accept_Set accept_set =
+{
+ .accepted = NULL,
+ .rejected = "+*-/"
+};
+
+elm_entry_markup_filter_append(entry, elm_entry_filter_accept_set, accept_set);
+</pre>
+
+<h3>Loading and Saving Files</h3>
+
+<p>The entry content can be saved to a file (<span style="font-family: Courier New,Courier,monospace">/tmp/test.txt</span>, for example).</p>
+
+<pre class="prettyprint">
+// Set the file in which the entry text is saved. This function
+// implicitly loads the existing file content
+elm_entry_file_set(entry, "/tmp/test.txt", ELM_TEXT_FORMAT_MARKUP_UTF8);
+</pre>
+
+<p>Autosave is activated by default and changes are written back to the file after a short delay. This feature can be deactivated and you can manually save the content when needed.</p>
+<pre class="prettyprint">
+// Disable autosaving
+elm_entry_autosave_set(entry, EINA_FALSE);
+
+// Trigger saving when needed
+elm_entry_file_save(entry);
+</pre>
+
+<h3>Using Entry Theme Content</h3>
+
+<p>Two content parts of the default theme are available: <span style="font-family: Courier New,Courier,monospace">icon</span> and <span style="font-family: Courier New,Courier,monospace">end</span>. The following example shows how to set an icon in the <span style="font-family: Courier New,Courier,monospace">end</span> content part.</p>
+
+<pre class="prettyprint">
+Evas_Object *icon;
+
+ic = elm_icon_add(entry);
+elm_image_file_set(ic, "icon.png", NULL);
+elm_object_part_content_set(entry, "end", icon);
+</pre>
+
+<h3>Using Entry Theme Texts</h3>
+
+<p>The default theme allows the use of the following text parts:</p>
+ <ul>
+ <li><span style="font-family: Courier New,Courier,monospace">elm.text</span> - text of the entry</li>
+ <li><span style="font-family: Courier New,Courier,monospace">elm.guide</span> - placeholder of the entry</li>
+ </ul>
+
+<p>The following example shows how to set the placeholder text of the entry to <span style="font-family: Courier New,Courier,monospace">Hello World</span>.</p>
+<pre class="prettyprint">
+elm_object_part_text_set(entry, "elm.guide", "Hello World");
+</pre>
+
+<h3>Using Entry Callbacks</h3>
+
+<p>The entry component emits the following signals:</p>
+ <ul>
+ <li><span style="font-family: Courier New,Courier,monospace">aborted</span>: The escape key is pressed on a single line entry.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">activated</span>: The enter key is pressed on a single line entry.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">anchor,clicked</span>: An anchor is clicked. <span style="font-family: Courier New,Courier,monospace">event_info</span> points to an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Entry_Anchor_Info</span>.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">anchor,down</span>: Mouse button is pressed on an anchor. <span style="font-family: Courier New,Courier,monospace">event_info</span> points to an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Entry_Anchor_Info</span>.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">anchor,hover,opened</span>: The anchor is clicked. <span style="font-family: Courier New,Courier,monospace">event_info</span> points to an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Entry_Anchor_Info</span>.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">anchor,in</span>: Mouse cursor is moved into an anchor. <span style="font-family: Courier New,Courier,monospace">event_info</span> points to an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Entry_Anchor_Info</span>.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">anchor,out</span>: Mouse cursor is moved out of an anchor. <span style="font-family: Courier New,Courier,monospace">event_info</span> points to an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Entry_Anchor_Info</span>.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">anchor,up</span>: Mouse button is unpressed on an anchor. <span style="font-family: Courier New,Courier,monospace">event_info</span> points to an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Entry_Anchor_Info</span>.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">changed</span>: The text within the entry is changed.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">changed,user</span>: The text within the entry is changed because of user interaction. <span style="font-family: Courier New,Courier,monospace">event_info</span> points to an object of the type <span style="font-family: Courier New,Courier,monospace">Edje_Entry_Change_Info</span>.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">clicked</span>: The entry is clicked (mouse press and release).</li>
+ <li><span style="font-family: Courier New,Courier,monospace">clicked,double</span>: The entry is double clicked.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">clicked,triple</span>: The entry is triple clicked.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">cursor,changed</span>: The cursor position is changed.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">cursor,changed,manual</span>: The cursor position is changed manually.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">focused</span>: The entry receives focus. <span style="font-family: Courier New,Courier,monospace">event_info</span> points to an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Focus_Info</span>.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">unfocused</span>: The entry loses focus.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">language,changed</span>: Program language is changed.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">longpressed</span>: A mouse button is pressed and held for a couple of seconds.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">maxlength,reached</span>: A maximum length is reached.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">preedit,changed</span>: The preedit string is changed.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">press</span>: A mouse button is pressed on the entry.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">redo,request</span>: The request is redone.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">selection,changed</span>: The current selection is changed.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">selection,cleared</span>: The current selection is cleared.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">selection,copy</span>: A copy of the selected text into the clipboard is requested.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">selection,cut</span>: A cut of the selected text into the clipboard is requested.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">selection,paste</span>: A paste of the clipboard contents is requested.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">selection,start</span>: A selection is begun and no previous selection exists.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">text,set,done</span>: The whole text is set to the entry.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">theme,changed</span>: The theme is changed.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">undo,request</span>: The request is undone.</li>
+ </ul>
+
+<p>For signals, where <span style="font-family: Courier New,Courier,monospace">event_info</span> has not been explicitly described, it is set to <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+
+<p>The following example shows how to register a callback to the <span style="font-family: Courier New,Courier,monospace">focused</span> signal.</p>
+<pre class="prettyprint">
+{
+ evas_object_smart_callback_add(entry, "focused", focused_cb, data);
+}
+
+// Callback function for the "focused" signal
+// This callback is called when the entry receive the focus
+void focused_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ dlog_print(DLOG_INFO, LOG_TAG, "Entry focused\n");
+}
+</pre>
+
+
+ <h2 id="genlist" name="genlist">Genlist</h2>
+
+<p class="figure">Figure: Genlist component</p>
+<p align="center"> <img alt="Genlist component" src="../../images/genlist.png" /> </p>
+
+<p class="figure">Figure: Genlist hierarchy</p>
+<p align="center"> <img alt="Genlist hierarchy" src="../../images/genlist_htree.png" /> </p>
+
+<p>Genlist is a UI component that displays a scrollable list of items. It allows a lot of entries while being fast and has a low memory footprint, as only the visible items are allocated in the memory.</p>
+
+<p>For more information, see the <a href="../../../../org.tizen.tutorials/html/native/ui/genlist_tutorial_wn.htm">Genlist Tutorial</a>.</p>
+
+<h3>Genlist Item Style</h3>
+
+<p>An item can have 0 or more texts, 0 or more contents, and 0 or more boolean states. This is defined in the Edje item theme style. Genlist looks for data items named respectively <span style="font-family: Courier New,Courier,monospace">labels</span>, <span style="font-family: Courier New,Courier,monospace">contents</span>, and <span style="font-family: Courier New,Courier,monospace">states</span> in the Edje file. The <span style="font-family: Courier New,Courier,monospace">default</span> item style provides one text part (<span style="font-family: Courier New,Courier,monospace">elm.text</span>), two content parts (<span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span> and <span style="font-family: Courier New,Courier,monospace">elm.swallow.end</span>) and no state parts.</p>
+
+<p>The following item styles are available:</p>
+ <ul>
+ <li><span style="font-family: Courier New,Courier,monospace">default</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">groupindex</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">1text</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">1text.1icon</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">2text</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">2text.1</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">1text.1icon.divider</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">1text.1icon.1</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">2text.1icon.1</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">multiline/1text</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">multiline/2text</span></li>
+ </ul>
+
+<p>Here are some examples of the item styles.</p>
+
+<p class="figure">Figure: 1text item style</p>
+<p align="center"> <img alt="1 text item style" src="../../images/genlist1_wn.png" /> </p>
+
+<p class="figure">Figure: 1text.1icon.1 item style</p>
+<p align="center"> <img alt="1text.1icon.1 item style" src="../../images/genlist2_wn.png" /> </p>
+
+<p class="figure">Figure: 2text.1icon.1 item style</p>
+<p align="center"> <img alt="2text.1icon.1 item style" src="../../images/genlist3_wn.png" /> </p>
+
+<p>For more information on creating a new genlist item style, see <a href="preferences_n.htm#customize">Customizing UI Components</a>.</p>
+
+<h3>Adding a Genlist Component</h3>
+
+<p>A genlist component is added with the <span style="font-family: Courier New,Courier,monospace">elm_genlist_add()</span> function.</p>
+<pre class="prettyprint">
+Evas_Object *genlist, *parent;
+genlist = elm_genlist_add(parent);
+</pre>
+
+<h3>Creating And Deleting Items</h3>
+
+<p>To save up memory, genlist allocates and deletes items on the go, while the user is scrolling the list. To enable that, the user creates and fills a <span style="font-family: Courier New,Courier,monospace">Elm_Genlist_Item_Class</span> structure that informs the genlist component which callbacks to call when an item is created or deleted.</p>
+<pre class="prettyprint">
+Elm_Genlist_Item_Class *itc = elm_genlist_item_class_new();
+
+itc->item_style = "default";
+itc->decorate_item_style = NULL;
+itc->decorate_all_item_style = NULL;
+itc->func.text_get = _item_label_get;
+itc->func.content_get = _item_content_get;
+itc->func.state_get = _item_state_get;
+itc->func.del = _item_del;
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">item_style</span>, <span style="font-family: Courier New,Courier,monospace">decorate_item_style</span>, and <span style="font-family: Courier New,Courier,monospace">decorate_all_item_style</span> attributes define the names of the item style, the decorate mode item style and the decorate all item style.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">func</span> structure contains pointers to functions that are called when an item is going to be created or deleted. All of them receive a data parameter that points to the same data passed to the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span> and related item creation functions, and an <span style="font-family: Courier New,Courier,monospace">obj</span> parameter that points to the genlist object itself.</p>
+ <ul>
+ <li><span style="font-family: Courier New,Courier,monospace">text_get</span>
+ <p>This function receives a <span style="font-family: Courier New,Courier,monospace">PART</span> parameter that is the name string of one of the existing text parts in the Edje group implementing the item's theme. It has to return a string (duplicated with the <span style="font-family: Courier New,Courier,monospace">strdup()</span> function) corresponding to the <span style="font-family: Courier New,Courier,monospace">PART</span> parameter. The caller is in charge of freeing the string when done.</p></li>
+
+ <li><span style="font-family: Courier New,Courier,monospace">content_get</span>
+ <p>The <span style="font-family: Courier New,Courier,monospace">PART</span> parameter is the name string of one of the existing swallow parts in the Edje group. When no content is desired, it must return <span style="font-family: Courier New,Courier,monospace">NULL</span>, or otherwise, a valid object handle. The object is deleted by the genlist on its deletion or when the item is <span style="font-family: Courier New,Courier,monospace">unrealized</span>.</p></li>
+
+ <li><span style="font-family: Courier New,Courier,monospace">state_get</span>
+ <p>The <span style="font-family: Courier New,Courier,monospace">PART</span> parameter is the name string of one of the state parts in the Edje group implementing the item's theme. It returns <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span> for false/off or <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> for true/on. The default is false. Genlists emit a signal to the <span style="font-family: Courier New,Courier,monospace">PART</span> parameter's theming Edje object with <span style="font-family: Courier New,Courier,monospace">elm,state,xxx,active</span> as <span style="font-family: Courier New,Courier,monospace">emission</span> and <span style="font-family: Courier New,Courier,monospace">elm</span> as <span style="font-family: Courier New,Courier,monospace">source</span> argument, when the state is true. xxx is the name of the (state) part.</p></li>
+
+ <li><span style="font-family: Courier New,Courier,monospace">del</span>
+ <p>This function is called when the genlist item is deleted. It deletes any data that is allocated at the item creation.</p></li>
+</ul>
+
+<h3>Managing Items</h3>
+
+<p>To add an item, several functions can be used. <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span> adds an item to the end of the list, or if there is a parent list, to the end of all the child items of the parent list. <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_prepend()</span> is otherwise the same but adds to the beginning of the list or children lists. <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_insert_before()</span> inserts an item before the indicated item and <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_insert_after()</span> inserts an item after the indicated item.</p>
+
+<p>The previous functions take a <span style="font-family: Courier New,Courier,monospace">type</span> parameter that can be one of the following.</p>
+ <ul>
+ <li><span style="font-family: Courier New,Courier,monospace">ELM_GENLIST_ITEM_NONE</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">ELM_GENLIST_ITEM_TREE</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">ELM_GENLIST_ITEM_GROUP</span></li>
+ </ul>
+
+<p>If <span style="font-family: Courier New,Courier,monospace">ELM_GENLIST_ITEM_TREE</span> is set, this item is displayed as being able to expand and have child items. If <span style="font-family: Courier New,Courier,monospace">ELM_GENLIST_ITEM_GROUP</span> is set, this item is a group index item that is displayed at the top until the next group appears.</p>
+
+<p class="figure">Figure: Genlist tree</p>
+<p align="center"> <img alt="Genlist tree" src="../../images/genlist_tree.png" /> </p>
+
+<p>The application clears the list with <span style="font-family: Courier New,Courier,monospace">elm_genlist_clear()</span>, which deletes all the items in the list. <span style="font-family: Courier New,Courier,monospace">elm_object_item_del()</span> deletes a specific item. <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_subitems_clear()</span> clears all items that are children of the indicated parent item.</p>
+
+<p>To help inspect the list items, move to the item at the top of the list with <span style="font-family: Courier New,Courier,monospace">elm_genlist_first_item_get()</span>, which returns the item pointer. <span style="font-family: Courier New,Courier,monospace">elm_genlist_last_item_get()</span> moves to the item at the end of the list. <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_next_get()</span> and <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_prev_get()</span> move to the next and previous items relative to the indicated item. Using these calls you can go through the entire item list or tree.</p>
+
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">As a tree, the items are flattened on the list, so <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_parent_get()</span> gives you the name of the parent item (even to skip them if needed).</td>
+ </tr>
+ </tbody>
+ </table>
+
+<p><span style="font-family: Courier New,Courier,monospace">elm_genlist_item_show()</span> scrolls the scroller to show the desired item as visible. </p>
+<p><span style="font-family: Courier New,Courier,monospace">elm_object_item_data_get()</span> returns the data pointer set by the item creation functions.</p>
+
+<p>If an item changes (state, boolean, text or content change), use <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_update()</span> for the genlist to update the item. Genlist re-realizes the item and calls the functions in the <span style="font-family: Courier New,Courier,monospace">_Elm_Genlist_Item_Class</span> for it.</p>
+
+<h3>Selection</h3>
+
+<p>Items are manually selected or deselected with <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_selected_set()</span> or disabled with <span style="font-family: Courier New,Courier,monospace">elm_object_item_disabled_set()</span>. In case there is a tree or a group item, the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_expanded_set()</span> function is used to expand or contract the item.</p>
+
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">Calling this function does not show or hide any child of an item (if it is a parent). You must manually delete and create them on the callbacks of the <span style="font-family: Courier New,Courier,monospace">expanded</span> or <span style="font-family: Courier New,Courier,monospace">contracted</span> signals.</td>
+ </tr>
+ </tbody>
+ </table>
+
+<p>By default, the genlist is in single-selection mode: only one item can be selected at a time. You can use <span style="font-family: Courier New,Courier,monospace">elm_genlist_multi_select_set()</span> to select multiple items. In the single-selection mode, the <span style="font-family: Courier New,Courier,monospace">elm_genlist_selected_item_get()</span> function can be called to retrieve the selected item. If several items are selected, the <span style="font-family: Courier New,Courier,monospace">elm_genlist_selected_items_get()</span> returns a list of the current selected items.</p>
+
+<p>In the following figure, there is a genlist in multi-selection mode with two items selected (#4 and #5) and one item disabled (#2).</p>
+
+<p class="figure">Figure: Genlist component</p>
+<p align="center"> <img alt="Genlist component" src="../../images/genlist_multi.png"/> </p>
+
+<h3>Using Genlist Callbacks</h3>
+
+<p>The genlist component emits the following signals:</p>
+ <ul>
+ <li><span style="font-family: Courier New,Courier,monospace">activated</span>: The user has double-clicked or pressed (enter | return | spacebar) on an item. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">clicked,double</span>: The user has double-clicked an item. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">selected</span>: The user selects an item. event_info in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">unselected</span>: The user unselects an item. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">expanded</span>: The item is to be expanded with <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_expanded_set()</span>. This callback fills in the child items. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">contracted</span>: The item is to be contracted with <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_expanded_set()</span>. This callback deletes the child items. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">expand,request</span>: The user wants to expand a tree branch item. The callback decides if the item can expand (if it has any children) and calls <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_expanded_set()</span> to set the state. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">contract,request</span>: The user wants to contract a tree branch item. The callback decides if the item can contract (if it has any children) and calls <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_expanded_set()</span> to set the state. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">realized</span>: The item is created as a real evas object. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span>, that contains the activated item.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">unrealized</span>: An item is going to be unrealized. Content objects provided are deleted and the item object is deleted or put into a floating cache. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">drag,start,up</span>: The item in the list is dragged (not scrolled) up. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">drag,start,down</span>: The item in the list is dragged (not scrolled) down. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">drag,start,left</span>: The item in the list is dragged (not scrolled) left. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">drag,start,right</span>: The item in the list is dragged (not scrolled) right. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">drag,stop</span>: The item in the list has stopped being dragged. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">drag</span>: The item in the list is being dragged. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">longpressed</span>: The item is pressed for a certain amount of time. The default specified time is one second. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">scroll,anim,start</span>: The scrolling animation is started. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">scroll,anim,stop</span>: The scrolling animation is stopped. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">scroll,drag,start</span>: Dragging the content is started. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">scroll,drag,stop</span>: Dragging the content is stopped. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">edge,top</span>: The genlist is scrolled to the top edge. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">edge,bottom</span>: The genlist is scrolled to the bottom edge. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">edge,left</span>: The genlist is scrolled to the left edge. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">edge,right</span>: The genlist is scrolled to the right edge. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">multi,swipe,left</span>: The genlist is multi-touch swiped left. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">multi,swipe,right</span>: The genlist is multi-touch swiped right. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">multi,swipe,up</span>: The genlist is multi-touch swiped up. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">multi,swipe,down</span>: The genlist is multi-touch swiped down. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">multi,pinch,out</span>: The genlist is multi-touch pinched out. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">multi,pinch,in</span>: The genlist is multi-touch pinched in. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">swipe</span>: The genlist is swiped. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">moved</span>: A genlist item is moved in the reorder mode. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">moved,after</span>: A genlist item is moved after another item in the reorder mode. To access the relative previous item, use <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_prev_get()</span>. This signal is called along with the <span style="font-family: Courier New,Courier,monospace">moved</span> signal. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">moved,before</span>: A genlist item is moved before another item in the reorder mode. To access the relative previous item, use <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_next_get()</span>. This signal is called along with the <span style="font-family: Courier New,Courier,monospace">moved</span> signal. <span style="font-family: Courier New,Courier,monospace">event_info</span> in the callback function points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> that contains the activated item.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">language,changed</span> The program's language is changed. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">tree,effect,finished</span>: A genlist tree effect is finished. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
+ </ul>
+
+
+ <h2 id="glview" name="glview">GLView</h2>
+
+ <p class="figure">Figure: GLView example</p>
+ <p align="center"><img alt="GLView example" src="../../images/glview_wn.png" /></p>
+
+ <p class="figure">Figure: GLView hierarchy</p>
+ <p align="center"><img alt="GLView hierarchy" src="../../images/glview_tree.png" /></p>
+
+
+<p> The GLView component renders OpenGL in an elementary object, which hides Evas GL complexity. For more information, see <a href="../../../../org.tizen.guides/html/native/graphics/opengles_n.htm">OpenGL ES</a>.</p>
+
+<h3>Adding a GLView Component</h3>
+
+<p>Create a GLView component with the <span style="font-family: Courier New,Courier,monospace">elm_glview_add()</span> function.</p>
+<pre class="prettyprint">
+Evas_Object *glview, *parent;
+
+glview = elm_glview_add(parent);
+</pre>
+
+<p>In this example, the size of the GLView is set to 200x200 pixels.</p>
+<pre class="prettyprint">
+elm_glview_size_set(glview, 200, 200);
+</pre>
+
+<h3>Using the GLView API</h3>
+
+<p>You can configure the GLView rendering mode by activating the following rendering modes:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">ELM_GLVIEW_ALPHA</span>: Alpha channel rendering mode</li>
+<li><span style="font-family: Courier New,Courier,monospace">ELM_GLVIEW_DEPTH</span>: Depth buffer rendering mode</li>
+<li><span style="font-family: Courier New,Courier,monospace">ELM_GLVIEW_STENCIL</span>: Stencil buffer rendering mode</li>
+<li><span style="font-family: Courier New,Courier,monospace">ELM_GLVIEW_DIRECT</span>: Direct rendering mode</li>
+<li><span style="font-family: Courier New,Courier,monospace">ELM_GLVIEW_CLIENT_SIDE_ROTATION</span>: The client handles the GL view rotation if direct rendering is enabled</li>
+</ul>
+
+<p>In the following example, the alpha channel and depth buffer rendering mode are enabled.</p>
+<pre class="prettyprint">
+elm_glview_mode_set(glview, ELM_GLVIEW_ALPHA | ELM_GLVIEW_DEPTH);
+</pre>
+
+<p>The following example shows how to decide what to do with the GL surface when the GLView component is resized.</p>
+<pre class="prettyprint">
+elm_glview_resize_policy_set(glview, ELM_GLVIEW_RESIZE_POLICY_RECREATE);
+</pre>
+
+<p>The GL surface is destroyed and recreated to the new size (default function). The resize policy can also be set to <span style="font-family: Courier New,Courier,monospace">ELM_GLVIEW_RESIZE_POLICY_SCALE</span>. In that case, only the image object is scaled, not the underlying GL surface.</p>
+
+<p>The following example shows how to set the GLView rendering policy.</p>
+<pre class="prettyprint">
+elm_glview_render_policy_set(glview, ELM_GLVIEW_RENDER_POLICY_ALWAYS);
+</pre>
+
+<p>The GLView object is always redrawn during the rendering loop. It can also be set to <span style="font-family: Courier New,Courier,monospace">ELM_GLVIEW_RENDER_POLICY_ON_DEMAND</span> (default function), where the GLView component is redrawn only when it is visible.</p>
+
+<p>Register the callbacks:</p>
+<pre class="prettyprint">elm_glview_init_func_set(glview, _init_gl_cb);
+elm_glview_del_func_set(glview, _del_gl_cb);
+elm_glview_resize_func_set(glview, _resize_gl_cb);
+elm_glview_render_func_set(glview, _draw_gl_cb);
+</pre>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">elm_glview_init_func_set()</span> registers an init callback that is called at the GLView object creation.</li>
+<li><span style="font-family: Courier New,Courier,monospace">elm_glview_del_func_set()</span> registers a del function that is called when the GLView object is deleted.</li>
+<li><span style="font-family: Courier New,Courier,monospace">elm_glview_resize_func_set()</span> registers the resize function that is called during the rendering loop when the GLView object is resized.</li>
+<li><span style="font-family: Courier New,Courier,monospace">elm_glview_render_func_set()</span> registers the render function that is called when the GLView object must be redrawn.</li>
+</ul>
+
+<h3>Using GLView Callbacks</h3>
+
+<p>The GLView component emits the following signals:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">focused</span>: The GlView component is focused. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter points at an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Focus_Info</span>.</li>
+<li><span style="font-family: Courier New,Courier,monospace">unfocused</span>: The GLView object is unfocused.</li>
+</ul>
+
+<p>To register a callback:</p>
+<pre class="prettyprint">
+{
+ evas_object_smart_callback_add(glview, "focused", focused_cb, data);
+}
+
+// Callback function for the "focused" signal
+// This callback is called when the GLView is focused
+void focused_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ Elm_Focus_Info *fi = event_info;
+
+ dlog_print(DLOG_INFO, LOG_TAG, "GLView is focused\n");
+}
+</pre>
+
+<h2 id="icon" name="icon">Icon</h2>
+
+<p class="figure">Figure: Icon hierarchy</p>
+<p align="center"> <img alt="Icon hierarchy" src="../../images/icon_tree.png" /> </p>
+
+<p>The icon component inherits from the image component. It is used to display images in an icon context.</p>
+
+<h3>Adding an Icon Component</h3>
+
+<p>You can create an icon and set it as a freedesktop.org <span style="font-family: Courier New,Courier,monospace">Home</span> standard icon.</p>
+
+<pre class="prettyprint">
+Evas_Object *icon, *parent;
+icon = elm_icon_add(parent);
+elm_icon_standard_set(icon, "Home");
+</pre>
+
+<h3>Changing Image File</h3>
+
+<p>You can change the image by using an image in the filesystem (for example, <span style="font-family: Courier New,Courier,monospace">/tmp/Home.png</span>).</p>
+<pre class="prettyprint">
+elm_image_file_set(icon, "/tmp/Home.png", NULL);
+</pre>
+
+<p>You can also use a group in an Edje file (for example, <span style="font-family: Courier New,Courier,monospace">/tmp/Home.edj</span>).</p>
+<pre class="prettyprint">
+elm_image_file_set(icon, "/tmp/Home.edj", "elm/icon/Home/default");
+</pre>
+
+<p>A thumbnail can be generated and cached for future use. For this, you need the Ethumb library support.</p>
+
+<pre class="prettyprint">
+elm_icon_thumb_set(icon, "/tmp/Home.png", NULL);
+</pre>
+
+<p>This function sets the file in the icon and enables the use of a cached thumbnail if it already exists. Otherwise, it creates a new thumbnail and caches it for future use.</p>
+
+<h3>Using Icon Callbacks</h3>
+
+<p>The icon component emits the following signals:</p>
+ <ul>
+ <li><span style="font-family: Courier New,Courier,monospace">thumb,done</span>: <span style="font-family: Courier New,Courier,monospace">elm_icon_thumb_set()</span> is completed with success.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">thumb,error</span>: <span style="font-family: Courier New,Courier,monospace">elm_icon_thumb_set()</span> fails.</li>
+ </ul>
+
+<p>In both cases, <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+
+
+ <h2 id="image" name="image">Image</h2>
+
+<p class="figure">Figure: Image component</p>
+<p align="center"> <img alt="Image component" src="../../images/image_wn.png" /> </p>
+
+<p class="figure">Figure: Image hierarchy</p>
+<p align="center"> <img alt="Image hierarchy" src="../../images/image_tree.png" /> </p>
+
+<p>The image component can load and display an image from a disk file or a memory region.</p>
+
+<h3>Adding an Image Component</h3>
+
+<p>This object is created with <span style="font-family: Courier New,Courier,monospace">elm_image_add()</span>.</p>
+
+<pre class="prettyprint">
+Evas_Object *image, *parent;
+image = elm_image_add(parent);
+</pre>
+
+<h3>Configuring the Image Component</h3>
+
+<p>Various properties of the image can be tuned. First, you can disable the elementary scaling so that the image does not scale but resizes on both directions.</p>
+<pre class="prettyprint">
+elm_image_no_scale_set(image, EINA_TRUE);
+elm_image_resizable_set(image, EINA_TRUE, EINA_TRUE);
+</pre>
+
+<p>When scaling images, the smooth scaling algorithm can be used. It provides a better quality image but is slower than the default algorithm.</p>
+<pre class="prettyprint">
+elm_image_smooth_set(image, EINA_TRUE);
+</pre>
+
+<p>Preloading is used to load images without blocking the user interface. This preserves the reactivity of the user experience. The image is loaded in a thread. It can be disabled if desired.</p>
+<pre class="prettyprint">
+elm_image_preload_disabled_set(image, EINA_TRUE);
+</pre>
+
+<p>The image can be rotated or flipped. Here the image is rotated 180 degrees.</p>
+<pre class="prettyprint">
+elm_image_orient_set(image, ELM_IMAGE_ROTATE_180);
+</pre>
+
+<p>The following orientations are available:</p>
+ <ul>
+ <li><span style="font-family: Courier New,Courier,monospace">ELM_IMAGE_ORIENT_0</span>: No orientation change</li>
+ <li><span style="font-family: Courier New,Courier,monospace">ELM_IMAGE_ROTATE_90</span>: Rotate the image 90 degrees clockwise</li>
+ <li><span style="font-family: Courier New,Courier,monospace">ELM_IMAGE_ROTATE_180</span>: Rotate the image 180 degrees clockwise</li>
+ <li><span style="font-family: Courier New,Courier,monospace">ELM_IMAGE_ROTATE_270</span>: Rotate the image 90 degrees counter-clockwise</li>
+ <li><span style="font-family: Courier New,Courier,monospace">ELM_IMAGE_FLIP_HORIZONTAL</span>: Flip the image horizontally</li>
+ <li><span style="font-family: Courier New,Courier,monospace">ELM_IMAGE_FLIP_VERTICAL</span>: Flip the image vertically</li>
+ <li><span style="font-family: Courier New,Courier,monospace">ELM_IMAGE_FLIP_TRANSPOSE</span>: Flip the image along the bottom-left to top-right line</li>
+ <li><span style="font-family: Courier New,Courier,monospace">ELM_IMAGE_FLIP_TRANSVERSE</span>: Flip the image along the top-left to bottom-right line</li>
+ </ul>
+
+<p>If you want to keep the original aspect ration when resizing the image, you must define how the image fits into the object's area.</p>
+<pre class="prettyprint">
+// Tell the image to keep original aspect ratio
+elm_image_aspect_fixed_set(image, EINA_TRUE);
+// Then let the image fill the entire object
+elm_image_fill_outside_set(image, EINA_TRUE);
+</pre>
+
+<p>In this configuration, part of the image can go outside the object. If <span style="font-family: Courier New,Courier,monospace">elm_image_fill_outside_set</span> is set to <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span>, the image stays inside the limits of the parent object.</p>
+
+<h3>Using Image Callbacks</h3>
+
+<p>The image component emits the following signals:</p>
+ <ul>
+ <li><span style="font-family: Courier New,Courier,monospace">drop</span>: The user drops an image typed object onto the object in question - the event info argument is the path to that image file</li>
+ <li><span style="font-family: Courier New,Courier,monospace">clicked</span>: The user clicks the image. <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</li>
+ </ul>
+
+<p>To register a callback when a user clicks on the image:</p>
+<pre class="prettyprint">
+{
+ evas_object_smart_callback_add(image, "clicked", clicked_cb, data);
+}
+
+// Callback function for the "clicked" signal
+// This callback is called when the image is clicked
+void clicked_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ dlog_print(DLOG_INFO, LOG_TAG, "Image clicked\n");
+}
+</pre>
+
+ <h2 id="index" name="index">Index</h2>
+
+<p class="figure">Figure: Index component</p>
+<p align="center"> <img alt="Index component" src="../../images/index_wn.png" /> </p>
+
+<p class="figure">Figure: Index hierarchy</p>
+<p align="center"> <img alt="Index hierarchy" src="../../images/index_tree.png" /> </p>
+
+<p>An index component gives you an index for fast access to whichever group of other UI items you have. The index component is by default hidden, but it appears when the user clicks over its reserved area in the canvas. In the default theme, it is a one finger wide area on the right side of the index component's container. Generally, an index is used together with lists, generic lists, or generic grids.</p>
+
+<h3>Adding an Index Component</h3>
+
+<p>Call the <span style="font-family: Courier New,Courier,monospace">elm_index_add()</span> function to create a new index component.</p>
+<pre class="prettyprint">
+Evas_Object *index, *parent;
+index = elm_index_add(parent);
+</pre>
+
+<h3>Adding Items</h3>
+
+<p>The following example shows how to add the listitem object at the letter <span style="font-family: Courier New,Courier,monospace">A</span>, calling the smart callback <span style="font-family: Courier New,Courier,monospace">it_select_cb()</span> when this item is selected.</p>
+<pre class="prettyprint">
+Elm_Object_Item *list_item1, *list_item2;
+elm_index_item_append(index, "A", it_select_cb, list_item1);
+</pre>
+
+<p>The following example shows how to add item objects, calling the smart callback <span style="font-family: Courier New,Courier,monospace">it_select_cb()</span> when the item is selected.</p>
+<pre class="prettyprint">
+Elm_Object_Item *it[5];
+for (i = 0; i < 5; ++i)
+{
+ it[i] = elm_index_item_append(index, NULL, it_select_cb, (void *) i);
+}</pre>
+
+<p>The following example shows how to define the smart callback.</p>
+<pre class="prettyprint">
+// Callback function called when the list_item1 object
+// is selected
+void it_select_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ dlog_print(DLOG_INFO, LOG_TAG, "Item1 selected\n");
+}
+</pre>
+
+<p>In the previous case, the indexes are appended to the existing ones. It is also possible to prepend index items with <span style="font-family: Courier New,Courier,monospace">elm_index_item_prepend()</span>.</p>
+
+
+<h3>Using Index Callbacks</h3>
+
+<p>The index component emits the following signals:</p>
+ <ul>
+ <li><span style="font-family: Courier New,Courier,monospace">changed</span>: The selected index item changes. <span style="font-family: Courier New,Courier,monospace">event_info</span> is the selected item's data pointer.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">delay,changed</span>: The selected index item changes, but after a small idling period. <span style="font-family: Courier New,Courier,monospace">event_info</span> is the selected item's data pointer.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">selected</span>: The user releases a mouse button and selects an item. <span style="font-family: Courier New,Courier,monospace">event_info</span> is the selected item's data pointer.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">level,up</span>: The user moves a finger from the first level to the second level.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">level,down</span>: The user moves a finger from the second level to the first level.</li>
+ </ul>
+
+<p>When the user selects an item in the index, the <span style="font-family: Courier New,Courier,monospace">selected</span> signal is emitted. The developer can then implement the associated callback to do the appropriate action (to show a given area or child object depending on the index item selected, for example). Here is an example of such a callback.</p>
+<pre class="prettyprint">
+static void
+_index_selected_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ Elm_Object_Item *lit = event_info;
+
+ // Code that does the desired action
+}
+</pre>
+
+<p>After that, the callback to the <span style="font-family: Courier New,Courier,monospace">selected</span> signal is registered.</p>
+<pre class="prettyprint">
+evas_object_smart_callback_add(index, "selected", _index_selected_cb, NULL);
+</pre>
+
+
+ <h2 id="label" name="label">Label</h2>
+
+<p class="figure">Figure: Label component</p>
+<p align="center"> <img alt="Label component" src="../../images/label_wn.png" /> </p>
+
+<p class="figure">Figure: Label hierarchy</p>
+<p align="center"> <img alt="Label hierarchy" src="../../images/label_tree.png" /> </p>
+
+<p>The label component displays text with simple html-like markup.</p>
+
+<h3>Adding a Label Component</h3>
+
+<p>To add a label and set the text in it, use the following functions.</p>
+
+<pre class="prettyprint">
+Evas_Object *label = elm_label_add(win);
+
+elm_object_text_set(label, "Some long text for our label, that is not so long");
+</pre>
+
+<h3>Using the Label Styles</h3>
+
+<p>Label displays the text with several predefined styles.</p>
+ <ul>
+ <li><span style="font-family: Courier New,Courier,monospace">default</span>: No animation</li>
+ <li><span style="font-family: Courier New,Courier,monospace">marker</span>: The text is centered and bolded.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">slide_long</span>: The text appears from the right of the screen and slides until it disappears in the left of the screen(reappearing on the right again).</li>
+ <li><span style="font-family: Courier New,Courier,monospace">slide_roll</span>: The text appears from the left of the label and slides to the right to show the overflow, and then appears from the right of the label again.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">slide_short</span>: The text appears in the left of the label and slides to the right to show the overflow. When all of the text has been shown the position is reset.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">slide_bounce</span>: The text appears in the left of the label and slides to the right to show the overflow. When all of the text has been shown, the animation reverses, moving the text to the left.</li>
+ </ul>
+
+<p>Here the style is set to <span style="font-family: Courier New,Courier,monospace">slide_roll</span>.</p>
+
+<pre class="prettyprint">
+elm_object_style_set(label, "slide_roll");
+</pre>
+
+<h3>Configuring the Label</h3>
+
+<p>The duration of the animation and the slide mode can be set with the following functions.</p>
+<pre class="prettyprint">
+elm_label_slide_duration_set(label, 3);
+elm_label_slide_mode_set(label, ELM_LABEL_SLIDE_MODE_ALWAYS);
+</pre>
+
+<p>Use the following function to modify the style.</p>
+<pre class="prettyprint">
+elm_object_style_set(label, "slide_bounce");
+</pre>
+
+<h3>Using the Label Callbacks</h3>
+
+<p>This UI component emits the following signals:</p>
+ <ul>
+ <li><span style="font-family: Courier New,Courier,monospace">language,changed</span>: The program's language changes.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">slide,end</span>: The slide reaches the end.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">anchor,clicked</span>: The anchor is clicked. <span style="font-family: Courier New,Courier,monospace">event_info</span> points to an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Label_Anchor_Info</span>.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">anchor,mouse,down</span> <span style="font-family: Courier New,Courier,monospace">event_info</span> points to an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Label_Anchor_Info</span>.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">anchor,mouse,up</span> <span style="font-family: Courier New,Courier,monospace">event_info</span> points to an object of the type <span style="font-family: Courier New,Courier,monospace">Elm_Label_Anchor_Info</span>.</li>
+ </ul>
+
+<p>The following example registers a callback on the <span style="font-family: Courier New,Courier,monospace">slide,end</span> signal.</p>
+
+<pre class="prettyprint">
+{
+ evas_object_smart_callback_add(label, "slide,end", slide_end_cb, data);
+}
+
+// Callback function for the "slide,end" signal
+// This callback is called when the label slide reaches the end
+void slide_end_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ dlog_print(DLOG_INFO, LOG_TAG, "Slide has reach the end.\n");
+}
+</pre>
+
+ <h2 id="list" name="list">List</h2>
+
+ <p class="figure">Figure: List component</p>
+<p align="center"> <img alt="List component" src="../../images/list_wn.png" /> </p>
+
+ <p class="figure">Figure: List hierarchy</p>
+<p align="center"> <img alt="List hierarchy" src="../../images/list_tree.png" /> </p>
+
+
+ <p>This UI component is a very simple type of a list component. It is not to be used to manage a lot of items. For that, genlists are a better option. </p>
+
+ <p>The list items can contain a text and two contents (<span style="font-family: Courier New,Courier,monospace">start</span> and <span style="font-family: Courier New,Courier,monospace">end</span>). These are set with the <span style="font-family: Courier New,Courier,monospace">elm_object_item_*()</span> functions. </p>
+
+<h3>Adding a List Component</h3>
+
+<pre class="prettyprint">
+Evas_Object *list, *parent;
+
+// Create a list
+list = elm_list_add(parent);
+</pre>
+
+<h3>Using the List</h3>
+
+<p>This UI component implements the scrollable interface, so the scroller component functions can be used on it. For example, if you want to change the bounce property of the scroller or the scrolling policy:</p>
+
+<pre class="prettyprint">
+Evas_Object *list;
+
+// Change the scroller policy to fix the scroll only vertically
+elm_scroller_policy_set(list, ELM_SCROLLER_POLICY_OFF, ELM_SCROLLER_POLICY_AUTO);
+// Enable bounce effect when the list reaches the upper and lower limits
+elm_scroller_bounce_set(list, EINA_FALSE, EINA_TRUE);
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">elm_list_multi_select_set()</span> function can be called to enable multi-selection of items. Each time an item is clicked, the state changes to <span style="font-family: Courier New,Courier,monospace">selected</span>.</p>
+
+<pre class="prettyprint">
+Evas_Object *list;
+
+// Activate multi selection
+elm_list_multi_select_set(list, EINA_FALSE);
+</pre>
+
+<h3>Adding Item to the List</h3>
+
+ <p>Items are added with <span style="font-family: Courier New,Courier,monospace">elm_list_item_append()</span> or <span style="font-family: Courier New,Courier,monospace">elm_list_item_prepend()</span>. Here an example of adding ten items with text and one icon on the front: The last two arguments are the callback function when the created item is clicked and the data passed to the callback function.</p>
+
+<pre class="prettyprint">
+Evas_Object *list;
+int i;
+
+// This function is called when the list item is selected
+static void _selected_item_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ Elm_Object_Item *list_it = elm_list_selected_item_get(obj);
+ Eina_Bool selected = elm_list_item_selected_get(list_it);
+ dlog_print(DLOG_INFO, LOG_TAG, "item is %s\n", selected? "selected": "unselected");
+}
+
+for (i = 0; i < 10; i++)
+{
+ Evas_Object *ic;
+ char tmp[8];
+ snprintf(tmp, sizeof(tmp), "Item %02d", i);
+ // Create an icon
+ ic = elm_icon_add(win);
+ // Set the file to the icon file
+ elm_image_file_set(ic, "path/to/file", NULL);
+ // Add item to the list
+ elm_list_item_append(list, tmp, ic, NULL, _selected_item_cb, NULL);
+}
+
+</pre>
+
+<h3>Changing the Text or Icon of an Item</h3>
+
+<p>If you want to change the state of an item, you can do it by using all the functions relative to <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span>. Each item of the list contains two instances of an <span style="font-family: Courier New,Courier,monospace">evas_object</span>. Give those as the third and the fourth arguments when you append or prepend the item in the list. The <span style="font-family: Courier New,Courier,monospace">evas_object</span> instances are changed with <span style="font-family: Courier New,Courier,monospace">elm_object_item_part_content_set</span>. The first object is referenced as the <span style="font-family: Courier New,Courier,monospace">start</span> object in the theme, whereas the second one is referenced as the <span style="font-family: Courier New,Courier,monospace">end</span> object. Give these names when you use the <span style="font-family: Courier New,Courier,monospace">elm_object_item_part_content_set</span>. The label of the item is changed by using <span style="font-family: Courier New,Courier,monospace">elm_object_item_text_set</span>.</p>
+
+<pre class="prettyprint">
+Evas_Object *list;
+Eina_List *l;
+Elm_Object_Item *it;
+
+// Retrieve the current selected item
+it = elm_list_selected_item_get(list);
+if (!it)
+ return;
+
+ic = elm_icon_add(win);
+// Set the file to the icon file
+elm_image_file_set(ic, "path/to/file", NULL);
+// Change the first icon
+elm_object_item_part_content_set(it, "start", ic);
+// Change the second icon
+elm_object_item_part_content_set(it, "end", ic);
+// Change the label
+elm_object_item_text_set(it, "I've been selected !");
+</pre>
+
+<h3>Retrieving Selected Items</h3>
+
+ <p>The list of the currently selected items is retrieved with <span style="font-family: Courier New,Courier,monospace">elm_list_selected_items_get()</span>. If the multiselect mode is false, you can retrieve the only selected item with <span style="font-family: Courier New,Courier,monospace">elm_list_selected_item_get()</span>. For example, this is how to unselect all previously selected items.</p>
+
+<pre class="prettyprint">
+Evas_Object *list; Eina_List *l;
+Eina_List *selected_items;
+// List of Elm_Object_Item
+Elm_Object_Item *it;
+
+selected_items = elm_list_selected_items_get(list);
+EINA_LIST_FOREACH(selected_items, l, it)
+ elm_list_item_selected_set(it, EINA_FALSE);
+</pre>
+
+<h3>List Item Operations</h3>
+
+ <p>To find out if an item is selected, call <span style="font-family: Courier New,Courier,monospace">elm_list_item_selected_get</span>. This function returns <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> if the item is selected, otherwise <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span>.</p>
+
+ <p>Elementary list provides two functions for sliding a list to a specific item. <span style="font-family: Courier New,Courier,monospace">elm_list_item_show</span> shows the item passed as an argument, whereas <span style="font-family: Courier New,Courier,monospace">elm_list_item_bring_in</span> shows the item, but only after animating the slide.</p>
+
+ <p>You can go to the item immediately preceding a specific item with the function <span style="font-family: Courier New,Courier,monospace">elm_list_item_prev</span>, or to the one immediately following a specific item with the function <span style="font-family: Courier New,Courier,monospace">elm_list_item_next</span>.</p>
+
+ <p>The following example shows selecting the item immediately following the currently selected one, unselecting it, selecting the next one and bringing it to the screen. </p>
+
+<pre class="prettyprint">
+Evas_Object *list;
+Elm_Object_Item *current, *next;
+current = elm_list_selected_item_get(list);
+elm_list_item_selected_set(current, EINA_FALSE);
+next = elm_list_item_next(current);
+elm_list_item_selected_set(next, EINA_TRUE);
+elm_list_item_bring_in(next);
+</pre>
+
+<h3>Using List Callbacks</h3>
+
+ <p>The list emits the following signals: </p>
+ <ul>
+ <li><span style="font-family: Courier New,Courier,monospace">activated</span>: The user double-clicks or presses (enter | return | spacebar) on an item. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter of the callback function contains a pointer to the item activated.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">clicked,double</span>: The user double-clicks an item. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter of the callback function contains a pointer to the item activated.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">selected</span>: The user selects an item. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter of the callback function contains a pointer to the item activated.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">unselected</span>: The user unselects an item. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter of the callback function contains a pointer to the item activated.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">longpressed</span>: The user long-presses an item. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter of the callback function contains a pointer to the item activated.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">edge,top</span>: The list is scrolled to the top edge.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">edge,bottom</span>: The list is scrolled to the bottom edge.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">edge,left</span>: The list is scrolled to the left edge.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">edge,right</span>: The list is scrolled to the right edge.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">highlighted</span>: The user highlights an item on the list. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter of the callback function contains a pointer to the item activated.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">unhighlighted</span>: The user unhighlights an item in the list. The <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter of the callback function contains a pointer to the item activated.</li>
+ </ul>
+
+<p>You can register to the <span style="font-family: Courier New,Courier,monospace">clicked,double</span> signal with the following code. Note that the currently double-clicked item can be retrieved using the <span style="font-family: Courier New,Courier,monospace">event_info</span> pointer. This code registers to the <span style="font-family: Courier New,Courier,monospace">double,clicked</span> signal and unselects the item that has been double-clicked.</p>
+
+<pre class="prettyprint">
+{
+ Evas_Object *list;
+
+ evas_object_smart_callback_add(list, "clicked,double", double_clicked_cb, data);
+}
+
+// Callback function for the "clicked" signal
+// This callback is called when the button is clicked by the user
+void double_clicked_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ elm_Object_Item *it = event_info;
+ elm_list_selected_item_set(it, EINA_FALSE);
+}
+</pre>
+
+
+<h2 id="map" name="map">Map</h2>
+
+<p class="figure">Figure: Map hierarchy</p>
+<p align="center"> <img alt="Map hierarchy" src="../../images/map_tree.png" /> </p>
+
+<p>The map component displays a geographic map. The default map data are provided by the OpenStreetMap project <a href="http://www.openstreetmap.org/" target="_blank">(http://www.openstreetmap.org/)</a>. Custom providers can also be added.</p>
+
+<p>This component supports:</p>
+ <ul>
+ <li>Zooming</li>
+ <li>Scrolling</li>
+ <li>Markers with content to be displayed when the user clicks over them</li>
+ <li>Group of markers</li>
+ <li>Routes</li>
+ </ul>
+
+<p>The map component implements the scroller interface so that all the functions that work with the scroller component also work with maps.</p>
+
+<h3>Adding a Map Component</h3>
+
+<p>Once created with the <span style="font-family: Courier New,Courier,monospace">elm_map_add()</span> function, zoom level x12 can be set.</p>
+
+<pre class="prettyprint">
+Evas_Object *map, *parent;
+
+map = elm_map_add(parent);
+elm_map_zoom_mode_set(map, ELM_MAP_ZOOM_MODE_MANUAL);
+elm_map_zoom_set(map, 12);
+</pre>
+
+<p>Here the zoom mode is set to manual, but it can also be set to the <span style="font-family: Courier New,Courier,monospace">ELM_MAP_ZOOM_MODE_AUTO_FIT</span> mode and the <span style="font-family: Courier New,Courier,monospace">ELM_MAP_ZOOM_MODE_AUTO_FILL</span> mode. In that case however, the <span style="font-family: Courier New,Courier,monospace">elm_map_zoom_set()</span> function cannot be used.</p>
+
+<h3>Playing with the Map</h3>
+
+<p>If you have coordinates of a specific area (2 2 N, 48 8 E), it can be shown on the map.</p>
+<pre class="prettyprint">
+elm_map_region_show(map, 2.2, 48.8);
+</pre>
+
+<p>This shows the desired coordinates. The location can also be shown with a bring-in animation.</p>
+<pre class="prettyprint">
+elm_map_region_bring_in(map, 2.2, 48.8);
+</pre>
+
+<p>The map is rotated 90 degrees around the current position.</p>
+<pre class="prettyprint">
+elm_map_rotate_set(map, 90, 2.2, 48.8);
+</pre>
+
+<h3>Drawing Overlays</h3>
+
+<p>Overlays are markers that can be placed anywhere on the map. They can represent any object you want to put on the map.</p>
+
+<h4>Creating an Overlay Class</h4>
+
+<p>Overlay classes can be created if several objects are of the same type. For example, you can create a forest overlay class to represent the forests visible on the map. To do this, set the minimum zoom level at which this class is visible. The forest class overlay is visible when the zoom level is superior to eight.</p>
+
+<p>Set an icon ("Home" icon) to the forest class. This icon is displayed in place of the forest class on the map.</p>
+<pre class="prettyprint">
+Evas_Object *icon;
+Elm_Map_Overlay *forest_class = elm_map_overlay_class_add(map);
+
+// Set min zoom level at which class is displayed
+elm_map_overlay_displayed_zoom_min_set(forest_class, 8);
+
+// Create a Home icon object and set it to the forest class
+icon = elm_icon_add(map);
+elm_icon_standard_set(icon, "home");
+elm_map_overlay_icon_set(forest_class, icon);
+</pre>
+
+<h4>Adding Overlays to a Class</h4>
+
+<p>After creating a forest class, it is possible to add overlay objects to it. Here an overlay for the Meudon forest is created. The data is linked to the overlay with the <span style="font-family: Courier New,Courier,monospace">elm_map_overlay_data_set()</span> function. Set the name of the forest in the data. The icon can be set to the overlay with the <span style="font-family: Courier New,Courier,monospace">elm_map_overlay_icon_set()</span> function.</p>
+
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">Do not use the same icon object for two different overlays. Create a new icon object each time you need one.</td>
+ </tr>
+ </tbody>
+ </table>
+
+<pre class="prettyprint">
+Elm_Map_Overlay *ovl;
+const char* data_meudon = "Meudon forest";
+const char* data_fausses = "Fausse forest";
+
+// Add an overlay
+ovl = elm_map_overlay_add(map, 2.20718, 48.79759);
+icon = elm_icon_add(map);
+elm_icon_standard_set(icon, "stop");
+elm_map_overlay_icon_set(ovl, icon);
+elm_map_overlay_data_set(ovl, &data_meudon);
+
+// Add the new ovl object to the forest class
+elm_map_overlay_class_append(forest_class, ovl);
+
+// Add another overlay next to the first one
+ovl = elm_map_overlay_add(map, 2.1699, 48.8189);
+icon = elm_icon_add(map);
+elm_icon_standard_set(icon, "stop");
+elm_map_overlay_icon_set(ovl, icon);
+elm_map_overlay_data_set(ovl, &data_fausses);
+elm_map_overlay_class_append(forest_class, ovl);
+</pre>
+
+<p>If you add another overlay to the forest class, the two overlays can be grouped under the forest class icon on certain zoom level conditions. You can define on which zoom level items are grouped.</p>
+<pre class="prettyprint">
+elm_map_overlay_class_zoom_max_set(forest_class, 8);
+</pre>
+
+<p>In this case, overlay members of the forest class are grouped when the map is displayed at less than zoom level eight.</p>
+
+<h4>Creating Bubbles Following Overlays</h4>
+
+<p>The following example shows how to set a content in a bubble following an overlay.</p>
+
+<pre class="prettyprint">
+// Add an overlay bubble object
+Elm_Map_Overlay *bubble = elm_map_overlay_bubble_add(map);
+
+// Set it to follow a specific overlay (the last created one here)
+elm_map_overlay_bubble_follow(bubble, ovl);
+</pre>
+
+<p>Once following an overlay, the bubble appears, moves or hides following the parent overlay's behavior.</p>
+
+<p>Content is added to the bubble with the <span style="font-family: Courier New,Courier,monospace">elm_map_overlay_bubble_content_append()</span> function.</p>
+
+<h3>Adding Other Overlays</h3>
+
+<p>You can draw a circle on the map with coordinates and a radius size.</p>
+<pre class="prettyprint">
+Elm_Map_Overlay *circle = elm_map_overlay_circle_add(map, 2.2, 48.8, 0.02);
+</pre>
+
+<p>You can also add a scale at the 200x0 coordinate (in pixels).</p>
+<pre class="prettyprint">
+Elm_Map_Overlay *scale = elm_map_overlay_scale_add(map, 200, 0);
+</pre>
+
+<p>You can also draw a line, a polygon, or a route. For a full description of these functions, see the <a href="../../../../org.tizen.native.mobile.apireference/group__Map.html">Map API</a>.</p>
+
+<h3>Calculating Routes</h3>
+
+<p>A route between a starting point and an ending point is calculated with the <span style="font-family: Courier New,Courier,monospace">elm_map_route_add()</span> call. The type of transport and the routing calculation method can be provided so as to have the desired result.</p>
+
+<p>The following example shows how to get a route calculation between the first and the second overlay. It is configured to use the bicycle, and to find the fastest route possible.</p>
+
+<pre class="prettyprint">
+Elm_Map_Route *route = elm_map_route_add(map,
+ ELM_MAP_ROUTE_TYPE_BICYCLE,
+ ELM_MAP_ROUTE_METHOD_FASTEST,
+ 2.20718, 48.79759,
+ 2.1699, 48.8189,
+ NULL, NULL);
+
+// Add a callback to when the route has been calculated and loaded
+evas_object_smart_callback_add(map, "route,loaded", _route_loaded_cb, route);
+</pre>
+
+<p>Once the route is calculated, create a route overlay object and change its color. In this example, the <span style="font-family: Courier New,Courier,monospace">route,loaded</span> callback is used.</p>
+<pre class="prettyprint">
+static void
+_route_loaded_cb(void *data, Evas_Object *obj, void *ev)
+{
+ Elm_Map_Route *route = data;
+
+ Elm_Map_Overlay *route_ovl = elm_map_overlay_route_add(obj, route);
+ elm_map_overlay_color_set(route_ovl, 0, 255, 0, 255);
+}
+</pre>
+
+<h3>Using Map Callbacks</h3>
+
+<p>The map component emits the following callbacks:</p>
+<ul>
+ <li><span style="font-family: Courier New,Courier,monospace">clicked</span>: The user has clicked the map without dragging around.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">clicked,double</span>: The user has double-clicked the map.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">press</span>: The user has pressed down on the map.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">longpressed</span>: The user has pressed down on the map for a long time without dragging around.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">scroll</span>: The content is scrolled (moved).</li>
+ <li><span style="font-family: Courier New,Courier,monospace">scroll,drag,start</span>: Dragging the contents around starts.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">scroll,drag,stop</span>: Dragging the contents around stops.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">scroll,anim,start</span>: Scrolling animation starts.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">scroll,anim,stop</span>: Scrolling animation stops.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">zoom,start</span>: Zoom animation starts.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">zoom,stop</span>: Zoom animation stops.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">zoom,change</span>: The zoom is changed when using an auto zoom mode.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">tile,load</span>: A map tile image load begins.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">tile,loaded</span>: A map tile image load ends.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">tile,loaded,fail</span>: A map tile image load fails.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">route,load</span>: Route request begins.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">route,loaded</span>: Route request ends.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">route,loaded,fail</span>: Route request fails.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">name,load</span>: Name request begins.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">name,loaded</span>: Name request ends.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">name,loaded,fail</span>: Name request fails.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">overlay,clicked</span>: An overlay is clicked.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">loaded</span>: The map is loaded.</li>
+</ul>
+
+
+ <h2 id="notify" name="notify">Notify</h2>
+
+ <p class="figure">Figure: Notify hierarchy</p>
+<p align="center"> <img alt="Notify hierarchy" src="../../images/notify_tree.png" /> </p>
+
+ <p>The notify component displays a container in a particular region of the parent object. It can receive some content, and can be automatically hidden after a certain amount of time.</p>
+
+<h3>Adding a Notify Component</h3>
+
+<p>The following example shows how to create a notify object.</p>
+<pre class="prettyprint">
+Evas_Object *notify, *parent;
+notify = elm_notify_add(parent);
+</pre>
+
+<h3>Configuring the Notify Component</h3>
+
+<p>Create a label and add it to the notify object.</p>
+<pre class="prettyprint">
+Evas_Object *content;
+
+// Create the label and set some text to it
+content = elm_label_add(parent);
+
+elm_object_text_set(content, "A label text");
+evas_object_show(content);
+
+// Add the label object to the notify component
+elm_object_content_set(notify, content);
+</pre>
+
+<p>In the following example the notify object is shown on the bottom left corner of the parent object.</p>
+<pre class="prettyprint">
+elm_notify_align_set(notify, 1.0, 1.0);
+evas_object_show(notify);
+</pre>
+
+<p>Set a timeout interval, after which the notify component is hidden. In the following example the timeout interval is five seconds.</p>
+<pre class="prettyprint">
+elm_notify_timeout_set(notify, 5.0);
+</pre>
+
+<h3>Using Notify Callbacks</h3>
+
+<p>The notify component emits the following signals:</p>
+ <ul>
+ <li><span style="font-family: Courier New,Courier,monospace">timeout</span>: The timeout count ends and the notify component is hidden</li>
+ <li><span style="font-family: Courier New,Courier,monospace">block,clicked</span>: The user clicks outside of the notify component</li>
+ </ul>
+
+<p>For both these signals <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+
+<p>The following example shows how to register a callback on the <span style="font-family: Courier New,Courier,monospace">timeout</span> signal.</p>
+
+<pre class="prettyprint">
+{
+ evas_object_smart_callback_add(notify, "timeout", timeout_cb, data);
+}
+
+// Callback function for the "timeout" signal
+// The timeout expires and the notify object is hidden
+
+void timeout_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ dlog_print(DLOG_INFO, LOG_TAG, "Notify is hidden\n");
+}
+</pre>
+
+ <h2 id="plug" name="plug">Plug</h2>
+
+ <p class="figure">Figure: Plug hierarchy</p>
+<p align="center"> <img alt="Plug hierarchy" src="../../images/plug_tree.png" /> </p>
+
+<p>The plug component shows an <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> created by an other process. It can be used anywhere the same way as any other elementary UI component.</p>
+
+<h3 id="add">Adding a Plug Component</h3>
+
+<p>The following example shows how to create a plug.</p>
+<pre class="prettyprint">
+Evas_Object *plug, *parent;
+plug = elm_plug_add(parent);
+</pre>
+
+<h3 id="use">Using the Plug</h3>
+
+<p>The socket image provides the service where to connect the plug object with the <span style="font-family: Courier New,Courier,monospace">elm_plug_connect()</span> function. In this process, use the service name and number set by the socket you want to connect to.</p>
+
+<p>As an example, connect to a service named <span style="font-family: Courier New,Courier,monospace">plug_test</span> on the number 0.</p>
+
+<pre class="prettyprint">
+elm_plug_connect(plug, "plug_test", 0, EINA_FALSE);
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> corresponding to the distant image is retrieved with the <span style="font-family: Courier New,Courier,monospace">elm_plug_image_object_get()</span> function.</p>
+
+<pre class="prettyprint">
+Evas_Object *plug_img = elm_plug_image_object_get(plug);
+</pre>
+
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">The socket to connect to must be started with the <span style="font-family: Courier New,Courier,monospace">elm_win_socket_listen()</span> function in the other process on the remote window object (it is called <span style="font-family: Courier New,Courier,monospace">remote_win</span> here).</td>
+ </tr>
+ </tbody>
+ </table>
+
+<pre class="prettyprint">
+// Create a remote window in the other process
+Elm_Win *remote_win = elm_win_add(NULL, "Window Socket",
+ ELM_WIN_SOCKET_IMAGE);
+// Create a socket named "plug_test" and listen to it
+elm_win_socket_listen(remote_win, "plug_test", 0, EINA_FALSE);
+</pre>
+
+ <h2 id="popup" name="popup">Popup</h2>
+
+<p class="figure">Figure: Popup component</p>
+<p align="center"><img alt="Popup component" src="../../images/popup_wn.png" /></p>
+
+<p class="figure">Figure: Popup hierarchy</p>
+<p align="center"><img alt="Popup hierarchy" src="../../images/popup_tree.png" /></p>
+
+
+<p>The popup component shows a popup area that can contain:</p>
+<ul>
+<li>a title area (optional)</li>
+<li>a content area</li>
+<li>an action area (optional)</li>
+</ul>
+
+<p>The optional title area can contain an icon and text, the action area can contain up to three buttons.</p>
+
+<h3>Adding a Popup Component</h3>
+
+<p>The following example shows how to create a popup component.</p>
+<pre class="prettyprint">
+Evas_Object *popup, *parent;
+
+// Create a popup
+popup = elm_popup_add(parent);
+</pre>
+
+<h3>Using Popup Styles</h3>
+
+<p>The following item styles are available for wearable core controls:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">popup</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">toast</span></li>
+</ul>
+<p>The following item styles are available for Gear O:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">circle</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">toast/circle</span></li>
+</ul>
+<p>The following layout styles are available for Gear O:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">content/circle</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">content/circle/buttons1</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">content/circle/buttons2</span></li>
+</ul>
+
+<p>The following example sets the style of the popup to <span style="font-family: Courier New,Courier,monospace">toast</span>.</p>
+<pre class="prettyprint">
+elm_object_style_set(popup, "toast");
+</pre>
+
+
+<h3>Setting the Popup Areas in Wearable Core Controls</h3>
+<p>Configure the title area. Set the title text to <span style="font-family: Courier New,Courier,monospace">Test popup</span> using the partname <span style="font-family: Courier New,Courier,monospace">title,text</span>.</p>
+
+<pre class="prettyprint">
+elm_object_part_text_set(popup, "title,text", "Test popup");
+</pre>
+<p>Set the content of the popup. The content can be simple text.</p>
+<pre class="prettyprint">
+elm_object_text_set(popup, "simple text");
+</pre>
+<p>The content can also be an Evas object.</p>
+<pre class="prettyprint">
+Evas_Object *content;
+
+elm_object_content_set(popup, content);
+</pre>
+<p>Set the buttons of the action area by creating an <strong>OK</strong> button and a <strong>Cancel</strong> button.</p>
+<pre class="prettyprint">
+Evas_Object *button1, *button2;
+
+// Create the two buttons
+button1 = elm_button_add(popup);
+elm_object_style_set(button1, "popup");
+evas_object_size_hint_weight_set(button1, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+elm_object_text_set(button1, "Cancel");
+
+button2 = elm_button_add(popup)
+elm_object_style_set(button2, "popup");
+evas_object_size_hint_weight_set(button2, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+elm_object_text_set(button2, "OK");
+
+evas_object_show(popup);
+
+// Set the buttons to the action area
+elm_object_part_content_set(popup, "button1", button1);
+elm_object_part_content_set(popup, "button2", button2);
+</pre>
+
+<h3>Setting the Popup Areas in Gear O</h3>
+<p>Set the circle style and the layout of the popup.</p>
+<pre class="prettyprint">
+// Setting the style
+elm_object_style_set(popup, "circle");
+
+// Setting the layout
+layout = elm_layout_add(popup);
+elm_layout_theme_set(layout, "layout", "popup", "content/circle/buttons2");
+</pre>
+
+<p>To configure the title area, set the title text to <span style="font-family: Courier New,Courier,monospace">Test popup</span> using the partname <span style="font-family: Courier New,Courier,monospace">elm.text.title</span>.</p>
+<pre class="prettyprint">
+// Setting the title text
+elm_object_part_text_set(layout, "elm.text.title", "Text popup");
+</pre>
+
+<p>Set the content of the popup. The content can be simple text.</p>
+<pre class="prettyprint">elm_object_part_text_set(layout, "elm.text.content", "Test popup");
+</pre>
+
+<p>The content of the popup can also be an Evas object.</p>
+<pre class="prettyprint">
+Evas_Object *content;
+
+elm_object_content_set(layout, content);
+</pre>
+<p>Set the popup content.</p>
+<pre class="prettyprint">
+elm_object_content_set(popup, layout);
+</pre>
+
+<p>Set the buttons of the action area by creating an <strong>OK</strong> button, a <strong>Cancel</strong> button, and a <strong>Help</strong> button.</p>
+
+<pre class="prettyprint">
+Evas_Object *button1, *button2, *icon;
+
+// Create the 2 buttons
+
+button1 = elm_button_add(popup);
+elm_object_style_set(button1, "popup/circle/left");
+icon = elm_image_add(button1);
+elm_image_file_set(icon, ICON_DIR"/b_option_list_icon_share.png", NULL);
+evas_object_size_hint_weight_set(icon, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+elm_object_part_content_set(button1, "elm.swallow.content", icon);
+evas_object_show(icon);
+
+button2 = elm_button_add(popup);
+elm_object_style_set(button2, "popup/circle/right");
+icon = elm_image_add(button2);
+elm_image_file_set(icon, ICON_DIR"/b_option_list_icon_delete.png", NULL);
+evas_object_size_hint_weight_set(icon, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+elm_object_part_content_set(button2, "elm.swallow.content", icon);
+evas_object_show(icon);
+
+// Set the buttons to the action area
+elm_object_part_content_set(popup, "button1", button1);
+elm_object_part_content_set(popup, "button2", button2);
+
+</pre>
+
+<h3>Using Popup Callbacks</h3>
+<p>The popup emits the following signals:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">timeout</span>: The popup is closed as a result of timeout.</li>
+<li><span style="font-family: Courier New,Courier,monospace">block,clicked</span>: The user clicks on the Blocked Event area.</li>
+</ul>
+
+<p><span style="font-family: Courier New,Courier,monospace">elm_popup_timeout_set()</span> is used to hide the popup after a certain time. In the following example the timeout is set to five seconds.</p>
+<pre class="prettyprint">elm_popup_timeout_set(popup, 5.0);</pre>
+
+<p>When the timeout expires, the <span style="font-family: Courier New,Courier,monospace">timeout</span> signal is sent to the user.</p>
+<pre class="prettyprint">
+{
+ evas_object_smart_callback_add(popup, "timeout", _timeout_cb, data);
+}
+
+static void
+_timeout_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ dlog_print(DLOG_INFO, LOG_TAG, "Timeout \n");
+}
+</pre>
+
+<p>The visible region of the popup is surrounded by a translucent region called <strong>Blocked Event</strong> area. By clicking on this area, the signal <span style="font-family: Courier New,Courier,monospace">block,clicked</span> is sent to the application.</p>
+
+
+ <h2 id="progressbar" name="progressbar">Progressbar</h2>
+
+ <p class="figure">Figure: Progressbar component</p>
+<p align="center"><img alt="Progressbar component" src="../../images/progressbar_wn.png" /></p>
+
+ <p class="figure">Figure: Progressbar hierarchy</p>
+<p align="center"><img alt="Progressbar hierarchy" src="../../images/progressbar_tree.png" /></p>
+
+
+ <h3>Adding a Progressbar Component</h3>
+
+<p>This UI component is used to display the progress status of a given job. It inherits from the layout component, so all function concerning the layout component is used on the progressbar component.</p>
+<p>The following example shows how to create a progressbar component.</p>
+<pre class="prettyprint">
+Evas_Object *pb = elm_progressbar_add(win);
+</pre>
+
+<h3>Using the Progressbar Styles</h3>
+
+<p>The progressbar has several styles for wearable core controls:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">default</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">pending_list</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">process</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">process/groupindex</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">process/popup/small</span></li>
+</ul>
+<p>The progressbar has several styles for Gear O:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">process</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">process/small</span></li>
+</ul>
+
+<p>Set the style of the progressbar to <span style="font-family: Courier New,Courier,monospace">pending_list</span>.</p>
+
+<pre class="prettyprint">
+elm_object_style_set(pb, "pending_list");
+</pre>
+
+<h3>Configuring the Progressbar for Wearable Core Control</h3>
+
+<p>The progressbar pulse mode is activated to make the progressbar loop infinitely between the start and end position.</p>
+<pre class="prettyprint">elm_progressbar_pulse_set(pb, EINA_TRUE);
+elm_progressbar_pulse(pb, EINA_TRUE);
+</pre>
+
+<p>The progressbar can be inverted. In that mode, the values are inverted so that the high values are on the left and the low values on the right.</p>
+<pre class="prettyprint">elm_progressbar_inverted_set(pb, EINA_TRUE);</pre>
+
+<p>The progressbar emits the <span style="font-family: Courier New,Courier,monospace">changed</span> signal when the progress value changes. The value is changed with the <span style="font-family: Courier New,Courier,monospace">elm_progressbar_value_set()</span> function. Here the <span style="font-family: Courier New,Courier,monospace">pb</span> progress value is set to 20%.</p>
+<pre class="prettyprint">elm_progressbar_value_set(pb, 0.2);</pre>
+
+<p>It is possible to read the current value.</p>
+<pre class="prettyprint">double value = elm_progressbar_value_get(pb);</pre>
+
+<h3>Configuring the Progressbar for Gear O</h3>
+<p>The progressbar emits the <span style="font-family: Courier New,Courier,monospace">changed</span> signal when the progress value changes. The value is changed with the <span style="font-family: Courier New,Courier,monospace">elm_progressbar_value_set()</span> function. Here the <span style="font-family: Courier New,Courier,monospace">pb</span> progress value is set to 20%.</p>
+
+<pre class="prettyprint">
+elm_progressbar_value_set(pb, 0.2);
+</pre>
+<p>The current value can be read.</p>
+<pre class="prettyprint">
+double value = elm_progressbar_value_get(pb);
+</pre>
+
+
+<h3>Using the Progressbar Callbacks</h3>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">changed</span> signal is the only signal specifically emitted by the progressbar component.</p>
+<p>The following example shows how to register a callback on this signal.</p>
+
+<pre class="prettyprint">
+{
+ evas_object_smart_callback_add(pb, "changed", changed_cb, data);
+}
+
+// Callback function for the "changed" signal
+// This callback is called when the progressbar value changes
+void changed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ dlog_print(DLOG_INFO, LOG_TAG, "The value has changed\n");
+}
+</pre>
+
+
+ <h2 id="radio" name="radio">Radio</h2>
+
+<p class="figure">Figure: Radio component</p>
+<p align="center"><img alt="Radio component" src="../../images/radio_wn.png" /></p>
+
+<p class="figure">Figure: Radio hierarchy</p>
+<p align="center"><img alt="Radio hierarchy" src="../../images/radio_tree.png" /></p>
+
+<p>This UI component displays one or more options, but the user can only select one of them. It is composed of an indicator (selected or unselected). Even though it is usually grouped with two or more other radio objects, it can also be used alone.
+</p>
+<p>The radio component inherits from the layout component. All the layout functions can be used with radio objects.</p>
+
+<h3>Adding a Radio Component</h3>
+
+<p>Create a radio component.</p>
+<pre class="prettyprint">
+Evas_Object *radio, *parent;
+
+// Create a radio
+radio = elm_radio_add(parent);
+</pre>
+
+<h3>Changing the Radio Value</h3>
+
+<p>The user can select one of a set of values with the radio component. Each radio object from a group of radio objects represents an integer value. Here the value 1 is set to the new radio object.</p>
+<pre class="prettyprint">
+elm_radio_state_value_set(radio, 1);
+</pre>
+
+<h3>Managing the Radio Groups</h3>
+
+<p>The following example shows how to create a group of radio objects with at least two radio components.</p>
+
+<pre class="prettyprint">
+// Create another radio object
+Evas_Object *radio2 = elm_radio_add(parent);
+elm_radio_state_value_set(radio2, 2);
+
+// Create a group composed of radio and radio2
+Evas_Object *group = radio;
+elm_radio_group_add(radio2, group);
+</pre>
+
+<p>Now that a group composed of two radio objects has been created, you can choose which one is selected. In this example radio2 is selected.</p>
+
+<pre class="prettyprint">elm_radio_value_set(group, 2);</pre>
+
+<p>You can use <span style="font-family: Courier New,Courier,monospace">elm_radio_value_get()</span> to see the currently selected radio of the group.</p>
+
+<h3>Using the Radio Callbacks</h3>
+
+<p>This UI component emits the following signals:</p>
+<ul><li><span style="font-family: Courier New,Courier,monospace">changed</span>: The state of a radio is modified in a group of radio objects.</li></ul>
+
+<p>The following example shows how to register a callback on this signal.</p>
+<pre class="prettyprint">
+{
+ evas_object_smart_callback_add(radio, "changed", changed_cb, data);
+}
+
+// Callback function for the "changed" signal
+// This callback is called when the radio value changes
+void changed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ dlog_print(DLOG_INFO, LOG_TAG, "The value has changed\n");
+}
+</pre>
+
+ <h3>Using the Radio Callbacks with Gear O</h3>
+
+<p>This UI component emits the following signals:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">changed</span>: The user changes the slider value.</li>
+<li><span style="font-family: Courier New,Courier,monospace">clicked</span>: Radio was clicked.</li>
+</ul>
+
+<p>The following example shows how to register a callback on this signal.</p>
+<pre class="prettyprint">
+{
+ evas_object_smart_callback_add(radio, "clicked", clicked_cb, data);
+}
+
+// Callback function for the "changed" signal
+// This callback is called when the radio value changes
+void changed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ dlog_print(DLOG_INFO, LOG_TAG, "This radio was clicked\n");
+}
+</pre>
+
+
+ <h2 id="slider" name="slider">Slider for the Wearable Core</h2>
+
+<p class="figure">Figure: Slider component</p>
+<p align="center"><img alt="Slider component" src="../../images/slider_wn.png" /></p>
+
+<p class="figure">Figure: Slider hierarchy</p>
+<p align="center"><img alt="Slider hierarchy" src="../../images/slider_tree.png" /></p>
+
+<p> The slider component is a draggable bar that is used to select a value within a certain range.</p>
+
+<h3>Adding a Slider Component</h3>
+
+<p>The following example shows how to create a slider object.</p>
+<pre class="prettyprint">
+Evas_Object *slider, *parent;
+
+slider = elm_slider_add(parent);
+</pre>
+
+<h3>Using the Slider Styles</h3>
+
+<p>A slider has the following styles:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">default</span></li>
+</ul>
+
+<h3>Configuring the Slider</h3>
+
+<p>It can contain icons (<span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span> partname), a label, a unit label and an indicator label.</p>
+<pre class="prettyprint">
+Evas_Object *icon1, *icon2;
+
+// Set the icons
+elm_object_part_content_set(slider, "elm.swallow.icon", icon1);
+
+// Set the unit format
+elm_slider_unit_format_set(slider, "%1.2f meters");
+</pre>
+
+<p>Before using the slider, its minimum and maximum values are set with <span style="font-family: Courier New,Courier,monospace">elm_slider_min_max_set()</span>. The current value is set with (<span style="font-family: Courier New,Courier,monospace">elm_slider_value_set()</span>). The following example sets the minimum value to 0, the maximum value to 100, and the current value to 50.</p>
+<pre class="prettyprint">
+elm_slider_min_max_set(slider, 0.0, 100.0);
+elm_slider_value_set(slider, 50.0);
+</pre>
+
+<p>The span of the slider represents its length horizontally. It is set with <span style="font-family: Courier New,Courier,monospace">elm_slider_span_size_set()</span> and is scaled by the object or applications scaling factor.</p>
+<p>You can retrieve the current value of the slider anytime.</p>
+<pre class="prettyprint">
+double value = elm_slider_value_get(slider);
+</pre>
+
+<p>By default, the slider indicator becomes bigger when the user drags it. This can be disabled if you want the slider indicator to keep its default size. The following example sets the state of the indicator enlargement and then inverts the behavior.</p>
+<pre class="prettyprint">
+// Get the current state of the indicator
+Eina_Bool enlarge = elm_slider_indicator_show_get(slider);
+
+// Invert the behavior
+elm_slider_indicator_show_set(slider, !enlarge);
+</pre>
+
+<h3>Using the Slider Callbacks</h3>
+
+<p>This UI component emits the following signals:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">changed</span>: The user changes the slider value.</li>
+<li><span style="font-family: Courier New,Courier,monospace">slider,drag,start</span>: Dragging the slider indicator around starts.</li>
+<li><span style="font-family: Courier New,Courier,monospace">slider,drag,stop</span>: Dragging the slider indicator around stops.</li>
+<li><span style="font-family: Courier New,Courier,monospace">delay,changed</span>: A short time after the user changes the value. This is called only when the user stops dragging for a very short period or when releases the finger or mouse, so that it avoids possibly expensive reactions to the value change.</li>
+</ul>
+
+<p>For all these signals, <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+<p>The following example shows how to register a callback on the <span style="font-family: Courier New,Courier,monospace">changed</span> signal.</p>
+<pre class="prettyprint">
+{
+ evas_object_smart_callback_add(slider, "changed", changed_cb, data);
+}
+
+// Callback function for the "changed" signal
+// This callback is called when the slider value changes
+void changed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ dlog_print(DLOG_INFO, LOG_TAG, "The slider has changed\n");
+}
+</pre>
+
+
+
+ <h2 id="win" name="win">Win</h2>
+
+ <p class="figure">Figure: Win hierarchy</p>
+<p align="center"><img alt="Win hierarchy" src="../../images/win_tree.png" /></p>
+
+
+<p>The window component is the root UI component that is often used in an application. It allows the developer create content in it, and it is handled by the window manager.</p>
+<p>The window component is created with the <span style="font-family: Courier New,Courier,monospace">elm_win_add()</span> or <span style="font-family: Courier New,Courier,monospace">elm_win_util_standard_add()</span> function. The content can be added in the window with <span style="font-family: Courier New,Courier,monospace">elm_win_resize_object_add()</span> so that a window resize also resizes the content inside.</p>
+
+<h3>Adding a Window Component</h3>
+
+<p>Create a new window and change the title.</p>
+<pre class="prettyprint">
+Evas_Object *window;
+
+// Create a window
+window = elm_win_add(NULL, "main", ELM_WIN_BASIC);
+
+// Change the window title
+elm_win_title_set(window, "Example Window");
+</pre>
+
+<p>The first element of <span style="font-family: Courier New,Courier,monospace">elm_win_add()</span> is the parent window. For example, for a dialog you want to have the main window as the parent. Here, it is <span style="font-family: Courier New,Courier,monospace">NULL</span>, meaning there is no parent. <span style="font-family: Courier New,Courier,monospace">main</span> is the name of the window used by the window manager for identifying the window uniquely amongst all the windows within this application (and all instances of the application). The type is a basic window (the final parameter).</p>
+
+<p>Create a new window with a title and a background. This API is a shortcut of the previous one. It also creates a standard background to the window with <span style="font-family: Courier New,Courier,monospace">elm_bg_add()</span>. The window created is of the type <span style="font-family: Courier New,Courier,monospace">ELM_WIN_BASIC</span>.</p>
+
+<pre class="prettyprint">
+Evas_Object *window;
+
+// Create a standard window
+window = elm_win_util_standard_add("main", "Example Window");
+</pre>
+
+<h3>Closing a Window</h3>
+<p>When the user closes the window outside of the program control, a <span style="font-family: Courier New,Courier,monospace">delete,request</span> signal is emitted to indicate that this event occurred. The developer can take any action, for example, destroy the window object.</p>
+<p>When the autodel parameter is set, the window is automatically destroyed after the signal is emitted. If autodel is <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span>, the window is not destroyed and the program does so when required. The default is <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span>, where the window is not destroyed automatically.</p>
+<p>The autodel is set using the following call:</p>
+<pre class="prettyprint">
+elm_win_autodel_set(window, EINA_TRUE);
+</pre>
+
+<p>To close the window, use the <span style="font-family: Courier New,Courier,monospace">evas_object_del()</span> function. The window is destroyed and the signal <span style="font-family: Courier New,Courier,monospace">delete,request</span> is sent.</p>
+
+<h3>Using the Window Callbacks</h3>
+<p>The window component emits the following signals:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">delete,request</span>: The window is requested delete.</li>
+<li><span style="font-family: Courier New,Courier,monospace">focus,in</span>: The window received focus.</li>
+<li><span style="font-family: Courier New,Courier,monospace">focus,out</span>: The window lost focus.</li>
+<li><span style="font-family: Courier New,Courier,monospace">moved</span>: The window that holds the canvas is moved.</li>
+<li><span style="font-family: Courier New,Courier,monospace">withdrawn</span>: The window is managed normally but is removed from the view.</li>
+<li><span style="font-family: Courier New,Courier,monospace">iconified</span>: The window is minimized (for example, into an icon or a taskbar).</li>
+<li><span style="font-family: Courier New,Courier,monospace">normal</span>: The window is in the normal state (not withdrawn or iconified).</li>
+<li><span style="font-family: Courier New,Courier,monospace">stick</span>: The window shows on all desktops.</li>
+<li><span style="font-family: Courier New,Courier,monospace">unstick</span>: The window shows only on one desktop.</li>
+<li><span style="font-family: Courier New,Courier,monospace">fullscreen</span>: The window is fullscreen.</li>
+<li><span style="font-family: Courier New,Courier,monospace">unfullscreen</span>: The window stops being fullscreen.</li>
+<li><span style="font-family: Courier New,Courier,monospace">maximized</span>: The window is maximized.</li>
+<li><span style="font-family: Courier New,Courier,monospace">unmaximized</span>: The window is diminished.</li>
+<li><span style="font-family: Courier New,Courier,monospace">wm,rotation,changed</span>: The rotation of the window is changed by the Windows Manager.</li>
+<li><span style="font-family: Courier New,Courier,monospace">ioerr</span>: A low-level I/O error occurred in the display system.</li>
+<li><span style="font-family: Courier New,Courier,monospace">indicator,prop,changed</span>: The property or indicator mode and indicator opacity are changed.</li>
+<li><span style="font-family: Courier New,Courier,monospace">rotation,changed</span>: The rotation of the window is changed.</li>
+<li><span style="font-family: Courier New,Courier,monospace">profile,changed</span>: The profile of the window is changed.</li>
+<li><span style="font-family: Courier New,Courier,monospace">aux,hint,allowed</span>: aux_hint of the window free.</li>
+<li><span style="font-family: Courier New,Courier,monospace">access,changed</span>: The access function of the window is changed.</li>
+</ul>
+<p>With all these signals, <span style="font-family: Courier New,Courier,monospace">event_info</span> is <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+<p>The following example registers a callback function called on the <span style="font-family: Courier New,Courier,monospace">fullscreen</span> signal.</p>
+<pre class="prettyprint">
+{
+ evas_object_smart_callback_add(window, "fullscreen", fullscreen_cb, data);
+}
+
+// Callback function for the "fullscreen" signal
+// This callback is called when the window becomes fullscreen
+void fullscreen_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ dlog_print(DLOG_INFO, LOG_TAG, "Window fullscreen\n");
+}
+</pre>
+
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</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>
+
<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>Container Widgets</title>
+ <title>Containers</title>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a href="#box">Box Container</a></li>
- <li><a href="#conformant">Conformant Container</a></li>
- <li><a href="#grid">Grid Container</a></li>
- <li><a href="#layout">Layout Container</a></li>
- <li><a href="#mapbuf">Mapbuf Container</a></li>
- <li><a href="#naviframe">Naviframe Container</a></li>
- <li><a href="#panes">Panes Container</a></li>
- <li><a href="#scroller">Scroller Container</a></li>
- <li><a href="#table">Table Container</a></li>
+ <li><a href="#box">Box</a></li>
+ <li><a href="#conformant">Conformant</a></li>
+ <li><a href="#grid">Grid</a></li>
+ <li><a href="#layout">Layout</a></li>
+ <li><a href="#mapbuf">Mapbuf</a></li>
+ <li><a href="#naviframe">Naviframe</a></li>
+ <li><a href="#panes">Panes</a></li>
+ <li><a href="#scroller">Scroller</a></li>
+ <li><a href="#table">Table</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a href="../../../../org.tizen.tutorials/html/native/ui/ui_control_tutorials_n.htm">UI Control Tutorials</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API</a></li>
+ <li><a href="../../../../org.tizen.tutorials/html/native/ui/ui_component_tutorials_mn.htm">UI Components Tutorials</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje__Group.html">Edje API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Eina__Group.html">Eina API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
-<h1>Container Widgets</h1>
-<div class="cont"><div class="static-cont">
-
- <!-- Show / Hide all links -->
- <div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
- <!-- Folds -->
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="box" name="box" class="items-tit-h2">Box Container</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+<h1>Containers</h1>
+
+ <table class="note">
+<tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">This feature is supported in mobile applications only.</td>
+ </tr>
+ </tbody>
+ </table>
- <p class="figure">Figure: Box container</p>
- <p style="text-align:center;"><img alt="Box container" src="../../images/box.png" /></p>
+ <h2 id="box" name="box">Box</h2>
+
+ <p class="figure">Figure: Box container</p>
+ <p align="center"><img alt="Box container" src="../../images/box.png" /></p>
-<p>Most of the time, you want to display widgets on the screen in a specific order. In <a href="../../../../org.tizen.tutorials/html/native/ui/form_tutorial_n.htm">Form Tutorial</a>, for example, the user information is arranged vertically. This basic container is called a box. There is no theme for a box layout. It is just a linear method of arranging widgets horizontally or vertically.</p>
+
+<p>Most of the time, you want to display UI components on the screen in a specific order. In <a href="../../../../org.tizen.tutorials/html/native/ui/form_tutorial_mn.htm">Form Tutorial</a>, for example, the user information is arranged vertically. This basic container is called a box. There is no theme for a box layout. It is just a linear method of arranging UI components horizontally or vertically.</p>
<h3>Creating a Box</h3>
<p>To create a new horizontal box:</p>
<pre class="prettyprint">Evas_Object *vbox;
</table>
<h3>Adding Objects to the Box</h3>
-<p>You can add any Evas object to the box. Here, we create 5 button widgets and add them to a box:</p>
+<p>You can add any Evas object to the box. Here, we create 5 button components and add them to a box:</p>
<pre class="prettyprint">int i;
Evas_Object *bt;
Evas_Object *vbox;
}
evas_object_show(vbox);
</pre>
-<p>The most important function in the above code is <span style="font-family: Courier New,Courier,monospace">elm_box_pack_end()</span>, which is used to add the button widget to the end of the box.</p>
+<p>The most important function in the above code is <span style="font-family: Courier New,Courier,monospace">elm_box_pack_end()</span>, which is used to add the button component to the end of the box.</p>
<h3>Setting the Padding</h3>
<p>You can set the padding between the objects in a box by using the <span style="font-family: Courier New,Courier,monospace">elm_box_padding_set()</span> function. The padding values are the number of pixels horizontally and vertically.</p>
</pre>
<p>Elementary will set the height of the tallest object as the height of all objects, or the width of the widest element as the width of all objects.</p>
<h3>Setting the Alignment</h3>
-<p>You can set the alignment of widgets inside a box using the <span style="font-family: Courier New,Courier,monospace">elm_box_align_set()</span> function. The function takes two doubles values, a horizontal value and a vertical value, representing the percentage between 0 and 1.0 of the alignment in the horizontal and vertical axes. When you add a widget with the <span style="font-family: Courier New,Courier,monospace">elm_box_pack_end()</span> or <span style="font-family: Courier New,Courier,monospace">elm_box_pack_start()</span> function, Elementary computes the global size of the box. If the global size is bigger than the size of the box's parent, the box will take up all the space occupied by the parent, and the size of the parent may be extended to hold the box. If the global size is smaller than the parent's size, the alignment values will set the position of the box inside the parent.</p>
+<p>You can set the alignment of UI components inside a box using the <span style="font-family: Courier New,Courier,monospace">elm_box_align_set()</span> function. The function takes two doubles values, a horizontal value and a vertical value, representing the percentage between 0 and 1.0 of the alignment in the horizontal and vertical axes. When you add a UI component with the <span style="font-family: Courier New,Courier,monospace">elm_box_pack_end()</span> or <span style="font-family: Courier New,Courier,monospace">elm_box_pack_start()</span> function, Elementary computes the global size of the box. If the global size is bigger than the size of the box's parent, the box will take up all the space occupied by the parent, and the size of the parent may be extended to hold the box. If the global size is smaller than the parent's size, the alignment values will set the position of the box inside the parent.</p>
<p class="figure">Figure: Alignment</p>
-<p
style="text-align:center;"><img alt="Alignment" src="../../images/align.png" /></p>
+<p
align="center"><img alt="Alignment" src="../../images/align.png" /></p>
<p>Here, we set an alignment of 0.8 vertically:</p>
<pre class="prettyprint">elm_box_align_set(vbox, 0.0, 0.8);
<p>The <span style="font-family: Courier New,Courier,monospace">elm_box_layout_transition()</span> function provides the ability to animate the motion of the objects in a box when switching from one layout to another.</p>
<h3>Using Size Hints</h3>
<p>Size hints are a set of functions that can be used on any Evas object. You request Evas to take care of various properties, and Evas will honor these requests if it can. This is why they are called "hints". The size hint functions are:</p>
-<ul class="ul">
+<ul>
<li><span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_min_set()</span></li>
<li><span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_max_set()</span></li>
<li><span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_aspect_set()</span></li>
evas_object_size_hint_weight_set(ic, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
</pre>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="conformant" name="conformant" class="items-tit-h2">Conformant Container</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="conformant" name="conformant">Conformant</h2>
<p class="figure">Figure: Conformant container</p>
-<p
style="text-align:center;"><img alt="Conformant container" src="../../images/conformant.png" /></p>
+<p
align="center"><img alt="Conformant container" src="../../images/conformant.png" /></p>
-<p>A conformant is a container widget that accounts for the space taken by the indicator, virtual keyboard, and softkey windows. The content area of the conformant is resized and positioned based on the space available. When the virtual keyboard is displayed, the content area is not resized.</p>
+<p>A conformant is a container UI component that accounts for the space taken by the indicator, virtual keyboard, and softkey windows. The content area of the conformant is resized and positioned based on the space available. When the virtual keyboard is displayed, the content area is not resized.</p>
<h3>Creating a Conformant</h3>
<p>To create a conformant, use the <span style="font-family: Courier New,Courier,monospace">elm_conformant_add()</span> function:</p>
<h3>Signals</h3>
<p>To receive notifications about the state of the virtual keyboard and clipboard, listen to the following Evas signals:</p>
-<ul class="ul">
+<ul>
<li>"virtualkeypad,state,on": The virtual keyboard has been switched on.</li>
<li>"virtualkeypad,state,off": The virtual keyboard has been switched off.</li>
<li>"virtualkeypad,size,changed": The virtual keyboard size has changed.</li>
<li>"clipboard,state,off": The clipboard has been switched off. </li>
</ul>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="grid" name="grid" class="items-tit-h2">Grid Container</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="grid" name="grid">Grid</h2>
<p>In a grid, objects are placed at specific positions along a fixed grid, where the position of each object is given as a percentage of the full width and height of the grid. By default, the size of the grid is 100 x 100 pixels.</p>
<h3>Clearing the Grid</h3>
<p>To clear the grid, use the <span style="font-family: Courier New,Courier,monospace">elm_grid_clear()</span> function. All items are removed from the grid. If you set the clear parameter, all the items are also deleted, with the <span style="font-family: Courier New,Courier,monospace">evas_object_del()</span> function called on each item.</p>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="layout" name="layout" class="items-tit-h2">Layout Container</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
-<p>A layout is a container widget that takes a standard Edje design file and wraps it very thinly in a widget. Layouts are the basis of a lot of graphics widgets used in Elementary.</p>
+ <h2 id="layout" name="layout">Layout</h2>
+
+<p>A layout is a container that takes a standard Edje design file and wraps it very thinly in a UI component. Layouts are the basis of a lot of graphics components used in Elementary.</p>
<p>An Edje design file describes how the elements of the UI are positioned and how they behave when interacted with. For more information about Edje, see the <a href="edje_n.htm">Edje</a> guide.</p>
layout = elm_layout_add(parent);
</pre>
-<p>In Tizen, the layout widget is extended to support different kinds of layouts. Rather than define layouts yourself, you can use the following predefined default layouts:</p>
-<ul class="ul">
+<p>In Tizen, the layout component is extended to support different kinds of layouts. Rather than define layouts yourself, you can use the following predefined default layouts:</p>
+<ul>
<li>application/default: This layout can be used to display content inside a window.</li>
<li>drawer/panel: This layout can be used to create a 2-panel view.</li>
<li>nocontents/default: This layout can be used when there is no content to display, such as in a contact or email.</li>
elm_object_part_text_set(ly, "elm.help.text", "Hi All :)");
</pre>
<h3 id="container_layout_styles" name="container_layout_styles">Using Layout Themes</h3>
-<p>The layout widget supports the following predefined default themes:</p>
-<ul class="ul">
+<p>The layout component supports the following predefined default themes:</p>
+<ul>
<li><span style="font-family: Courier New,Courier,monospace">toolbar-content</span>: For applications with a toolbar and main content area.</li>
<li><span style="font-family: Courier New,Courier,monospace">toolbar-content-back</span>: For applications with a toolbar, main content area (with a back button), and title area.</li>
<li><span style="font-family: Courier New,Courier,monospace">toolbar-content-back-next</span>: For applications with a toolbar, main content area (with back and next buttons), and title area.</li>
<p>To set a theme to the layout, use the <span style="font-family: Courier New,Courier,monospace">elm_layout_theme_set()</span> function.</p>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="mapbuf" name="mapbuf" class="items-tit-h2">Mapbuf Container</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="mapbuf" name="mapbuf">Mapbuf</h2>
<p class="figure">Figure: Mapbuf hierarchy</p>
-<p
style="text-align:center;"><img alt="Mapbuf hierarchy" src="../../images/mapbuf_tree.png" /></p>
+<p
align="center"><img alt="Mapbuf hierarchy" src="../../images/mapbuf_tree.png" /></p>
-<p>A mapbuf widget is a container widget that uses an Evas map to hold a content object. This widget is used to improve the moving and resizing performance of complex widgets.</p>
+<p>A mapbuf component is a container UI component that uses an Evas map to hold a content object. This component is used to improve the moving and resizing performance of complex UI components.</p>
-<p>The content object is treated as a single image by the Evas map. If you have a content object containing several child objects, frequently moving the mapbuf widget will be faster than frequently moving the content object.</p>
+<p>The content object is treated as a single image by the Evas map. If you have a content object containing several child objects, frequently moving the mapbuf component will be faster than frequently moving the content object.</p>
-<p>The mapbuf widget inherits all the functions of the container class.</p>
+<p>The mapbuf component inherits all the functions of the container class.</p>
<h3>Creating a Mapbuf</h3>
-<p>To create a mapbuf widget, use the <span style="font-family: Courier New,Courier,monospace">elm_mapbuf_add()</span> function:</p>
+<p>To create a mapbuf component, use the <span style="font-family: Courier New,Courier,monospace">elm_mapbuf_add()</span> function:</p>
<pre class="prettyprint">Evas_Object *mapbuf, *parent, *content;
-/* Creating a mapbuf */
+// Creating a mapbuf
mapbuf = elm_mapbuf_add(parent);
</pre>
<h3>Adding Content to the Mapbuf</h3>
-<p>To add content to the mapbuf widget, use the <span style="font-family: Courier New,Courier,monospace">elm_object_content_set()</span> function with the "default" part:</p>
+<p>To add content to the mapbuf component, use the <span style="font-family: Courier New,Courier,monospace">elm_object_content_set()</span> function with the "default" part:</p>
<pre class="prettyprint">elm_object_content_set(mapbuf, content);</pre>
<table class="note">
</table>
-<p>To activate smooth map rendering and alpha rendering for the mapbuf widget:</p>
+<p>To activate smooth map rendering and alpha rendering for the mapbuf component:</p>
<pre class="prettyprint">elm_mapbuf_smooth_set(mapbuf, EINA_TRUE);
elm_mapbuf_alpha_set(mapbuf, EINA_TRUE);
</pre>
<h3>Activating the Mapbuf</h3>
-<p>Finally, to use the mapbuf widget, you must activate it:</p>
+<p>Finally, to use the mapbuf component, you must activate it:</p>
<pre class="prettyprint">elm_mapbuf_enabled_set (mapbuf, EINA_TRUE);</pre>
<h3>Signals</h3>
-<p>The mapbuf widget does not emit any signals and therefore does not provide any callbacks that you can register.</p>
+<p>The mapbuf component does not emit any signals and therefore does not provide any callbacks that you can register.</p>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="naviframe" name="naviframe" class="items-tit-h2">Naviframe Container</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="naviframe" name="naviframe">Naviframe</h2>
-<p>A naviframe widget consists of a stack of views. New views are pushed on top of previous ones, and only the top-most view on the stack is displayed. The previous views are not deleted. A previous view is displayed when the view on top of it is popped. Transitions can be animated on a push or a pop, depending on the theme applied to the widget.</p>
+<p>A naviframe component consists of a stack of views. New views are pushed on top of previous ones, and only the top-most view on the stack is displayed. The previous views are not deleted. A previous view is displayed when the view on top of it is popped. Transitions can be animated on a push or a pop, depending on the theme applied to the UI component.</p>
<h3>Creating a Naviframe</h3>
<p>To create a naviframe, use the <span style="font-family: Courier New,Courier,monospace">elm_naviframe_add()</span> function:</p>
<h3>Adding Fixed Content</h3>
<p>The naviframe can also display fixed content on top of the current (top-most) view. Use the <span style="font-family: Courier New,Courier,monospace">elm_object_item_part_content_set()</span> function to set this content. Use the following part names to specify the location of the content:</p>
-<ul class="ul">
+<ul>
<li>"default": The main content area of the current view.</li>
<li>"icon": An icon in the title area of the current view.</li>
<li>"title_left_btn": A button on the left side of the naviframe.</li>
elm_object_item_part_content_set(nav_it, "title_left_btn", btn);
</pre>
<p>To set the title labels of the naviframe, use the <span style="font-family: Courier New,Courier,monospace">elm_object_item_part_text_set()</span> function and specify one of the following label locations:</p>
-<ul class="ul">
+<ul>
<li>"default": Sets the title label in the title area of the current view.</li>
<li>"subtitle": Sets the subtitle label in the title area of the current view.</li>
</ul>
<h3>Signals</h3>
<p>The naviframe emits the following signals:</p>
-<ul class="ul">
+<ul>
<li>"transition,finished": The transition has finished changing the view.</li>
<li>"title,transition,finished": The title area transition has finished changing the state of the title.</li>
<li>"title,clicked": The user has clicked the title area.</li>
</ul>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="panes" name="panes" class="items-tit-h2">Panes Container</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="panes" name="panes">Panes</h2>
-<p class="figure">Figure: Panes widget</p>
-<p style="text-align:center;"><img alt="Panes widget" src="../../images/panes.png" /></p>
+<p class="figure">Figure: Panes component</p>
+<p align="center"><img alt="Panes component" src="../../images/panes.png" /></p>
-<p>A panes widget adds a draggable bar between two sections of content. The sections are resized when the bar is dragged.</p>
+<p>A panes component adds a draggable bar between two sections of content. The sections are resized when the bar is dragged.</p>
<h3>Creating Panes</h3>
-<p>To create a panes widget, use the <span style="font-family: Courier New,Courier,monospace">elm_panes_add()</span> function:</p>
+<p>To create a panes component, use the <span style="font-family: Courier New,Courier,monospace">elm_panes_add()</span> function:</p>
<pre class="prettyprint">Evas_Object *panes;
panes = elm_panes_add(parent);
<p>To set the size of the panes, use the <span style="font-family: Courier New,Courier,monospace">elm_panes_content_left_size_set()</span> and <span style="font-family: Courier New,Courier,monospace">elm_panes_content_right_size_set()</span> functions.</p>
<h3>Signals</h3>
-<p>The panes widget emits the following signals:</p>
-<ul class="ul">
-<li>"press": The panes widget has been pressed (but the press has not been released yet).</li>
+<p>The panes component emits the following signals:</p>
+<ul>
+<li>"press": The panes component has been pressed (but the press has not been released yet).</li>
<li>"unpress": The press has been released.</li>
-<li>"clicked": The panes widget has been clicked.</li>
-<li>"clicked,double": The panes widget has been double-clicked.</li>
+<li>"clicked": The panes component has been clicked.</li>
+<li>"clicked,double": The panes component has been double-clicked.</li>
</ul>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="scroller" name="scroller" class="items-tit-h2">Scroller Container</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="scroller" name="scroller">Scroller</h2>
<p>A scroller holds (and clips) a single object and allows you to scroll across it. This means that the user can use a scroll bar or their finger to drag the viewable region across the object, moving through a much larger area than is contained in the viewport. The scroller will always have a default minimum size that is not limited by its contents.</p>
-<p>The scroller widget inherits all the functions of the <a href="#layout">Layout Container</a>.</p>
+<p>The scroller component inherits all the functions of the <a href="#layout">Layout</a>.</p>
<h3>Creating a Scroller</h3>
<p>To create a scroller, use the <span style="font-family: Courier New,Courier,monospace">elm_scroller_add()</span> function:</p>
<pre class="prettyprint">
<pre class="prettyprint">
evas_object_smart_callback_add(scroller, "scroll,drag,start", _scroll_start_cb, NULL);
-// Callback function for the "animate,begin" signal.
-// This callback is called when the user begins scrolling the image.
+// Callback function for the "animate,begin" signal
+// This callback is called when the user begins scrolling the image
void _scroll_start_cb(void *data, Evas_Object *obj, void *event_info)
{
printf("Scroll starts\n");
<p>The scroller emits the following signals, which you can catch in your application:</p>
-<ul class="ul">
+<ul>
<li>"edge,left": The left edge of the content has been reached.</li>
<li>"edge,right": The right edge of the content has been reached.</li>
<li>"edge,top": The top edge of the content has been reached.</li>
<pre class="prettyprint">elm_scroller_page_size_set(obj, w, h);
elm_scroller_page_show(obj, 0, 0);</pre>
-
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="table" name="table" class="items-tit-h2">Table Container</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="table" name="table">Table</h2>
<p>A table is like a box but with 2 dimensions. You have the same kind of APIs as with boxes. An item inside the table can span multiple columns and rows, and even overlap with other items (and it can then be raised or lowered accordingly to adjust stacking if there is overlap).</p>
<h3>Clearing the Table</h3>
<p>To clear the table, use the <span style="font-family: Courier New,Courier,monospace">elm_table_clear()</span> function. If the clear parameter is <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span>, the table items are deleted. The <span style="font-family: Courier New,Courier,monospace">evas_object_del()</span> function will be called on each item.</p>
- </div>
- </li>
- </ul>
-</div>
-</div>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
--- /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>Containers</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+ <div id="profile">
+ <p><img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+
+ </div>
+ <div id="toc_border"><div id="toc">
+ <p class="toc-title">Content</p>
+ <ul class="toc">
+ <li><a href="#box">Box</a></li>
+ <li><a href="#conformant">Conformant</a></li>
+ <li><a href="#grid">Grid</a></li>
+ <li><a href="#layout">Layout</a></li>
+ <li><a href="#mapbuf">Mapbuf</a></li>
+ <li><a href="#naviframe">Naviframe</a></li>
+ <li><a href="#scroller">Scroller</a></li>
+ <li><a href="#table">Table</a></li>
+
+ </ul>
+ <p class="toc-title">Related Info</p>
+ <ul class="toc">
+ <li><a href="../../../../org.tizen.tutorials/html/native/ui/ui_component_tutorials_wn.htm">UI Components Tutorials</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje__Group.html">Edje API for Wearable Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Eina__Group.html">Eina API for Wearable Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Containers</h1>
+
+ <table class="note">
+<tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">This feature is supported in wearable applications only.</td>
+ </tr>
+ </tbody>
+ </table>
+
+ <h2 id="box" name="box">Box</h2>
+
+
+ <p class="figure">Figure: Box container</p>
+ <p align="center"><img alt="Box container" src="../../images/box.png" /></p>
+
+
+<p>Most of the time, you want to display UI components on the screen in a specific order. To arrange the user information in a linear manner, you can use a basic container called a box. There is no theme for a box layout. It is just a linear method of arranging UI components horizontally or vertically.</p>
+<h3>Creating a Box</h3>
+<p>To create a new horizontal box:</p>
+<pre class="prettyprint">Evas_Object *vbox;
+
+vbox = elm_box_add(parent);
+</pre>
+<p>By default, the <span style="font-family: Courier New,Courier,monospace">elm_box_add()</span> function creates a vertical box. If you want to create a horizontal box, use the <span style="font-family: Courier New,Courier,monospace">elm_box_horizontal_set()</span> function:</p>
+<pre class="prettyprint">Evas_Object *hbox;
+
+hbox = elm_box_add(parent);
+elm_box_horizontal_set(hbox, EINA_TRUE);
+</pre>
+
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">A box is a non-graphical object. It adds no graphics to or around the objects it holds.</td>
+ </tr>
+ </tbody>
+ </table>
+
+<h3>Adding Objects to the Box</h3>
+<p>You can add any Evas object to the box. Here, we create 5 button components and add them to a box:</p>
+<pre class="prettyprint">int i;
+Evas_Object *bt;
+Evas_Object *vbox;
+
+vbox = elm_box_add(parent);
+
+for (i = 0; i < 5; i++)
+{
+ char tmp[16];
+ snprintf(tmp, sizeof(tmp), "Button %d", i);
+ bt = elm_button_add(vbox);
+ elm_object_text_set(bt, tmp);
+ elm_box_pack_end(vbox, bt);
+ evas_object_show(bt);
+}
+evas_object_show(vbox);
+</pre>
+<p>The most important function in the above code is <span style="font-family: Courier New,Courier,monospace">elm_box_pack_end()</span>, which is used to add the button component to the end of the box.</p>
+
+<h3>Setting the Padding</h3>
+<p>You can set the padding between the objects in a box by using the <span style="font-family: Courier New,Courier,monospace">elm_box_padding_set()</span> function. The padding values are the number of pixels horizontally and vertically.</p>
+<pre class="prettyprint">elm_box_padding_set(vbox, 16, 64);
+</pre>
+
+<h3>Handling Element Size</h3>
+<p>You can add different-size elements to a container. For example, to add an image with a size of 128x128 pixels as the first element in a box, use the <span style="font-family: Courier New,Courier,monospace">elm_box_pack_start()</span> function:</p>
+<pre class="prettyprint">ic = elm_icon_add(vbox);
+elm_image_file_set(ic, "./c1.png", NULL);
+evas_object_size_hint_min_set(ic, 128, 128);
+evas_object_show(ic);
+elm_box_pack_start(vbox, ic);
+</pre>
+<p>We ask Evas to set the size hint for the icon object by using the <span style="font-family: Courier New,Courier,monospace">elm_object_size_hint_min_set()</span> function. Evas will try to set the minimum size of this object accordingly.</p>
+<p>If you want to create a homogeneous box, where all objects have the same height or width, depending on the orientation of the box, use the <span style="font-family: Courier New,Courier,monospace">elm_box_homogeneous_set()</span> function:</p>
+<pre class="prettyprint">elm_box_homogeneous_set(vbox, EINA_TRUE);
+</pre>
+<p>Elementary will set the height of the tallest object as the height of all objects, or the width of the widest element as the width of all objects.</p>
+<h3>Setting the Alignment</h3>
+<p>You can set the alignment of UI components inside a box using the <span style="font-family: Courier New,Courier,monospace">elm_box_align_set()</span> function. The function takes two doubles values, a horizontal value and a vertical value, representing the percentage between 0 and 1.0 of the alignment in the horizontal and vertical axes. When you add a UI component with the <span style="font-family: Courier New,Courier,monospace">elm_box_pack_end()</span> or <span style="font-family: Courier New,Courier,monospace">elm_box_pack_start()</span> function, Elementary computes the global size of the box. If the global size is bigger than the size of the box's parent, the box will take up all the space occupied by the parent, and the size of the parent may be extended to hold the box. If the global size is smaller than the parent's size, the alignment values will set the position of the box inside the parent.</p>
+
+<p class="figure">Figure: Alignment</p>
+<p align="center"><img alt="Alignment" src="../../images/align.png" /></p>
+
+<p>Here, we set an alignment of 0.8 vertically:</p>
+<pre class="prettyprint">elm_box_align_set(vbox, 0.0, 0.8);
+</pre>
+
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">The alignment only takes effect in the opposite direction than the one defined with the <span style="font-family: Courier New,Courier,monospace">elm_box_horizontal_set()</span> function.</td>
+ </tr>
+ </tbody>
+ </table>
+
+
+<p>The <span style="font-family: Courier New,Courier,monospace">elm_box_layout_transition()</span> function provides the ability to animate the motion of the objects in a box when switching from one layout to another.</p>
+<h3>Using Size Hints</h3>
+<p>Size hints are a set of functions that can be used on any Evas object. You request Evas to take care of various properties, and Evas will honor these requests if it can. This is why they are called "hints". The size hint functions are:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_min_set()</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_max_set()</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_aspect_set()</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_align_set()</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_weight_set()</span></li>
+</ul>
+<p>You can also use the respective get functions to get the current hint values.</p>
+<p>In case of the <span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_min_set()</span> function, you ask Evas to respect the minimum size you define for the object. For example, to set the minimum size of an icon to 64x46 pixels:</p>
+<pre class="prettyprint">evas_object_size_hint_min_set(ic, 64, 64);
+</pre>
+<p>You can also set a maximum size for the same icon:</p>
+<pre class="prettyprint">evas_object_size_hint_max_set(ic, 128, 128);
+</pre>
+<p>When you resize the parent of the icon, if there are no constraints to the parent, the minimum size of the parent will be the minimum hint size of the icon. If you increase the parent size, the icon will grow larger until its maximum hint size is reached. After this point, the icon will not grow any larger and there will be empty space around the icon within the parent.</p>
+<p>When the aspect size hint is set, Evas tries to fix the dimensional proportions of the object. Here, the proportion of the icon is respected, and the width will be the same as the height:</p>
+<pre class="prettyprint">evas_object_size_hint_aspect_set(ic, EVAS_ASPECT_CONTROL_VERTICAL, 1, 1);
+</pre>
+<p>Here, the width will be twice the height:</p>
+<pre class="prettyprint">evas_object_size_hint_aspect_set(ic, EVAS_ASPECT_CONTROL_VERTICAL, 2, 1);
+</pre>
+<p>If we want to change the alignment of the icon relative to the parent, we can use the <span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_align()</span> function. By default, the icon is centered, so it is aligned with a value of 0.5. You can change the alignment as follows:</p>
+<pre class="prettyprint">evas_object_size_hint_align_set(ic, EVAS_HINT_FILL, EVAS_HINT_FILL);
+</pre>
+<p>In the above case, the icon is aligned to the bottom left corner of the parent.</p>
+<p>We can also play with the size of the icon inside its container by using the weight size hint. By default, the weight is not set, so the size of the icon will be the minimum size. But if you set this value to 1, the icon will be expand as much as it can inside the container:</p>
+<pre class="prettyprint">evas_object_size_hint_weight_set(ic, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+</pre>
+<p>You can also use the alignment and weight hints together. Here, we want the icon to take up all the space in its parent:</p>
+<pre class="prettyprint">evas_object_size_hint_align_set(ic, EVAS_HINT_FILL, EVAS_HINT_FILL);
+evas_object_size_hint_weight_set(ic, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+</pre>
+
+
+ <h2 id="conformant" name="conformant">Conformant</h2>
+
+<p class="figure">Figure: Conformant container</p>
+<p align="center"><img alt="Conformant container" src="../../images/conformant.png" /></p>
+
+<p>A conformant is a container UI component that accounts for the space taken by the indicator, virtual keyboard, and softkey windows. The content area of the conformant is resized and positioned based on the space available. When the virtual keyboard is displayed, the content area is not resized.</p>
+
+<h3>Creating a Conformant</h3>
+<p>To create a conformant, use the <span style="font-family: Courier New,Courier,monospace">elm_conformant_add()</span> function:</p>
+<pre class="prettyprint">
+Evas_Object *conformant;
+
+conformant = elm_conformant_add(parent);
+</pre>
+
+<h3>Adding Content to the Conformant</h3>
+<p>To add content to the conformant, use the <span style="font-family: Courier New,Courier,monospace">elm_object_content_set()</span> function:</p>
+<pre class="prettyprint">elm_object_content_set(conformant, main_view);
+</pre>
+
+<h3>Signals</h3>
+<p>To receive notifications about the state of the virtual keyboard and clipboard, listen to the following Evas signals:</p>
+<ul>
+<li>"virtualkeypad,state,on": The virtual keyboard has been switched on.</li>
+<li>"virtualkeypad,state,off": The virtual keyboard has been switched off.</li>
+<li>"virtualkeypad,size,changed": The virtual keyboard size has changed.</li>
+<li>"clipboard,state,on": The clipboard has been switched on.</li>
+<li>"clipboard,state,off": The clipboard has been switched off. </li>
+</ul>
+
+
+ <h2 id="grid" name="grid">Grid</h2>
+
+<p>In a grid, objects are placed at specific positions along a fixed grid, where the position of each object is given as a percentage of the full width and height of the grid. By default, the size of the grid is 100 x 100 pixels.</p>
+
+<h3>Creating a Grid</h3>
+<p>To create a grid, use the <span style="font-family: Courier New,Courier,monospace">elm_grid_add()</span> function:</p>
+<pre class="prettyprint">Evas_Object *grid;
+
+grid = elm_grid_add(parent);
+</pre><h3>Adding Items to the Grid</h3>
+<p>To add an item to the grid, use the <span style="font-family: Courier New,Courier,monospace">elm_grid_pack_set()</span> function. Provide the X and Y coordinates, and the width and height in the grid as parameters. The following code adds 12 icons in a circle formation:</p>
+<pre class="prettyprint">for (i = 0; i < 12; i++)
+{
+ ic = elm_icon_add(grid);
+ elm_image_file_set(ic, "c1.png", NULL);
+ evas_object_size_hint_min_set(ic, 128, 128);
+ evas_object_show(ic);
+ x = 40 * cos(2.0 * M_PI / 12 * i);
+ y = 40 * sin(2.0 * M_PI / 12 * i);
+ elm_grid_pack(grid, ic, 40 + x, 40 + y, 20 , 20);
+}
+evas_object_show(grid);
+</pre>
+
+<h3>Changing Position and Size</h3>
+<p>To change the position of an item in the grid, use the <span style="font-family: Courier New,Courier,monospace">elm_grid_pack_set()</span> function. The first parameter is the item you want to move, and the following parameters are the same as for the <span style="font-family: Courier New,Courier,monospace">elm_grid_pack()</span> function.</p>
+<p>To change the size of the grid, use the <span style="font-family: Courier New,Courier,monospace">elm_grid_size_set()</span> function. You can set the new width and height for the grid. The position and size of the items in the grid are changed accordingly.</p>
+<h3>Clearing the Grid</h3>
+<p>To clear the grid, use the <span style="font-family: Courier New,Courier,monospace">elm_grid_clear()</span> function. All items are removed from the grid. If you set the clear parameter, all the items are also deleted, with the <span style="font-family: Courier New,Courier,monospace">evas_object_del()</span> function called on each item.</p>
+
+
+ <h2 id="layout" name="layout">Layout</h2>
+
+<p>A layout is a container that takes a standard Edje design file and wraps it very thinly in a UI component. Layouts are the basis of a lot of graphics components used in Elementary.</p>
+
+<p>An Edje design file describes how the elements of the UI are positioned and how they behave when interacted with. For more information about Edje, see the <a href="edje_n.htm">Edje</a> guide.</p>
+
+<h3 id="container_layout_creating" name="container_layout_creating">Creating a Layout</h3>
+
+<p>To create a new layout, use the <span style="font-family: Courier New,Courier,monospace">elm_layout_add()</span> function:</p>
+<pre class="prettyprint">Evas_Object *layout;
+
+layout = elm_layout_add(parent);
+</pre>
+<p>In Tizen, the layout component is extended to support different kinds of layouts. Rather than define layouts yourself, you can use the following predefined default layouts:</p>
+<ul>
+<li>application/default: This layout can be used to display content inside a window.</li>
+<li>nocontents/default: This layout can be used when there is no content to display, such as in a contact or email.</li>
+<li>body_thumbnail: This layout can be used when you display an image and text inside a window and the position is already defined internally.</li>
+</ul>
+
+<p>To set a theme to the layout, use the <span style="font-family: Courier New,Courier,monospace">elm_layout_theme_set()</span> function.</p>
+
+<p>To use the application/default layout:</p>
+<pre class="prettyprint">Evas_Object *ly;
+
+ly = elm_layout_add(parent);
+elm_layout_theme_set(ly, "layout", "application", "default");
+</pre>
+
+<h3 id="container_layout_inserting_objects" name="container_layout_inserting_objects">Adding Objects to the Layout</h3>
+<p>To add an Evas object to the layout:</p>
+<pre class="prettyprint">elm_object_part_content_set(ly, "elm.swallow.content" view);
+</pre>
+<p><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span> is the swallow part of the application layout, and with this call you integrate the view inside the swallow object of the layout.</p>
+
+<p>To swallow an object inside the main content and background views:</p>
+<pre class="prettyprint">elm_object_part_content_set(ly, "elm.swallow.content", main_view);
+elm_object_part_content_set(ly, "elm.swallow.background", background);
+</pre>
+<p>The nocontents/default layout is a special layout in that it does not contain any swallows. You can only set the text part with the <span style="font-family: Courier New,Courier,monospace">elm.text</span> text zone. To change the text:</p>
+<pre class="prettyprint">elm_object_part_text_set(ly, "elm.text", "Hi All :)");
+</pre>
+
+ <h2 id="mapbuf" name="mapbuf">Mapbuf</h2>
+
+<p class="figure">Figure: Mapbuf hierarchy</p>
+<p align="center"><img alt="Mapbuf hierarchy" src="../../images/mapbuf_tree.png" /></p>
+
+<p>A mapbuf component is a container UI component that uses an Evas map to hold a content object. This component is used to improve the moving and resizing performance of complex UI components.</p>
+
+<p>The content object is treated as a single image by the Evas map. If you have a content object containing several child objects, frequently moving the mapbuf component will be faster than frequently moving the content object.</p>
+
+<p>The mapbuf component inherits all the functions of the container class.</p>
+
+<h3>Creating a Mapbuf</h3>
+<p>To create a mapbuf component, use the <span style="font-family: Courier New,Courier,monospace">elm_mapbuf_add()</span> function:</p>
+<pre class="prettyprint">Evas_Object *mapbuf, *parent, *content;
+
+// Creating a mapbuf
+mapbuf = elm_mapbuf_add(parent);
+</pre>
+<h3>Adding Content to the Mapbuf</h3>
+<p>To add content to the mapbuf component, use the <span style="font-family: Courier New,Courier,monospace">elm_object_content_set()</span> function with the "default" part:</p>
+<pre class="prettyprint">elm_object_content_set(mapbuf, content);</pre>
+
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">Calling <span style="font-family: Courier New,Courier,monospace">elm_object_content_set(mapbuf, content)</span> is equivalent to calling <span style="font-family: Courier New,Courier,monospace">elm_object_part_content_set(mapbuf, "default", content)</span>.</td>
+ </tr>
+ </tbody>
+ </table>
+
+
+<p>To activate smooth map rendering and alpha rendering for the mapbuf component:</p>
+<pre class="prettyprint">elm_mapbuf_smooth_set(mapbuf, EINA_TRUE);
+elm_mapbuf_alpha_set(mapbuf, EINA_TRUE);
+</pre>
+
+<h3>Activating the Mapbuf</h3>
+<p>Finally, to use the mapbuf component, you must activate it:</p>
+<pre class="prettyprint">elm_mapbuf_enabled_set (mapbuf, EINA_TRUE);</pre>
+
+<h3>Signals</h3>
+<p>The mapbuf component does not emit any signals and therefore does not provide any callbacks that you can register.</p>
+
+
+ <h2 id="naviframe" name="naviframe">Naviframe</h2>
+
+<p>A naviframe component consists of a stack of views. New views are pushed on top of previous ones, and only the top-most view on the stack is displayed. The previous views are not deleted. A previous view is displayed when the view on top of it is popped. Transitions can be animated on a push or a pop, depending on the theme applied to the UI component.</p>
+
+<h3>Creating a Naviframe</h3>
+<p>To create a naviframe, use the <span style="font-family: Courier New,Courier,monospace">elm_naviframe_add()</span> function:</p>
+<pre class="prettyprint">Evas_Object *nav;
+
+nav = elm_naviframe_add(parent);
+</pre>
+<h3>Adding and Deleting Views</h3>
+<p>The naviframe is a stack of views. A new view is always pushed to the top of the stack. The top-most view is deleted by popping it.</p>
+<p>To add a new view to the naviframe:</p>
+<pre class="prettyprint">Elm_Object_Item *nav_it;
+
+nav_it = elm_naviframe_item_push(nav, NULL, NULL, NULL, view, NULL);
+// In Tizen 2.3, the back button is not supported in the naviframe
+</pre>
+<p>When you push a new view to the stack, you receive an <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> for the view. You can use this item to modify the view.</p>
+<p>To pop and delete the top-most view:</p>
+<pre class="prettyprint">elm_naviframe_item_pop(nav);
+</pre>
+
+<h3>Adding Fixed Content</h3>
+<p>The naviframe can also display fixed content on top of the current (top-most) view. Use the <span style="font-family: Courier New,Courier,monospace">elm_object_item_part_content_set()</span> function to set this content. Use the following part names to specify the location of the content:</p>
+<ul>
+<li>"default": The main content area of the current view.</li>
+<li>"title_icon": An icon in the title area of the current view.</li>
+</ul>
+<p>For example, to add a button to the naviframe:</p>
+<pre class="prettyprint">btn = elm_button_add(nav);
+elm_object_style_set(btn, "naviframe/title_icon");
+elm_object_part_content_set(btn, "icon", ic);
+</pre>
+<p>To set the title labels of the naviframe, use the <span style="font-family: Courier New,Courier,monospace">elm_object_item_part_text_set()</span> function and specify one of the following label locations:</p>
+<ul>
+<li>"default": Sets the title label in the title area of the current view.</li>
+</ul>
+<h3>Signals</h3>
+<p>The naviframe emits the following signals:</p>
+<ul>
+<li>"transition,finished": The transition has finished changing the view.</li>
+<li>"title,transition,finished": The title area transition has finished changing the state of the title.</li>
+<li>"title,clicked": The user has clicked the title area.</li>
+</ul>
+
+
+ <h2 id="scroller" name="scroller">Scroller</h2>
+
+<p>A scroller holds (and clips) a single object and allows you to scroll across it. This means that the user can use a scroll bar or their finger to drag the viewable region across the object, moving through a much larger area than is contained in the viewport. The scroller will always have a default minimum size that is not limited by its contents.</p>
+<p>The scroller component inherits all the functions of the <a href="#layout">Layout</a>.</p>
+<h3>Creating a Scroller</h3>
+<p>To create a scroller, use the <span style="font-family: Courier New,Courier,monospace">elm_scroller_add()</span> function:</p>
+<pre class="prettyprint">
+Evas_Object *scroller;
+
+scroller = elm_scroller_add(parent);
+</pre>
+<h3>Adding Objects to the Scroller</h3>
+<p>To add an object to the scroller, use the <span style="font-family: Courier New,Courier,monospace">elm_object_content_set()</span> function:</p>
+<pre class="prettyprint">Evas_Object *image;
+
+image = elm_image_add(parent);
+elm_image_file_set(image, "image.png", NULL);
+evas_object_show(image);
+evas_object_size_hint_min_set(image, 2560, 1600);
+elm_object_content_set(scroller, image);
+</pre>
+<p>In the above code, we set a minimum size of 2560 x 1600 pixels for the image. The scroller is smaller than the image, so you can scroll across the image.</p>
+<p>If you want to be informed when the user begins scrolling the image, use the following code:</p>
+<pre class="prettyprint">
+evas_object_smart_callback_add(scroller, "scroll,drag,start", _scroll_start_cb, NULL);
+
+// Callback function for the "animate,begin" signal
+// This callback is called when the user begins scrolling the image
+void _scroll_start_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ printf("Scroll starts\n");
+}</pre>
+
+<h3>Managing the Properties of the Scroller</h3>
+<p>When scrolling content, the scroller may "bounce" when reaching the edge of the content. This is a visual way of indicating that there is no more content to scroll in that direction. Bounce is enabled by default for both axes. To enable or disable the bounce for either or both axes, use the <span style="font-family: Courier New,Courier,monospace">elm_scroller_bounce_set()</span> function. The following code disables the bounce for the horizontal axis and enables it for the vertical axis:</p>
+
+<pre class="prettyprint">elm_scroller_bounce_set(scroller, EINA_FALSE, EINA_TRUE);
+</pre>
+<p>The scroller can limit the scrolling to "pages". In this case, the scrolling occurs in page-sized chunks of content rather than in a purely continuous fashion, with the scroller displaying a single "page" at a time. This feature sets the size of the page relative to the viewport of the scroller. A size of 1.0 equals 1 viewport (horizontally or vertically). A size of 0.0 disables paging for that axis. These settings are mutually exclusive with page size (see the <span style="font-family: Courier New,Courier,monospace">elm_scroller_page_size_set()</span> function). A size of 0.5 equals half a viewport. Usable size values are normally between 0.0 and 1.0, including 1.0. If you only want a single axis to scroll in pages, use 0.0 for the other axis.</p>
+
+<h3>Signals</h3>
+
+<p>The scroller emits the following signals, which you can catch in your application:</p>
+
+<ul>
+<li>"edge,left": The left edge of the content has been reached.</li>
+<li>"edge,right": The right edge of the content has been reached.</li>
+<li>"edge,top": The top edge of the content has been reached.</li>
+<li>"edge,bottom": The bottom edge of the content has been reached.</li>
+<li>"scroll": The content has been scrolled (moved).</li>
+<li>"scroll,anim,start": The scrolling animation has started.</li>
+<li>"scroll,anim,stop": The scrolling animation has stopped.</li>
+<li>"scroll,drag,start": Dragging the contents has started.</li>
+<li>"scroll,drag,stop": Dragging the contents has stopped.</li>
+<li>"vbar,drag": The vertical scroll bar has been dragged.</li>
+<li>"vbar,press": The vertical scroll bar has been pressed.</li>
+<li>"vbar,unpress": The vertical scroll bar has been unpressed.</li>
+<li>"hbar,drag": The horizontal scroll bar has been dragged.</li>
+<li>"hbar,press": The horizontal scroll bar has been pressed.</li>
+<li>"hbar,unpress": The horizontal scroll bar has been unpressed.</li>
+<li>"scroll,page,changed": The visible page has changed.</li>
+</ul>
+
+<h3>Example</h3>
+<p>A good example of the scroller is a picture slideshow: we add images to the scroller and limit the scrolling to pages (one picture at a time). In the following code, we disable the scroll bars for both axes, limit the scrolling to pages by using the <span style="font-family: Courier New,Courier,monospace">elm_scroller_page_scroll_limit_set()</span> function, and lock the scrolling on the Y axis by using the <span style="font-family: Courier New,Courier,monospace">elm_object_scroll_lock_y_set()</span> function:</p>
+<pre class="prettyprint">elm_scroller_policy_set(scroller, ELM_SCROLLER_POLICY_OFF, ELM_SCROLLER_POLICY_OFF);
+elm_scroller_page_scroll_limit_set(scroller, 1, 0);
+elm_object_scroll_lock_y_set(scroller, EINA_TRUE);
+</pre>
+<p>We create a horizontal box, which will contain all the images, and which itself will be contained by the scroller:</p>
+<pre class="prettyprint">box = elm_box_add(scroller);
+elm_box_horizontal_set(box, EINA_TRUE);
+elm_object_content_set(scroller, box);
+evas_object_show(box);
+</pre>
+<p>We then create all the images and add them to the horizontal box:</p>
+<pre class="prettyprint">img = elm_image_add(scroller);
+snprintf(buf, sizeof(buf), IMAGE_DIR"/%d.jpg", i);
+elm_image_file_set(img, buf, NULL);
+evas_object_show(img);
+pages = eina_list_append(pages, img);
+elm_box_pack_end(box, img);
+</pre>
+<p>We store references to the images in an <span style="font-family: Courier New,Courier,monospace">eina_list</span> for easy retrieval later.</p>
+<p>Finally, we display the first page of the scroller:</p>
+<pre class="prettyprint">elm_scroller_page_show(scroller, 0, 0);
+</pre>
+<p>The size of the scroller depends on the size of the parent. When the parent changes, for example when the window is resized or rotated, the scroller is also resized. Since we need to be informed when the scroller is resized, we add a callback on the <span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_RESIZE</span> event for the scroller:</p>
+<pre class="prettyprint">evas_object_event_callback_add(scroller, EVAS_CALLBACK_RESIZE, _scroller_resize_cb, NULL);</pre>
+<p>The callback retrieves the new size of the scroller by using the <span style="font-family: Courier New,Courier,monospace">evas_object_geometry_get()</span> function on the object pointer. The pointer is relative to the object that has been resized, which in our case is the scroller itself. We can then iterate through the images of the scroller and set the minimum size to fit the scroller size:</p>
+<pre class="prettyprint">EINA_LIST_FOREACH(images, l, page)
+{
+ evas_object_size_hint_min_set(page, w, h);
+}
+</pre>
+<p>Finally, we set the page size of the scroller to match the scroller size and display the first page:</p>
+<pre class="prettyprint">elm_scroller_page_size_set(obj, w, h);
+elm_scroller_page_show(obj, 0, 0);</pre>
+
+ <h2 id="table" name="table">Table</h2>
+
+<p>A table is like a box but with 2 dimensions. You have the same kind of APIs as with boxes. An item inside the table can span multiple columns and rows, and even overlap with other items (and it can then be raised or lowered accordingly to adjust stacking if there is overlap).</p>
+
+<h3>Creating a Table</h3>
+
+<p>To create a table, use the <span style="font-family: Courier New,Courier,monospace">elm_table_add()</span> function:</p>
+<pre class="prettyprint">Evas_Object *table;
+table = elm_table_add(parent);</pre>
+
+<h3>Adding Items to the Table</h3>
+
+<p>Items are added to the table with the <span style="font-family: Courier New,Courier,monospace">elm_table_pack()</span> function. This function takes as parameters the table, the item to add to the table, and the position where to add the item: column, row, and the size of the item in number of rows and columns (colspan and rowspan). If we want to create an icon that takes 3 columns and rows and a button that only takes 1 row and column, the code will look like this:</p>
+<pre class="prettyprint">ic = elm_icon_add(table);
+elm_image_file_set(ic, "icon.png", NULL);
+evas_object_show(ic);
+elm_table_pack(table, ic, 0, 0, 3, 3);
+
+btn = elm_button_add(table);
+elm_object_text_set(btn, "Click me i'm famous");
+evas_object_show(btn);
+elm_table_pack(table, btn, 3, 1, 1, 1);
+evas_object_show(table);
+</pre>
+
+<h3>Managing the Items</h3>
+
+<p>If you want to change the position of the item after adding it, use the <span style="font-family: Courier New,Courier,monospace">elm_table_pack_set()</span> function. This function takes as parameters the item whose position to change, the new column, the new row, and the size of the item in number of rows and columns (colspan and rowspan).</p>
+
+<p>To add padding around the item, use the <span style="font-family: Courier New,Courier,monospace">elm_table_padding_set()</span> function. The second parameter is the padding between columns, and the third parameter is the padding between rows:</p>
+<pre class="prettyprint">elm_table_padding_set(table, 10, 10);</pre>
+
+<p>To change the alignment and size of an item, use the <span style="font-family: Courier New,Courier,monospace">evas_object_size_hint</span> parameters. They are used in the same way as with boxes. You can set the same size and weight to each item by using the homogeneous parameter:</p>
+<pre class="prettyprint">elm_table_homogeneous_set(table, EINA_TRUE);
+</pre>
+
+<h3>Clearing the Table</h3>
+
+<p>To clear the table, use the <span style="font-family: Courier New,Courier,monospace">elm_table_clear()</span> function. If the clear parameter is <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span>, the table items are deleted. The <span style="font-family: Courier New,Courier,monospace">evas_object_del()</span> function will be called on each item.</p>
+
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</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>
+
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a href="../../../../org.tizen.tutorials/html/native/ui/ui_tutorials_n.htm">UI Tutorials</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__Eina__Group.html">Eina API</a></li>
+ <li><a href="../../../../org.tizen.tutorials/html/native/ui/ui_tutorials_n.htm">UI Framework Tutorials</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Eina__Group.html">Eina API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Eina__Group.html">Eina API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<p>To insert characters you can use the "insert" function, <span style="font-family: Courier New,Courier,monospace">eina_strbuf_insert(Eina_Strbuf * buf, const char * str, size_t pos)</span> will insert the given <span style="font-family: Courier New,Courier,monospace">str</span> at the position <span style="font-family: Courier New,Courier,monospace">pos</span>. <span style="font-family: Courier New,Courier,monospace">eina_strbuf_insert_printf(Eina_Strbuf * buf, const char * fmt, size_t pos, ...)</span> does the same but with formatted strings.</p>
<pre class="prettyprint">eina_strbuf_insert(mybuffer, "More buffer", 10);
-// Using eina_strbuf_length_get to get the buffer length.
+// Using eina_strbuf_length_get to get the buffer length
eina_strbuf_insert_printf(buf, " %s: %d", 6, "length", eina_strbuf_length_get(buf));
</pre>
EINA_ARRAY_ITER_NEXT(array, i, item, iterator)
printf("item #%d: %s\n", i, item);
- // Flushing the array.
+ // Flushing the array
eina_array_flush(array);
// Free the array
acc = eina_array_accessor_new(array);
// Random access to the data of the array elements
- for(i = 1; i < 10; i += 2)
+ for (i = 1; i < 10; i += 2)
{
// Put the data in the variable 'data'
eina_accessor_data_get(acc, i, &data);
<p>To add data as the last element of the inline array you can use <span style="font-family: Courier New,Courier,monospace">eina_inarray_push(Eina_Inarray *array, const void *data)</span> like in this example:</p>
<pre class="prettyprint">iarr = eina_inarray_new(sizeof(char), 0);
-// Adding a value to the Inline array
+// Adding a value to the inline array
ch = 'a';
eina_inarray_push(iarr, &ch);
</pre>
<p>Be careful, if position is bigger than the array length, it will fail.</p>
<p>If you want to insert data with your own criteria of position you can use <span style="font-family: Courier New,Courier,monospace">eina_inarray_insert(Eina_Inarray *array, const void * data, Eina_Compare_Cb compare)</span>. In this example we insert before a greater value.</p>
<pre class="prettyprint">
-// Defining the function with our own criteria of position.
+// Defining the function with our own criteria of position
Eina_Compare_Cb cmp(const void *a, const void *b)
{
return *(int*)a > *(int*)b;
a = 100;
eina_inarray_push(iarr, &a);
- /* Inserting data with our own criteria */
+ // Inserting data with our own criteria
a = 99;
eina_inarray_insert_sorted(iarr, &a, cmp);
{
Eina_Hash *phone_book = NULL;
phone_book = eina_hash_string_superfast_new(_phone_entry_free_cb);
- // Empty the phone book, but don't destroy it
+ // Empty the phone book, but do not destroy it
eina_hash_free_buckets(phone_book);
eina_hash_free(phone_book);
}
<p>The first parameter is the hash, the second is the function called on each iteration and the last one is the data passed to the 'callback' function passed as second argument.</p>
<p>The callback function has to return an <span style="font-family: Courier New,Courier,monospace">Eina_Bool</span>, EINA_TRUE if the iteration has to continue and EINA_FALSE if the iteration has to stop.</p>
<pre class="prettyprint">// This callback function prints the key and the data of an hash entry
-// here the name and the phone number.
+// here the name and the phone number
static Eina_Bool
pb_foreach_cb(const Eina_Hash *phone_book, const void *key, void *data, void *fdata)
{
printf("%s\n", name);
}
-// You need to free the Iterator
+// You need to free the iterator
eina_iterator_free(it);
// Iterating over hash data
printf("%s\n", number);
}
-// You need to free the Iterator
+// You need to free the iterator
eina_iterator_free(it);
</pre>
<p>Using this method you can also iterate over a tuple composed of keys and data like <span style="font-family: Courier New,Courier,monospace">eina_hash_foreach</span> using <span style="font-family: Courier New,Courier,monospace">eina_hash_iterator_tuple_new(const Eina_Hash *hash)</span></p>
<p>To use an Eina_List you just have to declare it with <span style="font-family: Courier New,Courier,monospace">NULL</span> as default value and * call <span style="font-family: Courier New,Courier,monospace">eina_list_append(Eina_List * list, const void * data)</span>. Pass the list and the data you want to append. This list must be a pointer to the first element of the list (or NULL). It returns a pointer to the list.</p>
<pre class="prettyprint">int list()
{
- // Declaration of the Eina_List with NULL as default value;
+ // Declaration of the Eina_List with NULL as default value
Eina_List *list = NULL;
// Creating the first element of the list
</pre>
<h4>Searching and Sorting Lists</h4>
-<p>You will probably need to search for data in a list, especially in large lists. <span style="font-family: Courier New,Courier,monospace">Eina_List</span> API provides functions to run powerful searches.</p>
+<p>You will probably need to search for data in a list, especially in large lists. The Eina List API (in <a href="../../../../org.tizen.native.mobile.apireference/group__Eina__List__Group.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__Eina__List__Group.html">wearable</a> applications) provides functions to run powerful searches.</p>
<p>If your list is unsorted and you need to get the data you can use <span style="font-family: Courier New,Courier,monospace">eina_list_search_unsorted(const Eina_List *list, Eina_Compare_Cb func, const void *data)</span>. This function performs a lookup in unsorted lists, it takes the list as first parameter, a callback function for comparison as second parameter and the data you are looking for. <span style="font-family: Courier New,Courier,monospace">eina_list_search_unsorted_list(const Eina_List *list, Eina_Compare_Cb func, const void *data)</span> does the same but returns a "Eina_List".</p>
<pre class="prettyprint">int search_list()
{
- // Declaring the List
+ // Declaring the list
Eina_List *list = NULL;
Eina_List *l;
// Little trick to use strcmp as Eina_Compare_Cb
{
const char *txt = d1;
const char *txt2 = d2;
- if(!txt) return(1);
- if(!txt2) return(-1);
+ if (!txt) return(1);
+ if (!txt2) return(-1);
return(strcmp(txt, txt2));
}
{
const char *txt = NULL;
const char *txt2 = NULL;
- if(!d1) return(1);
- if(!d2) return(-1);
+ if (!d1) return(1);
+ if (!d2) return(-1);
return(strcmp((const char*)d1, (const char*)d2));
}
Eina_List *sorted2;
Eina_List *newlist;
-/*
- * put some values and sort your lists
- */
+// Put some values and sort your lists
// Simply merge two lists without any process
newlist = eina_list_merge(sorted1, sorted2);
list = eina_list_append(list, eina_stringshare_add("Philippe"));
list = eina_list_append(list, eina_stringshare_add("billiob"));
- for(l = list; l; l = eina_list_next(l))
+ for (l = list; l; l = eina_list_next(l))
// Printing the data returned by eina_list_data_get
printf("%s\n", (char*)eina_list_data_get(l));
<p>In this example we also use <span style="font-family: Courier New,Courier,monospace">eina_list_next (const Eina_List *list)</span> to move through the list in a for statement. This function moves to the next element of the linked list.</p>
<p>To set data in a list member you can use <span style="font-family: Courier New,Courier,monospace">eina_list_data_set(Eina_List *list, const void *data)</span> Pass the "list" (understand node) as first argument and the data to set as second.</p>
-<pre class="prettyprint">// Setting a new data for the last element.
+<pre class="prettyprint">// Setting a new data for the last element
eina_list_data_set(eina_list_last(list), eina_stringshare_add("Boris"));
</pre><p>In this example you can also see the usage of <span style="font-family: Courier New,Courier,monospace">eina_list_last(const Eina_List *list)</span> which returns the last element of a <span style="font-family: Courier New,Courier,monospace">Eina_List</span>.</p>
<h4>Moving in a List</h4>
<p>The usage of <span style="font-family: Courier New,Courier,monospace">eina_list_last (const Eina_List *list)</span> and <span style="font-family: Courier New,Courier,monospace">eina_list_next (const Eina_List *list)</span> are explained before. The other interesting function that allows movement in the list is <span style="font-family: Courier New,Courier,monospace">eina_list_prev(const Eina_List *list)</span>: it gets the previous list node before the specified list node.</p>
-<pre class="prettyprint">for(l = eina_list_last(list); l; l = eina_list_prev(l))
+<pre class="prettyprint">for (l = eina_list_last(list); l; l = eina_list_prev(l))
printf("%s\n", (char*)eina_list_data_get(l));
</pre>
<p>In this example, we scroll backwards starting from the end of the list.</p>
list = eina_list_append(list, "tizen");
list = eina_list_append(list, "tizen");
-// Using EINA_LIST_FOREACH_SAFE to free elements that match "tizen".
+// Using EINA_LIST_FOREACH_SAFE to free elements that match "tizen"
EINA_LIST_FOREACH_SAFE(list, l, l_next, data)
if (strcmp(data, "tizen") == 0)
newstr = eina_value_to_string(&v);
printf("v as string: %s (pointer: %p)\n", newstr, newstr);
-// Free the memory allocated by eina_value_to_string.
+// Free the memory allocated by eina_value_to_string
free(newstr);
eina_value_flush(&v);
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a href="../../../../org.tizen.tutorials/html/native/ui/ui_tutorials_n.htm">UI Tutorials</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__Ecore__Group.html">Ecore API</a></li>
+ <li><a href="../../../../org.tizen.tutorials/html/native/ui/ui_tutorials_n.htm">UI Framework Tutorials</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Ecore__Group.html">Ecore API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Ecore__Group.html">Ecore API for Wearable Native</a></li>
</ul>
</div></div>
</div>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a href="../../../../org.tizen.tutorials/html/native/ui/ui_tutorials_n.htm">UI Tutorials</a></li>
+ <li><a href="../../../../org.tizen.tutorials/html/native/ui/ui_tutorials_n.htm">UI Framework Tutorials</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje__Group.html">Edje API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje__Group.html">Edje API for Wearable Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>
</ul>
</div></div>
</div>
}
</pre>
-<p>On a BOX part, this block is used to set other groups as elements of the box. These can be mixed with external objects set by the application through the <span style="font-family: Courier New,Courier,monospace;">edje_object_part_box*</span> API.</p>
+<p>On a BOX part, this block is used to set other groups as elements of the box. These can be mixed with external objects set by the application through the <span style="font-family: Courier New,Courier,monospace;">edje_object_part_box*()</span> functions.</p>
<h5 id="box_table_items_item" name="box_table_items_item">Item</h5>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a href="../../../../org.tizen.tutorials/html/native/ui/ui_tutorials_n.htm">UI Tutorials</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UI__FRAMEWORK.html">UI API</a></li>
+ <li><a href="../../../../org.tizen.tutorials/html/native/ui/ui_tutorials_n.htm">UI Framework Tutorials</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje__Group.html">Edje API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje__Group.html">Edje API for Wearable Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>
</ul>
</div></div>
</div>
</pre>
-<p>The Tizen SDK compilation log extract shows you that if your EDC file uses pictures, they must be copied to the <span style="font-family: Courier New,Courier,monospace;">./edje/images</span> directory. fonts and sounds go to the <span style="font-family: Courier New,Courier,monospace;">./edje/fonts</span> and <span style="font-family: Courier New,Courier,monospace;">./edje/sounds</span> directory respectively. The SDK builds the <span style="font-family: Courier New,Courier,monospace;">helloworld.edj</span> file in the <span style="font-family: Courier New,Courier,monospace;">./res/edje/</span> folder.</p>
+<p>The Tizen SDK compilation log extract shows you that if your EDC file uses pictures, they must be copied to the <span style="font-family: Courier New,Courier,monospace;">./edje/images</span> directory. Fonts and sounds go to the <span style="font-family: Courier New,Courier,monospace;">./edje/fonts</span> and <span style="font-family: Courier New,Courier,monospace;">./edje/sounds</span> directory respectively. The SDK builds the <span style="font-family: Courier New,Courier,monospace;">helloworld.edj</span> file in the <span style="font-family: Courier New,Courier,monospace;">./res/edje/</span> folder.</p>
<h3 id="simple_edc_file" name="simple_edc_file">Writing Simple EDC File </h3>
<p>The code example below shows you the structure of an EDC file. It is a collection of groups that contain parts and programs.</p>
<p>Therefore, in order to create a 2x2 blue rectangle centered inside that green square, the top-left corner has to be (1, 1) and the bottom-right one has to be (2, 2).</p>
<p class="figure">Figure: Offset indices</p>
-<p
style="text-align:center;"><img alt="Offset indices" src="../../images/rel1_rel2_offsets.png" /></p>
+<p
align="center"><img alt="Offset indices" src="../../images/rel1_rel2_offsets.png" /></p>
<p>Edje needs the following things defined:</p>
<ul>
<p>The image below shows how to refer pixels using relative positioning when the offsets are (0, 0).</p>
<p class="figure">Figure: Relative positioning</p>
-<p
style="text-align:center;"><img alt="Relative positioning" src="../../images/rel1_rel2_offsets_and_relative.png" /></p>
+<p
align="center"><img alt="Relative positioning" src="../../images/rel1_rel2_offsets_and_relative.png" /></p>
<p>Note the addressing of pixels: (0, 0) is addressed through <span style="font-family: Courier New,Courier,monospace;">relative: 0 0; offset 0 0;</span> and each additional 0.25 in the relative field gives a 1-pixel move. With this, the pixel addressed through <span style="font-family: Courier New,Courier,monospace;">relative: 0.75 0.75; offset: 0 0;</span> is at (3, 3) and not (2, 2)!.</p>
<p>The other parameters are aspect width and height ratio. These integers are used to calculate the proportions of the object. If aspect ratio terms are null, the object's container ignores the aspect and scale of the object and occupies the whole available area.</p>
<p class="figure">Figure: Aspect control</p>
-<p
style="text-align:center;"><img alt="Aspect control" src="../../images/aspect-control-none.png" /></p>
+<p
align="center"><img alt="Aspect control" src="../../images/aspect-control-none.png" /></p>
-<p
style="text-align:center;"><img alt="Aspect control" src="../../images/aspect-control-horizontal.png" /></p>
+<p
align="center"><img alt="Aspect control" src="../../images/aspect-control-horizontal.png" /></p>
-<p
style="text-align:center;"><img alt="Aspect control" src="../../images/aspect-control-both.png" /></p>
+<p
align="center"><img alt="Aspect control" src="../../images/aspect-control-both.png" /></p>
<p>The following code example sets the aspect size hint to <span style="font-family: Courier New,Courier,monospace;">EVAS_ASPECT_CONTROL_BOTH</span> with a width of 100 and a height of 200. So aspect ratio should be 1/2.</p>
<p>This sets the hints for the object's alignment. This hint is used when the object size is smaller than its parent's. The special <span style="font-family: Courier New,Courier,monospace;">EVAS_HINT_FILL</span> parameter uses maximum size hints with higher priority, if they are set. Also, any padding hints set on objects are added up to the alignment space on the final scene composition.</p>
<p class="figure">Figure: Alignment</p>
-<p
style="text-align:center;"><img alt="Alignment" src="../../images/align_hints.png" /></p>
+<p
align="center"><img alt="Alignment" src="../../images/align_hints.png" /></p>
<p>In the code below, the special <span style="font-family: Courier New,Courier,monospace;">EVAS_HINT_FILL</span> parameter is used.</p>
<p>This sets the hints for the object's padding space. Padding is extra space an object takes on each of its delimiting rectangle sides. The padding space is rendered transparent. Four hints can be defined, for the left, right, top, and bottom padding.</p>
<p class="figure">Figure: Padding</p>
-<p
style="text-align:center;"><img alt="Padding" src="../../images/padding-hints.png" /></p>
+<p
align="center"><img alt="Padding" src="../../images/padding-hints.png" /></p>
<p>Here the padding hints are set to 5 pixels on each side of the object.</p>
<h2 id="Swallow" name="Swallow">Edje Swallow </h2>
-<p>The parent of all layout
widgets is Edje. Edje as explained in the <a href="edc_part_block_n.htm#edje_block">Edje Blocks</a> is a library which convert edc files into Evas object. EDC is a description language. It means that the objects of interface are described by using text description. One of its main features is the possibility to create "Swallows" objects. When this kind of object is added in an Evas, it contains any other <span style="font-family: Courier New,Courier,monospace;">Evas_Object</span>. To create a swallow part, create first the EDC file: </p>
+<p>The parent of all layout
components is Edje. Edje as explained in the <a href="edc_part_block_n.htm#edje_block">Edje Blocks</a> is a library which convert edc files into Evas object. EDC is a description language. It means that the objects of interface are described by using text description. One of its main features is the possibility to create "Swallows" objects. When this kind of object is added in an Evas, it contains any other <span style="font-family: Courier New,Courier,monospace;">Evas_Object</span>. To create a swallow part, create first the EDC file: </p>
<pre class="prettyprint">
collections
<th class="note">Note</th>
</tr>
<tr>
-<td class="note"><span style="font-family: Courier New,Courier,monospace;">edje_object_add</span> as opposed as all elementary object, does not take an <span style="font-family: Courier New,Courier,monospace;">Evas_Object</span> as a parent. Give it the Evas on which the object is added. As the parent is already added on an Evas by elementary, retrieve a reference on it by using the <span style="font-family: Courier New,Courier,monospace;">evas_object_evas_get</span> API.</td>
+<td class="note"><span style="font-family: Courier New,Courier,monospace;">edje_object_add</span> as opposed as all elementary object, does not take an <span style="font-family: Courier New,Courier,monospace;">Evas_Object</span> as a parent. Give it the Evas on which the object is added. As the parent is already added on an Evas by elementary, retrieve a reference on it by using the <span style="font-family: Courier New,Courier,monospace;">evas_object_evas_get()</span> function.</td>
</tr>
</tbody>
</table>
</tbody>
</table>
-<p>Create complex layout for your application with Edje. It is may not be the most easy way, but it is the most powerful. This Edje layout is used all around elementary and is the basis of the layout widget.</p>
+<p>Create complex layout for your application with Edje. It is may not be the most easy way, but it is the most powerful. This Edje layout is used all around elementary and is the basis of the layout component.</p>
<h2 id="Layout" name="Layout">ELM Layout</h2>
-<p>Layout is a container widget. The basic use of <span style="font-family: Courier New,Courier,monospace;">elm_layout</span>, with default style is already documented in the <a href="ui_control_n.htm#containers">Container Widgets</a> guide. Elm layout takes a standard Edje design file and wraps it in a widget. Layouts are the basis of graphical widgets which are used in Elementary.</p>
+<p>Layout is a container component. For the basic use of the <span style="font-family: Courier New,Courier,monospace;">elm_layout</span> with a default style, see the Layout Guide (in <a href="containers_mn.htm#layout">mobile</a> and <a href="containers_wn.htm#layout">wearable</a> applications). Elm layout takes a standard Edje design file and wraps it in a UI component. Layouts are the basis of graphical UI components which are used in Elementary.</p>
<h3>Adding Layout</h3>
elm_layout_file_set(layout, "edje_example.edj", "my_layout");
</pre>
-<p>The layout widget may contain as many parts/children as described in its theme file (EDC). Some of these children can have special types:</p>
+<p>The layout component may contain as many parts/children as described in its theme file (EDC). Some of these children can have special types:</p>
<ul>
<li><span style="font-family: Courier New,Courier,monospace;">SWALLOW</span> (content holder)</li>
<p>Only one object can be added to a <span style="font-family: Courier New,Courier,monospace;">SWALLOW</span>. The <span style="font-family: Courier New,Courier,monospace;">elm_layout_content_set()/get/unset</span> functions are used to manage objects in a <span style="font-family: Courier New,Courier,monospace;">SWALLOW</span> part. After being set to this part, the object's size, position, visibility, clipping and other description properties are controlled by the description of the given part (inside the Edje theme file).</p>
-<p>The BOX layout can be used through the <span style="font-family: Courier New,Courier,monospace;">elm_layout_box_*()</span> set of functions. It is very similar to the <span style="font-family: Courier New,Courier,monospace;">elm_box</span> widget but the BOX layout's behavior is completely controlled by the Edje theme. The TABLE layout is like the BOX layout, the difference is that it is used through the <span style="font-family: Courier New,Courier,monospace;">elm_layout_table_*()</span> set of functions.</p>
+<p>The BOX layout can be used through the <span style="font-family: Courier New,Courier,monospace;">elm_layout_box_*()</span> set of functions. It is very similar to the <span style="font-family: Courier New,Courier,monospace;">elm_box</span> component but the BOX layout's behavior is completely controlled by the Edje theme. The TABLE layout is like the BOX layout, the difference is that it is used through the <span style="font-family: Courier New,Courier,monospace;">elm_layout_table_*()</span> set of functions.</p>
<h3>Signals</h3>
<p>Elm can send Edje signals to the EDC part by using the <span style="font-family: Courier New,Courier,monospace;">elm_layout_signal_emit</span>. You can also use <span style="font-family: Courier New,Courier,monospace;">elm_layout_signal_callback_add</span> to receive signals.</p>
</script>
</body>
-</html>
+</html>
\ No newline at end of file
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
-
-
+ <p class="toc-title">Content</p>
+ <ul class="toc">
+ <li><a href="#hw">Working with Hardware Keys</a></li>
+ <li><a href="#rotary">Working with Rotary Events</a></li>
+ </ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a href="../../../../org.tizen.tutorials/html/native/ui/efl_extension_tutorial_n.htm">
- Efl Extension Tutorial</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__EFL__EXTENSION__GROUP.html">Efl Extension API</a></li>
+ <li><a href="../../../../org.tizen.tutorials/html/native/ui/efl_extension_tutorial_n.htm">Efl Extension Tutorial</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<h1>Efl Extension</h1>
-<p>The <a href="../../../../org.tizen.native.mobile.apireference/group__EFL__EXTENSION__GROUP.html">Efl Extension</a> API is an extension package for EFL. It provides functions to work with the hardware keys on devices.</p>
+<p>The Efl Extension is an extension package for EFL that provides functions to work with the hardware keys and rotary events.</p>
+
+<h2 id="hw">Working with Hardware Keys</h2>
+
+<table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">Hardware key events are only supported in mobile devices.</td>
+ </tr>
+ </tbody>
+ </table>
<p>Normally, the key events are only delivered to the object in focus. However, with the EFL Extension functions, you can let visible objects without focus get events from the <strong>Menu</strong> and <strong>Back</strong> keys.</p>
<p class="figure">Figure: Menu and Back keys</p>
-<p
style="text-align:center;"><img alt="Menu and Back keys" src="../../images/efl_phone.png" /></p>
+<p
align="center"><img alt="Menu and Back keys" src="../../images/efl_phone.png" /></p>
<p>The EFL Extension maintains its own object stack for determining which object to deliver events to. Only visible objects are added to this stack. The stack is based on the Evas layer. It means that if 2 objects are registered for the same EFL Extension event, the object on the higher Evas layer gets the event.</p>
<p>The following figure shows an example of objects and their layers. Objects 1, 2, and 3 are registered with EFL Extension callbacks for the same event, such as a <strong>Back</strong> key event. When the event occurs, object 3, which is on the highest layer (layer 3), gets the event callback.</p>
<p class="figure">Figure: Objects with layers</p>
-<p style="text-align:center;"><img alt="Objects with layers" src="../../images/efl_layers.png" /></p>
-
-<p>If objects stay on the same layer, the object, which is registered to the callback first, gets the event.</p>
+<p align="center"><img alt="Objects with layers" src="../../images/efl_layers.png" /></p>
-<p>To register a callback for the <strong>Menu</strong> or <strong>Back</strong> key, use the following function:</p>
-<pre class="prettyprint">
-void eext_object_event_callback_add(Evas_Object *obj, Eext_Callback_Type type, Eext_Event_Cb func, void *data);
-</pre>
+<p>If objects stay on the same layer, the object which is registered to the callback first gets the event.</p>
-<p>There are 2 types of Eext callbacks:</p>
+<p>To register a callback for the <strong>Menu</strong> or <strong>Back</strong> key, use the <span style="font-family: Courier New,Courier,monospace;">eext_object_event_callback_add()</span> function with the application callback type:</p>
<ul>
<li><span style="font-family: Courier New,Courier,monospace;">EEXT_CALLBACK_BACK</span>: Hardware <strong>Back</strong> key event</li>
<li><span style="font-family: Courier New,Courier,monospace;">EEXT_CALLBACK_MORE</span>: Hardware <strong>Menu</strong> key event</li>
</ul>
-<p>The <span style="font-family: Courier New,Courier,monospace;">Eext_Event_Cb</span> callback has the following signature:</p>
-<pre class="prettyprint">void (*Eext_Event_Cb)(void *data, Evas_Object *obj, void *event_info);</pre>
+<p>To delete a registered event in the EFL Extension, use the <span style="font-family: Courier New,Courier,monospace;">eext_object_event_callback_del()</span> function.</p>
+
+<p>The EFL Extension also provides other convenient functions to work with the <strong>Menu</strong> and <strong>Back</strong> keys for popup, ctxpopup, naviframe, and entry components (in <a href="ui_component_mn.htm#components">mobile</a> and <a href="ui_component_wn.htm#components">wearable</a> applications).</p>
+
+<h2 id="rotary">Working with Rotary Events</h2>
+
+<table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">Rotary events are only supported in devices with a circular screen.</td>
+ </tr>
+ </tbody>
+ </table>
+
+<p>You can use various functions to work with the rotary events. The functions manage the rotary events, which are fired from the rotary device and delivered to a suitable target. To receive rotary events, you must define an event callback or a handler function, and register it using the EFL Extension functions. There are 2 ways to receive the rotary events: the rotary event handler and the rotary object event callback.</p>
+
+<h3>Rotary Event Handler</h3>
+
+<p>The rotary event handler is suitable when you want to handle rotary events without taking care about an Evas Object or when the application is not implemented using an Evas Object. The handler works like the Ecore event in EFL:</p>
+
+<ul><li><p>The application registers a rotary event handler with the <span style="font-family: Courier New,Courier,monospace;">eext_rotary_event_handler_add()</span> function.</p>
+
+<p>The rotary event handlers are treated "first come first served". It means that the first registered handler is called first when rotary events happens. If the handler returns <span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span>, the next handler is called. Otherwise, EFL Extension stops delivering the rotary events.</p>
+</li>
+<li><p>To remove a rotary event handler, use the <span style="font-family: Courier New,Courier,monospace;">eext_rotary_event_handler_del()</span> function.</p></li></ul>
+
+
+
+<h3>Rotary Object Event Callback</h3>
+
+<p>The rotary object event callback is suitable when you want EFL Extension to handle the event delivery between objects. It means that EFL Extension manages a callback and an object list and decides which object's callback must be called when rotary events happen:</p>
+
+<ul><li><p>The application registers a callback using the <span style="font-family: Courier New,Courier,monospace;">eext_rotary_object_event_callback_add()</span> function.</p>
+
+<p>EFL Extension treats callbacks based on the callback priority. If the application registers callbacks for a same object, the callback with the lowest priority number is called first. If this callback returns <span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span>, the higher priority number is called. The above function registers the rotary event callback with a default priority number (value is 0). To register the rotary event callback with another priority number, use the <span style="font-family: Courier New,Courier,monospace;">eext_rotary_object_event_callback_priority_add()</span> function.</p></li>
+<li><p>To remove a registered callback from an object, use the <span style="font-family: Courier New,Courier,monospace;">eext_rotary_object_event_callback_del()</span> function:</p></li></ul>
+
+<p>The rotary events are only delivered to 1 object named the activated object. If there is no activated object, the rotary event is not delivered to any object. If the activated object has registered callbacks and the callbacks return <span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span>, the rotary events are delivered to the upper parents of the activated object until there is 1 callback that consumes the rotary event or it reaches the top parent object.</p>
+<p>To set the object as the activated object, use the <span style="font-family: Courier New,Courier,monospace;">eext_rotary_object_event_activated_set()</span> function.</p>
+
+<p>Providing the activated parameter with the <span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span> value sets the object as the activated object. Providing the <span style="font-family: Courier New,Courier,monospace;">EINA_FALSE</span> value deactivates the object. Since there is only 1 object which is the activated object, if an object is set as the activated object, the previously activated object is deactivated and becomes a normal object. An activated signal named <span style="font-family: Courier New,Courier,monospace;">rotary,activated</span> is sent when an object is set as the activated object, and the <span style="font-family: Courier New,Courier,monospace;">rotary,deactivated</span> signal is sent when an object is deactivated.</p>
-<p>To delete a registered event in the EFL Extension, use the following function:</p>
-<pre class="prettyprint">
-void *eext_object_event_callback_del(Evas_Object *obj, Eext_Callback_Type type, Eext_Event_Cb);</pre>
+<p>You can register callbacks for activated or deactivated signals with the <span style="font-family: Courier New,Courier,monospace;">evas_object_smart_callback_add()</span> function.</p>
-<p>The EFL Extension also provides other convenient functions to work with the <strong>Menu</strong> and <strong>Back</strong> keys for popup, ctxpopup, naviframe, and entry <a href="ui_control_n.htm#widgets">widgets</a>.</p>
+<p>For more information, see the Evas smart callback function (in <a href="../../../../org.tizen.native.mobile.apireference/group__Evas__Smart__Object__Group.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__Evas__Smart__Object__Group.html">wearable</a> applications).</p>
+
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
</div></div></div>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.tutorials/html/native/ui/efl_tutorial_n.htm">EFL Tutorial</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UI__FRAMEWORK.html">UI API</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__EFL__Group.html">EFL API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__EFL__Group.html">EFL API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__EFL__Group.html">EFL API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<h1>EFL</h1>
-<p>The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UI__FRAMEWORK.html">UI</a> API provides the functionality to create and manage your application user interface. The heart of the Tizen application UI is the native UI framework, which consists of the Enlightenment Foundation Libraries (EFL).</p>
+<p>Tizen provides the functionality to create and manage your application user interface. The heart of the Tizen application UI is the native UI framework, which consists of the Enlightenment Foundation Libraries (EFL).</p>
<p class="figure">Figure: EFL</p>
-<p
style="text-align:center;"><img alt="EFL" src="../../images/evas_architecture.png" /></p>
+<p
align="center"><img alt="EFL" src="../../images/evas_architecture.png" /></p>
<p>UI design with EFL consists of the following main parts:</p>
<p>The Edje library is part of EFL, and provides APIs for <a href="edje_n.htm">theming a Tizen application</a>, by writing EDC file. EDC programming supports part positioning, resizing, and animations.</p></li>
<li>Elementary
- <p>The Elementary library is part of EFL, and provides the basic toolkit for window and layout management, along with the <a href="ui_control_n.htm#widgets">UI and container widgets</a> for the user interface. You can manage the widgets and their focus on the screen, as well as create customizations.</p></li>
+ <p>The Elementary library is part of EFL, and provides the basic toolkit for window and layout management, along with the UI and container components for the user interface (in <a href="ui_component_mn.htm#components">mobile</a> and <a href="ui_component_wn.htm#components">wearable</a> applications). You can manage the UI components and their focus on the screen, as well as create customizations.</p></li>
</ul>
<p>Tizen supports various methods to <a href="events_effects_n.htm#animation_effect">create animations and effects</a> in your application.</p></li>
<li>Event handling and main loop
- <p>The user interface relies on callbacks
, designed to react to EFL events generated by the system or the user. You can <a href="events_effects_n.htm#event_handling">handle various events</a>, from low-level Ecore system events to Evas smart object events that happen on object collections.</p>
- <p>The Ecore library provides main loop abstraction that gets you data when it is available and sends you events. You can <a href="main_loop_n.htm">manage the main loop</a> and <a href="threads_n.htm">use threads</a> with the Ecore main loop.</p></li>
+ <p>The user interface relies on callbacks designed to react to EFL events generated by the system or the user. You can <a href="events_effects_n.htm#event_handling">handle various events</a>, from low-level Ecore system events to Evas smart object events that happen on object collections.</p>
+ <p>The Ecore library provides
a main loop abstraction that gets you data when it is available and sends you events. You can <a href="main_loop_n.htm">manage the main loop</a> and <a href="threads_n.htm">use threads</a> with the Ecore main loop.</p></li>
<li>Font settings
<p>Tizen supports various methods to <a href="font_setting_n.htm">change the font</a> of your application to another system default font or your own font.</p></li>
<li>Scalability
- <p>Elementary provides a way to <a href="ui_control_n.htm#scalability">scale widgets</a> in order to be comfortably used with a finger make text more readable.</p></li></ul>
+ <p>Elementary provides a way to scale UI components (in <a href="ui_component_mn.htm#scalability">mobile</a> and <a href="ui_component_wn.htm#scalability">wearable</a> applications) in order to be comfortably used with a finger and to make the text more readable.</p></li></ul>
<h2 id="efl_basics" name="efl_basics">Making EFL Applications</h2>
<p>The EFL are a set of layered libraries, as shown in the following diagram:</p>
<p class="figure">Figure: EFL layers</p>
-<p
style="text-align:center;"><img alt="EFL layers" src="../../images/efllibs.png" /></p>
+<p
align="center"><img alt="EFL layers" src="../../images/efllibs.png" /></p>
<p>When you create a basic EFL application, you use the following main libraries as a basis:</p>
<ul>
- <li>Elementary is the top-most library with which you create your EFL application. It provides all the functions you need to create a window, create simple and complex layouts, manage the life cycle of a view, and add widgets. The full list of widgets that can be used in Tizen can be found in <a href="ui_control_n.htm#widgets">Using Widgets</a>.</li>
- <li>Edje is the library used by Elementary to provide a powerful theme. You can also use Edje to create your own objects and use them in your application. You may also want to extend the default theme. You will find more information about Edje and the EDC format in <a href="edje_n.htm">Edje</a> and <a href="widget_preferences_n.htm#customize">Customizing Widgets</a>.</li>
+ <li>Elementary is the top-most library with which you create your EFL application. It provides all the functions you need to create a window, create simple and complex layouts, manage the life cycle of a view, and add UI components. The full list of UI components that can be used in Tizen can be found in Using UI Components (in <a href="ui_component_mn.htm#components">mobile</a> and <a href="ui_component_wn.htm#components">wearable</a> applications).</li>
+ <li>Edje is the library used by Elementary to provide a powerful theme. You can also use Edje to create your own objects and use them in your application. You may also want to extend the default theme. You will find more information about Edje and the EDC format in <a href="edje_n.htm">Edje</a> and <a href="preferences_n.htm#customize">Customizing UI Components</a>.</li>
<li>Ecore is the library which manages the main loop of your application. The main loop is one of the most important concepts you need to know about to develop an application. The main loop is where events are handled, and where you interact with the user through the callback mechanism. The main loop mechanisms are explained in the <a href="main_loop_n.htm">Main Loop</a> guide.</li>
<li>Evas is the canvas engine. Evas is responsible for managing the drawing of your content. All graphical objects that you create are Evas objects. Evas handles the entire state of the window by filling the canvas with objects and manipulating their states. In contrast to other canvas libraries, such as Cairo, OpenGL, and XRender, Evas is not a drawing library but a scene graph library that retains the state of all objects. The Evas concept is explained in <a href="evas_n.htm#render">Rendering Concept and Method in Evas</a>. Evas objects are created and then manipulated until they are no longer needed, at which point they are deleted. This allows the developer to work in the same terms that a designer thinks in: it is a direct mapping, as opposed to having to convert the concepts into drawing commands in the right order, calculate minimum drawing calls needed to get the job done, and so on.</li>
<li>Eina is the basis of all the EFL libraries. Eina is a toolbox that implements an API for data types in an efficient way. It contains all the functions needed to create lists and hashes, manage shared strings, open shared libraries, and manage errors and memory pools. Eina concepts are explained in <a href="data_types_n.htm">Using Data Types</a>.</li>
<p>Before writing an application, you should already have an answer to the following question: What is an application? An application is a process launched by the user. Every application has at least one window for presenting its content. Users can interact with the content through events. Different sources of events can modify the life cycle of the application. The application may receive data from a network connection, and it may also receive touch and key events. From the computer's point of view, an application is a collection of code that reacts to events and displays content on the screen. Elementary bridges this divide between the user and the code.</p>
-<p>Elementary provides a variety of pre-built UI components, such as layout objects and widgets, that allow you to build rich graphical user interfaces for your applications. Every Elementary application has at least one window for presenting its content. The window provides the area in which to display the content and where the Evas canvas is placed.</p>
+<p>Elementary provides a variety of pre-built UI components, such as layout objects and components, that allow you to build rich graphical user interfaces for your applications. Every Elementary application has at least one window for presenting its content. The window provides the area in which to display the content and where the Evas canvas is placed.</p>
<p>There are three main groups of objects provided by Elementary:</p>
<ul>
- <li>Widgets: These are the widgets with which you build your application UI.</li>
- <li>Containers: These are the containers that hold the widgets.</li>
+ <li>UI components: These are the components with which you build your application UI.</li>
+ <li>Containers: These are the containers that hold the components.</li>
<li>Infrastructure: These are the modules that deal with Elementary as a whole.</li>
</ul>
-<p><a class="opensection" href="../../../../org.tizen.gettingstarted/html/first_app/first_app.htm#nativeapp">EFL Hello World Tutorial</a> shows you how to develop your first application with Elementary and the EFL.</p>
+<p>The <a href="../../../../org.tizen.gettingstarted/html/native/first_app/first_app_n.htm">Hello World example</a> shows you how to develop your first application with Elementary and the EFL.</p>
<h3 id="basic_structure">Basic Structure of an EFL Application in Tizen</h3>
-<p>Most of the time, your application has to manage multiple views. The easiest way to handle them with the EFL is to create a naviframe object. This object is a container. At first, it is used to contain the pages your application is composed of. Every Tizen application can use this top-layer object to facilitate navigation. More details can be found in <a href="../../../../org.tizen.tutorials/html/native/ui/naviframe_tutorial_n.htm">Naviframe Tutorial</a>.</p>
+<p>Most of the time, your application has to manage multiple views. The easiest way to handle them with the EFL is to create a naviframe object. This object is a container. At first, it is used to contain the pages your application is composed of. Every Tizen application can use this top-layer object to facilitate navigation. More details can be found in the <a href="../../../../org.tizen.tutorials/html/native/ui/naviframe_tutorial_mn.htm">Naviframe Tutorial</a>.</p>
-<p>Another interesting object that has to be present in every application is the conformant object. Conformant is a container widget that accounts for the space taken up by the indicator, virtual keyboard, and softkey windows. The conformant content will be resized and positioned based on the space available. When the virtual keyboard is displayed, the content does not change.</p>
+<p>Another interesting object that has to be present in every application is the conformant object. Conformant is a container component that accounts for the space taken up by the indicator, virtual keyboard, and softkey windows. The conformant content will be resized and positioned based on the space available. When the virtual keyboard is displayed, the content does not change.</p>
<p class="figure">Figure: Basic EFL application structure</p>
-<p
style="text-align:center;"><img alt="Basic EFL application structure" src="../../images/elementary_app.png" /></p>
+<p
align="center"><img alt="Basic EFL application structure" src="../../images/elementary_app.png" /></p>
<h3 id="appcore">Basic Use of Appcore</h3>
<p>In Tizen, the life cycle of an application is handled by appcore. Appcore is a dedicated library developed for Tizen that provides a set of functions for handling the application life cycle. For example, appcore is responsible for sending the correct signals when the application is created, when the battery is low, when the application is sent to the background, and when the screen is rotated.</p>
-<p>You can see appcore in action in <a href="../../../../org.tizen.tutorials/html/native/ui/app_framework_tutorial_n.htm">Application Framework Tutorial</a>.</p>
+<p>You can see appcore in action in <a href="../../../../org.tizen.tutorials/html/native/app_framework/application_tutorial_n.htm#fundamentals">Handling the Application Fundamentals</a>.</p>
</div>
<div id="toc_border"><div id="toc">
- <p class="toc-title">Content </P>
+ <p class="toc-title">Content</p>
<ul class="toc">
<li><a href="#noti">Notification Window</a></li>
<li><a href="#shot">Screenshot</a></li>
<h2 id="noti" name="noti">Notification Window</h2>
-<p>The Notification Window API allows you to set and get the notification level of the notification window (which is of the EFL window type):</p>
+<p>The EFL UTIL API allows you to set and get the notification level of the notification window (which is of the EFL window type):</p>
<ul><li><span style="font-family: Courier New,Courier,monospace;">efl_util_set_notification_window_level()</span></li>
<li><span style="font-family: Courier New,Courier,monospace;">efl_util_get_notification_window_level()</span></li></ul>
<p class="figure">Figure: Window layers</p>
-<p
style="text-align:center;"><img alt="Window layers" src="../../images/efl_windowlayer.png" /></p>
+<p
align="center"><img alt="Window layers" src="../../images/efl_windowlayer.png" /></p>
<p>Each window is set to a specific layer according to its type or properties. Most application windows belong to the normal layer. However, in case of an important alarm or other information crucial to the user, you can set the window to belong to the notification layer. This ensures that the user notices the information immediately, because the window belonging to the notification layer is always shown above the windows in the normal layer.</p>
</li></ol>
<p class="figure">Figure: Notification levels</p>
-<p
style="text-align:center;"><img alt="Notification levels" src="../../images/efl_notilevels.png" /></p>
+<p
align="center"><img alt="Notification levels" src="../../images/efl_notilevels.png" /></p>
<p>The following code snippets shown how to make a notification window with a higher level.</p>
<h2 id="shot" name="shot">Screenshot</h2>
-<p>The Screen Shot API allows you to get the screen image to the user.</p>
+<p>The EFL UTIL SCREENSHOT API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__EFL__UTIL__SCREENSHOT__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__UTIL__SCREENSHOT__MODULE.html">wearable</a> applications) allows you to get the screen image to the user.</p>
<p>First you must make the <span style="font-family: Courier New,Courier,monospace;">efl_util_screenshot_h</span> structure and initialize the structure members with the <span style="font-family: Courier New,Courier,monospace;">efl_util_screenshot_initialize()</span> function. To take the actual screenshot, create screen capture data and return it to the <span style="font-family: Courier New,Courier,monospace;">tbm_surface</span> handler with the <span style="font-family: Courier New,Courier,monospace;">efl_util_screenshot_take_tbm_surface()</span> function.</p>
<p>When no longer needed, remember to free the <span style="font-family: Courier New,Courier,monospace;">efl_util_screenshot_h</span> structure with the <span style="font-family: Courier New,Courier,monospace;">efl_util_screenshot_deinitialize()</span> function.</p>
<h2 id="input_gen" name="input_gen">Input Generator</h2>
-<p>The Input Generator API allows you to generate input events (such as key and touch events).</p>
+<p>The EFL UTIL INPUT API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__EFL__UTIL__INPUT__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__UTIL__INPUT__MODULE.html">wearable</a> applications) allows you to generate input events (such as key and touch events).</p>
<p>First you initialize the input generator and select a device type with the <span style="font-family: Courier New,Courier,monospace;">efl_util_input_initialize_generator()</span> function. To generate actual key or touch events, use the <span style="font-family: Courier New,Courier,monospace;">efl_util_input_generate_key()</span> or <span style="font-family: Courier New,Courier,monospace;">efl_util_input_generate_touch()</span> function.</p>
<p>When no longer needed, remember to free the input generator with the <span style="font-family: Courier New,Courier,monospace;">efl_util_input_deinitialize_generator()</span> function.</p>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a href="../../../../org.tizen.tutorials/html/native/ui/ui_tutorials_n.htm">UI Tutorials</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__Eina__Group.html">Eina API</a></li>
+ <li><a href="../../../../org.tizen.tutorials/html/native/ui/ui_tutorials_n.htm">UI Framework Tutorials</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Eina__Group.html">Eina API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Eina__Group.html">Eina API for Wearable Native</a></li>
</ul>
</div></div>
</div>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a href="../../../../org.tizen.tutorials/html/native/ui/ui_tutorials_n.htm">UI Tutorials</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__Eina__Group.html">Eina API</a></li>
+ <li><a href="../../../../org.tizen.tutorials/html/native/ui/ui_tutorials_n.htm">UI Framework Tutorials</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Eina__Group.html">Eina API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Eina__Group.html">Eina API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<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>Elementary Widgets</title>
+ <title>Elementary</title>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
</div>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a href="../../../../org.tizen.tutorials/html/native/ui/ui_control_tutorials_n.htm">UI Control Tutorials</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API</a></li>
+ <li><a href="../../../../org.tizen.tutorials/html/native/ui/ui_component_tutorials_mn.htm">UI Components Tutorials</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Ecore__Group.html">Ecore API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje__Group.html">Edje API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Eina__Group.html">Eina API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
- <h1>Elementary Widgets</h1>
+ <h1>Elementary</h1>
+
+ <table class="note">
+<tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">This feature is supported in mobile applications only.</td>
+ </tr>
+ </tbody>
+ </table>
<h2 id="basics" name="basics">Elementary Basics</h2>
-<p>Elementary widgets are built in a hierarchical fashion. The idea is to factorize as much code as possible between widgets that behave in a similar manner, so as to facilitate the creation of new widgets. The Elementary widgets that we will use inherit a lot of their code from the container widgets and the layout widget (a container widget that takes a standard Edje design file and wraps it very thinly). We can therefore use the container and layout functions on them. We can also use Elementary object functions on them, such as <span style="font-family: Courier New,Courier,monospace">elm_object_part_content_set()</span>, <span style="font-family: Courier New,Courier,monospace">elm_object_part_content_get()</span>, and <span style="font-family: Courier New,Courier,monospace">elm_object_part_content_unset()</span>.</p>
+<p>Elementary UI components are built in a hierarchical fashion. The idea is to factorize as much code as possible between UI components that behave in a similar manner, so as to facilitate the creation of new UI components. The Elementary UI components that we will use inherit a lot of their code from the container UI components and the layout component (a container component that takes a standard Edje design file and wraps it very thinly). We can therefore use the container and layout functions on them. We can also use Elementary object functions on them, such as <span style="font-family: Courier New,Courier,monospace">elm_object_part_content_set()</span>, <span style="font-family: Courier New,Courier,monospace">elm_object_part_content_get()</span>, and <span style="font-family: Courier New,Courier,monospace">elm_object_part_content_unset()</span>.</p>
-<p>This programming guide does not describe the container widgets. More information about containers can be found in <a href="ui_control_n.htm#containers">Container Widgets</a>.</p>
+<p>This programming guide does not describe the container components. More information about containers can be found in <a href="ui_component_mn.htm#containers">Containers</a>.</p>
-<p>Generally, an Elementary widget can be added with the <span style="font-family: Courier New,Courier,monospace">elm_[widget_name]_add()</span> function, which returns an Evas object (<span style="font-family: Courier New,Courier,monospace">Evas_Object*</span>). The Evas object is then be passed to the functions that are used to configure the widget.</p>
+<p>Generally, an Elementary UI component can be added with the <span style="font-family: Courier New,Courier,monospace">elm_[UI_component_name]_add()</span> function, which returns an Evas object (<span style="font-family: Courier New,Courier,monospace">Evas_Object*</span>). The Evas object is then be passed to the functions that are used to configure the UI component.</p>
-<p>At the end of your application, the <span style="font-family: Courier New,Courier,monospace">elm_shutdown()</span> function takes care of freeing the allocated Elementary objects, so there is no need to separately deallocate widgets.</p>
+<p>At the end of your application, the <span style="font-family: Courier New,Courier,monospace">elm_shutdown()</span> function takes care of freeing the allocated Elementary objects, so there is no need to separately deallocate UI components.</p>
<h3 id="first_use" name="first_use">First Use of the Elementary Library</h3>
<th class="note">Note</th>
</tr>
<tr>
- <td class="note">An Elementary application should use the <span style="font-family: Courier New,Courier,monospace">ELM_MAIN()</span> macro, which already calls the <span style="font-family: Courier New,Courier,monospace">elm_init()</span> function. <a class="opensection" href="../../../../org.tizen.gettingstarted/html/first_app/first_app.htm#nativeapp">EFL Hello World Tutorial</a> shows a basic Elementary application that uses this macro.</td>
+ <td class="note">An Elementary application should use the <span style="font-family: Courier New,Courier,monospace">ELM_MAIN()</span> macro, which already calls the <span style="font-family: Courier New,Courier,monospace">elm_init()</span> function. The <a href="../../../../org.tizen.gettingstarted/html/native/first_app/first_app_n.htm">Hello World example</a> shows a basic Elementary application that uses this macro.</td>
</tr>
</tbody>
</table>
<p>Objects created using Elementary are always of type <span style="font-family: Courier New,Courier,monospace">Evas_Object*</span>. This means that Evas and Elementary functions can be used on an Elementary object. However, use Elementary functions on Elementary objects only when you do not know which API to use.</p>
-<p>Since an Elementary object can take up a lot of memory, the <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> type has been created for situations where you need to use a lot of items, such as in a genlist or gengrid widget, and save memory. Using the <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> type, an Elementary widget can, in theory, contain a lot of items while maintaining a small memory footprint. In practice, <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> is bigger than expected, but it is still a good idea to use it.</p>
+<p>Since an Elementary object can take up a lot of memory, the <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> type has been created for situations where you need to use a lot of items, such as in a genlist or gengrid component, and save memory. Using the <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> type, an Elementary UI component can, in theory, contain a lot of items while maintaining a small memory footprint. In practice, <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> is bigger than expected, but it is still a good idea to use it.</p>
<h3 id="callbacks" name="callbacks">Elementary Callbacks</h3>
<h4>Elementary Signal Callback</h4>
-<p>Using the <span style="font-family: Courier New,Courier,monospace">elm_object_signal_callback_add()</span> function, this callback can be registered on a signal coming from an Elementary widget's theme. The callback has nothing to do with input events (keyboard or mouse).</p>
+<p>Using the <span style="font-family: Courier New,Courier,monospace">elm_object_signal_callback_add()</span> function, this callback can be registered on a signal coming from an Elementary UI component's theme. The callback has nothing to do with input events (keyboard or mouse).</p>
<h4>Elementary Event Callback</h4>
<pre class="prettyprint">char *profile = elm_config_profile_get();</pre>
-<h3 id="scaling_widgets" name="scaling_widgets">Scaling Widgets</h3>
+<h3 id="scaling" name="scaling">Scaling UI Components</h3>
-<p>An Elementary configuration allows you to configure widget scaling both in terms of interactive areas and readable areas. For more information about widget scaling, see <a href="ui_control_n.htm#scalability">Scaling Widgets</a>.</p>
+<p>An Elementary configuration allows you to configure UI component scaling both in terms of interactive areas and readable areas. For more information about UI component scaling, see <a href="ui_component_mn.htm#scalability">Scaling UI Components</a>.</p>
-<p>Setting the global scaling factor to 2.0 will double the size of all scalable widgets:</p>
+<p>Setting the global scaling factor to 2.0 will double the size of all scalable UI components:</p>
<pre class="prettyprint">elm_config_scale_set(2.0);</pre>
<h3 id="customizing_themes" name="customizing_themes">Customizing Themes</h3>
-<p>Elementary uses Edje to theme its widgets. Edje provides a default theme for each widget. This theme can be changed per application using the <span style="font-family: Courier New,Courier,monospace">ELM_THEME</span> environment variable, or it can be modified globally with the <span style="font-family: Courier New,Courier,monospace">elementary_config</span> utility.</p>
+<p>Elementary uses Edje to theme its UI components. Edje provides a default theme for each UI component. This theme can be changed per application using the <span style="font-family: Courier New,Courier,monospace">ELM_THEME</span> environment variable, or it can be modified globally with the <span style="font-family: Courier New,Courier,monospace">elementary_config</span> utility.</p>
-<p>When you need custom styles, use extensions. Extensions allow you to write styles for specific widgets. Once set, the extension will completely replace the default theme of the widget.</p>
+<p>When you need custom styles, use extensions. Extensions allow you to write styles for specific UI components. Once set, the extension will completely replace the default theme of the UI component.</p>
<table class="note">
<tbody>
<th class="note">Note</th>
</tr>
<tr>
- <td class="note">When developing an extension, to respect the signals emitted and the elements that need to be in place, it is important to know how the widget is themed. If something is missing from the extension, it can break the widget's behavior.</td>
+ <td class="note">When developing an extension, to respect the signals emitted and the elements that need to be in place, it is important to know how the UI component is themed. If something is missing from the extension, it can break the UI component's behavior.</td>
</tr>
</tbody>
</table>
-<p>The <span style="font-family: Courier New,Courier,monospace">elm_theme_extension_add()</span> function is used to add the new extension to the list of Elementary themes. The style can then be applied to the widget with the <span style="font-family: Courier New,Courier,monospace">elm_object_style_set()</span> function.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">elm_theme_extension_add()</span> function is used to add the new extension to the list of Elementary themes. The style can then be applied to the UI component with the <span style="font-family: Courier New,Courier,monospace">elm_object_style_set()</span> function.</p>
-<p>Overlay is another solution to modify Elementary themes. It can replace the look of all widgets by overriding the default styles. As with extensions, it is up to you to write the correct overlay theme for a widget. When looking for a theme to apply, Elementary first checks the list of overlays, then the set theme, and finally the list of extensions. With overlays, it is therefore possible to replace the default view so that every widget is affected. This is very similar to setting the theme for the whole application, and will probably clash with end user options. It also runs the risk of none-matching styles across the application. Unless you have a very good reason to use them, avoid overlays. An overlay can be added with the <span style="font-family: Courier New,Courier,monospace">elm_theme_overlay_add()</span> function. It can be removed with the <span style="font-family: Courier New,Courier,monospace">elm_theme_overlay_del()</span> function.</p>
+<p>Overlay is another solution to modify Elementary themes. It can replace the look of all UI components by overriding the default styles. As with extensions, it is up to you to write the correct overlay theme for a UI component. When looking for a theme to apply, Elementary first checks the list of overlays, then the set theme, and finally the list of extensions. With overlays, it is therefore possible to replace the default view so that every UI component is affected. This is very similar to setting the theme for the whole application, and will probably clash with end user options. It also runs the risk of none-matching styles across the application. Unless you have a very good reason to use them, avoid overlays. An overlay can be added with the <span style="font-family: Courier New,Courier,monospace">elm_theme_overlay_add()</span> function. It can be removed with the <span style="font-family: Courier New,Courier,monospace">elm_theme_overlay_del()</span> function.</p>
-<p>For more information about widget theme customization, see <a href="widget_preferences_n.htm#customize">Customizing Widgets</a>.</p>
+<p>For more information about UI component theme customization, see <a href="preferences_n.htm#customize">Customizing UI Components</a>.</p>
<h3 id="config_focus" name="config_focus">Configuring Focus</h3>
</tbody>
</table>
-<p>Elementary also supports focus chains, which allow you to cycle through all the focusable objects in a window. By default, the focus chain is defined by the order in which the widgets were added to the code. It is also possible to define custom focus chains when needed.</p>
+<p>Elementary also supports focus chains, which allow you to cycle through all the focusable objects in a window. By default, the focus chain is defined by the order in which the UI components were added to the code. It is also possible to define custom focus chains when needed.</p>
<p>To define a custom focus chain, create an <span style="font-family: Courier New,Courier,monospace">Eina_List</span>, and add the Elementary objects to it in the desired focus order. After you have inserted all the objects to the <span style="font-family: Courier New,Courier,monospace">Eina_List</span>, use the <span style="font-family: Courier New,Courier,monospace">elm_object_focus_custom_chain_set()</span> function to set this list as the custom focus chain of the parent object (here <span style="font-family: Courier New,Courier,monospace">container_object</span>).</p>
<p>Use the <span style="font-family: Courier New,Courier,monospace">elm_object_focus_next()</span> function to programmatically cycle through the focus chain.</p>
-<p>For detailed information about focus, see <a href="widget_preferences_n.htm#focus">Managing Widget Focus</a>.</p>
+<p>For detailed information about focus, see <a href="preferences_n.htm#focus">Managing UI Component Focus</a>.</p>
<p>We can show a highlight on the focused object:</p>
<h3 id="config_scrolling" name="config_scrolling">Configuring Scrolling</h3>
-<p>An Elementary configuration provides several functions for configuring scrolling in widgets.</p>
+<p>An Elementary configuration provides several functions for configuring scrolling in UI components.</p>
<p>You can enable bouncing, which makes the scroller bounce when it reaches its viewport's edge during scrolling:</p>
<h3 id="config_long_press" name="config_long_press">Configuring Long Press</h3>
-<p>Long press events can be configured using the <span style="font-family: Courier New,Courier,monospace">elm_config</span> API. Here, we get the current timeout before a long press event happens and increase it by 1 second:</p>
+<p>Long press events can be configured using the <a href="../../../../org.tizen.native.mobile.apireference/group__Config.html">Elementary Config</a> API. Here, we get the current timeout before a long press event happens and increase it by 1 second:</p>
<pre class="prettyprint">// Get the long press timeout
double lp_timeout = elm_config_longpress_timeout_get();
<h3 id="config_tooltips" name="config_tooltips">Configuring Tooltips</h3>
-<p>The duration after which a tooltip is shown can be configured through the <span style="font-family: Courier New,Courier,monospace">elm_config</span> API. Here, we set the delay to 2 seconds:</p>
+<p>The duration after which a tooltip is shown can be configured through the Elementary Config API. Here, we set the delay to 2 seconds:</p>
<pre class="prettyprint">elm_config_tooltip_delay_set(2.0);</pre>
<h3 id="config_password" name="config_password">Configuring the Password Show Last Feature</h3>
-<p>The password show last feature enables users to view the last input entered for a few seconds before it is masked. The following functions allow you to set this feature in the password mode of the entry widget and to change the duration over which the input has to be visible.</p>
+<p>The password show last feature enables users to view the last input entered for a few seconds before it is masked. The following functions allow you to set this feature in the password mode of the entry component and to change the duration over which the input has to be visible.</p>
<p>First, we enable the password show last feature:</p>
<h3 id="config_elm_engine" name="config_elm_engine">Configuring the Elementary Engine</h3>
-<p>We can use <span style="font-family: Courier New,Courier,monospace">elm_config</span> to set the rendering engine that Elementary will use to draw the windows. The following rendering engines are supported:</p>
+<p>We can use the Elementary Config API to set the rendering engine that Elementary will use to draw the windows. The following rendering engines are supported:</p>
<ul>
<li>"software_x11"</li>
<h3 id="config_selection" name="config_selection">Configuring Selection</h3>
-<p>Selection behavior can be set to be cleared when the entry widget is unfocused:</p>
+<p>Selection behavior can be set to be cleared when the entry component is unfocused:</p>
<pre class="prettyprint">elm_config_selection_unfocused_clear_set(EINA_TRUE);</pre>
<h3 id="config_mirroring" name="config_mirroring">Configuring Mirroring</h3>
-<p>Elementary allows UI mirroring both on a single object and on the entire UI. If activated with the <span style="font-family: Courier New,Courier,monospace">elm_object_mirrored_set()</span> function, an Elementary widget will display as if there was a vertical mirror in the middle of it. Only the controls and the disposition of the widget are mirrored. Text is not mirrored.</p>
+<p>Elementary allows UI mirroring both on a single object and on the entire UI. If activated with the <span style="font-family: Courier New,Courier,monospace">elm_object_mirrored_set()</span> function, an Elementary UI component will display as if there was a vertical mirror in the middle of it. Only the controls and the disposition of the UI component are mirrored. Text is not mirrored.</p>
-<p>The default mirror mode of widgets can be set with <span style="font-family: Courier New,Courier,monospace">elm_config</span>. Here, we activate the mirror mode by default:</p>
+<p>The default mirror mode of UI components can be set with the Elementary Config API. Here, we activate the mirror mode by default:</p>
<pre class="prettyprint">elm_config_mirrored_set(EINA_TRUE);</pre>
--- /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>Elementary</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="toc-navigation">
+ <div id="profile">
+ <p><img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+ </div>
+
+ <div id="toc_border"><div id="toc">
+ <p class="toc-title">Content</p>
+ <ul class="toc">
+ <li><a href="#basics">Elementary Basics</a></li>
+ <li><a href="#config">Elementary Configuration</a></li>
+ </ul>
+ <p class="toc-title">Related Info</p>
+ <ul class="toc">
+ <li><a href="../../../../org.tizen.tutorials/html/native/ui/ui_component_tutorials_wn.htm">UI Components Tutorials</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Ecore__Group.html">Ecore API for Wearable Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje__Group.html">Edje API for Wearable Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Eina__Group.html">Eina API for Wearable Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+ <h1>Elementary</h1>
+
+ <table class="note">
+<tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">This feature is supported in wearable applications only.</td>
+ </tr>
+ </tbody>
+ </table>
+
+ <h2 id="basics" name="basics">Elementary Basics</h2>
+
+<p>Elementary UI components are built in a hierarchical fashion. The idea is to factorize as much code as possible between UI components that behave in a similar manner, so as to facilitate the creation of new UI components. The Elementary UI components that we will use inherit a lot of their code from the container UI components and the layout components (a container component that takes a standard Edje design file and wraps it very thinly). We can therefore use the container and layout functions on them. We can also use Elementary object functions on them, such as <span style="font-family: Courier New,Courier,monospace">elm_object_part_content_set()</span>, <span style="font-family: Courier New,Courier,monospace">elm_object_part_content_get()</span>, and <span style="font-family: Courier New,Courier,monospace">elm_object_part_content_unset()</span>.</p>
+
+<p>This programming guide does not describe the container components. More information about containers can be found in <a href="ui_component_wn.htm#containers">Containers</a>.</p>
+
+<p>Generally, an Elementary UI component can be added with the <span style="font-family: Courier New,Courier,monospace">elm_[UI_component_name]_add()</span> function, which returns an Evas object (<span style="font-family: Courier New,Courier,monospace">Evas_Object*</span>). The Evas object is then be passed to the functions that are used to configure the UI component.</p>
+
+<p>At the end of your application, the <span style="font-family: Courier New,Courier,monospace">elm_shutdown()</span> function takes care of freeing the allocated Elementary objects, so there is no need to separately deallocate UI components.</p>
+
+<h3 id="first_use" name="first_use">First Use of the Elementary Library</h3>
+
+<p>A minimal Elementary application looks like this:</p>
+
+<pre class="prettyprint">#include <Elementary.h>
+int main(int argc, char **argv)
+{
+ elm_init(argc, argv);
+ elm_run();
+ elm_shutdown();
+
+ return 0;
+}</pre>
+
+<p>First of all, before using the Elementary library, it has to be initialized with the <span style="font-family: Courier New,Courier,monospace">elm_init()</span> function. The Elementary main loop can then be started with the <span style="font-family: Courier New,Courier,monospace">elm_run()</span> function, which will not return, and will constantly loop and run the event and processing tasks. A call to the <span style="font-family: Courier New,Courier,monospace">elm_exit()</span> function will tell the main loop to stop and return to the main function. At the end of the application, the <span style="font-family: Courier New,Courier,monospace">elm_shutdown()</span> function will clean up all resources that were allocated with Elementary in the main loop, and finally shut down Elementary.</p>
+
+<table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">An Elementary application should use the <span style="font-family: Courier New,Courier,monospace">ELM_MAIN()</span> macro, which already calls the <span style="font-family: Courier New,Courier,monospace">elm_init()</span> function. The <a href="../../../../org.tizen.gettingstarted/html/native/first_app/first_app_n.htm">Hello World example</a> shows a basic Elementary application that uses this macro.</td>
+ </tr>
+ </tbody>
+</table>
+
+<h3 id="objects" name="objects">Elementary Objects</h3>
+
+<p>Objects created using Elementary are always of type <span style="font-family: Courier New,Courier,monospace">Evas_Object*</span>. This means that Evas and Elementary functions can be used on an Elementary object. However, use Elementary functions on Elementary objects only when you do not know which API to use.</p>
+
+<p>Since an Elementary object can take up a lot of memory, the <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> type has been created for situations where you need to use a lot of items, such as in a genlist or gengrid component, and save memory. Using the <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> type, an Elementary UI component can, in theory, contain a lot of items while maintaining a small memory footprint. In practice, <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> is bigger than expected, but it is still a good idea to use it.</p>
+
+<h3 id="callbacks" name="callbacks">Elementary Callbacks</h3>
+
+<p>Several callbacks can be registered on an Elementary object. The following is an overview of the different callback types and how they differ. For more information about events, see <a href="events_effects_n.htm#event_handling">Handling Events</a>. For more information about Evas objects and smart objects, see <a href="evas_n.htm#render">Rendering Concept and Method in Evas</a>.</p>
+
+<h4>Evas Event Callback</h4>
+
+<p>Using the <span style="font-family: Courier New,Courier,monospace">evas_object_event_callback_add()</span> function, this callback can be registered on an Elementary object. It adds a callback for input events (key up, key down, mouse wheel) on an Evas object. In the case of an Elementary object, the callback will be registered on the underlying Evas object without considering the Elementary object infrastructure (no event propagation).</p>
+
+<h4>Evas Smart Callback</h4>
+
+<p>Using the <span style="font-family: Courier New,Courier,monospace">evas_object_smart_callback_add()</span> function, this callback can be registered on a "smart event" emitted by an Elementary object. Smart callbacks can only be registered on smart objects, and the "smart event" we want to register must be implemented by the corresponding smart object. Otherwise, the callback will do nothing. The callback has nothing to do with input events (keyboard or mouse)</p>
+
+<h4>Edje Signal Callbacks</h4>
+
+<p>Using the <span style="font-family: Courier New,Courier,monospace">edje_object_signal_callback_add()</span> function, this callback can be registered on a signal coming from an Edje object (a theme object).</p>
+
+<h4>Elementary Signal Callback</h4>
+
+<p>Using the <span style="font-family: Courier New,Courier,monospace">elm_object_signal_callback_add()</span> function, this callback can be registered on a signal coming from an Elementary UI component's theme. The callback has nothing to do with input events (keyboard or mouse).</p>
+
+<h4>Elementary Event Callback</h4>
+
+<p>Using the <span style="font-family: Courier New,Courier,monospace">elm_object_event_callback_add()</span> function, this callback can be registered on an input event (keyboard or mouse) coming from an Elementary object. In contrast to the Evas event callback, the Elementary event callback takes the hierarchy of the object into account: the event can be propagated to the parents of the object, and the parents can then process the event.</p>
+
+ <h2 id="config" name="config">Elementary Configuration</h2>
+ <p>An Elementary configuration is composed of a set of options linked to a given Elementary profile. Once loaded, the Elementary profile will configure all these options and affect the look and feel of your entire Elementary application.</p>
+
+<p>An Elementary configuration can be used to store the desired set of options that fits your application. Below, we list the different options that can be saved in an Elementary profile.</p>
+
+<h3 id="general_functions" name="general_functions">General Functions</h3>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">elm_config_save()</span> function provides a way to save the current Elementary configuration so that it can be reused in another session:</p>
+
+<pre class="prettyprint">elm_config_save();</pre>
+
+<p>When a profile is selected, we can ask Elementary to reload its configuration with the saved profile:</p>
+
+<pre class="prettyprint">elm_config_reload();</pre>
+
+<h3 id="managing_profiles" name="managing_profiles">Managing Profiles</h3>
+
+<p>A profile is a set of preconfigured options that affects the entire look and feel of an application.</p>
+
+<p>We can list the existing profiles:</p>
+
+<pre class="prettyprint">Eina_List *list = elm_config_profile_list_get();</pre>
+
+<p>We can set a particular profile:</p>
+
+<pre class="prettyprint">elm_config_profile_set("myprofile");</pre>
+
+<p>We can get the current profile:</p>
+
+<pre class="prettyprint">char *profile = elm_config_profile_get();</pre>
+
+<h3 id="scaling" name="scaling">Scaling UI Components</h3>
+
+<p>An Elementary configuration allows you to configure UI component scaling both in terms of interactive areas and readable areas. For more information about UI component scaling, see <a href="ui_component_wn.htm#scalability">Scaling UI Components</a>.</p>
+
+<p>Setting the global scaling factor to 2.0 will double the size of all scalable UI components:</p>
+
+<pre class="prettyprint">elm_config_scale_set(2.0);</pre>
+
+<p>We can also set the finger size:</p>
+
+<pre class="prettyprint">elm_config_finger_size_set(1.5);</pre>
+
+<h3 id="config_cache" name="config_cache">Configuring the Cache</h3>
+
+<p>We can enable the globally configured cache flush, and we can then set the flush interval to 60 seconds:</p>
+
+<pre class="prettyprint">elm_config_cache_flush_enabled_set(EINA_TRUE);
+elm_config_cache_flush_interval_set(60);</pre>
+
+<p>We can configure the font cache size to 500 bytes and the image cache size to 5 000 000 bytes:</p>
+
+<pre class="prettyprint">elm_config_cache_font_cache_size_set(500);
+elm_config_cache_image_cache_size_set(5000000);</pre>
+
+<p>Finally, we can set the Edje collection cache size and the Edje file cache size:</p>
+
+<pre class="prettyprint">elm_config_cache_edje_file_cache_size_set(500);
+elm_config_cache_edje_collection_cache_size_set(500);</pre>
+
+<h3 id="customizing_themes" name="customizing_themes">Customizing Themes</h3>
+
+<p>Elementary uses Edje to theme its UI components. Edje provides a default theme for each UI component. This theme can be changed per application using the <span style="font-family: Courier New,Courier,monospace">ELM_THEME</span> environment variable, or it can be modified globally with the <span style="font-family: Courier New,Courier,monospace">elementary_config</span> utility.</p>
+
+<p>When you need custom styles, use extensions. Extensions allow you to write styles for specific UI components. Once set, the extension will completely replace the default theme of the UI component.</p>
+
+<table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">When developing an extension, to respect the signals emitted and the elements that need to be in place, it is important to know how the UI component is themed. If something is missing from the extension, it can break the UI component's behavior.</td>
+ </tr>
+ </tbody>
+</table>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">elm_theme_extension_add()</span> function is used to add the new extension to the list of Elementary themes. The style can then be applied to the UI component with the <span style="font-family: Courier New,Courier,monospace">elm_object_style_set()</span> function.</p>
+
+<p>Overlay is another solution to modify Elementary themes. It can replace the look of all UI components by overriding the default styles. As with extensions, it is up to you to write the correct overlay theme for a UI component. When looking for a theme to apply, Elementary first checks the list of overlays, then the set theme, and finally the list of extensions. With overlays, it is therefore possible to replace the default view so that every UI component is affected. This is very similar to setting the theme for the whole application, and will probably clash with end user options. It also runs the risk of none-matching styles across the application. Unless you have a very good reason to use them, avoid overlays. An overlay can be added with the <span style="font-family: Courier New,Courier,monospace">elm_theme_overlay_add()</span> function. It can be removed with the <span style="font-family: Courier New,Courier,monospace">elm_theme_overlay_del()</span> function.</p>
+
+<p>For more information about UI component theme customization, see <a href="preferences_n.htm#customize">Customizing UI Components</a>.</p>
+
+<h3 id="config_focus" name="config_focus">Configuring Focus</h3>
+
+<p>When an Elementary object has the focus, input events are directly passed to that object in the window of the application. The focused object can also change its decoration to show the user where the focus is. The focus can be set to an Elementary object at any time with the <span style="font-family: Courier New,Courier,monospace">elm_object_focus_set()</span> function. This will take the focus away from the previous focused object and give the focus to the new object. In an Elementary application, only one object can have the focus at a time. It is also possible to make an object unfocusable with the <span style="font-family: Courier New,Courier,monospace">elm_object_focus_allow_set()</span> function, so that the object will never take the focus.</p>
+
+<table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">Only visible objects can be focused.</td>
+ </tr>
+ </tbody>
+</table>
+
+<p>Elementary also supports focus chains, which allow you to cycle through all the focusable objects in a window. By default, the focus chain is defined by the order in which the UI components were added to the code. It is also possible to define custom focus chains when needed.</p>
+
+<p>To define a custom focus chain, create an <span style="font-family: Courier New,Courier,monospace">Eina_List</span>, and add the Elementary objects to it in the desired focus order. After you have inserted all the objects to the <span style="font-family: Courier New,Courier,monospace">Eina_List</span>, use the <span style="font-family: Courier New,Courier,monospace">elm_object_focus_custom_chain_set()</span> function to set this list as the custom focus chain of the parent object (here <span style="font-family: Courier New,Courier,monospace">container_object</span>).</p>
+
+<pre class="prettyprint">Eina_List *obj_list = NULL;
+
+list = eina_list_append(list, obj1);
+list = eina_list_append(list, obj4);
+list = eina_list_append(list, obj2);
+list = eina_list_append(list, obj3);
+
+elm_object_focus_custom_chain_set(container_object, list);</pre>
+
+<p>Use the <span style="font-family: Courier New,Courier,monospace">elm_object_focus_custom_chain_unset()</span> function to remove the custom focus chain and use the default focus chain instead.</p>
+
+<p>Use the <span style="font-family: Courier New,Courier,monospace">elm_object_focus_next()</span> function to programmatically cycle through the focus chain.</p>
+
+<p>For detailed information about focus, see <a href="preferences_n.htm#focus">Managing UI Component Focus</a>.</p>
+
+<p>We can show a highlight on the focused object:</p>
+
+<pre class="prettyprint">elm_config_focus_highlight_enabled_set(EINA_TRUE);</pre>
+
+<p>We can also activate an animation when the focus shifts from one object to another:</p>
+
+<pre class="prettyprint">elm_config_focus_highlight_animate_set(EINA_TRUE);</pre>
+
+<h3 id="config_gesture_layer" name="config_gesture_layer">Configuring the Gesture Layer</h3>
+
+<p>We can configure the duration of the long tap and double tap events on gesture layer objects. Here, we set the duration to 500 ms:</p>
+
+<pre class="prettyprint">elm_config_glayer_long_tap_start_timeout_set(0.5);
+elm_config_glayer_double_tap_timeout_set(0.5);</pre>
+
+<h3 id="config_scrolling" name="config_scrolling">Configuring Scrolling</h3>
+
+<p>An Elementary configuration provides several functions for configuring scrolling in UI components.</p>
+
+<p>You can enable bouncing, which makes the scroller bounce when it reaches its viewport's edge during scrolling:</p>
+
+<pre class="prettyprint">elm_config_scroll_bounce_enabled_set(EINA_TRUE);</pre>
+
+<p>You can control the inertia of the bounce animation. Here, the inertia is set to 0.5:</p>
+
+<pre class="prettyprint">elm_config_scroll_bounce_friction_set(0.5);</pre>
+
+<p>You can also set the friction for a page scroll, include animations, and zoom animations.</p>
+
+<p>You can use the <span style="font-family: Courier New,Courier,monospace">elm_config_scroll_thumbscroll_enabled_set()</span> function to set the scroller to be draggable. You can configure several drag options, such as friction, sensitivity, acceleration, and momentum.</p>
+
+<p>Here, we set the scroller to be draggable, and we set the number of pixels one should travel while dragging the scroller's view to actually trigger scrolling to 20 pixels:</p>
+
+<pre class="prettyprint">// Set the scroller to be draggable
+elm_config_scroll_thumbscroll_enabled_set(EINA_TRUE);
+
+// Set the thumbscroll threshold to 20 pixels
+elm_config_scroll_thumbscroll_threshold_set(20);</pre>
+
+<h3 id="config_long_press" name="config_long_press">Configuring Long Press</h3>
+
+<p>Long press events can be configured using the <a href="../../../../org.tizen.native.wearable.apireference/group__Config.html">Elementary Config</a> API. Here, we get the current timeout before a long press event happens and increase it by 1 second:</p>
+
+<pre class="prettyprint">// Get the long press timeout
+double lp_timeout = elm_config_longpress_timeout_get();
+
+// Increase it by 1 second
+elm_config_longpress_timeout_set(lp_timeout + 1.0);</pre>
+
+<h3 id="config_tooltips" name="config_tooltips">Configuring Tooltips</h3>
+
+<p>The duration after which a tooltip is shown can be configured through the Elementary Config API. Here, we set the delay to 2 seconds:</p>
+
+<pre class="prettyprint">elm_config_tooltip_delay_set(2.0);</pre>
+
+<h3 id="config_password" name="config_password">Configuring the Password Show Last Feature</h3>
+
+<p>The password show last feature enables users to view the last input entered for a few seconds before it is masked. The following functions allow you to set this feature in the password mode of the entry component and to change the duration over which the input has to be visible.</p>
+
+<p>First, we enable the password show last feature:</p>
+
+<pre class="prettyprint">elm_config_password_show_last_set(EINA_TRUE);</pre>
+
+<p>Then, we set the visibility timeout to 5 seconds:</p>
+
+<pre class="prettyprint">elm_config_password_show_last_timeout_set(5.0);</pre>
+
+<h3 id="config_elm_engine" name="config_elm_engine">Configuring the Elementary Engine</h3>
+
+<p>We can use the Elementary Config API to set the rendering engine that Elementary will use to draw the windows. The following rendering engines are supported:</p>
+
+<ul>
+ <li>"software_x11"</li>
+ <li>"fb"</li>
+ <li>"directfb"</li>
+ <li>"software_16_x11"</li>
+ <li>"software_8_x11"</li>
+ <li>"xrender_x11"</li>
+ <li>"opengl_x11"</li>
+ <li>"software_gdi"</li>
+ <li>"software_16_wince_gdi"</li>
+ <li>"sdl"</li>
+ <li>"software_16_sdl"</li>
+ <li>"opengl_sdl"</li>
+ <li>"buffer"</li>
+ <li>"ews"</li>
+ <li>"opengl_cocoa"</li>
+ <li>"psl1ght"</li>
+</ul>
+
+<p>Here, we set the engine to "opengl_x11":</p>
+
+<pre class="prettyprint">elm_config_engine_set("opengl_x11");</pre>
+
+<h3 id="config_access_mode" name="config_access_mode">Configuring the Access Mode</h3>
+
+<p>When the access mode is active, information about an Elementary object is read when the object receives an <span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_IN</span> event. Here, we activate the access mode:</p>
+
+<pre class="prettyprint">elm_config_access_set(EINA_TRUE);</pre>
+
+<h3 id="config_selection" name="config_selection">Configuring Selection</h3>
+
+<p>Selection behavior can be set to be cleared when the entry component is unfocused:</p>
+
+<pre class="prettyprint">elm_config_selection_unfocused_clear_set(EINA_TRUE);</pre>
+
+<h3 id="config_mirroring" name="config_mirroring">Configuring Mirroring</h3>
+
+<p>Elementary allows UI mirroring both on a single object and on the entire UI. If activated with the <span style="font-family: Courier New,Courier,monospace">elm_object_mirrored_set()</span> function, an Elementary UI component will display as if there was a vertical mirror in the middle of it. Only the controls and the disposition of the UI component are mirrored. Text is not mirrored.</p>
+
+<p>The default mirror mode of UI components can be set with the Elementary Config API. Here, we activate the mirror mode by default:</p>
+
+<pre class="prettyprint">elm_config_mirrored_set(EINA_TRUE);</pre>
+
+<h3 id="config_frame_rate" name="config_frame_rate">Configuring Frame Rate</h3>
+
+<p>We can also set the frames per second (FPS) value for <span style="font-family: Courier New,Courier,monospace">ecore_animator_frametime</span> and <span style="font-family: Courier New,Courier,monospace">edje_frametime</span> calculations. Here, we set the FPS to 60:</p>
+
+<pre class="prettyprint">elm_config_fps_set(60.0);</pre>
+
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</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
<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>External Output Manager (EOM)</title>
+ <title>EOM</title>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
- <p class="toc-title">Content</p>
- <ul class="toc">
- <li><a href="#mode">Mode</a></li>
- <li><a href="#attribute">Attribute for Presentation Mode</a></li>
- <li><a href="#noti">Notify to application</a></li>
- <li><a href="#getinfo">Get Information of External Output Device</a></li>
- <li><a href="#setinfo">Set to External Output Device</a></li>
- </ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a href="../../../../org.tizen.tutorials/html/native/graphics/eom_tutorial_n.htm">EOM Tutorial</a></li>
-<!-- ( <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__EOM__MODULE.html">EOM API</a></li>) -->
+ <li><a href="../../../../org.tizen.tutorials/html/native/ui/eom_tutorial_n.htm">EOM Tutorial</a></li>
+<!-- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__EOM__MODULE.html">EOM API for Mobile Native</a></li>
+<li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EOM__MODULE.html">EOM API for Wearable Native</a></li> -->
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
-<h1>External Output Manager (EOM)</h1>
- <p>External Output Manager(EOM) is a module to control external output devices.</p>
- <p>Until Tizen 2.3, Devicemgr(private module) is used for external output. But Devicemgr has some problems.</p>
- <p> - Devicemgr problems</p>
- <p> 1. Cannot know video-only mode start and stop.</p>
- <p> 2. Doesn't have method to notify to application about external output informations.</p>
- <p> 3. Application cannot display specific images to external output.)</p>
- <p>So module for external output is replaced to EOM from Tizen 2.4. EOM fixes devicemgr's problems and manages all convergence scenarios of external output.</p>
- <p>EOM is a module of enlightenment. And EOM has X and Walyland backend.</p>
+<h1>EOM</h1>
- <h2 id="mode" name="mode">Mode</h2>
- <p>EOM has two modes. One is Mirror mode, the other is Presentation mode.</p>
- <pre class="prettyprint">
- <p class="figure">Figure: EOM mode</p>
- <p style="text-align:center;"><img alt="Window layers" src="../../images/eom_mode.png" /></p>
- </pre>
- <P>Mirror mode is default mode. So if any application doesn't set presentation mode, Mirror mode will work by EOM module when external output device is connected.</P>
- <P>Presentation mode can be set by application. If application wants to display it's own image or video to external output device, application must use presentation mode.</P>
+ <p>The External Output Manager (EOM) is a module for controlling the external output devices.</p>
+<p>The main features of the EOM API include:</p>
+<ul>
+<li>Managing modes
+ <ul>
+ <li>The mirror mode is the default mode. If a mode is not specified, the EOM uses the mirror mode when an external output device is connected.
+
+ <p class="figure">Figure: Mirror mode</p>
+ <p align="center"><img alt="Mirror mode" src="../../images/eom_mirror_mode.png" /></p>
+
+ </li>
+ <li>The presentation mode can be set by an application. If the application wants to display an image or video only in an external output device, the presentation mode must be used.
+ <p class="figure">Figure: Presentation mode</p>
+ <p align="center"><img alt="Presentation mode" src="../../images/eom_presentation_mode.png" /></p>
+
+ <p>You must use the EOM attributes to set the presentation mode by defining the EOM priority. With these attributes, you can display a fullscreen window on the external output device.</p>
+ <table>
+ <caption>Table: Presentation mode attributes</caption>
+ <tbody>
+ <tr>
+ <th>Attribute</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">EOM_OUTPUT_ATTRIBUTE_NORMAL</span></td>
+ <td>This priority can be set, if the current priority is none (mirror mode) or <span style="font-family: Courier New,Courier,monospace">NORMAL</span>.
+ <p>This priority cannot be set, if the current priority is <span style="font-family: Courier New,Courier,monospace">EXCLUSIVE_SHARE</span> or <span style="font-family: Courier New,Courier,monospace">EXCLUSIVE</span>.</p>
+ </td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">EOM_OUTPUT_ATTRIBUTE_EXCLUSIVE_SHARE</span></td>
+ <td>This priority can be set, if the current priority is none (mirror mode), <span style="font-family: Courier New,Courier,monospace">NORMAL</span>, or <span style="font-family: Courier New,Courier,monospace">EXCLUSIVE_SHARE</span>.
+ <p>This priority cannot be set, if the current priority is <span style="font-family: Courier New,Courier,monospace">EXCLUSIVE</span>.</p>
+ </td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">EOM_OUTPUT_ATTRIBUTE_EXCLUSIVE</span></td>
+ <td>This priority can be set, if the current priority is none (mirror mode), <span style="font-family: Courier New,Courier,monospace">NORMAL</span>, or <span style="font-family: Courier New,Courier,monospace">EXCLUSIVE</span>.
+ <p>This priority cannot be set, if the current priority is <span style="font-family: Courier New,Courier,monospace">EXCLUSIVE_SHARE</span>.</p>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <p>In most applications, the <span style="font-family: Courier New,Courier,monospace">EOM_OUTPUT_ATTRIBUTE_NORMAL</span> priority is the best option.</p>
- <h2 id="attribute" name="attribute">Attribute for Presentation Mode</h2>
- <p>Applications have to use EOM attributes to set presentation mode.</p>
- <p>There are three priorities of EOM attribute. The meaning of set attribute is the application wants to display a window with fullscreen size on the external output. </p>
- <table>
- <caption>
- Table: Attribute for presentation mode
- </caption>
- <tbody>
- <tr>
- <th>Attribute</th>
- <th>Description</th>
- </tr>
- <tr>
- <td rowspan="2"><span style="font-family: Courier New,Courier,monospace">EOM_OUTPUT_ATTRIBUTE_NORMAL</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">Can set normal if none(mirror mode) or normal attribute state</span></td>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">Cannot set normal if exclusive_share or exclusive attribute state</span></td>
- </tr>
- <tr>
- <td rowspan="2"><span style="font-family: Courier New,Courier,monospace">EOM_OUTPUT_ATTRIBUTE_EXCLUSIVE_SHARE</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">Can set exclusive_share if none(mirror mode), normal or exclusive_share attribute state</span></td>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">Cannot set exclusive_share if exclusive attribute set state</span></td>
- </tr>
- <tr>
- <td rowspan="2"><span style="font-family: Courier New,Courier,monospace">EOM_OUTPUT_ATTRIBUTE_EXCLUSIVE</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">Can set exclusive if none(mirror mode), normal or exclusive_share attribute state</span></td>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">Cannot set exclusive if exclusive attribute set state</span></td>
- </tr>
- </tbody>
- </table>
+ </li>
+ </ul>
+</li>
+<li>Receiving notifications
+ <p>The EOM can send a notification event to the application. The EOM tracks several changes, such as additions and removals in the external output, mode changes, and attribute state changes, and can notify the application about them.</p></li>
+<li>Getting information about the external output device
+ <p>You can get information about the external output device by using various functions. For example, to get the ID of the external output device, use the <span style="font-family: Courier New,Courier,monospace">eom_get_eom_output_ids()</span> function, and to get attribute information, use the <span style="font-family: Courier New,Courier,monospace">eom_get_output_attribute()</span> function.</p>
+</li>
+<li>Setting the external output
+ <p>The application can set information (such as attributes and window size) in the EOM.</p>
+ <p>Use the <span style="font-family: Courier New,Courier,monospace">eom_set_output_attribute()</span> function to set the presentation mode, and use the <span style="font-family: Courier New,Courier,monospace">eom_set_output_window()</span> function to set the window to the external output with the best resolution of the external output device.</p>
+</li>
+</ul>
- <h2 id="noti" name="noti">Notify to application</h2>
- <p>EOM can send notification event to application. Eom checks several changes(external output add and remove, mode change, attribute state change) and sends notification events to EOM client.</p>
- <p>So application(EOM client) can get the status of external output. EOM client has to register callback functions to get information.</p>
- <table>
- <caption>
- Table: EOM Notify event
- </caption>
- <tbody>
- <tr>
- <th>Callback Type</th>
- <th>Description</th>
- <th>Function</th>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">eom_output_add_cb</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">Send event when the external output is connected</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">eom_set_output_added_cb, eom_unset_output_added_cb</span></td>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">eom_output_remove_cb</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">Send event when the external output is disconnected</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">eom_set_output_removed_cb, eom_unset_output_removed_cb</span></td>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">eom_mode_change_cb</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">Send event when the EOM output mode is changed</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">eom_set_mode_changed_cb, eom_unset_mode_changed_cb</span></td>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">eom_attribute_change_cb</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">Send event when the state of the EOM output attribute is changed</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">eom_set_attribute_changed_cb, eom_unset_attribute_changed_cb</span></td>
- </tr>
- </tbody>
- </table>
- <h2 id="getinfo" name="getinfo">Get Information of External Output Device</h2>
- <p>By using below APIs, application can get information of external output device from EOM.</p>
- <table>
- <caption>
- Table: APIs for get external output device information
- </caption>
- <tbody>
- <tr>
- <th>Function</th>
- <th>Description</th>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">eom_get_eom_output_ids</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">Gets the ID of external output devices</span></td>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">eom_get_output_type</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">Gets the connection type of external output (HDMI, Virtual, VGA, etc)</span></td>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">eom_get_output_mode</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">Gets the mode of external output (NONE, MIRROR, PRESENTATION)</span></td>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">eom_get_output_attribute</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">Gets the attribute information (NORMAL, EXCLUSIVE_SHARE, EXCLUSIVE)</span></td>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">eom_get_output_attribute_state</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">Gets the attribute state information (NONE, ACTIVE, INACTIVE, LOST)</span></td>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">eom_get_output_resolution</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">Gets the best resolution of external output device</span></td>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">eom_get_output_physical_size</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">Gets the physical size of external output device</span></td>
- </tr>
- </tbody>
- </table>
+
- <h2 id="setinfo" name="setinfo">Set to External Output Device</h2>
- <p>By using below APIs, application can set information to EOM.</p>
- <table>
- <caption>
- Table: APIs for set information
- </caption>
- <tbody>
- <tr>
- <th>Function</th>
- <th>Description</th>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">eom_set_output_attribute</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">Sets to presentation mode by setting attribute to EOM</span></td>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">eom_set_output_window</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">Sets window to the external output best resolution of external output device</span></td>
- </tr>
- </tbody>
- </table>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.tutorials/html/native/ui/evas_tutorial_n.htm">Evas Tutorial</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Ecore__Group.html">Ecore API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Ecore__Group.html">Ecore API for Wearable Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<p>Evas optimizes the rendering pipeline to minimize effort in redrawing changes made to the canvas and so takes this work out of the programmers hand, saving a lot of time and energy.</p>
<p>It is designed to work on embedded systems all the way to large and powerful multi-cpu workstations. It can be compiled to only have the features you need for your target platform if you so wish. It has several display back-ends, allowing it display on several display systems, making it portable for cross-device and cross-platform development.</p>
-<p>Evas is not a widget set or a widget toolkit, but it is their base. See Elementary for a toolkit based on Evas, Edje, Ecore and other Enlightenment technologies.</p>
+<p>Evas is not a UI component set or a UI component toolkit, but it is their base. See Elementary for a toolkit based on Evas, Edje, Ecore and other Enlightenment technologies.</p>
<p>It is not dependent or aware of main loops, input or output systems. Input must be polled from various sources and fed to Evas. It does not create windows or report windows updates to your system, but draws the pixels and reports to the user the areas that are changed. These operations are ready to be used in Ecore, particularly in Ecore_Evas wrapper/helper set of functions.</p>
<h2 id="render" name="render">Rendering Concept and Method in Evas </h2>
draw image bitmap_handle at position (10, 30);
</pre>
<p>The series of commands is executed by the windowing system and the results are typically displayed on the screen. Once the commands are executed, the display system does not know how to reproduce this image again, and has to be instructed by the application on how to redraw sections of the screen if needed. Each successive command is executed as instructed by the application and either emulated by software or sent to the graphics hardware on the device to be performed.</p>
-<p>The advantage of such a system is that it is simple and gives a program tight control over how something looks and is drawn. Given the increasing complexity of displays and demands by users to have better looking interfaces, more work needs to be done at this level by the internals of widget sets, custom display widgets and other programs. This means that more logic and display rendering code needs to be written again each time the application needs to figure out how to minimize redraws so that display is fast and interactive, and keep track of redraw logic.</p>
+<p>The advantage of such a system is that it is simple and gives a program tight control over how something looks and is drawn. Given the increasing complexity of displays and demands by users to have better looking interfaces, more work needs to be done at this level by the internals of UI component sets, custom display components and other programs. This means that more logic and display rendering code needs to be written again each time the application needs to figure out how to minimize redraws so that display is fast and interactive, and keep track of redraw logic.</p>
<p>For example, if in the scene below, the windowing system requires the application to redraw the area from 0, 0 to 50, 50 (also referred to as the "expose event"). Then the programmer calculates manually the updates and repaints it again.</p>
<pre class="prettyprint">
Redraw from position (0, 0) to position (50, 50):
<p>This looks longer, but when the display needs to be refreshed or updated, the programmer only moves, resizes, shows, hides etc. the objects that need to change. The programmer thinks at the object logic level, and the canvas software does the rest of the work, figuring out what changed in the canvas since it was last drawn, how to most efficiently redraw the canvas and its contents to reflect the current state, and doing the actual drawing of the canvas.</p>
<p>This allows the programmer think in a more natural way when dealing with a display, and saves time and effort of working out how to load and display images, to render given the current display system etc. Since Evas is portable across different display systems, this gives the programmer the ability to port and display the code on different display systems with little work.</p>
-<p>Evas is a display system somewhere between a widget set and an immediate mode display system. It retains basic display logic, but does little high-level logic such as scrollbars, sliders, push buttons etc.</p>
+<p>Evas is a display system somewhere between a UI component set and an immediate mode display system. It retains basic display logic, but does little high-level logic such as scrollbars, sliders, push buttons etc.</p>
<p>For more information on the UI rendering modes (immediate and retained), see <a href="#ui_rendering">UI Rendering Mode</a>.</p>
<h2 id="evas" name="evas">Evas Object </h2>
-<p>An Evas object is the most basic visual entity used in Evas. Everything, be it a single line or a complex list of widgets, is an Evas object.</p>
+<p>An Evas object is the most basic visual entity used in Evas. Everything, be it a single line or a complex list of UI components, is an Evas object.</p>
<h3 id="renderable" name="renderable">Primitive Renderable Objects</h3>
<p>Primitive objects are the base upon which to build a complex interface: rectangles, lines, polygons, <a href="#image">images</a>, <a href="#block">textblocks</a>, and texts.</p>
<p>A common requirement of Evas programs is to have a solid color background, which can be accomplished with the following code.</p>
<pre class="prettyprint">Evas_Object *bg = evas_object_rectangle_add(evas_canvas);
-//Here we set the rectangles red, green, blue and opacity levels
+// Here we set the rectangles red, green, blue and opacity levels
evas_object_color_set(bg, 255, 255, 255, 255); // opaque white background
evas_object_resize(bg, WIDTH, HEIGHT); // covers full canvas
evas_object_show(bg);
<h3 id="smart" name="smart">Primitive Smart Objects</h3>
-<p>A smart object is a special Evas object that provides custom functions to handle automatically clipping, hiding, moving, resizing color setting and more on child elements, for the smart object's user. They could be, for example, a group of objects that move together, or implementations of whole complex UI widgets, providing some intelligence and extension to simple Evas objects.</p>
+<p>A smart object is a special Evas object that provides custom functions to handle automatically clipping, hiding, moving, resizing color setting and more on child elements, for the smart object's user. They could be, for example, a group of objects that move together, or implementations of whole complex UI components, providing some intelligence and extension to simple Evas objects.</p>
<h3 id="container_objects" name="container_objects">Primitive Container Objects</h3>
<p>A container is a Smart object that holds children Evas objects in a specific fashion.</p>
<p>The image formats that Evas supports include <span style="font-family: Courier New,Courier,monospace">bmp</span>, <span style="font-family: Courier New,Courier,monospace">edj</span>, <span style="font-family: Courier New,Courier,monospace">gif</span>, <span style="font-family: Courier New,Courier,monospace">ico</span>, <span style="font-family: Courier New,Courier,monospace">jpeg</span>, <span style="font-family: Courier New,Courier,monospace">pmaps</span>, <span style="font-family: Courier New,Courier,monospace">png</span>, <span style="font-family: Courier New,Courier,monospace">psd</span>, <span style="font-family: Courier New,Courier,monospace">svg</span>, <span style="font-family: Courier New,Courier,monospace">tga</span>, <span style="font-family: Courier New,Courier,monospace">tiff</span>, <span style="font-family: Courier New,Courier,monospace">wbmp</span>, <span style="font-family: Courier New,Courier,monospace">webp</span>, and <span style="font-family: Courier New,Courier,monospace">xpm</span>.</p>
<p class="figure">Figure: Evas image loader</p>
- <p
style="text-align:center;"><img alt="Evas image loader" src="../../images/evas_image_loader.png" /></p>
+ <p
align="center"><img alt="Evas image loader" src="../../images/evas_image_loader.png" /></p>
<h4>Evas Object Image Functions</h4>
}
</pre>
<p class="figure">Figure: Image object display</p>
- <p
style="text-align:center;"><img alt="Image object display" src="../../images/evas_object_display.png" /></p>
+ <p
align="center"><img alt="Image object display" src="../../images/evas_object_display.png" /></p>
<h4>Image Scaling</h4>
<p>Users can decide how to fill the image object area with the given image pixel data by setting the position, width, and height of the image using the <span style="font-family: Courier New,Courier,monospace">evas_object_image_fill_set()</span> function. Without setting this information, the image is not displayed. If the size of the image is bigger than the image object area, only a sub-region of the original image is displayed. If the image is smaller than the area, images are tiled repeatedly to fill the object area.</p>
<p class="figure">Figure: Image scaling</p>
- <p
style="text-align:center;"><img alt="Image scaling" src="../../images/evas_image_scaling.png" /></p>
+ <p
align="center"><img alt="Image scaling" src="../../images/evas_image_scaling.png" /></p>
<table>
<tbody>
<tr>
- <td><p
style="text-align:center;"><img alt="" src="../../images/evas_scaling1.png" /></p></td>
- <td><p
style="text-align:center;"><img alt="" src="../../images/evas_scaling2.png" /></p></td>
- <td><p
style="text-align:center;"><img alt="" src="../../images/evas_scaling3.png" /></p></td>
+ <td><p
align="center"><img alt="" src="../../images/evas_scaling1.png" /></p></td>
+ <td><p
align="center"><img alt="" src="../../images/evas_scaling2.png" /></p></td>
+ <td><p
align="center"><img alt="" src="../../images/evas_scaling3.png" /></p></td>
</tr>
<tr>
<td style="text-align:center;"><span style="font-family: Courier New,Courier,monospace">evas_object_image_fill_set(obj, 50, 0, 300, 300)</span></td>
<caption>Figure: Smooth scaling effects</caption>
<tbody>
<tr>
- <td><p style="text-align:center;"><img alt="" src="../../images/evas_smooth_enabled.png" /></p></td>
- <td><p style="text-align:center;"><img alt="" src="../../images/evas_smooth_disabled.png" /></p></td>
+ <td><p align="center"><img alt="Smooth scaling effects" src="../../images/evas_smooth_enabled.png" /></p></td>
+ <td><p align="center"><img alt="Smooth scaling effects" src="../../images/evas_smooth_disabled.png" /></p></td>
</tr>
<tr>
<td style="text-align:center;">Smooth scaling enabled</td>
evas_object_image_data_update_add(image, 85, 200, 160, 80);
</pre>
-
<p class="figure">Figure: Partial image update</p>
- <p
style="text-align:center;"><img alt="Partial image update" src="../../images/evas_partial_update.png" /></p>
+ <p class="figure">Figure: Partial image update</p>
+ <p
align="center"><img alt="Partial image update" src="../../images/evas_partial_update.png" /></p>
<p>The following code creates an image object and sets a source file on it. Then it implements the blur effect to the pixel data and saves them using the <span style="font-family: Courier New,Courier,monospace">evas_object_image_save()</span> function.</p>
<caption>Figure: Blur effect</caption>
<tbody>
<tr>
- <td><p style="text-align:center;"><img alt="" src="../../images/evas_blur1.png" /></p></td>
- <td><p style="text-align:center;"><img alt="" src="../../images/evas_blur2.png" /></p></td>
+ <td><p align="center"><img alt="Blur effect" src="../../images/evas_blur1.png" /></p></td>
+ <td><p align="center"><img alt="Blur effect" src="../../images/evas_blur2.png" /></p></td>
</tr>
<tr>
<td style="text-align:center;">Before</td>
<p>The immediate mode is the most commonly used in graphics toolkit libraries, such as GTK+, GDI, and GDI+. The application is responsible for repainting the portion of the client area that is invalidated.</p>
<p class="figure">Figure: Immediate mode</p>
-<p
style="text-align:center;"><img alt="Immediate mode" src="../../images/immediate_mode.png" /></p>
+<p
align="center"><img alt="Immediate mode" src="../../images/immediate_mode.png" /></p>
<p>The application commands any drawing issues as it needs, and the display system draws some GUIs. After the drawing is done, it appears in the destination. This mode allows you to have a exact control over the render cycles. However, if the draw commands are misused, unnecessary drawing can be performed or drawing never happen at all.</p>
<p>The following example explains the common usage of the immediate mode:</p>
<p>A graphics system adopting the retained mode is basically responsible for responding to all repaint requests for rendering the application objects. Clients do not directly cause actual rendering, but objects are redrawn when parts of them are updated.</p>
<p class="figure">Figure: Retained mode</p>
-<p
style="text-align:center;"><img alt="Retained mode" src="../../images/retained_mode.png" /></p>
+<p
align="center"><img alt="Retained mode" src="../../images/retained_mode.png" /></p>
<p>Since Evas works with the retained mode, there is no need to command any drawings. The following example shows how to write a GUI code with Evas for your application:</p>
<p>Tizen Native applications work on the ecore main loop, and the loop goes on a few steps for every frame. Evas redraws some changes in the objects when the main loop goes to the idle enterer step. If there are no changes, Evas rendering is skipped. Otherwise, Evas calculates any changed portions of all display objects and redraws them.</p>
<p class="figure">Figure: Evas rendering in the main loop</p>
-<p
style="text-align:center;"><img alt="Evas rendering in the main loop" src="../../images/rendering1.png" /></p>
+<p
align="center"><img alt="Evas rendering in the main loop" src="../../images/rendering1.png" /></p>
<p>To minimize the rendering, Evas tracks the states of all display objects, such as position, size, visibility, and color. Even if some of these states are changed but the object is hidden by other obscured objects, it is not redrawn. In other words, Evas draws only the necessary changes in the screen.</p>
<ul><li><p>In the first example, there is a blue-color background object (a sky-blue color rectangle) and a partially hidden cloud image object. Above them, there are a red and green rectangle, and the "Hello out there" text is printed on the green rectangle.</p>
<p class="figure">Figure: Evas redrawing example 1</p>
-<p
style="text-align:center;"><img alt="Evas redrawing example 1" src="../../images/redrawing01.png" /></p> </li>
+<p
align="center"><img alt="Evas redrawing example 1" src="../../images/redrawing01.png" /></p> </li>
<li><p>In the second example, some of the objects have moved (the cloud image is moved to right and the green rectangle is moved downwards).</p>
<p class="figure">Figure: Evas redrawing example 2</p>
-<p
style="text-align:center;"><img alt="Evas redrawing example 2" src="../../images/redrawing02.png" /></p> </li>
+<p
align="center"><img alt="Evas redrawing example 2" src="../../images/redrawing02.png" /></p> </li>
<li><p>As a result, the third example illustrates some regions that require updates.</p>
<p class="figure">Figure: Evas redrawing example 3</p>
-<p
style="text-align:center;"><img alt="Evas redrawing example 3" src="../../images/redrawing03.png" /></p> </li>
+<p
align="center"><img alt="Evas redrawing example 3" src="../../images/redrawing03.png" /></p> </li>
<li><p>Evas decides which portions are invalid and to be redrawn. The fourth example shows the cleaned portion of the screen, which is the redrawn area.</p>
<p>Evas redraws the content only in the redrawn portions.</p>
<p class="figure">Figure: Evas redrawing example 4</p>
-<p
style="text-align:center;"><img alt="Evas redrawing example 4" src="../../images/redrawing04.png" /></p></li>
+<p
align="center"><img alt="Evas redrawing example 4" src="../../images/redrawing04.png" /></p></li>
<li><p>Finally, the fifth example shows how the screen is updated and the result is visible.</p>
<p class="figure">Figure: Evas redrawing example 5</p>
-<p
style="text-align:center;"><img alt="Evas redrawing example 5" src="../../images/redrawing05.png" /></p>
+<p
align="center"><img alt="Evas redrawing example 5" src="../../images/redrawing05.png" /></p>
<p>If Evas worked in an immediate mode style, the application would need to calculate the changed areas themselves, adding extra work. With Evas, you can let Evas figure out the updates and you can yourself concentrate on the application and UI core and logic.</p></li></ul>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a href="../../../../org.tizen.tutorials/html/native/ui/events_effects_tutorials_n.htm">Event and Effect Tutorials</a></li>
+ <li><a href="../../../../org.tizen.tutorials/html/native/ui/events_effects_tutorials_n.htm">Event and Effect Tutorials</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Ecore__Group.html">Ecore API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje__Group.html">Edje API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Ecore__Group.html">Ecore API for Wearable Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje__Group.html">Edje API for Wearable Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>
</ul>
</div></div>
</div>
</ul>
<p>Ecore events are used for low-level handling of events such as key presses, network connections, and communication with sub-processes.</p>
-<p>The low-level handling of key presses is particularly useful for shortcuts: instead of adding a signal handler to a specific graphical element, you can add one globally. This guarantees that no matter which widget is currently receiving events, the shortcut is caught.</p>
+<p>The low-level handling of key presses is particularly useful for shortcuts: instead of adding a signal handler to a specific graphical element, you can add one globally. This guarantees that no matter which UI component is currently receiving events, the shortcut is caught.</p>
<p>Note that ecore events are also used to implement new graphical back-ends, but they are low-level and not useful for most applications.</p>
<h3 id="ecore_events_useful_for_shortcuts">Ecore Events Useful for Shortcuts</h3>
</ul>
<h3 id="events_guide_edje_with_layout" name="events_guide_edje_with_layout">Usual Usage for Parts Aggregated in Groups: with Layouts</h3>
-<p>Most of the time, edje and elementary are used together. In particular, you can define a group in Edje and use it as a layout in Elementary. This enables doing the theming and object placement in Edje while benefiting from the higher-level functions of Elementary. This is achieved through <span style="font-family: Courier New,Courier,monospace">layouts</span>, which contain several parts and are explained in the <a href="containers_n.htm#layout">Layout Container</a> guide.</p>
+<p>Most of the time, edje and elementary are used together. In particular, you can define a group in Edje and use it as a layout in Elementary. This enables doing the theming and object placement in Edje while benefiting from the higher-level functions of Elementary. This is achieved through <span style="font-family: Courier New,Courier,monospace">layouts</span>, which contain several parts and are explained in the Layout guide (in <a href="containers_mn.htm#layout">mobile</a> and <a href="containers_wn.htm#layout">wearable</a> applications).</p>
<p>Since there are several parts in a layout, it is not possible to use <span style="font-family: Courier New,Courier,monospace">elm_object_signal_callback_add()</span> and <span style="font-family: Courier New,Courier,monospace">edje_object_signal_callback_add()</span>, as they require a single emitter object. The solution is to use the dedicated function <span style="font-family: Courier New,Courier,monospace">elm_layout_signal_callback_add()</span>. Its prototype is shown below.</p>
<pre class="prettyprint">void
elm_layout_signal_callback_add(Evas_Object *obj, const char *emission, const char *source,
Edje_Signal_Cb func, void *data)
</pre>
-<p><span style="font-family: Courier New,Courier,monospace">elm_layout_signal_callback_add()</span> works very similarly to the functions described in the previous section. The only difference is the type of the object in the first parameter. For <span style="font-family: Courier New,Courier,monospace">elm_layout_signal_callback_add()</span> it is a pointer to an Evas_Object, which is obtained through <span style="font-family: Courier New,Courier,monospace">elm_layout_add()</span> as described in the <a href="containers_n.htm#layout">Layout Container</a> guide. </p>
+<p><span style="font-family: Courier New,Courier,monospace">elm_layout_signal_callback_add()</span> works very similarly to the functions described in the previous section. The only difference is the type of the object in the first parameter. For <span style="font-family: Courier New,Courier,monospace">elm_layout_signal_callback_add()</span> it is a pointer to an Evas_Object, which is obtained through <span style="font-family: Courier New,Courier,monospace">elm_layout_add()</span> as described in the Layout guide (in <a href="containers_mn.htm#layout">mobile</a> and <a href="containers_wn.htm#layout">wearable</a> applications). </p>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.tutorials/html/native/ui/events_effects_tutorials_n.htm">Event and Effect Tutorials</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UI__FRAMEWORK.html">UI API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Ecore__Group.html">Ecore API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Ecore__Group.html">Ecore API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<li><a href="event_types_n.htm#evas">Evas events</a> are events on the graphical canvas as a whole. They are fairly low-level and mostly useful when drawing directly on the canvas.</li>
</ul>
-
<p class="figure">Figure: Event types in the EFLs: Inner boxes are more specific than outer ones</p>
- <p
style="text-align:center;"><img alt="Event types in the EFLs: Inner boxes are more specific than outer ones" src="../../images/events_scope.png" /></p>
+ <p class="figure">Figure: Event types in the EFLs: Inner boxes are more specific than outer ones</p>
+ <p
align="center"><img alt="Event types in the EFLs: Inner boxes are more specific than outer ones" src="../../images/events_scope.png" /></p>
<p>Events enable operations taking more than a few milliseconds' time to be executed outside of the mainloop, therefore not blocking UI redraws.</p>
<p>Below is an illustration for the event flow that follows a click on the screen.</p>
-
<p class="figure">Figure: Event flow for a user click</p>
- <p
style="text-align:center;"><img alt="Event flow for a user click" src="../../images/events_flow.png" /></p>
+ <p class="figure">Figure: Event flow for a user click</p>
+ <p
align="center"><img alt="Event flow for a user click" src="../../images/events_flow.png" /></p>
<h2 id="animation_effect" name="animation_effect">Creating Animations and Effects</h2>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.tutorials/html/native/ui/font_settings_tutorial_n.htm">Font Setting Tutorial</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje__Object__Text__Class.html">Edje Text class API</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__Fonts.html">Elementary Fonts API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje__Group.html">Edje API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje__Group.html">Edje API for Wearable Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<h1>Font Setting</h1>
-<p>Tizen provides various methods for setting fonts of the application text. Basically, all widgets have a default font, which can be changed according to the system settings.</p>
+<p>Tizen provides various methods for setting fonts of the application text. Basically, all UI components have a default font, which can be changed according to the system settings.</p>
<p>The font handling methods include:</p>
<ul>
- <li>Setting the font for a widget using the <a href="../../../../org.tizen.native.mobile.apireference/group__Fonts.html">Elementary Fonts</a> API</li>
+ <li>Setting the font for a UI component using the Elementary Fonts API (in <a href="../../../../org.tizen.native.mobile.apireference/group__Fonts.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__Fonts.html">wearable</a> applications)</li>
<li>Setting the font using EDC</li>
- <li>Changing the font and text size using the <a href="../../../../org.tizen.native.mobile.apireference/group__Edje__Object__Text__Class.html">Edje Text class</a> API
+ <li>Changing the font and text size using the Edje Class: Text API (in <a href="../../../../org.tizen.native.mobile.apireference/group__Edje__Object__Text__Class.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__Edje__Object__Text__Class.html">wearable</a> applications)
<p>Certain words for <span style="font-family: Courier New,Courier,monospace;">text_class</span> are reserved for the system default and used for applying the system setting about font and font size. To change the font on your textblock and text parts in the EDC according to the system setting, you can use the reserved words for the text class:</p>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a href="../../../../org.tizen.tutorials/html/native/ui/ui_tutorials_n.htm">UI Tutorials</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UI__FRAMEWORK.html">UI API</a></li>
+ <li><a href="../../../../org.tizen.tutorials/html/native/ui/ui_tutorials_n.htm">UI Framework Tutorials</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Ecore__Group.html">Ecore API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Ecore__Group.html">Ecore API for Wearable Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>
</ul>
</div></div>
</div>
</ul>
<p class="figure">Figure: Position maps</p>
-<p
style="text-align:center;"><img alt="Position maps" src="../../images/pos_map_all.png" /></p>
+<p
align="center"><img alt="Position maps" src="../../images/pos_map_all.png" /></p>
<p>Delete an animator using <span style="font-family: Courier New,Courier,monospace;">ecore_animator_del(animator)</span>. To delete the animator, it must still be running, that is, it has not returned a false value meaning that it cannot be called any more.</p>
<p>When the rendering is done and all work finished, the main loop enters its idle state until the next loop. You can get functions of your application called back before the main loop enters or exits the idle state, or when it is in the idle state. They are respectively called <span style="font-family: Courier New,Courier,monospace;">Ecore_Idle_Enterer</span>, <span style="font-family: Courier New,Courier,monospace;">Ecore_Idle_Exiter</span>, and <span style="font-family: Courier New,Courier,monospace;">Ecore_Idler</span>.</p>
<p class="figure">Figure: Idle loop</p>
-<p
style="text-align:center;"><img alt="Idle loop" src="../../images/idlers.png" /></p>
+<p
align="center"><img alt="Idle loop" src="../../images/idlers.png" /></p>
<p>Idle enterers, exiters, and idlers have the same prototype: <span style="font-family: Courier New,Courier,monospace;">Eina_Bool my_idler(void *data)</span>, receiving data, and returning <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_RENEW</span> or <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_CANCEL</span> to tell Ecore whether it wants to be called again or if its treatment is finished.</p>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
<li><a href="#key_concepts">Key Concepts</a></li>
- <li><a href="#apply">Applying the Base Scale</a></li>
+ <li><a href="#apply">Applying the Base Scale</a></li>
+ <li><a href="#without">Scaling without the Base Scale</a></li>
+ </ul>
+ <p class="toc-title">Related Info</p>
+ <ul class="toc">
+ <li><a href="../../../../org.tizen.tutorials/html/native/ui/ui_tutorials_n.htm">UI Framework Tutorials</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje__Group.html">Edje API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje__Group.html">Edje API for Wearable Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<p>The following figure illustrates a 50 px wide object in a 1280 px wide monitor. If the same object is displayed with not scaling in mobile environment, it looks very small. To show the object in mobile environment in the similar size as in the monitor, define the scale is 2.0, so that the object size is 100 px instead of 50 px.</p>
<p class="figure">Figure: Scaling from desktop to mobile</p>
- <p
style="text-align: center;"> <img alt="Scaling from desktop to mobile" src="../../images/scaling.png" /> </p>
+ <p
align="center"><img alt="Scaling from desktop to mobile" src="../../images/scaling.png" /> </p>
<h3 id="base" name="base">Base Scale</h3>
<p>The object scaling must be defined in the <span style="font-family: Courier New,Courier,monospace;">config.xml</span> file of this application to show the application in a proper size in other devices. However, the scaling must be based on scale 1.0 or, if the application is based on another scale, this scale must be defined in the <span style="font-family: Courier New,Courier,monospace;">config.xml</span> file. This predefined scale is called the "base scale". </p>
<p>The size of a scalable object is multiplied with the device scale value, as illustrated in the following figure. If the scalable object (on the left) with the size 10 is created in a device with scale 1.0, the size of the object is 20 in a device with scale 2.0, and 40 in a device with scale 4.0.</p>
<p class="figure">Figure: Base scale</p>
- <p
style="text-align: center;"> <img alt="Base scale" src="../../images/base_scale.png" /> </p>
+ <p
align="center"><img alt="Base scale" src="../../images/base_scale.png" /> </p>
<p>The middle object has a base scale 2.0. The following example shows its scaling in a device with scale 4.0:</p>
<li><a href="#set_edc">EDC</a></li>
<li><a href="#set_c">C code</a></li>
</ul>
- <h3 id="set_edc" name="set_edc">Setting the Base Scale in EDC</h3>
+
+ <h3 id="calc_base" name="calc_base">Calculating the Base Scale</h3>
+
+<p>To get the base scale value of your own display, you must know the DPI of the display. Based on the display DPI, you can calculate the base scale, since it is basically proportional to the display DPI with the following formula:</p>
+
+<pre class="prettyprint">
+base_scale = (DPI / 90) * profile_factor</pre>
+
+<p>The profile factor is the value for fitting the object size as a profile. The distance between the user eye and the display differs for each profile. This means that the object size must be different if the device display is changed.</p>
+
+<p>The following table lists the profile factors for various profiles.</p>
+
+<table>
+<caption>Table: Profile factors</caption>
+<tbody>
+<tr>
+ <th>Profile</th>
+ <th>Profile factor</th>
+</tr>
+ <tr>
+ <td>Wearable</td>
+ <td>0.4</td>
+ </tr>
+ <tr>
+ <td>Mobile</td>
+ <td>0.7</td>
+ </tr>
+ <tr>
+ <td>Desktop</td>
+ <td>1.0</td>
+ </tr>
+ </tbody></table>
+
+<p>For example, if your display has 233 dpi and the platform uses the mobile profile, the base scale is calculated like this:</p>
+<pre class="prettyprint">
+1.8 = (233 / 90) * 0.7</pre>
+
+<p>The base scale of the device is 1.8. If the application is made in the environment using 233 dpi and mobile profile, its base scale must be set to 1.8. For a desktop, the DPI is 90, and its base scale is 1.0.</p>
+
+
+<h3 id="set_edc" name="set_edc">Setting the Base Scale in EDC</h3>
<p>The application must specify the scale its base scale. The edje objects are scaled properly if the base scale is set in the collection of the edc file, as in the following example:</p>
<table class="note"><tbody>
<p>You can use <span style="font-family: Courier New,Courier,monospace;">ELM_SCALE_SIZE</span> macro in any API related with setting objects sizes in Tizen native applications.</p>
+ <h2 id="without" name="without">Scaling without the Base Scale</h2>
+
+<p>In Tizen, each device has a scale value in proportion to the display. If scaling is enabled, the objects are drawn on the display by multiplying with the user-defined object size and the device scale. If the base scale is set, the objects are drawn by dividing the user-defined object size with the base scale and multiplying it by the device scale.</p>
+
+<p>If you use the scale feature without setting the base scale, the result is the same as if you set the base scale to 1.0. Then you do not need to care about the base scale variables, because the pixels roll like a virtual pixel. For example, if you set 1 pixel in 129 dpi without setting the base scale value, the 1 pixel before scaling is equivalent to 1 real physical pixel after scaling. In case of 233 dpi, it is the same with 1.8 pixels after scaling. </p>
+
+<p>Always consider the pixel before scaling when defining the application UI, in order to ensure a proper UI display on the screen with a diversity of densities.</p>
+
+<pre class="prettyprint">int app_create(void *data)
+[ Conversion Formula ]
+Real physical pixel = (a pixel before scaling) x (dpi / 90) x 0.7
+</pre>
+<p>Where 90 is the default DPI on a desktop and 0.7 is the mobile profile factor.</p>
+
+<p>The following table shows some examples.</p>
+
+<table>
+<caption>Table: Pixel conversions</caption>
+<tbody>
+<tr>
+ <th></th>
+ <th>Base</th>
+ <th>Low-density device (such as WVGA)</th>
+ <th>High-density device (such as HD)</th>
+</tr>
+ <tr>
+ <td>DPI</td>
+ <td>129</td>
+ <td>233</td>
+ <td>306</td>
+ </tr>
+ <tr>
+ <td>A pixel before scaling</td>
+ <td>100</td>
+ <td>100</td>
+ <td>100</td>
+ </tr>
+ <tr>
+ <td>Real physical pixel</td>
+ <td>100</td>
+ <td>180</td>
+ <td>240</td>
+ </tr>
+ <tr>
+ <td>Actual base scale</td>
+ <td>1.0</td>
+ <td>1.8</td>
+ <td>2.4</td>
+ </tr>
+ </tbody></table>
+
+
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
</div></div></div>
--- /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>UI Component Preferences</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="toc-navigation">
+ <div id="profile">
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+ </div>
+
+ <div id="toc_border"><div id="toc">
+ <p class="toc-title">Content</p>
+ <ul class="toc">
+ <li><a href="#customize">Customizing UI Components</a></li>
+ <li><a href="#focus">Managing UI Component Focus</a></li>
+ </ul>
+ <p class="toc-title">Related Info</p>
+ <ul class="toc">
+ <li><a href="../../../../org.tizen.tutorials/html/native/ui/ui_component_tutorials_n.htm">UI Components Tutorials</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje__Group.html">Edje API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Eina__Group.html">Eina API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje__Group.html">Edje API for Wearable Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Eina__Group.html">Eina API for Wearable Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+ <h1>UI Component Preferences</h1>
+
+ <table class="note">
+<tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">This feature is supported in mobile applications only.</td>
+ </tr>
+ </tbody>
+ </table>
+
+ <h2 id="customize" name="customize">Customizing UI Components</h2>
+
+
+<p>Elementary UI components use the Edje library EDC themes to manage their look.</p>
+
+<h3 id="elm_theme" name="elm_theme">Elementary Theme</h3>
+
+<p>An Elementary theme is an Edje EDC file that contains groups composed of parts and programs. For more information about Edje, refer to the <a href="edje_n.htm">Edje</a> guide.</p>
+
+<h4 id="use_theme_styles" name="use_theme_styles">Use Theme Styles</h4>
+
+<p>Elementary UI components provide a way to modify only some parts of the styles using the default theme. A style is a part of the EDC theme (a group) that concerns only one UI component. For example, you can create a new style for a button component to change its appearance without modifying the default theme.</p>
+
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">When creating a new style, knowledge of how each UI component is themed is required, because setting another style always replaces the entire group used by the UI component. Important signals and parts must be there for the object to behave properly.</td>
+ </tr>
+ </tbody>
+ </table>
+
+<p>When several styles are loaded in the current theme, you can set a different style to a specific UI component using the <span style="font-family: Courier New,Courier,monospace">elm_object_style_set()</span> function. It is also possible to see the current style with the <span style="font-family: Courier New,Courier,monospace">elm_object_style_get()</span> function.</p>
+
+<p>The default theme specifies several styles for the button component. The code below shows how to set the "anchor" style of a newly created button component.</p>
+
+<pre class="prettyprint">
+Evas_Object *parent, *button;
+
+// Create a button object
+button = elm_button_add(parent);
+
+// Set its style to "anchor""
+elm_object_style_set(button, "anchor");
+</pre>
+
+<h4 id="load_theme_styles" name="load_theme_styles">Load Theme Styles</h4>
+
+<p>Once written and compiled with Edje tools, the Elementary provides two methods to load the style in the application theme:</p>
+ <ul>
+ <li>overlays</li>
+ <li>extensions</li>
+ </ul>
+
+<p>When looking for a theme, the Elementary checks the list of overlays, if any are defined. Then it takes the default theme, and if it cannot find a theme for the UI component, it looks at the extensions list.</p>
+
+<h5 id="overlay_chapter" name="overlay_chapter">Overlay</h5>
+
+<p>An overlay can replace the look of all UI components by overriding the default style. If we create a new style called "default" for the button component and add it as an overlay, the Elementary uses the overlay for all button components overriding the default theme.</p>
+
+<p>Here is how to add an overlay to your application's theme.</p>
+
+<pre class="prettyprint">
+elm_theme_overlay_add(NULL, "./theme_button.edj");
+</pre>
+
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">Here we assume that the "theme_button.edj" file only contains a new theme for the button component.</td>
+ </tr>
+ </tbody>
+ </table>
+
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">Doing this is not recommended. Adding a file as an overlay makes the Elementary use the new theme for all the button components defined in the application. You must make sure that the "theme_button.edj" file reimplements everything that was previously defined in the default theme concerning the button component.</td>
+ </tr>
+ </tbody>
+ </table>
+
+<p>This is how to remove the previously added overlay to return to the default theme.</p>
+
+<pre class="prettyprint">
+elm_theme_overlay_del(NULL, "./theme_button.edj");
+</pre>
+
+<h5 id="extension" name="extension">Extension</h5>
+
+<p>With extensions, we can write styles that we can apply to some UI components (not all of them) by using the <span style="font-family: Courier New,Courier,monospace">elm_object_style_set()</span> function.</p>
+
+<p>The application adds a theme to the list of extensions with the following call.</p>
+
+<pre class="prettyprint">
+elm_theme_extension_add(NULL, "./theme_button_style_custom.edj");
+</pre>
+
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">Here we assume that the "theme_button_style_custom.edj" file contains a new button style called "custom".</td>
+ </tr>
+ </tbody>
+ </table>
+
+<p>This is how to use the new "custom" style on a button component.</p>
+
+<pre class="prettyprint">
+Evas_Object *parent, *button;
+
+// Create a button object
+button = elm_button_add(parent);
+
+// Set its style to "custom"
+elm_object_style_set(button, "custom");
+</pre>
+
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">When using <span style="font-family: Courier New,Courier,monospace">elm_theme_extension_add</span> or <span style="font-family: Courier New,Courier,monospace">elm_theme_overlay_add</span> to add a new theme extension or overlay to a Theme object (here called the default theme), the Elementary calls the <span style="font-family: Courier New,Courier,monospace">elm_theme_flush</span> function to flush Elementary theme caches. Thus, the theme of all UI components that use the default theme is reloaded.</td>
+ </tr>
+ </tbody>
+ </table>
+
+<h4 id="create_new_theme" name="create_new_theme">Create a New Theme</h4>
+
+<p>This is how to create a new theme object.</p>
+
+<pre class="prettyprint">
+Elm_Theme *new_theme = elm_theme_new();
+</pre>
+
+<p>This function creates an empty specific theme that only uses the default theme. It has its own private set of extensions and overlays (which are empty by default). Specific themes do not fall back to the themes of parent objects. They are not intended for this use.</p>
+
+<p>This is how to apply this theme to a UI component and its children (a button, for example).</p>
+
+<pre class="prettyprint">
+// Create a button component
+Evas_Object *button = elm_button_add();
+
+// Set the new theme to the button component
+elm_object_theme_set(button, new_theme);
+</pre>
+
+<h3 id="customizing_style" name="customizing_style">Customizing a UI Component Style</h3>
+
+<p>UI component themes are written in Edje EDC source files (.edc). These files are compiled with Edje tools to make an .edj file that is used by the application. For more information on using the EDC language, see the <a href="edje_n.htm">Edje</a> guide.</p>
+
+<p>A new Edje style can be added for a UI component. The best way is to copy the existing "default" style, rename it, and update it to your needs.</p>
+
+<h4 id="check_custom_style" name="check_custom_style">Create a Customized Style for the Check Component</h4>
+
+<p>As an example, we show how to create a new style for the <span style="font-family: Courier New,Courier,monospace">check</span> component. The aim is to update the background and the main pictures of this UI component with custom pictures.</p>
+
+<p>The EDC source file concerning the check component (check.edc file) is composed of several groups.</p>
+
+<pre class="prettyprint">
+group
+{
+ name: "elm/check/base/default";
+}
+
+group
+{
+ name: "elm/check/base/toggle";
+}
+</pre>
+
+<p>Those two groups define two different styles for the check component (the "default" style and the "toggle" style).</p>
+
+<p>We copy the group corresponding to the "default" style in a new file to create a new style called "custom". This new style is saved in the "check_custom.edc" file.</p>
+
+<pre class="prettyprint">
+group
+{
+ name: "elm/check/base/custom";
+ // Here is the copy of the content of "default" style
+}
+</pre>
+
+<p>In the new group ("elm/check/base/custom"), we have to find the parts we want to modify. Here, the appropriate parts are "bg" and "check" parts.</p>
+
+<pre class="prettyprint">
+part
+{
+ name: "bg";
+ mouse_events: 0;
+ scale: 1;
+ description
+ {
+ state: "default" 0.0;
+ rel1.offset: 1 1;
+ rel2.relative: 0.0 1.0;
+ rel2.offset: 1 -2;
+ align: 0.0 0.5;
+ min: 16 16;
+ max: 16 16;
+ aspect: 1.0 1.0;
+ aspect_preference: VERTICAL;
+ image
+ {
+ normal: "check_base.png";
+ border: 5 5 5 5;
+ middle: 0;
+ }
+ fill.smooth: 0;
+ }
+}
+part
+{
+ name: "check";
+ mouse_events: 0;
+ scale: 1;
+ description
+ {
+ state: "default" 0.0;
+ rel1
+ {
+ to: "bg";
+ offset: 1 1;
+ }
+ rel2
+ {
+ to: "bg";
+ offset: -2 -2;
+ }
+ visible: 0;
+ color: 255 255 255 255;
+ image.normal: "check.png";
+ }
+ description
+ {
+ state: "visible" 0.0;
+ inherit: "default" 0.0;
+ visible: 1;
+ }
+ description
+ {
+ state: "disabled" 0.0;
+ inherit: "default" 0.0;
+ visible: 0;
+ color: 128 128 128 128;
+ }
+ description
+ {
+ state: "disabled_visible" 0.0;
+ inherit: "default" 0.0;
+ color: 128 128 128 128;
+ visible: 1;
+ }
+}
+</pre>
+
+<p>We do not detail all the options that can be modified here, but assume that the user is familiar with <a href="edje_n.htm">Edje</a> and knows Edje basics.</p>
+
+<p>Our custom pictures filenames are:</p>
+ <ul>
+ <li>check_base_custom.png for the bg part</li>
+ <li>check_custom.png for the check part</li></ul>
+
+<p>We must update the image.normal attribute in both parts with our custom pictures filenames to modify the pictures of this style.</p>
+
+<pre class="prettyprint">
+part
+{
+ name: "bg";
+ description
+ {
+ state: "default" 0.0;
+
+ image
+ {
+ normal: "check_base_custom.png";
+ border: 5 5 5 5;
+ middle: 0;
+ }
+
+ }
+}
+part
+{
+ name: "check";
+
+ description
+ {
+ state: "default" 0.0;
+
+ image.normal: "check_custom.png";
+ }
+
+}
+</pre>
+
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">Here, we assume that the custom images are the same size as the "default" images.</td>
+ </tr>
+ </tbody>
+ </table>
+
+<h4 id="add_theme_to_project" name="add_theme_to_project">Add the Theme File to Your Project</h4>
+
+<p>Once written, the check_custom.edc file is put in the <span style="font-family: Courier New,Courier,monospace">/res/edje/</span>. directory of the application project in the SDK.</p>
+
+<p>When building the application, the SDK calls the Edje tools automatically to build the final <span style="font-family: Courier New,Courier,monospace">check_custom.edj</span> file. This file can be loaded from our application.</p>
+
+<h4 id="use_new_style" name="use_new_style">Use the New Style</h4>
+
+<p>This is how to add the new theme file as an extension in the application.</p>
+
+<pre class="prettyprint">
+char edj_path[PATH_MAX] = {0, };
+
+// Get the full path of the edj file
+app_get_resource("/edje/check_custom.edj", edj_path, (int)PATH_MAX);
+
+// Load check custom style as an extension
+elm_theme_extension_add(NULL, edj_path);
+</pre>
+
+<p>Use the "custom" style on a new check component.</p>
+
+<pre class="prettyprint">
+Evas_Object *parent, *check;
+
+// Create a check object
+check = elm_check_add(parent);
+
+// Set its style to "custom"
+elm_object_style_set(check, "custom");
+</pre>
+
+<h4 id="special_theme_parts" name="special_theme_parts">Special Theme Parts</h4>
+
+<p>Some parts of the EDC file can be interacted with the Elementary. The content of parts of the type <span style="font-family: Courier New,Courier,monospace">TEXT</span> are modified using the <span style="font-family: Courier New,Courier,monospace">elm_object_part_set_text()</span> function. The content of <span style="font-family: Courier New,Courier,monospace">SWALLOW</span> parts is updated using the <span style="font-family: Courier New,Courier,monospace">elm_object_part_content_set()</span> function.</p>
+
+<h5 id="swallow_parts" name="swallow_parts">Swallow Parts</h5>
+
+<p>In the previous example (the check component "default" style), there is a part called "elm.swallow.content" that is of the type <span style="font-family: Courier New,Courier,monospace">SWALLOW</span>.</p>
+
+<pre class="prettyprint">
+part
+{
+ name: "elm.swallow.content";
+ type: SWALLOW;
+ scale: 1;
+ description
+ {
+ state: "default" 0.0;
+ fixed: 1 0;
+ visible: 0;
+ align: 0.0 0.5;
+ rel1.to_x: "bg";
+ rel1.relative: 1.0 0.0;
+ rel1.offset: 1 1;
+ rel2.to_x: "bg";
+ rel2.offset: 1 -2;
+ rel2.relative: 1.0 1.0;
+ }
+ description
+ {
+ state: "visible" 0.0;
+ inherit: "default" 0.0;
+ fixed: 1 0;
+ visible: 1;
+ aspect: 1.0 1.0;
+ min: 16 16;
+ }
+ description
+ {
+ state: "disabled" 0.0;
+ inherit: "default" 0.0;
+ color: 255 255 255 128;
+ }
+ description
+ {
+ state: "disabled_visible" 0.0;
+ inherit: "default" 0.0;
+ color: 255 255 255 128;
+ fixed: 1 0;
+ visible: 1;
+ aspect: 1.0 1.0;
+ }
+}
+</pre>
+
+<p>We can push content (Evas_Object) to this part from the application anytime. The size and position of the content pushed is controlled by the EDC theme.</p>
+
+<pre class="prettyprint">
+Evas_Object *parent, *check1, *content;
+
+// Create a check object
+check1 = elm_check_add(parent);
+
+// Set the content of the check object
+elm_object_part_content_set(check1, "elm.swallow.content", content);
+</pre>
+
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">We can add new <span style="font-family: Courier New,Courier,monospace">SWALLOW</span> parts when customizing a UI component's style, if we want to be able to control more content from the application. Note that removing existing <span style="font-family: Courier New,Courier,monospace">SWALLOW</span> parts changes the UI component's behavior.</td>
+ </tr>
+ </tbody>
+ </table>
+
+<h5 id="text_parts" name="text_parts">Text Parts</h5>
+
+<p>The same is done with parts of the type <span style="font-family: Courier New,Courier,monospace">TEXT</span>. The check "default" style contains a part named "elm.text".</p>
+
+<pre class="prettyprint">
+part
+{
+ name: "elm.text";
+ type: TEXT;
+ mouse_events: 0;
+ scale: 1;
+ description
+ {
+ state: "default" 0.0;
+ visible: 0;
+ rel1.to_x: "elm.swallow.content";
+ rel1.relative: 1.0 0.0;
+ rel1.offset: 1 1;
+ rel2.relative: 1.0 1.0;
+ rel2.offset: -2 -2;
+ color: 0 0 0 255;
+ text
+ {
+ font: "Sans,Edje-Vera";
+ size: 10;
+ min: 0 1;
+ align: -1.0 0.5;
+ }
+ }
+ description
+ {
+ state: "visible" 0.0;
+ inherit: "default" 0.0;
+ visible: 1;
+ text.min: 1 1;
+ }
+ description
+ {
+ state: "disabled" 0.0;
+ inherit: "default" 0.0;
+ color: 0 0 0 128;
+ color3: 0 0 0 0;
+ }
+ description
+ {
+ state: "disabled_visible" 0.0;
+ inherit: "default" 0.0;
+ color: 0 0 0 128;
+ color3: 0 0 0 0;
+ visible: 1;
+ text.min: 1 1;
+ }
+}
+</pre>
+
+<p>This is how to modify the content of the "elm.text" part from the application. The position of the text, its size, color, look and feel are managed by the EDC theme.</p>
+
+<pre class="prettyprint">
+Evas_Object *parent, *check2;
+
+// Create a check object
+check2 = elm_check_add(parent);
+
+// Set the text of the check object
+elm_object_part_text_set(check2, "elm.text", "Test text");
+</pre>
+
+ <h2 id="focus" name="focus">Managing UI Component Focus</h2>
+
+<h3 id="Presentation" name="Presentation">Focus Presentation</h3>
+
+<h4>Concept of Focus</h4>
+<p>Focus is a graphical user interface concept. A component, for example, a UI component, has a focus when it is selected to receive input from the user. The input can be an event, such as mouse button click or key press.</p>
+
+<h4>Giving Focus</h4>
+
+<p>Focusing can be immediate (selected by the touchscreen or mouse) or relative (selected by a key press).</p>
+
+<p>There are mainly two ways to set focus on a graphical elements:</p>
+
+<ul>
+<li>Direct selection: this is done by clicking on the element.</li>
+<li>Relative selection: this is done by moving the selection from a UI component to another, such as going to the previous or next one; this is done with a keyboard.</li>
+</ul>
+
+<p>Direct selection does not really need any kind of special treatment as the user explicitly selects the UI component to interact with.</p>
+
+<p>Relative selection' default order is the one the UI components have been added to the canvas. That may not be appropriate, if they are added programmatically in different order than they appear on-screen.</p>
+
+<h3 id="Movement" name="Movement">Moving Focus</h3>
+
+<h4>Concept of Focus Chain</h4>
+<p>The order the focus goes from a UI component to another is called the focus chain. As said before, the default focus chain is set to the order the UI components have been added to the canvas.</p>
+
+<h4>Focusable Objects</h4>
+<p>An object can be focused if the following conditions apply:</p>
+
+<ul>
+<li>object is visible</li>
+<li>object is enabled</li>
+<li>object accepts focus</li>
+<li>object's subtree (if any) is focusable</li>
+<li>all of object's parents have their subtrees focusable</li>
+</ul>
+
+<p>If any of these conditions do not apply, the object is unfocusable.</p>
+
+<h4>Handling Key Input</h4>
+
+<p>Handling of the keys is done automatically by Elementary. According to which key the user pressed, Elementary switches the focus in the selected direction. For example, using the <span style="font-family: Courier New,Courier,monospace;">Tab</span> key the focus goes to the next object in the natural order, whereas using the direction keys the focus goes to the next object in the requested direction.</p>
+
+<h4>Hiding, Deleting or Disabling a Focused Object</h4>
+
+<p>When a UI component is hidden, deleted, or disabled, it becomes unfocusable.</p>
+
+<p>When a focused object is unfocusable, the focus is moved to another object.</p>
+
+<h4>Selecting Next Object</h4>
+
+<p>When the user wants to switch the focus to the next object (i.e. cycle focus), Elementary searches the first object which is focusable.</p>
+
+<p>If there is a disabled or read-only object in the focus chain, the focus goes to the following object in the requested direction.</p>
+
+<h3 id="Customization" name="Customization">Customizing Focus</h3>
+
+<p>There are several reasons why to customize the focus chain of an application, for example:</p>
+
+<ul>
+<li>If you have created a form with labels and text entries next to them, the focus moves to the entry field when the user clicks on the associated label.</li>
+<li>If you have created an interface with several columns (table), set the focus chain as you wish, for example, going horizontally instead of going vertically, regardless whatever the order the UI components are added.</li>
+</ul>
+
+<h4>Customizing Object's Focus Exit Chain </h4>
+
+<p>Set the object to focus after other object in a specific direction using <span style="font-family: Courier New,Courier,monospace;">elm_object_focus_next_object_set(object, next, direction)</span>. Use the following directions:</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">ELM_FOCUS_NEXT</span>: next UI component in natural order</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ELM_FOCUS_PREVIOUS</span>: previous UI component in natural order</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ELM_FOCUS_UP</span>: UI component to focus when going up</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ELM_FOCUS_DOWN</span>: UI component to focus when going down</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ELM_FOCUS_RIGHT</span>: UI component to focus when going right</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ELM_FOCUS_LEFT</span>: UI component to focus when going left</li>
+</ul>
+
+<p>Set the object next to another in a specific direction using <span style="font-family: Courier New,Courier,monospace;">elm_object_focus_next_object_get(object, direction)</span>.</p>
+
+<h4>Customizing Whole Application's Focus Chain</h4>
+
+<p>To customize the application's custom chain:</p>
+
+<pre class="prettyprint">
+Evas_Object *main, obj1, obj2, obj3, obj4, obj5;
+
+Eina_List *focus_chain = NULL;
+focus_chain = eina_list_append(focus_chain, obj3);
+focus_chain = eina_list_append(focus_chain, obj2);
+// The chain is obj3, then obj2. We set it.
+elm_object_focus_custom_chain_set(main, focus_chain);
+// Here we prepend obj5 at the beginning of the chain.
+elm_object_focus_chain_prepend(main, NULL, obj5);
+// We append obj1 after obj3.
+elm_object_focus_chain_append(main, obj3, obj1);
+// We prepend obj4 before obj1.
+elm_object_focus_chain_prepend(main, obj1, obj4);
+</pre>
+
+<p>The focus chain is <span style="font-family: Courier New,Courier,monospace;">obj5, obj3, obj4, obj1, obj2</span>.</p>
+
+<p>This actually applies to any container: it is possible to set the focus chain of, for example, a box.</p>
+
+<h4>Customizing Collision of Both</h4>
+
+<p>If an object is part of a focus chain and has the next focused object defined, the next object takes precedence over the focus chain.</p>
+
+<p>Following on the previous example, if <span style="font-family: Courier New,Courier,monospace;">obj4</span> has <span style="font-family: Courier New,Courier,monospace;">obj5</span> defined as its next object, the actual focus chain is <span style="font-family: Courier New,Courier,monospace;">obj5, obj3, obj4</span>, and loop back to <span style="font-family: Courier New,Courier,monospace;">obj5</span>.</p>
+
+<h3 id="On_Component" name="On_Component">Focus on UI Component</h3>
+
+<p>If your Evas object has several sub-objects, set its focus chain using the same functions as for the application. Elementary first follows the main focus chain, and then the focus chain of each UI component if applicable.</p>
+
+<p>Use <span style="font-family: Courier New,Courier,monospace;">elm_object_focus_get(object)</span> to set whether a specific object has the focus. Set the focus to an object using <span style="font-family: Courier New,Courier,monospace;">elm_object_focus_set(object, set)</span>, where <span style="font-family: Courier New,Courier,monospace;">set</span> is a Boolean value. If it is set to <span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span>, the focus is set to that given object. If it is set to <span style="font-family: Courier New,Courier,monospace;">EINA_False</span>, the focus is unset and passed back to the previous element in the focus chain. Set the focus only after the object is shown, that is, after <span style="font-family: Courier New,Courier,monospace;">evas_object_show(object)</span> has been called. Call the function back when the object receives or loses focus by registering on smart event "focused" or "unfocused"</p>
+
+<p>Use <span style="font-family: Courier New,Courier,monospace;">elm_object_tree_focus_allow_set(object, focusable)</span> to tell Elementary whether an object and its children are focusable, where <span style="font-family: Courier New,Courier,monospace;">focusable</span> is a Boolean value. Get the current value using <span style="font-family: Courier New,Courier,monospace;">elm_object_tree_focus_allow_get(object)</span>.</p>
+
+<p>The similar functions for a specific object are <span style="font-family: Courier New,Courier,monospace;">elm_object_focus_allow_set(object, focusable)</span> and <span style="font-family: Courier New,Courier,monospace;">elm_object_focus_allow_get(object)</span>. </p>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</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>Scalability Support</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="toc-navigation">
+ <div id="profile">
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+ </div>
+
+ <div id="toc_border"><div id="toc">
+ <p class="toc-title">Content</p>
+ <ul class="toc">
+ <li><a href="#key">Key Concepts</a></li>
+ <li><a href="#elementary">Scalability Using Elementary UI Components</a></li>
+ <li><a href="#edje">Scalability Using Edje</a></li>
+ <li><a href="#aspect">Aspect Ratio</a></li>
+ </ul>
+ <p class="toc-title">Related Info</p>
+ <ul class="toc">
+ <li><a href="../../../../org.tizen.tutorials/html/native/ui/ui_tutorials_n.htm">UI Framework Tutorials</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje__Group.html">Edje API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje__Group.html">Edje API for Wearable Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+ <h1>Scalability Support</h1>
+ <p>To ensure that your application works well in diverse devices, you must consider scalability when designing the application layout:</p>
+ <ul>
+<li><a href="#key">Key concepts</a></li>
+<li><a href="#elementary">Scalability using Elementary UI components</a></li>
+<li><a href="#edje">Scalability using Edje</a></li>
+<li><a href="#aspect">Aspect ratio</a></li></ul>
+
+<h2 id="key" name="key">Key Concepts</h2>
+
+<p>When designing the application layout to be scalable, you must pay attention to the following key concepts:</p>
+
+<ul><li>Understand the character of the relative position and the fixed position
+
+<p>In the <strong>relative position</strong>, the size is determined in proportion to the size of the referred object. For example, if an orange rectangle occupies 30% of the green rectangle, and the green rectangle is expanded, the orange rectangle is expanded accordingly. However, if the scaling value is changed and the green rectangle is not scaled, the orange rectangle remains unchanged too.</p>
+
+<p class="figure">Figure: Relative position</p>
+<p align="center"> <img alt="Relative position" src="../../images/scale_relative.png" /> </p>
+
+<p>In the <strong>fixed position</strong>, the size is determined by a value set for the object. For example, the orange rectangle set to the size of 10. If the green rectangle is expanded, the orange rectangle does not change. However, if the scaling value is, for example, doubled, the size of the orange rectangle grows to 20.</p>
+
+<p class="figure">Figure: Fixed position</p>
+<p align="center"> <img alt="Fixed position" src="../../images/scale_fixed.png" /> </p> </li>
+
+<li>Use the relative position
+<p>If you set the object size as a percentage, the ratio remains fixed regardless of the changes in the screen size or resolution. If you want the object size changed in proportion of the window size, use the relative position.</p>
+
+<p class="figure">Figure: Scaling relative position</p>
+<p align="center"> <img alt="Scaling relative position" src="../../images/scale_relative_scaled.png" /> </p> </li>
+
+<li>Multiply the scaling value, if you use the fixed size
+<p>If you use the EDC file to set up the layout, you can set the scale in the <span style="font-family: Courier New,Courier,monospace">part</span> element:</p>
+<pre class="prettyprint">
+parts
+{
+ part
+ {
+ name: "box";
+ type: RECT;
+ scale: 1;
+ }
+}
+</pre>
+
+<p>If you set the fixed size in C code, you can use the <span style="font-family: Courier New,Courier,monospace">ELM_SCALE_SIZE</span> macro:</p>
+<pre class="prettyprint">evas_object_size_hint_min_set(object, ELM_SCALE_SIZE(100), ELM_SCALE_SIZE(100));</pre>
+
+<p>For more information see <a href="multiple_screens_n.htm#apply">Applying the Base Scale</a>.</p></li>
+
+<li>Do not fill the width or height out with a fixed size only
+<p>If you fill the entire height out with a fixed size only and it is scaled, the end result can be larger than the screen size. </p>
+
+<p class="figure">Figure: Height filled with a fixed size</p>
+<p align="center"> <img alt="Height filled with a fixed size" src="../../images/scale_fixed_height.png" /> </p>
+
+<p>If you set a partial width or height with a fixed size and leave the remaining area flexible, the layout does not expand outside the screen.</p>
+
+<p class="figure">Figure: Height with a flexible area</p>
+<p align="center"> <img alt="Height with a flexible area" src="../../images/scale_flexible_height.png" /> </p> </li></ul>
+
+
+
+<h2 id="elementary" name="elementary">Scalability Using Elementary UI Components</h2>
+
+<p>The Tizen platform provides a UI component toolkit library, called Elementary, that includes an extensive set of UI components. You can use elementary UI components to compose your application user interface (UI). While creating the UI, you can set specific properties for the UI components to control the scalable behavior of the UI. Before you try to create a scalable UI using elementary UI components, make sure you understand the following core concepts on how scalability works with elementary UI components.</p>
+
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">The Elementary library provides 3 groups of APIs:
+ <ul><li>Infrastructure: to control the behavior of elementary.</li>
+ <li>Container: UI components that can contain other UI components.</li>
+ <li>UI components: elementary UI components, such as buttons, lists, and check and radio boxes.</li></ul></td>
+ </tr>
+ </tbody>
+ </table>
+
+<h3>Using Containers for Effective Layouts</h3>
+
+<p>The Elementary library provides several containers to display UI components in an effective layout. The containers have no visual identity of their own.</p>
+
+<ul><li>Box
+
+<p>The box container makes a layout where child UI components are stacked in either horizontal or vertical direction. The box size is the sum of its child UI components' size:</p>
+<ul><li>A vertical box calculates its height as the sum of its children's height and its width as the width of the widest child.</li>
+<li>A horizontal box calculates its width as the sum of its children's width and its height as the height of the tallest child.</li></ul>
+
+<p class="figure">Figure: Box layout</p>
+<p align="center"> <img alt="Box layout" src="../../images/scale_box.png" /> </p>
+
+<p>The box-based linear layout is the best solution to ensure a minimum size for the child UI components in any device or any orientation.</p></li>
+
+<li>Grid
+
+<p>The grid container makes a layout where child UI components set their position and size relative to the container position and size. You can define the virtual width and height of the grid (by default: 100 x 100). You then packs the child UI components into the grid while setting their position and size based on the virtual size of the grid.</p>
+
+<p class="figure">Figure: Grid layout</p>
+<p align="center"> <img alt="Grid layout" src="../../images/scale_grid.png" /> </p>
+
+<p>The grid-based relative layout can always fill the full screen in any device or any orientation. However, the size of the child UI components is changed based on the screen size.</p></li></ul>
+
+
+<h3>Using Weight and Align Properties</h3>
+
+<p>To make a layout scalable with UI components, the UI components must be packed into a container using only the weight and align properties based on their minimum size. Do not resize the UI components directly using pixels.</p>
+
+<p>The weight and align properties are associated with every elementary UI component, and they serve as hints for the container they are in. They tell the container how the UI component wants to occupy the space and pack itself with other UI components in the container.</p>
+
+<h4>Weight</h4>
+
+<p>You can set the weight property with the <span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_weight_set(x_weight, y_weight)</span> function:</p>
+
+<ul><li>Containers use the weights of the child UI components by normalizing them across all child UI components along both X and Y directions.</li>
+<li>The parameter values can be 0 or positive values (default: 0.0).
+<p>0.0 means that the container allocates a minimum size of the UI component area.</p>
+<p>1.0 (<span style="font-family: Courier New,Courier,monospace">EVAS_HINT_EXPAND</span>) means that the container allocates all of the remaining area to the UI component.</p></li>
+<li>If the container has several UI components, it allocates the UI component area relative to the weights of other UI components.</li></ul>
+
+<p class="figure">Figure: Weight hint</p>
+<p align="center"> <img alt="Weight hint" src="../../images/scale_weight_hint.png" /> </p>
+
+<p class="figure">Figure: Weight hint across multiple child UI components</p>
+<p align="center"> <img alt="Weight hint across multiple child UI components" src="../../images/scale_weight_hint_multiple.png" /> </p>
+
+<h4>Align</h4>
+
+<p>You can set the align property with the <span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_align_set(x_align, y_align)</span> function:</p>
+
+<ul><li>UI components use the alignment for their position or size along both X and Y directions.</li>
+<li>The parameter values can be from 0.0 to 1.0 or -1.0 (default: 0.5).</li>
+<li>The values define positions as follows: left is (x=0.0), right is (x=1.0), top is (y=0.0), and bottom is (y=1.0). The center is (x=0.5, y=0.5).
+<p>-1.0 (<span style="font-family: Courier New,Courier,monospace">EVAS_HINT_FILL</span>) means that the UI component fills all of the allocated area.</p></li></ul>
+
+<p class="figure">Figure: Alignment hint</p>
+<p align="center"> <img alt="Alignment hint" src="../../images/scale_align_hint.png" /> </p>
+
+<h2 id="edje" name="edje">Scalability Using Edje</h2>
+
+<p>The Tizen platform provides a complex graphical design and layout library called Edje, which provides an abstraction layer between the application code and the interface. You can use Edje in your Tizen applications to create visual elements and control the layout, look, and feel.</p>
+<p>Internally, Edje holds a geometry state machine and a state graph that defines, for example, what is visible, where, at what size, and with what colors. These details are described to Edje using an Edje <span style="font-family: Courier New,Courier,monospace">.edj</span> file. The file can be produced by using <span style="font-family: Courier New,Courier,monospace">Edje_cc</span> to take a text file (a <span style="font-family: Courier New,Courier,monospace">.edc</span> file) and "compile" an output <span style="font-family: Courier New,Courier,monospace">.edj</span> file that contains the state graph information, images, and any other needed data.</p>
+
+<p>While creating Edje, you set specific element properties to control the scalable behavior of the UI. Before creating a scalable UI using Edje, you must be familiar with the following scalability properties and part types.</p>
+
+<h3>Part</h3>
+<p>Parts are used to represent the most basic layout elements, such as a line in a border or a text on an image.</p>
+<p>The parts can have the following property:</p>
+<ul><li><span style="font-family: Courier New,Courier,monospace">scale</span>: 0-1
+<p>Specifies whether the part scales its size with the scaling factor (Tizen has a scaling factor to resize the application layout and object). This property is used to scale properties, such as font size or min/max size of the part.</p>
+<p>The default value is 0 (off) and the default scaling factor is 1.0. To make a part scalable, set the property to 1 (on).</p>
+</li></ul>
+
+<h3>Description</h3>
+<p>Every part can have one or more description blocks to define the layout properties of the part.</p>
+<p>The descriptions can have the following properties:</p>
+
+<ul><li><span style="font-family: Courier New,Courier,monospace">min</span>/<span style="font-family: Courier New,Courier,monospace">max</span>: width height
+<p>Specifies the minimum or maximum size of the part in pixels. It has no effect on the container size.</p>
+<p>When the <span style="font-family: Courier New,Courier,monospace">scale</span> property of the part is set to 1 (on), the size is multiplied by the scaling factor.</p></li>
+
+<li><span style="font-family: Courier New,Courier,monospace">fixed</span>: 0-1 0-1
+<p>When the <span style="font-family: Courier New,Courier,monospace">min</span> or <span style="font-family: Courier New,Courier,monospace">max</span> property is set, this property sets a boolean value for each dimension (horizontal and vertical, respectively) that tells the application whether it must be scaled when resized.</p>
+<p>The default value is <span style="font-family: Courier New,Courier,monospace">0 0</span>. To fix a part size to its min or max, set the value to 1.</p></li>
+
+<li><span style="font-family: Courier New,Courier,monospace">align</span>: X-axis Y-axis
+<p>When the displayed object size is smaller than its container, this property moves it along both axes using the relative position.</p>
+<p>To move the property, use x = 0.0 to move to left, x = 1.0 to move to right, y = 0.0 to move to the top, and y = 1.0 to move to the bottom. The x = 0.5, y = 0.5 value sets the object at the center of its container.</p>
+<p>The default value is <span style="font-family: Courier New,Courier,monospace">0.5 0.5</span>.</p></li>
+
+<li><span style="font-family: Courier New,Courier,monospace">rel1</span>/<span style="font-family: Courier New,Courier,monospace">rel2</span>
+<p>Specifies the position of the left-top and bottom-right corners of the part's container.</p>
+<ul><li><span style="font-family: Courier New,Courier,monospace">relative</span>: X-axis Y-axis
+<p>Specifies the relative position of the part's container.</p>
+<p>The default value is <span style="font-family: Courier New,Courier,monospace">0.0 0.0</span> for <span style="font-family: Courier New,Courier,monospace">rel1.relative</span> and <span style="font-family: Courier New,Courier,monospace">1.0 1.0</span> for <span style="font-family: Courier New,Courier,monospace">rel2.relative</span>.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">to</span>/<span style="font-family: Courier New,Courier,monospace">to_x</span>/<span style="font-family: Courier New,Courier,monospace">to_y</span>
+<p>Specified that a corner must be positioned relatively to another part's container.</p>
+<p>By default, the corners of a part are placed to the whole interface.</p></li></ul>
+
+<table>
+<caption>Table: Edje part property example</caption>
+<tbody>
+<tr>
+ <td>
+<pre class="prettyprint">
+collections
+{
+ group
+ {
+ name: "property_test";
+
+ images
+ {
+ image: "panorama.png" COMP;
+ }
+
+ parts
+ {
+ part
+ {
+ name: "rect1";
+ type: RECT;
+ description
+ {
+ state: "default" 0.0;
+ rel1 {relative: 0.3 0.4;}
+ rel2 {relative: 0.7 0.6;}
+ color: 0 127 255 255;
+ }
+ }
+ part
+ {
+ name: "rect2";
+ type: RECT;
+ // Affected by scaling factor
+ scale: 1;
+ description
+ {
+ state: "default" 0.0;
+ fixed: 0 1;
+ // Height: 100 pixels (when the scaling factor is 1.0)
+ min: 0 100;
+ rel1 {relative: 0.0 1.0;}
+ rel2 {relative: 1.0 1.0;}
+ // Bottom-aligned
+ align: 0.5 1.0;
+ color: 255 127 0 255;
+ }
+ }
+ part
+ {
+ name: "image";
+ // Affected by scaling factor
+ scale: 1;
+ description
+ {
+ state: "default" 0.0;
+ fixed: 1 1;
+ // Image size: 720 x 180 pixels (when the scaling factor is 1.0)
+ min: 720 180;
+ // Y-axis is positioned relative to "rect2" part
+ rel1 {relative: 0.5 0.0; to_y: "rect2";}
+ rel2 {relative: 0.5 0.0; to_y: "rect2";}
+ // Bottom-aligned
+ align: 0.5 1.0;
+ image.normal: "panorama.png";
+ }
+ }
+ }
+ }
+}</pre>
+</td>
+ <td><p align="center"> <img alt="Part example" src="../../images/scale_example_part.png" /> </p> </td>
+ </tr>
+ </tbody></table>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace">aspect</span>: min max
+<p>Specifies the width to height ratio to keep when the part is resized. When both values are the same, the ratio is fixed. When they differ, the part is forced to keep the ratio between the <span style="font-family: Courier New,Courier,monospace">min</span> and <span style="font-family: Courier New,Courier,monospace">max</span> properties when resized.</p>
+<p>The default value is <span style="font-family: Courier New,Courier,monospace">0.0 0.0</span>.</p></li>
+
+<li><span style="font-family: Courier New,Courier,monospace">aspect_preference</span>: dimension
+<p>Specifies the scope of the <span style="font-family: Courier New,Courier,monospace">aspect</span> property to a given dimension.</p>
+<p>The possible values are <span style="font-family: Courier New,Courier,monospace">BOTH</span>, <span style="font-family: Courier New,Courier,monospace">VERTICAL</span>, <span style="font-family: Courier New,Courier,monospace">HORIZONTAL</span>, and <span style="font-family: Courier New,Courier,monospace">NONE</span>. The default is <span style="font-family: Courier New,Courier,monospace">NONE</span>.</p>
+
+<table>
+<caption>Table: Edje part property aspect example</caption>
+<tbody>
+<tr>
+ <td>
+<pre class="prettyprint">
+collections
+{
+ group
+ {
+ name: "property_test";
+
+ images
+ {
+ image: "island.png" COMP;
+ }
+
+ parts
+ {
+ part
+ {
+ name: "image";
+ description
+ {
+ state: "default" 0.0;
+ rel1 {relative: 0.0 0.0;}
+ rel2 {relative: 1.0 1.0;}
+ image.normal: "island.png";
+ aspect: 8/5 8/5;
+ // Keep the aspect ratio based on the part width
+ aspect_preference: HORIZONTAL;
+ }
+ }
+ }
+ }
+}</pre>
+</td>
+ <td><p align="center"> <img alt="Part aspect example" src="../../images/scale_example_part_aspect.png" /> </p> </td>
+ </tr>
+ </tbody></table>
+</li></ul>
+
+<h3>Text</h3>
+<p>The text elements are used to display text on the screen.</p>
+<p>The texts can have the following properties:</p>
+
+<ul><li><span style="font-family: Courier New,Courier,monospace">size</span>: font-size
+<p>Specifies the font size for the text. When the <span style="font-family: Courier New,Courier,monospace">scale</span> property of the part is set to 1 (on), the size is multiplied by the scaling factor.</p></li>
+
+<li><span style="font-family: Courier New,Courier,monospace">min</span>: horizontal vertical
+<p>Specifies a pair of boolean values that define whether the container can be reduced further than the text size. The property is used to prevent the container from chopping the text.</p>
+<p>When <span style="font-family: Courier New,Courier,monospace">min</span> is set horizontally or vertically, the minimum height or width of the part is decided by the text size.</p>
+<p>The default value is <span style="font-family: Courier New,Courier,monospace">0 0</span>.</p></li>
+
+<li><span style="font-family: Courier New,Courier,monospace">max</span>: horizontal vertical
+<p>Specifies a pair of boolean values that define whether the container can be expanded further than the text size.</p>
+<p>When <span style="font-family: Courier New,Courier,monospace">max</span> is set horizontally or vertically, the maximum height or width of the part is decided by the text size.</p>
+<p>The default value is <span style="font-family: Courier New,Courier,monospace">0 0</span>.</p>
+
+<table>
+<caption>Table: Edje text property example</caption>
+<tbody>
+<tr>
+ <td>
+<pre class="prettyprint">
+collections
+{
+ group
+ {
+ name: "property_test";
+
+ parts
+ {
+ part
+ {
+ name: "text";
+ type: TEXT;
+ scale: 1;
+ description
+ {
+ state: "default" 0.0;
+ rel1 {relative: 0.0 0.0;}
+ rel2 {relative: 1.0 0.0;}
+ align: 0.5 0.0;
+ color: 108 108 108 255;
+ text
+ {
+ font: "TIZEN";
+ // Affected by scaling factor
+ size: 80;
+ // Minimum height of the part container is decided by the text size
+ min: 0 1;
+ text: "Test properties!!";
+ }
+ }
+ }
+ }
+ }
+}</pre>
+</td>
+ <td><p align="center"> <img alt="Text example" src="../../images/scale_example_text.png" /> </p> </td>
+ </tr>
+ </tbody></table>
+
+</li>
+<li><span style="font-family: Courier New,Courier,monospace">fit</span>: horizontal vertical
+<p>Specifies a pair of values that define whether the text is scaled to fill its container horizontally and/or vertically.</p>
+<p>The default value is <span style="font-family: Courier New,Courier,monospace">0 0</span>.</p>
+
+<table>
+<caption>Table: Edje text property fit example</caption>
+<tbody>
+<tr>
+ <td>
+<pre class="prettyprint">
+collections
+{
+ group
+ {
+ name: "property_test";
+
+ parts
+ {
+ part
+ {
+ name: "text";
+ type: TEXT;
+ description
+ {
+ state: "default" 0.0;
+ rel1 {relative: 0.0 0.0;}
+ rel2 {relative: 1.0 0.1;}
+ color: 108 108 108 255;
+ text
+ {
+ font: "TIZEN";
+ // Resize text to fill the container height
+ fit: 0 1;
+ text: "Test properties!!";
+ }
+ }
+ }
+ }
+ }
+}</pre>
+</td>
+ <td><p align="center"> <img alt="Text fit example" src="../../images/scale_example_text_fit.png" /> </p> </td>
+ </tr>
+ </tbody></table></li></ul>
+
+
+ <h3>Image</h3>
+<p>The image elements are used to display images on the screen.</p>
+<p>The images can have the following properties:</p>
+
+<ul><li><span style="font-family: Courier New,Courier,monospace">border</span>: left right top bottom
+<p>Specifies the border size of the image in pixels. This property sets the area of each side of the image to be displayed as a fixed size border, preventing the corners from being changed on a resize.</p></li>
+
+<li><span style="font-family: Courier New,Courier,monospace">border_scale</span>
+<p>Specifies whether the border scales its size according to the scaling factor.</p>
+<p>The default value is 0 (off). To make the border scalable, the value must be set to 1 (on).</p>
+
+<table>
+<caption>Table: Edje image property example</caption>
+<tbody>
+<tr>
+ <td>
+<pre class="prettyprint">
+collections
+{
+ group
+ {
+ name: "property_test";
+
+ images
+ {
+ image: "00_button_01_normal.png" COMP;
+ }
+
+ parts
+ {
+ part
+ {
+ name: "image";
+ description
+ {
+ state: "default" 0.0;
+ rel1 {relative: 0.0 0.6;}
+ rel2 {relative: 1.0 0.7;}
+ image.normal: "00_button_01_normal.png";
+ }
+ }
+ part
+ {
+ name: "ninepatch_image";
+ description
+ {
+ state: "default" 0.0;
+ rel1 {relative: 0.0 0.8;}
+ rel2 {relative: 1.0 0.9;}
+ image
+ {
+ normal: "00_button_01_normal.png";
+ border: 4 4 0 0;
+ // Affected by scaling factor
+ border_scale: 1;
+ }
+ }
+ }
+ }
+ }
+}</pre>
+</td>
+ <td><p align="center"> <img alt="Image example" src="../../images/scale_example_image.png" /> </p> </td>
+ </tr>
+ </tbody></table>
+
+</li></ul>
+<h3>Image Set</h3>
+<p>The image set elements are used to display a specific image on the screen based on the container size.</p>
+<p>The image sets can have the following properties:</p>
+
+<ul><li><span style="font-family: Courier New,Courier,monospace">name</span>: image-name
+<p>Specifies the name of the image file.</p></li>
+
+<li><span style="font-family: Courier New,Courier,monospace">size</span>: minw minh maxw maxh
+<p>Specifies the minimum and maximum size that causes a specified image to be selected and shown.</p>
+<p>The image set is used to control resource quality when the image part is scaled to multiple devices. According to the size of the part's container, an appropriate image is loaded.</p>
+
+<table>
+<caption>Table: Edje image set property example</caption>
+<tbody>
+<tr>
+ <td>
+<pre class="prettyprint">
+collections
+{
+ group
+ {
+ name: "property_test";
+
+ images
+ {
+ set
+ {
+ name: "alternative_animal";
+ image
+ {
+ image: "pig.png" COMP;
+ size: 640 800 1200 1500;
+ }
+ image
+ {
+ image: "monkey.png" COMP;
+ size: 400 500 639 799;
+ }
+ image
+ {
+ image: "cat.png" COMP;
+ size: 240 300 399 499;
+ }
+ image
+ {
+ image: "mouse.png" COMP;
+ size: 80 100 239 299;
+ }
+ image
+ {
+ image: "snail.png" COMP;
+ size: 0 0 79 99;
+ }
+ }
+ }
+
+ parts
+ {
+ part
+ {
+ name: "image1";
+ description
+ {
+ state: "default" 0.0;
+ rel1 {relative: 0.0 0.0;}
+ rel2 {relative: 1.0 0.45;}
+ image.normal: "alternative_animal";
+ aspect: 4/5 4/5;
+ aspect_preference: BOTH;
+ }
+ }
+ part
+ {
+ name: "image2";
+ description
+ {
+ state: "default" 0.0;
+ rel1 {relative: 0.0 0.5;}
+ rel2 {relative: 1.0 0.75;}
+ image.normal: "alternative_animal";
+ aspect: 4/5 4/5;
+ aspect_preference: BOTH;
+ }
+ }
+ part
+ {
+ name: "image3";
+ description
+ {
+ state: "default" 0.0;
+ rel1 {relative: 0.0 0.8;}
+ rel2 {relative: 1.0 1.0;}
+ image.normal: "alternative_animal";
+ aspect: 4/5 4/5;
+ aspect_preference: BOTH;
+ }
+ }
+ }
+ }
+}</pre>
+</td>
+ <td><p align="center"> <img alt="Image set example" src="../../images/scale_example_image_set.png" /> </p> </td>
+ </tr>
+ </tbody></table>
+</li></ul>
+
+<h3>Part Types</h3>
+<p>You can use fixed and flexible parts:</p>
+
+<ul><li>Fixed parts
+
+<ul><li>Fixed parts have a minimum size (at least width or height).</li>
+<li>When the part <span style="font-family: Courier New,Courier,monospace">scale</span> property is set to 1 (on), the scaling factor has an effect on the minimum size.</li>
+<li>Fixed parts are used when the parts must keep a fixed size in any device or any orientation.</li></ul></li>
+<li>Flexible parts
+<ul><li>Flexible parts resize according to the container size and other fixed parts' size.</li>
+<li>Flexible parts are used when the parts can be resized in any device or any orientation.</li></ul></li></ul>
+
+<p class="figure">Figure: Fixed and flexible parts</p>
+<p align="center"> <img alt="Fixed and flexible parts" src="../../images/scale_fixed_flexible.png" /> </p>
+
+
+<h2 id="aspect" name="aspect">Aspect Ratio</h2>
+
+<p>In Tizen, the application generally fills out the screen. However, sometimes you want the application to be shown in a specific aspect ratio, regardless of the screen size.</p>
+<p>As images are scaled in different devices, they are resized based on the container size. The images have specific properties that define the area to be shown when resized.</p>
+
+<p>For example, the following table illustrates what happens to the parts marked with yellow rectangles in the following figures, when scaling properties are applied.</p>
+
+<p class="figure">Figure: Original image [1920x1280 (8:5)]</p>
+<p align="center"> <img alt="Original image [1920x1280 (8:5)]" src="../../images/scale_original_image.png" /> </p>
+
+
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">To set the required aspect ratio, use the <span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_aspect_set()</span> function or the <span style="font-family: Courier New,Courier,monospace">aspect_preference</span> attribute in the EDC.</td>
+ </tr>
+ </tbody>
+ </table>
+
+<table>
+<caption>Table: Image resizing effects with a specific aspect ratio</caption>
+<col width="40%" />
+<tbody>
+<tr>
+ <th rowspan="2">Aspect</th>
+ <th colspan="2">Container area</th>
+</tr>
+<tr>
+ <th>720x384 (15:8)</th>
+ <th>720x640 (9:8)</th>
+</tr>
+ <tr>
+ <td>HORIZONTAL
+<p>Resizing based on the container width while keeping the image aspect ratio.</p>
+<p>Extra height goes outside the image area and is clipped.</p></td>
+ <td><p align="center"><img alt="Scaling effect" src="../../images/scale_effect_1.png" /></p></td>
+ <td><p align="center"><img alt="Scaling effect" src="../../images/scale_effect_2.png" /></p></td>
+ </tr>
+ <tr>
+ <td>VERTICAL
+<p>Resizing based on the container height while keeping the image aspect ratio.</p>
+<p>Extra width goes outside the image area and is clipped.</p></td>
+ <td><p align="center"><img alt="Scaling effect" src="../../images/scale_effect_3.png" /></p></td>
+ <td><p align="center"><img alt="Scaling effect" src="../../images/scale_effect_4.png" /></p></td>
+ </tr>
+ <tr>
+ <td>BOTH
+<p>Resizing based on the container area while keeping the image aspect ratio.</p>
+<p>No extra width or height goes outside the image area, so the entire image is always shown.</p></td>
+ <td><p align="center"><img alt="Scaling effect" src="../../images/scale_effect_5.png" /></p></td>
+ <td><p align="center"><img alt="Scaling effect" src="../../images/scale_effect_6.png" /></p></td>
+ </tr>
+ <tr>
+ <td>NONE
+<p>Resizing to fill the available area while keeping the image aspect ratio.</p>
+<p>Extra width or height goes outside the image area and is clipped.</p></td>
+ <td><p align="center"><img alt="Scaling effect" src="../../images/scale_effect_7.png" /></p></td>
+ <td><p align="center"><img alt="Scaling effect" src="../../images/scale_effect_8.png" /></p></td>
+ </tr>
+ </tbody></table>
+
+<h3>Setting the Image Aspect Ratio</h3>
+<p>In case of an image object, you can set its aspect ratio with additional APIs:</p>
+
+<ul><li><span style="font-family: Courier New,Courier,monospace">elm_image_fill_outside_set()</span>
+<p>If the function is set to <span style="font-family: Courier New,Courier,monospace">TRUE</span>, the image resizes to fill the entire area while keeping its aspect ratio. It lets the extra width or height go outside of the area (same result as with the aspect NONE in the above table).</p></li>
+
+<li><span style="font-family: Courier New,Courier,monospace">elm_image_aspect_fixed_set()</span>
+
+<p>If the function is set to <span style="font-family: Courier New,Courier,monospace">FALSE</span>, the image resizes to fill the entire area without keeping its original aspect ratio. The image can be distorted to fit the area.</p>
+<table>
+<caption>Table: Image resizing without keeping the aspect ratio</caption>
+<tbody>
+<tr>
+ <th colspan="2">Container area</th>
+</tr>
+<tr>
+ <th>720x384 (15:8)</th>
+ <th>720x640 (9:8)</th>
+</tr>
+ <tr>
+ <td><p align="center"><img alt="Scaling effect" src="../../images/scale_effect_9.png" /></p></td>
+ <td><p align="center"><img alt="Scaling effect" src="../../images/scale_effect_10.png" /></p></td>
+ </tr>
+ </tbody></table>
+</li></ul>
+
+
+
+<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>UI Component Styles</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="toc-navigation">
+ <div id="profile">
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ </div>
+
+ <div id="toc_border"><div id="toc">
+ <p class="toc-title">Related Info</p>
+ <ul class="toc">
+ <li><a href="../../../../org.tizen.tutorials/html/native/ui/ui_component_tutorials_mn.htm">UI Component Tutorials</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+ <h1>UI Component Styles</h1>
+
+<p>For each winset, there are many styles supported in the native framework. Following the concept of the native framework in EFL, apply styles using the <span style="font-family: Courier New,Courier,monospace">elm_object_style_set</span> function.</p>
+
+ <table class="note">
+<tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">This feature is supported in mobile applications only.</td>
+ </tr>
+ </tbody>
+ </table>
+
+<p>The following tables list the styles for each winset, including the names of the styles, and the name of the part where to set text or some other <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> in the UI component.</p>
+
+<table>
+<caption>Table: Button styles</caption>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+ <th>Text part</th>
+ <th>Swallow part</th>
+ <th>Notes</th>
+</tr>
+ <tr>
+ <td>elm/button/base/default</td>
+ <td><img src="../../images/button_default.png" /> </td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>elm/button/base/anchor</td>
+ <td><img src="../../images/button_anchor.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>elm/button/base/bottom</td>
+ <td><img src="../../images/bottom.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
+ <td>This style is used widely at the bottom of the screen.</td>
+ </tr>
+ <tr>
+ <td>elm/button/base/circle</td>
+ <td><img src="../../images/button_circle.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>elm/button/base/dropdown</td>
+ <td><img src="../../images/button_dropdown.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>elm/button/base/hoversel_horizontal/default</td>
+ <td><img src="../../images/button_hoversel.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>elm/button/base/hoversel_horizontal_entry/default</td>
+ <td><img src="../../images/button_hoversel_entry.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>elm/button/base/hoversel_vertical/default</td>
+ <td><img src="../../images/button_hover_v.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>elm/button/base/hoversel_vertical_entry/default</td>
+ <td><img src="../../images/button_hover_v_entry.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>elm/button/base/icon_reorder</td>
+ <td><img src="../../images/button_recorder.png" /></td>
+ <td></td>
+ <td></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>elm/button/base/naviframe/drawers</td>
+ <td><img src="../../images/button_drawers.png" /></td>
+ <td></td>
+ <td></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>elm/button/base/naviframe/title_cancel</td>
+ <td><img src="../../images/button_title_cancel.png" /></td>
+ <td></td>
+ <td></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>elm/button/base/naviframe/title_done</td>
+ <td><img src="../../images/button_title_done.png" /></td>
+ <td></td>
+ <td></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>elm/button/base/option</td>
+ <td><img src="../../images/button_option.png" /></td>
+ <td></td>
+ <td></td>
+ <td></td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Check styles</caption>
+<col width="20%"/>
+<col width="80%"/>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+</tr>
+ <tr>
+ <td>elm/check/base/default</td>
+ <td><img src="../../images/check_default.png" /></td>
+ </tr>
+ <tr>
+ <td>elm/check/base/favorite</td>
+ <td><img src="../../images/check_favorite.png" /></td>
+ </tr>
+ <tr>
+ <td>elm/check/base/on&off</td>
+ <td><img src="../../images/check_on_off.png" /></td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Colorselector styles</caption>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+ <th>Notes</th>
+</tr>
+ <tr>
+ <td>elm/colorselector/item/color/colorplane</td>
+ <td><img src="../../images/color_colorplane.png" /></td>
+ <td>Use the following command: <span style="font-family: Courier New,Courier,monospace">elm_colorselector_mode_set(colorselector, ELM_COLORSELECTOR_PALETTE);</span></td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Progressbar styles</caption>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+</tr>
+ <tr>
+ <td>default</td>
+ <td><img src="../../images/progressbar_default.png" /></td>
+ </tr>
+ <tr>
+ <td>wheel</td>
+ <td><img src="../../images/progressbar_wheel.png" /></td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Radio styles</caption>
+<col width="20%"/>
+<col width="80%"/>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+</tr>
+ <tr>
+ <td>default</td>
+ <td><img src="../../images/radio_default.png" /></td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: List styles</caption>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+ <th>Text part</th>
+ <th>Swallow part</th>
+</tr>
+ <tr>
+ <td>default</td>
+ <td><img src="../../images/styleguide_genlist_def.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span>: for the icon on the left.
+ <p><span style="font-family: Courier New,Courier,monospace">elm.swallow.end</span>: for the icon on the right.</p></td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Multi Button Entry styles</caption>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+ <th>Text part</th>
+ <th>Notes</th>
+</tr>
+ <tr>
+ <td>elm/multibuttonentry/base/default</td>
+ <td><img src="../../images/multi_button_default.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span>, guide</td>
+ <td>The guide text part is used when there is no item in the Multi Button Entry. It is removed automatically when an item is appended in the Multi Button Entry.</td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Toolbar styles</caption>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+ <th>Text part</th>
+ <th>Swallow part</th>
+ <th>Notes</th>
+</tr>
+ <tr>
+ <td>elm/toolbar/base/default</td>
+ <td><img src="../../images/toolbar_default.png" /></td>
+ <td></td>
+ <td></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>elm/toolbar/base/navigationbar</td>
+ <td><img src="../../images/toolbar_navigation.png" /></td>
+ <td></td>
+ <td></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>elm/toolbar/base/tabbar_with_title</td>
+ <td><img src="../../images/toolbar_tabbar.png" /></td>
+ <td></td>
+ <td></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>elm/toolbar/item/default</td>
+ <td></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
+ <td>This style is for the toolbar's item. Check the <span style="font-family: Courier New,Courier,monospace">elm_toolbar_item_append()</span> function to set the text and the icon.</td>
+ </tr>
+ <tr>
+ <td>elm/toolbar/item/navigationbar</td>
+ <td></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td></td>
+ <td>This style is for the toolbar's item. Check the <span style="font-family: Courier New,Courier,monospace">elm_toolbar_item_append()</span> function to set the text and the icon.</td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Flipselector styles</caption>
+<col width="20%"/>
+<col width="80%"/>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+</tr>
+ <tr>
+ <td>default</td>
+ <td><img src="../../images/flipsel_default.png" /></td>
+ </tr>
+ </tbody>
+</table>
+
+<p>The style of the genlist's item is not set by external APIs. Check the guide of Genlist to check how to use the item class to set the item's style.</p>
+<table>
+<caption>Table: Genlist styles</caption>
+
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+ <th>Text part</th>
+ <th>Swallow part</th>
+ <th>Notes</th>
+</tr>
+ <tr>
+ <td>default</td>
+ <td><img src="../../images/styleguide_genlist_def.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span>: for the icon on the left.
+ <p><span style="font-family: Courier New,Courier,monospace">elm.swallow.end</span>: for the icon on the right.</p></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>default_style</td>
+ <td><img src="../../images/styleguide_genlist_defstyle.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span>: for the icon on the left.
+ <p><span style="font-family: Courier New,Courier,monospace">elm.swallow.end</span>: for the icon on the right.</p></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>double_label</td>
+ <td><img src="../../images/styleguide_genlist_doublelabel.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span>: for the main text.
+ <p><span style="font-family: Courier New,Courier,monospace">elm.text.sub</span>: for the sub text.</p></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span>: for the icon on the left.
+ <p><span style="font-family: Courier New,Courier,monospace">elm.swallow.end</span>: for the icon on the right.</p></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>end_icon</td>
+ <td><img src="../../images/styleguide_genlist_end.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>full</td>
+ <td><img src="../../images/styleguide_genlist_full.png" /></td>
+ <td></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
+ <td>The swallow part is the full size of the item. There is no padding in the item.</td>
+ </tr>
+ <tr>
+ <td>group_index</td>
+ <td><img src="../../images/styleguide_genlist_group.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span>: for the icon on the left.
+ <p><span style="font-family: Courier New,Courier,monospace">elm.swallow.end</span>: for the icon on the right.</p></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>one_icon</td>
+ <td><img src="../../images/styleguide_genlist_oneicon.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>message</td>
+ <td><img src="../../images/styleguide_genlist_message.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span>: for the text on the top.
+ <p><span style="font-family: Courier New,Courier,monospace">elm.title.1</span>: for the text in the middle.</p>
+<p><span style="font-family: Courier New,Courier,monospace">elm.title.2</span>: for the text on the bottom.</p></td>
+ <td></td>
+ <td></td>
+ </tr>
+ </tbody>
+</table>
+
+<p>The style of the gengrid's item is not set by external APIs. For more information on using the item class to set the item's style, see the guide of gengrid.</p>
+<table>
+<caption>Table: Gengrid styles</caption>
+
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+ <th>Text part</th>
+ <th>Swallow part</th>
+ <th>Notes</th>
+</tr>
+ <tr>
+ <td>default</td>
+ <td><img src="../../images/gengrid_default.png" /></td>
+ <td></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
+ <td></td>
+</tr>
+ <tr>
+ <td>album-preview</td>
+ <td><img src="../../images/gengrid_album_pre.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
+ <td></td>
+</tr>
+ <tr>
+ <td>block</td>
+ <td><img src="../../images/gengrid_block.png" /></td>
+ <td></td>
+ <td></td>
+ <td>This style is used to show an empty area.</td>
+</tr>
+ <tr>
+ <td>group_index</td>
+ <td><img src="../../images/gengrid_grp_index.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
+ <td></td>
+</tr>
+ <tr>
+ <td>default_grid</td>
+ <td><img src="../../images/gengrid_def.png" /></td>
+ <td></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
+ <td></td>
+ </tr>
+<tr>
+ <td>default_gridtext2</td>
+ <td><img src="../../images/gengrid_def_gridtext2.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>default_gridtext</td>
+ <td><img src="../../images/gengrid_def_gridtext.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>default_style</td>
+ <td><img src="../../images/gengrid_def_style.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
+ <td></td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Segmentation Control styles</caption>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+</tr>
+ <tr>
+ <td>default</td>
+ <td><img src="../../images/segm_control_default.png" /></td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Index styles</caption>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+ <th>Notes</th>
+</tr>
+ <tr>
+ <td>default</td>
+ <td><img src="../../images/index_default.png" /></td>
+ <td>This style is for supporting the vertical style.</td>
+ </tr>
+ <tr>
+ <td>default</td>
+ <td><img src="../../images/index_default02.png" /></td>
+ <td>This style is for supporting the horizontal style. To set a horizontal index, use the <span style="font-family: Courier New,Courier,monospace">elm_index_horizontal_set</span>.</td>
+ </tr>
+ <tr>
+ <td>pagecontrol</td>
+ <td><img src="../../images/index_pagecontrol.png" /></td>
+ <td>This style is used for the "page control" layout. For more information, refer to the Core Control sample application.</td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Contextual Popup (Ctxpopup) styles</caption>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+ <th>Notes</th>
+</tr>
+ <tr>
+ <td>default</td>
+ <td><img src="../../images/ctxpopup_default.png" /></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>dropdown/list</td>
+ <td><img src="../../images/ctxpopup_dropdown.png" /></td>
+ <td>The size of the item and the ctxpopup follow the size of the screen.</td>
+ </tr>
+ <tr>
+ <td>dropdown/label</td>
+ <td><img src="../../images/ctxpopup_dropdown_label.png" /></td>
+ <td>The size of the item and the ctxpopup follow the maximum length of the item.</td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Icon styles</caption>
+<col width="20%"/>
+<col width="80%"/>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+</tr>
+ <tr>
+ <td>apps</td>
+ <td><img src="../../images/icon_apps.png" /></td>
+ </tr>
+ <tr>
+ <td>arrow_down</td>
+ <td><img src="../../images/icon_arrowdown.png" /></td>
+ </tr>
+ <tr>
+ <td>arrow_left</td>
+ <td><img src="../../images/icon_arrowleft.png" /></td>
+ </tr>
+ <tr>
+ <td>arrow_right</td>
+ <td><img src="../../images/icon_arrowright.png" /></td>
+ </tr>
+ <tr>
+ <td>arrow_up</td>
+ <td><img src="../../images/icon_arrowup.png" /></td>
+ </tr>
+ <tr>
+ <td>chat</td>
+ <td><img src="../../images/icon_chat.png" /></td>
+ </tr>
+ <tr>
+ <td>clock</td>
+ <td><img src="../../images/icon_clock.png" /></td>
+ </tr>
+ <tr>
+ <td>close</td>
+ <td><img src="../../images/icon_close.png" /></td>
+ </tr>
+ <tr>
+ <td>delete</td>
+ <td><img src="../../images/icon_delete.png" /></td>
+ </tr>
+ <tr>
+ <td>edit</td>
+ <td><img src="../../images/icon_edit.png" /></td>
+ </tr>
+ <tr>
+ <td>file</td>
+ <td><img src="../../images/icon_file.png" /></td>
+ </tr>
+ <tr>
+ <td>home</td>
+ <td><img src="../../images/icon_home.png" /></td>
+ </tr>
+ <tr>
+ <td>media_player/forward</td>
+ <td><img src="../../images/icon_forward.png" /></td>
+ </tr>
+ <tr>
+ <td>media_player/info</td>
+ <td><img src="../../images/icon_info.png" /></td>
+ </tr>
+ <tr>
+ <td>media_player/next</td>
+ <td><img src="../../images/icon_next.png" /></td>
+ </tr>
+ <tr>
+ <td>media_player/pause</td>
+ <td><img src="../../images/icon_pause.png" /></td>
+ </tr>
+ <tr>
+ <td>media_player/play</td>
+ <td><img src="../../images/icon_play.png" /></td>
+ </tr>
+ <tr>
+ <td>media_player/prev</td>
+ <td><img src="../../images/icon_prev.png" /></td>
+ </tr>
+ <tr>
+ <td>media_player/rewind</td>
+ <td><img src="../../images/icon_rewind.png" /></td>
+ </tr>
+ <tr>
+ <td>media_player/stop</td>
+ <td><img src="../../images/icon_stop.png" /></td>
+ </tr>
+ <tr>
+ <td>menu/apps</td>
+ <td><img src="../../images/icon_menu_apps.png" /></td>
+ </tr>
+ <tr>
+ <td>menu/arrow_down</td>
+ <td><img src="../../images/icon_menu_arrdown.png" /></td>
+ </tr>
+ <tr>
+ <td>menu/arrow_left</td>
+ <td><img src="../../images/icon_menu_arrleft.png" /></td>
+ </tr>
+ <tr>
+ <td>menu/arrow_right</td>
+ <td><img src="../../images/icon_menu_arrright.png" /></td>
+ </tr>
+ <tr>
+ <td>menu/arrow_up</td>
+ <td><img src="../../images/icon_menu_arrup.png" /></td>
+ </tr>
+ <tr>
+ <td>menu/chat</td>
+ <td><img src="../../images/icon_menu_chat.png" /></td>
+ </tr>
+ <tr>
+ <td>menu/clock</td>
+ <td><img src="../../images/icon_menu_clock.png" /></td>
+ </tr>
+ <tr>
+ <td>menu/close</td>
+ <td><img src="../../images/icon_menu_close.png" /></td>
+ </tr>
+ <tr>
+ <td>menu/delete</td>
+ <td><img src="../../images/icon_menu_delete.png" /></td>
+ </tr>
+ <tr>
+ <td>menu/edit</td>
+ <td><img src="../../images/icon_menu_edit.png" /></td>
+ </tr>
+ <tr>
+ <td>menu/file</td>
+ <td><img src="../../images/icon_menu_file.png" /></td>
+ </tr>
+ <tr>
+ <td>menu/folder</td>
+ <td><img src="../../images/icon_menu_folder.png" /></td>
+ </tr>
+ <tr>
+ <td>menu/home</td>
+ <td><img src="../../images/icon_menu_home.png" /></td>
+ </tr>
+ <tr>
+ <td>menu/refresh</td>
+ <td><img src="../../images/icon_menu_refresh.png" /></td>
+ </tr>
+ <tr>
+ <td>no_photo</td>
+ <td><img src="../../images/icon_menu_nophoto.png" /></td>
+ </tr>
+ <tr>
+ <td>photo/no_photo</td>
+ <td><img src="../../images/icon_photo_nophoto.png" /></td>
+ </tr>
+ <tr>
+ <td>refresh</td>
+ <td><img src="../../images/icon_refresh.png" /></td>
+ </tr>
+ <tr>
+ <td>toolbar/apps</td>
+ <td><img src="../../images/icon_toolbar_apps.png" /></td>
+ </tr>
+ <tr>
+ <td>toolbar/arrow_down</td>
+ <td><img src="../../images/icon_toolbar_arrdown.png" /></td>
+ </tr>
+ <tr>
+ <td>toolbar/arrow_left</td>
+ <td><img src="../../images/icon_toolbar_arrleft.png" /></td>
+ </tr>
+ <tr>
+ <td>toolbar/arrow_right</td>
+ <td><img src="../../images/icon_toolbar_arrright.png" /></td>
+ </tr>
+ <tr>
+ <td>toolbar/arrow_up</td>
+ <td><img src="../../images/icon_toolbar_arrup.png" /></td>
+ </tr>
+ <tr>
+ <td>toolbar/chat</td>
+ <td><img src="../../images/icon_toolbar_chat.png" /></td>
+ </tr>
+ <tr>
+ <td>toolbar/clock</td>
+ <td><img src="../../images/icon_toolbar_clock.png" /></td>
+ </tr>
+ <tr>
+ <td>toolbar/close</td>
+ <td><img src="../../images/icon_toolbar_close.png" /></td>
+ </tr>
+ <tr>
+ <td>toolbar/delete</td>
+ <td><img src="../../images/icon_toolbar_delete.png" /></td>
+ </tr>
+ <tr>
+ <td>toolbar/edit</td>
+ <td><img src="../../images/icon_toolbar_edit.png" /></td>
+ </tr>
+ <tr>
+ <td>toolbar/file</td>
+ <td><img src="../../images/icon_toolbar_file.png" /></td>
+ </tr>
+ <tr>
+ <td>toolbar/folder</td>
+ <td><img src="../../images/icon_toolbar_folder.png" /></td>
+ </tr>
+ <tr>
+ <td>toolbar/home</td>
+ <td><img src="../../images/icon_home.png" /></td>
+ </tr>
+ <tr>
+ <td>toolbar/more_menu</td>
+ <td><img src="../../images/icon_toolbar_moremenu.png" /></td>
+ </tr>
+ <tr>
+ <td>toolbar/refresh</td>
+ <td><img src="../../images/icon_toolbar_refresh.png" /></td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Entry styles</caption>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+ <th>Text part</th>
+ <th>Swallow part</th>
+ <th>Notes</th>
+</tr>
+ <tr>
+ <td>default</td>
+ <td><img src="../../images/entry_default.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.guide</span>: for the guide text.
+ <p><span style="font-family: Courier New,Courier,monospace">elm.text</span>: for the main text.</p></td>
+ <td></td>
+ <td>The guide text is automatically erased when the main text is entered.</td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Datetime styles</caption>
+<col width="20%"/>
+<col width="80%"/>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+</tr>
+ <tr>
+ <td>date_layout</td>
+ <td><img src="../../images/datetime_date_layout.png" /></td>
+ </tr>
+ <tr>
+ <td>time_layout</td>
+ <td><img src="../../images/datetime_time_layout.png" /></td>
+ </tr>
+ <tr>
+ <td>time_layout_24hr</td>
+ <td><img src="../../images/datetime_time_24h.png" /></td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Panel (drawer) styles</caption>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+ <th>Swallow part</th>
+ <th>Notes</th>
+</tr>
+ <tr>
+ <td>default</td>
+ <td><img src="../../images/panel_default.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
+ <td>For more information on the drawer, see the [UI Sample] Core Control guide.</td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Slider styles</caption>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+ <th>Swallow part</th>
+
+</tr>
+ <tr>
+ <td>horizontal/default</td>
+ <td><img src="../../images/slider_hor.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
+ </tr>
+ <tr>
+ <td>horizontal/center_point</td>
+ <td><img src="../../images/slider_hor_center.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
+ </tr>
+ <tr>
+ <td>vertical/center_point</td>
+ <td><img src="../../images/slider_ver_center.png" /></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>vertical/default</td>
+ <td><img src="../../images/slider_ver.png" /></td>
+ <td></td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Popup styles</caption>
+<col width="20%"/>
+<col width="80%"/>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+</tr>
+ <tr>
+ <td>default</td>
+ <td><img src="../../images/popup_default.png" /></td>
+ </tr>
+ <tr>
+ <td>toast</td>
+ <td><img src="../../images/popup_toast.png" /></td>
+ </tr>
+ </tbody>
+</table>
+
+ <table>
+<caption>Table: Spinner styles</caption>
+<col width="20%"/>
+<col width="80%"/>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+</tr>
+ <tr>
+ <td>base/horizontal</td>
+ <td><img src="../../images/spinner_hor.png" /></td>
+ </tr>
+ <tr>
+ <td>base/vertical</td>
+ <td><img src="../../images/spinner_ver.png" /></td>
+ </tr>
+ </tbody>
+</table>
+
+<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 is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</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>UI Component Styles</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="toc-navigation">
+ <div id="profile">
+ <p><img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+ </div>
+
+ <div id="toc_border"><div id="toc">
+ <p class="toc-title">Related Info</p>
+ <ul class="toc">
+ <li><a href="../../../../org.tizen.tutorials/html/native/ui/ui_component_tutorials_wn.htm">UI Component Tutorials</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+ <h1>UI Component Styles</h1>
+
+
+<p>For each winset, there are many styles supported in the native framework. Following the concept of the native framework in EFL, apply styles using the <span style="font-family: Courier New,Courier,monospace">elm_object_style_set</span> function.</p>
+
+ <table class="note">
+<tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">This feature is supported in wearable applications only.</td>
+ </tr>
+ </tbody>
+ </table>
+
+
+<p>The following tables list the styles for each winset, including the names of the styles, and the name of the part where to set text or some other <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> in the UI component.</p>
+
+<table>
+<caption>Table: Button styles (wearable core)</caption>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+ <th>Text part</th>
+ <th>Swallow part</th>
+ <th>Notes</th>
+</tr>
+ <tr>
+ <td>default</td>
+ <td><img src="../../images/button_default_wn.png" /> </td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>green</td>
+ <td><img src="../../images/button_green_wn.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>orange</td>
+ <td><img src="../../images/button_orange_wn.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>red</td>
+ <td><img src="../../images/button_red_wn.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>nextdepth</td>
+ <td><img src="../../images/button_next_wn.png" /></td>
+ <td></td>
+ <td></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>naviframe/title_icon</td>
+ <td><img src="../../images/button_titleicon_wn.png" /></td>
+ <td></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
+ <td>The icon can be set with the <span style="font-family: Courier New,Courier,monospace">elm_object_part_content_set(btn, "icon", ic)</span> function.</td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Button styles (Gear O)</caption>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+ <th>Text part</th>
+ <th>Swallow part</th>
+ <th>Notes</th>
+</tr>
+ <tr>
+ <td>default</td>
+ <td><img src="../../images/button_default_wn.png" /> </td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>bottom</td>
+ <td><img src="../../images/button_bottom_o_wn.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
+ <td></td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Check styles (wearable core)</caption>
+<col width="20%"/>
+<col width="80%"/>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+</tr>
+ <tr>
+ <td>default</td>
+ <td><img src="../../images/check_default_wn.png" /></td>
+ </tr>
+ <tr>
+ <td>on&off</td>
+ <td><img src="../../images/check_onoff_wn.png" /></td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Check styles (Gear O)</caption>
+<col width="20%"/>
+<col width="80%"/>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+</tr>
+ <tr>
+ <td>default</td>
+ <td><img src="../../images/check_default_o_wn.png" /></td>
+ </tr>
+ <tr>
+ <td>small</td>
+ <td><img src="../../images/check_small_o_wn.png" /></td>
+ </tr>
+ <tr>
+ <td>on&off</td>
+ <td><img src="../../images/check_onoff_o_wn.png" /></td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Contextual popup (Ctxpopup) styles (wearable core)</caption>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+ <th>Notes</th>
+</tr>
+ <tr>
+ <td>default</td>
+ <td><img src="../../images/contextual_wn.png" /></td>
+ <td>Use the <span style="font-family: Courier New,Courier,monospace">elm_ctxpopup_item_append()</span> function to add both text and an icon to the list.</td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Contextual popup (Ctxpopup) styles (Gear O)</caption>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+ <th>Notes</th>
+</tr>
+ <tr>
+ <td>select_mode</td>
+ <td><img src="../../images/contextual_select_o_wn.png" /></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>select_mode/top</td>
+ <td><img src="../../images/contextual_top_o_wn.png" /></td>
+ <td>Pair this style with select_mode/bottom.</td>
+ </tr>
+ <tr>
+ <td>select_mode/bottom</td>
+ <td><img src="../../images/contextual_bottom_o_wn.png" /></td>
+ <td>Pair this style with select_mode/top.</td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Datetime styles (wearable core)</caption>
+<col width="20%"/>
+<col width="80%"/>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+</tr>
+ <tr>
+ <td>datepicker_layout</td>
+ <td><img src="../../images/datetime_date_wn.png" /></td>
+ </tr>
+ <tr>
+ <td>timepicker_layout</td>
+ <td><img src="../../images/datetime_time_wn.png" /></td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Datetime styles (Gear O)</caption>
+<col width="20%"/>
+<col width="80%"/>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+</tr>
+ <tr>
+ <td>datepicker/circle</td>
+ <td><img src="../../images/datetime_date_o_wn.png" /></td>
+ </tr>
+ <tr>
+ <td>timepicker/circle</td>
+ <td><img src="../../images/datetime_time_o_wn.png" /></td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Entry styles</caption>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+ <th>Text part</th>
+ <th>Swallow part</th>
+ <th>Notes</th>
+</tr>
+ <tr>
+ <td>default</td>
+ <td><img src="../../images/entry_default_wn.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.guide</span>: for the guide text.
+ <p><span style="font-family: Courier New,Courier,monospace">elm.text</span>: for the main text.</p></td>
+ <td></td>
+ <td>The guide text is automatically erased when the main text is entered.</td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Genlist styles (wearable core)</caption>
+
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+ <th>Text part</th>
+ <th>Swallow part</th>
+ <th>Notes</th>
+</tr>
+ <tr>
+ <td>default</td>
+ <td><img src="../../images/genlist_def_wn.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span>: for the icon on the left.
+ <p><span style="font-family: Courier New,Courier,monospace">elm.swallow.end</span>: for the icon on the right.</p></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>group_index</td>
+ <td><img src="../../images/genlist_group_wn.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span>: for the main text.
+ <p><span style="font-family: Courier New,Courier,monospace">elm.text.1</span>: for the sub text.</p></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.icon</span></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>1text</td>
+ <td><img src="../../images/genlist_1text_wn.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>1text.1icon</td>
+ <td><img src="../../images/genlist_1text1icon_wn.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.icon</span></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>2text</td>
+ <td><img src="../../images/genlist_2text_wn.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span>: for the main text.
+ <p><span style="font-family: Courier New,Courier,monospace">elm.text.1</span>: for the sub text.</p></td>
+ <td></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>2text.1</td>
+ <td><img src="../../images/genlist_2text1_wn.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span>: for the main text.
+ <p><span style="font-family: Courier New,Courier,monospace">elm.text.1</span>: for the sub text.</p></td>
+ <td></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>1text.1icon.divider</td>
+ <td><img src="../../images/genlist_1text1icondivider_wn.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.icon</span>: for the icon.
+ <p><span style="font-family: Courier New,Courier,monospace">elm.divider</span>: for the icon divider.</p></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>1text.1icon.1</td>
+ <td><img src="../../images/genlist_1text1icon1_wn.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.icon</span></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>2text.1icon.1</td>
+ <td><img src="../../images/genlist_2text1icon1_wn.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span>: for the main text.
+ <p><span style="font-family: Courier New,Courier,monospace">elm.text.1</span>: for the sub text.</p></td>
+<td><span style="font-family: Courier New,Courier,monospace">elm.icon</span></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>multiline/1text</td>
+ <td><img src="../../images/genlist_multi1_wn.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span>: for the multi-line text.</td>
+ <td></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>multiline/2text</td>
+ <td><img src="../../images/genlist_multi2_wn.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span>: for the main text.
+ <p><span style="font-family: Courier New,Courier,monospace">elm.text.1</span>: for the multi-line sub text.</p></td>
+ <td></td>
+ <td></td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Genlist styles (Gear O)</caption>
+
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+ <th>Text part</th>
+ <th>Swallow part</th>
+ <th>Notes</th>
+</tr>
+ <tr>
+ <td>default</td>
+ <td><img src="../../images/genlist_def_o_wn.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span>: for the icon on the left.
+ <p><span style="font-family: Courier New,Courier,monospace">elm.swallow.end</span>: for the icon on the right.</p></td>
+ <td></td>
+ </tr>
+<tr>
+ <td>title</td>
+ <td><img src="../../images/genlist_title_o_wn.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>groupindex</td>
+ <td><img src="../../images/genlist_group_o_wn.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>1text</td>
+ <td><img src="../../images/genlist_1text_o_wn.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>1text.1icon</td>
+ <td><img src="../../images/genlist_1text1icon_o_wn.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.icon</span></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>2text</td>
+ <td><img src="../../images/genlist_2text_o_wn.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span>: for the main text.
+ <p><span style="font-family: Courier New,Courier,monospace">elm.text.1</span>: for the sub text.</p></td>
+ <td></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>1text.1icon.divider</td>
+ <td><img src="../../images/genlist_1text1icondivider_o_wn.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.icon</span>: for the icon.
+ <p><span style="font-family: Courier New,Courier,monospace">elm.divider</span>: for the icon divider.</p></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>1text.1icon.1</td>
+ <td><img src="../../images/genlist_1text1icon1_o_wn.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.icon</span></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>2text.1icon.1</td>
+ <td><img src="../../images/genlist_2text1icon1_o_wn.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span>: for the main text.
+ <p><span style="font-family: Courier New,Courier,monospace">elm.text.1</span>: for the sub text.</p></td>
+<td><span style="font-family: Courier New,Courier,monospace">elm.icon</span></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>editfield</td>
+ <td><img src="../../images/genlist_edit_o_wn.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
+ <td></td>
+ <td></td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Index styles (wearable core)</caption>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+</tr>
+ <tr>
+ <td>thumbnail</td>
+ <td><img src="../../images/index_thumb_wn.png" /></td>
+ </tr>
+ <tr>
+ <td>tab</td>
+ <td><img src="../../images/index_tab_wn.png" /></td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Index styles (Gear O)</caption>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+</tr>
+ <tr>
+ <td>thumbnail</td>
+ <td><img src="../../images/index_thumb_o_wn.png" /></td>
+ </tr>
+ <tr>
+ <td>circle</td>
+ <td><img src="../../images/index_circle_o_wn.png" /></td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Popup styles (wearable core)</caption>
+<col width="20%"/>
+<col width="80%"/>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+</tr>
+ <tr>
+ <td>default</td>
+ <td><img src="../../images/popup_default_wn.png" /></td>
+ </tr>
+ <tr>
+ <td>toast</td>
+ <td><img src="../../images/popup_toast_wn.png" /></td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Popup styles (Gear O)</caption>
+<col width="20%"/>
+<col width="80%"/>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+</tr>
+ <tr>
+ <td>circle</td>
+ <td><img src="../../images/popup_circle_o_wn.png" /></td>
+ </tr>
+ <tr>
+ <td>toast/circle</td>
+ <td><img src="../../images/popup_toast_o_wn.png" /></td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Progressbar styles (wearable core)</caption>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+</tr>
+ <tr>
+ <td>default</td>
+ <td><img src="../../images/progressbar_default_wn.png" /></td>
+ </tr>
+ <tr>
+ <td>pending_list</td>
+ <td><img src="../../images/progressbar_pending_wn.png" /></td>
+ </tr>
+ <tr>
+ <td>process</td>
+ <td><img src="../../images/progressbar_process_wn.png" /></td>
+ </tr>
+ <tr>
+ <td>process/groupindex</td>
+ <td><img src="../../images/progressbar_group_wn.png" /></td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Progressbar styles (Gear O)</caption>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+</tr>
+ <tr>
+ <td>process</td>
+ <td><img src="../../images/progressbar_process_o_wn.png" /></td>
+ </tr>
+ <tr>
+ <td>process/small</td>
+ <td><img src="../../images/progressbar_small_o_wn.png" /></td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Radio styles (wearable core)</caption>
+<col width="20%"/>
+<col width="80%"/>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+</tr>
+ <tr>
+ <td>default</td>
+ <td><img src="../../images/radio_default_wn.png" /></td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Radio styles (Gear O)</caption>
+<col width="20%"/>
+<col width="80%"/>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+</tr>
+ <tr>
+ <td>default</td>
+ <td><img src="../../images/radio_default_o_wn.png" /></td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Slider styles</caption>
+<tbody>
+<tr>
+ <th>Style</th>
+ <th>Sample</th>
+ <th>Swallow part</th>
+
+</tr>
+ <tr>
+ <td>horizontal/default</td>
+ <td><img src="../../images/slider_hor_wn.png" /></td>
+ <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
+ </tr>
+ </tbody>
+</table>
+
+
+<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 is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</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
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a href="../../../../org.tizen.tutorials/html/native/ui/ui_tutorials_n.htm">UI Tutorials</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UI__FRAMEWORK.html">UI API</a></li>
+ <li><a href="../../../../org.tizen.tutorials/html/native/ui/ui_tutorials_n.htm">UI Framework Tutorials</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Ecore__Group.html">Ecore API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Eina__Group.html">Eina API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Ecore__Group.html">Ecore API for Wearable Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Eina__Group.html">Eina API for Wearable Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<p>The illustration below shows the occupancy of a hypothetical thread pool: there are several tasks, of which 4 are running (because the <span style="font-family: Courier New,Courier,monospace;">thread_max</span> parameter of the pool is 4) and the others are waiting. There is no thread with its <span style="font-family: Courier New,Courier,monospace;">func_end</span> currently called.</p>
<p class="figure">Figure: Thread pool, step 1</p>
-<p
style="text-align:center;"><img alt="Thread pool, step 1" src="../../images/thread_pool_lifecycle_1.png" /></p>
+<p
align="center"><img alt="Thread pool, step 1" src="../../images/thread_pool_lifecycle_1.png" /></p>
<p>When a task (the sepia filter on image1 for instance) finishes, the corresponding <span style="font-family: Courier New,Courier,monospace;">func_end</span> function is invoked from the mainloop.</p>
<p class="figure">Figure: Thread pool, step 2</p>
-<p
style="text-align:center;"><img alt="Thread pool, step 2" src="../../images/thread_pool_lifecycle_2.png" /></p>
+<p
align="center"><img alt="Thread pool, step 2" src="../../images/thread_pool_lifecycle_2.png" /></p>
<p>With the task done, one of the thread from the pool is available again and another can run in it (adding the reverberation effect on audio3 in the example below).</p>
<p class="figure">Figure: Thread pool, step 3</p>
-<p
style="text-align:center;"><img alt="Thread pool, step 3" src="../../images/thread_pool_lifecycle_3.png" /></p>
+<p
align="center"><img alt="Thread pool, step 3" src="../../images/thread_pool_lifecycle_3.png" /></p>
<p>The thread pool continues the same way forever, running tasks in its threads whenever there is one available.</p>
<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>UI Control</title>
+ <title>UI Components</title>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a href="#scalability">Scaling Widgets</a></li>
- <li><a href="#widgets">Using Widgets</a></li>
+ <li><a href="#scalability">Scaling UI Components</a></li>
+ <li><a href="#components">Using UI Components</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a href="../../../../org.tizen.tutorials/html/native/ui/ui_control_tutorials_n.htm">UI Control Tutorials</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API</a></li>
- </ul>
+ <li><a href="../../../../org.tizen.tutorials/html/native/ui/ui_component_tutorials_mn.htm">UI Components Tutorials</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje__Group.html">Edje API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
+ </ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
- <h1>UI Control</h1>
- <p>The UI control management features allow you to the widgets and their focus on the screen, as well as create customizations. The Elementary library provides several widgets than can be used to compose the user interface of your application.</p>
- <p>The main features of UI control management are:</p>
+ <h1>UI Components</h1>
+ <p>The UI component management features allow you to the UI components and their focus on the screen, as well as create customizations. The Elementary library provides several UI components than can be used to compose the user interface of your application.</p>
+
+ <table class="note">
+<tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">This feature is supported in mobile applications only.</td>
+ </tr>
+ </tbody>
+ </table>
+
+ <p>The main features of UI component management are:</p>
<ul>
- <li><a href="#scalability">Scaling widgets</a> <p>Enables you to scale widgets in order to be comfortably used with a finger and make text more readable.</p></li>
- <li><a href="#widgets">Using widgets</a> <p>Enables you to build your application without having to reinvent basic objects, such as buttons, lists, or text entries.</p></li>
+ <li><a href="#scalability">Scaling UI components</a> <p>Enables you to scale UI components in order to be comfortably used with a finger and make text more readable.</p></li>
+ <li><a href="#components">Using UI components</a> <p>Enables you to build your application without having to reinvent basic objects, such as buttons, lists, or text entries.</p></li>
</ul>
- <h2 id="scalability" name="scalability">Scaling Widgets</h2>
+ <h2 id="scalability" name="scalability">Scaling UI Components</h2>
-<p>Elementary, through its configuration API (<span style="font-family: Courier New,Courier,monospace;">elm_config</span>), provides a way to scale widgets with two different parameters. <span style="font-family: Courier New,Courier,monospace;">Finger size</span> parameter is used when the interactive zones (clickable, editable) of the widgets need to be scaled in order to be comfortably used with a finger. <span style="font-family: Courier New,Courier,monospace;">Scale</span> parameter is responsible for scaling readable parts of a widget (text or icons for example), so that it is more visible in the user interface.</p>
+<p>Elementary, through its configuration API (<span style="font-family: Courier New,Courier,monospace;">elm_config</span>), provides a way to scale UI components with two different parameters. <span style="font-family: Courier New,Courier,monospace;">Finger size</span> parameter is used when the interactive zones (clickable, editable) of the UI components need to be scaled in order to be comfortably used with a finger. <span style="font-family: Courier New,Courier,monospace;">Scale</span> parameter is responsible for scaling readable parts of a UI component (text or icons for example), so that it is more visible in the user interface.</p>
<h3 id="Finger_Size" name="Finger_Size">Finger Size</h3>
-<p><span style="font-family: Courier New,Courier,monospace;">Finger size</span> parameter scales widgets based on the user's finger size. This is useful when using a touchscreen with a finger rather than with a stylus. The finger size parameter is in pixels and determines the minimum size of a square on the screen that is reliably hittable with a finger. This parameter scales the input and interactive areas.</p>
+<p><span style="font-family: Courier New,Courier,monospace;">Finger size</span> parameter scales UI components based on the user's finger size. This is useful when using a touchscreen with a finger rather than with a stylus. The finger size parameter is in pixels and determines the minimum size of a square on the screen that is reliably hittable with a finger. This parameter scales the input and interactive areas.</p>
-<p>The global finger size is set with the <span style="font-family: Courier New,Courier,monospace;">elm_config_finger_size_set()</span> function. This adjusts the size and hit area of widgets so they are easy to hit with a finger. The current value is retrieved with the <span style="font-family: Courier New,Courier,monospace;">elm_config_finger_size_get()</span> call. The finger size is always in pixel.</p>
+<p>The global finger size is set with the <span style="font-family: Courier New,Courier,monospace;">elm_config_finger_size_set()</span> function. This adjusts the size and hit area of UI components so they are easy to hit with a finger. The current value is retrieved with the <span style="font-family: Courier New,Courier,monospace;">elm_config_finger_size_get()</span> call. The finger size is always in pixel.</p>
<p>To increase the current global finger size by 20px:</p>
<pre class="prettyprint">
Evas_Coord finger_size;
-/* Get the current finger size */
+// Get the current finger size
finger_size = elm_config_finger_size_get();
-/* Add 20px to finger size parameter and set it to the global Elementary
-* configuration */
+// Add 20px to finger size parameter and set it
+// to the global Elementary configuration
elm_config_finger_size_set(finger_size + 20);
</pre>
<h3 id="Scale" name="Scale">Scale</h3>
-<p>This parameter only scales the readable areas of the widget (text, icons). Parts that must stay pixel-perfect like the highlights, shading, textures and decorations stay as they are.</p>
+<p>This parameter only scales the readable areas of the UI component (text, icons). Parts that must stay pixel-perfect like the highlights, shading, textures and decorations stay as they are.</p>
-<p><span style="font-family: Courier New,Courier,monospace;">elm_config_scale_set()</span> function is used to set the global scaling factor, that affects to all the widgets. It is also possible to use <span style="font-family: Courier New,Courier,monospace;">elm_object_scale_set()</span> to set the scaling factor on a given Elementary widget and all its children.</p>
+<p><span style="font-family: Courier New,Courier,monospace;">elm_config_scale_set()</span> function is used to set the global scaling factor, that affects to all the UI components. It is also possible to use <span style="font-family: Courier New,Courier,monospace;">elm_object_scale_set()</span> to set the scaling factor on a given Elementary UI component and all its children.</p>
<table class="note">
<tbody>
<pre class="prettyprint">
Evas_Object *button;
-/* The button object is created and configured */
+// The button object is created and configured
-/* Set the global scale factor to 2.0 */
+// Set the global scale factor to 2.0
elm_config_scale_set(2.0);
-/* Set the scaling factor of the button widget to 2.0, this widget
-* appears 4 times bigger than its initial size */
+// Set the scaling factor of the button component to 2.0, this component
+// appears 4 times bigger than its initial size
elm_object_scale_set(button, 2.0);
</pre>
<p>This chapter shows the visual result of finger size and scaling factors modification.</p>
<p class="figure">Figure: <span style="font-family: Courier New,Courier,monospace;">elementary_config</span> application</p>
-<p
style="text-align:center;"><img alt="elementary_config application" src="../../images/scale_1_finger_50.png" /></p>
+<p
align="center"><img alt="elementary_config application" src="../../images/scale_1_finger_50.png" /></p>
<p>The previous picture shows the <span style="font-family: Courier New,Courier,monospace;">elementary_config</span> application that enables the user to set global scale factor and finger size parameter. As the user drags the sliders, the UI is updated, directly showing the result of the new parameter value.</p>
<p>The next picture shows the behavior when the finger size parameter has been increased to 1.30. The text of the sliders and the text of the items in the toolbar are bigger.</p>
<p class="figure">Figure: Scale increased (1.30)</p>
-<p
style="text-align:center;"><img alt="Scale increased (1.30)" src="../../images/scale_1.3_finger_50.png" /></p>
+<p
align="center"><img alt="Scale increased (1.30)" src="../../images/scale_1.3_finger_50.png" /></p>
<p>A finger size increase is showed in the image below (increase from 50px to 90 px). Now, the buttons in the toolbar are bigger, so the user can more reliably hit them with a big finger.</p>
<p class="figure">Figure: Finger size increased (90px)</p>
-<p
style="text-align:center;"><img alt="Finger size increased (90px)" src="../../images/scale_1_finger_90.png" /></p>
+<p
align="center"><img alt="Finger size increased (90px)" src="../../images/scale_1_finger_90.png" /></p>
<table class="note">
<tbody>
<p>The image below shows three buttons with only a background part visible (the SWALLOW part is empty).</p>
<p class="figure">Figure: Image set example</p>
-<p
style="text-align:center;"><img alt="Image set example" src="../../images/scale.png" /></p>
+<p
align="center"><img alt="Image set example" src="../../images/scale.png" /></p>
<p>The first button's size is 100x50 pixels, the background image (<span style="font-family: Courier New,Courier,monospace;">bg_low.png</span>) is the same size. The second button is twice bigger than the first one (200x100 pixels). The image is scaled and it does not render well, the borders are quite blurry.</p>
<p>The image below shows that when resizing the button, the corners keep their initial ratio. Only the middle part of the button is resized.</p>
<p class="figure">Figure: Border example</p>
-<p
style="text-align:center;"><img alt="Border example" src="../../images/border.png" /></p>
+<p
align="center"><img alt="Border example" src="../../images/border.png" /></p>
- <h2 id="widgets" name="widgets">Using Widgets</h2>
+ <h2 id="components" name="components">Using UI Components</h2>
<p class="figure">Figure: Elementary</p>
-<p
style="text-align:center;"><img alt="Elementary" src="../../images/elementary.png" /></p>
+<p
align="center"><img alt="Elementary" src="../../images/elementary.png" /></p>
-<p>The Elementary library is a simple toolkit. It provides several widgets than can be used to compose the user interface of your application. Widgets allow you to build your application without having to reinvent basic objects, such as buttons, lists, or text entries. Widgets will often generate signals that can be caught in the application when the user interacts with the widgets. This guide teaches you the basics of Elementary, describes selected concepts of the Elementary configuration framework, and describes the most common widgets.</p>
+<p>The Elementary library is a simple toolkit. It provides several UI components than can be used to compose the user interface of your application. UI components allow you to build your application without having to reinvent basic objects, such as buttons, lists, or text entries. UI components will often generate signals that can be caught in the application when the user interacts with the UI components. This guide teaches you the basics of Elementary, describes selected concepts of the Elementary configuration framework, and describes the most common UI components.</p>
<h3 id="elm_basics" name="elm_basics">Elementary Basics</h3>
-<p>In this chapter, we explain how widgets are built in a hierarchical manner, how to build a minimal Elementary application, and what the differences are between the callbacks that can be registered for widgets.</p>
+<p>In this chapter, we explain how UI components are built in a hierarchical manner, how to build a minimal Elementary application, and what the differences are between the callbacks that can be registered for UI components.</p>
-<p><a href="elementary_n.htm#basics">Elementary Basics</a></p>
+<p><a href="elementary_mn.htm#basics">Elementary Basics</a></p>
<h3 id="elm_config" name="elm_config">Elementary Configuration</h3>
<p>Elementary can be configured using profiles. This chapter details some configuration items that can be modified to tweak the use of Elementary.</p>
-<p><a href="elementary_n.htm#config">Elementary Configuration</a></p>
+<p><a href="elementary_mn.htm#config">Elementary Configuration</a></p>
-<h3 id="ui" name="ui">UI Widgets</h3>
+<h3 id="ui" name="ui">Components</h3>
<table border="1">
<caption>
- Table: Available UI widgets
+ Table: Available UI components
</caption>
<colgroup>
<col />
</colgroup>
<tbody>
<tr>
- <th style="text-align:center;margin-left:auto;margin-right:auto;">Widget name</th>
+ <th style="text-align:center;margin-left:auto;margin-right:auto;">Component name</th>
<th style="text-align:center;margin-left:auto;margin-right:auto;">Description</th>
</tr>
<tr>
- <td><a class="opensection" href="ui_widgets_n.htm#background">Background</a></td>
- <td>The background widget can be used to set a solid background decoration to a window or a container object. It works like an image, but has some background specific properties, such as setting it to tiled, centered, scaled, or stretched.</td>
+ <td><a href="components_mn.htm#background">Background</a></td>
+ <td>The background component can be used to set a solid background decoration to a window or a container object. It works like an image, but has some background specific properties, such as setting it to tiled, centered, scaled, or stretched.</td>
</tr>
<tr>
- <td><a class="opensection" href="ui_widgets_n.htm#button">Button</a></td>
- <td>The button widget is a simple push button. It is composed of a label icon and an icon object, and has an auto-repeat feature.</td>
+ <td><a href="components_mn.htm#button">Button</a></td>
+ <td>The button component is a simple push button. It is composed of a label icon and an icon object, and has an auto-repeat feature.</td>
</tr>
<tr>
- <td><a class="opensection" href="ui_widgets_n.htm#check">Check</a></td>
- <td>The check widget toggles the value of a Boolean between true and false.</td>
+ <td><a href="components_mn.htm#check">Check</a></td>
+ <td>The check component toggles the value of a Boolean between true and false.</td>
</tr>
<tr>
- <td><a class="opensection" href="ui_widgets_n.htm#colorselector">Colorselector</a></td>
- <td>The colorselector widget provides a color selection solution to the user. It has different modes available, each of them showing a different configuration of the color selection.</td>
+ <td><a href="components_mn.htm#colorselector">Colorselector</a></td>
+ <td>The colorselector component provides a color selection solution to the user. It has different modes available, each of them showing a different configuration of the color selection.</td>
</tr>
<tr>
- <td><a class="opensection" href="ui_widgets_n.htm#ctxpopup">Ctxpopup</a></td>
- <td>The ctxpopup widget is a contextual popup that can show a list of items.</td>
+ <td><a href="components_mn.htm#background">Ctxpopup</a></td>
+ <td>The ctxpopup component is a contextual popup that can show a list of items.</td>
</tr>
<tr>
- <td><a class="opensection" href="ui_widgets_n.htm#datetime">Datetime</a></td>
- <td>The datetime widget can display and input date and time values.</td>
+ <td><a href="components_mn.htm#datetime">Datetime</a></td>
+ <td>The datetime component can display and input date and time values.</td>
</tr>
<tr>
- <td><a class="opensection" href="ui_widgets_n.htm#entry">Entry</a></td>
- <td>The entry widget is a box to which the user can enter text.</td>
+ <td><a href="components_mn.htm#entry">Entry</a></td>
+ <td>The entry component is a box to which the user can enter text.</td>
</tr>
<tr>
- <td><a class="opensection" href="ui_widgets_n.htm#flip">Flip</a></td>
- <td>The flip widget can hold two Evas objects and let the user flip between these objects using a variety of predefined animations.</td>
+ <td><a href="components_mn.htm#flip">Flip</a></td>
+ <td>The flip component can hold two Evas objects and let the user flip between these objects using a variety of predefined animations.</td>
</tr>
<tr>
- <td><a class="opensection" href="ui_widgets_n.htm#gengrid">Gengrid</a></td>
- <td>The gengrid widget displays objects on a grid layout and renders only the visible objects.</td>
+ <td><a href="components_mn.htm#gengrid">Gengrid</a></td>
+ <td>The gengrid component displays objects on a grid layout and renders only the visible objects.</td>
</tr>
<tr>
- <td><a class="opensection" href="ui_widgets_n.htm#genlist">Genlist</a></td>
- <td>The genlist widget displays a scrollable list of items. It can hold a lot of items while still being fast and memory-efficient (only the visible items are allocated memory).</td>
+ <td><a href="components_mn.htm#genlist">Genlist</a></td>
+ <td>The genlist component displays a scrollable list of items. It can hold a lot of items while still being fast and memory-efficient (only the visible items are allocated memory).</td>
</tr>
<tr>
- <td><a class="opensection" href="ui_widgets_n.htm#glview">GLView</a></td>
- <td>The GLView widget can render OpenGL in an Elementary object, hiding EvasGL complexity.</td>
+ <td><a href="components_mn.htm#glview">GLView</a></td>
+ <td>The GLView component can render OpenGL in an Elementary object, hiding EvasGL complexity.</td>
</tr>
<tr>
- <td><a class="opensection" href="ui_widgets_n.htm#icon">Icon</a></td>
- <td>The icon widget inherits from the image widget. It is used to display images in an icon context.</td>
+ <td><a href="components_mn.htm#icon">Icon</a></td>
+ <td>The icon component inherits from the image component. It is used to display images in an icon context.</td>
</tr>
<tr>
- <td><a class="opensection" href="ui_widgets_n.htm#image">Image</a></td>
- <td>The image widget can load and display an image from a file or from memory.</td>
+ <td><a href="components_mn.htm#image">Image</a></td>
+ <td>The image component can load and display an image from a file or from memory.</td>
</tr>
<tr>
- <td><a class="opensection" href="ui_widgets_n.htm#index">Index</a></td>
- <td>The index widget provides an index for fast access to another group of UI items.</td>
+ <td><a href="components_mn.htm#index">Index</a></td>
+ <td>The index component provides an index for fast access to another group of UI items.</td>
</tr>
<tr>
- <td><a class="opensection" href="ui_widgets_n.htm#label">Label</a></td>
- <td>The label widget displays text with simple HTML-like markup.</td>
+ <td><a href="components_mn.htm#label">Label</a></td>
+ <td>The label component displays text with simple HTML-like markup.</td>
</tr>
<tr>
- <td><a class="opensection" href="ui_widgets_n.htm#list">List</a></td>
- <td>The list widget is a very simple list for managing a small number of items. If you need to manage a lot of items, use the genlist widget instead.</td>
+ <td><a href="components_mn.htm#list">List</a></td>
+ <td>The list component is a very simple list for managing a small number of items. If you need to manage a lot of items, use the genlist component instead.</td>
</tr>
<tr>
- <td><a class="opensection" href="ui_widgets_n.htm#map">Map</a></td>
- <td>The map
widget can display a geographic map. The default map data is provided by the OpenStreetMap project (<a target="_blank" href="http://www.openstreetmap.org/">http://www.openstreetmap.org/</a>).</td>
+ <td><a href="components_mn.htm#map">Map</a></td>
+ <td>The map
component can display a geographic map. The default map data is provided by the OpenStreetMap project (<a target="_blank" href="http://www.openstreetmap.org/">http://www.openstreetmap.org/</a>).</td>
</tr>
<tr>
- <td><a class="opensection" href="ui_widgets_n.htm#notify">Notify</a></td>
- <td>The notify widget displays a container in a specific region of the parent object. It can receive some content, and it can be automatically hidden after a certain amount of time.</td>
+ <td><a href="components_mn.htm#notify">Notify</a></td>
+ <td>The notify component displays a container in a specific region of the parent object. It can receive some content, and it can be automatically hidden after a certain amount of time.</td>
</tr>
<tr>
- <td><a class="opensection" href="ui_widgets_n.htm#panel">Panel</a></td>
- <td>The panel widget is an animated object that can contain child objects. It can be expanded or contracted by clicking on the button on its edge.</td>
+ <td><a href="components_mn.htm#panel">Panel</a></td>
+ <td>The panel component is an animated object that can contain child objects. It can be expanded or contracted by clicking on the button on its edge.</td>
</tr>
<tr>
- <td><a class="opensection" href="ui_widgets_n.htm#photo">Photo</a></td>
- <td>The photo widget can be used to display a photo, such as a contact image. If no photo is set, the widget displays a person icon to show that it is a photo placeholder.</td>
+ <td><a href="components_mn.htm#photo">Photo</a></td>
+ <td>The photo component can be used to display a photo, such as a contact image. If no photo is set, the UI component displays a person icon to show that it is a photo placeholder.</td>
</tr>
<tr>
- <td><a class="opensection" href="ui_widgets_n.htm#photocam">Photocam</a></td>
- <td>The photocam widget is designed to display high-resolution photos taken with a digital camera. It allows you to zoom photos, load photos fast, and fit photos. It is optimized for JPEG images and has a low memory footprint.</td>
+ <td><a href="components_mn.htm#photocam">Photocam</a></td>
+ <td>The photocam component is designed to display high-resolution photos taken with a digital camera. It allows you to zoom photos, load photos fast, and fit photos. It is optimized for JPEG images and has a low memory footprint.</td>
</tr>
<tr>
- <td><a class="opensection" href="ui_widgets_n.htm#plug">Plug</a></td>
- <td>The plug widget allows you to show an Evas object created by another process. It can be used anywhere like any other Elementary widget.</td>
+ <td><a href="components_mn.htm#plug">Plug</a></td>
+ <td>The plug component allows you to show an Evas object created by another process. It can be used anywhere like any other Elementary UI component.</td>
</tr>
<tr>
- <td><a class="opensection" href="ui_widgets_n.htm#popup">Popup</a></td>
- <td>The popup widget shows a pop-up area that can contain a title area, a content area, and an action area.</td>
+ <td><a href="components_mn.htm#popup">Popup</a></td>
+ <td>The popup component shows a pop-up area that can contain a title area, a content area, and an action area.</td>
</tr>
<tr>
- <td><a class="opensection" href="ui_widgets_n.htm#progressbar">Progressbar</a></td>
- <td>The progressbar widget can be used to display the progress status of a given job.</td>
+ <td><a href="components_mn.htm#progressbar">Progressbar</a></td>
+ <td>The progressbar component can be used to display the progress status of a given job.</td>
</tr>
<tr>
- <td><a class="opensection" href="ui_widgets_n.htm#radio">Radio</a></td>
- <td>The radio widget can display 1 or more options, but the user can only select one of them. The widget is composed of an indicator (selected/unselected), an optional icon, and an optional label. Even though it is usually grouped with 2 or more other radio widgets, it can also be used alone.</td>
+ <td><a href="components_mn.htm#radio">Radio</a></td>
+ <td>The radio component can display 1 or more options, but the user can only select one of them. The UI component is composed of an indicator (selected/unselected), an optional icon, and an optional label. Even though it is usually grouped with 2 or more other radio components, it can also be used alone.</td>
</tr>
<tr>
- <td><a class="opensection" href="ui_widgets_n.htm#segmentcontrol">Segmentcontrol</a></td>
- <td>The slider widget is a draggable bar that is used to select a value from a range of values.</td>
+ <td><a href="components_mn.htm#segmentcontrol">Segmentcontrol</a></td>
+ <td>The slider component is a draggable bar that is used to select a value from a range of values.</td>
</tr>
<tr>
- <td><a class="opensection" href="ui_widgets_n.htm#slider">Slider</a></td>
- <td>The slider widget is a draggable bar that is used to select a value from a range of values.</td>
+ <td><a href="components_mn.htm#slider">Slider</a></td>
+ <td>The slider component is a draggable bar that is used to select a value from a range of values.</td>
</tr>
<tr>
- <td><a class="opensection" href="ui_widgets_n.htm#spinner">Spinner</a></td>
- <td>The spinner widget enables the user to increase or decrease a numeric value by using arrow buttons.</td>
+ <td><a href="components_mn.htm#spinner">Spinner</a></td>
+ <td>The spinner component enables the user to increase or decrease a numeric value by using arrow buttons.</td>
</tr>
<tr>
- <td><a class="opensection" href="ui_widgets_n.htm#toolbar">Toolbar</a></td>
- <td>The toolbar widget is a scrollable list of items. It can also show a menu when an item is selected. Only one item can be selected at a time.</td>
+ <td><a href="components_mn.htm#toolbar_component">Toolbar</a></td>
+ <td>The toolbar component is a scrollable list of items. It can also show a menu when an item is selected. Only one item can be selected at a time.</td>
</tr>
<tr>
- <td><a class="opensection" href="ui_widgets_n.htm#tooltip">Tooltip</a></td>
- <td>The tooltip widget is a smart object used to show tips or information about a parent object when the mouse hovers over the parent object.</td>
+ <td><a href="components_mn.htm#tooltip">Tooltip</a></td>
+ <td>The tooltip component is a smart object used to show tips or information about a parent object when the mouse hovers over the parent object.</td>
</tr>
<tr>
- <td>Transit</td>
- <td>The transit widget can apply several transition effects to an Evas object, such as translations and rotations. The use of the transit widget is documented in the <a href="events_effects_n.htm#animation_effect">Creating Animations and Effects</a> guide.</td>
+ <td><a href="events_effects_n.htm#animation_effect">Transit</a></td>
+ <td>The transit component can apply several transition effects to an Evas object, such as translations and rotations. The use of the transit component is documented in the Creating Animations and Effects guide.</td>
</tr>
<tr>
- <td><a class="opensection" href="ui_widgets_n.htm#win">Win</a></td>
- <td>The win widget is the root window widget that will be often used in an application. It allows you to create some content in it, and it is handled by the window manager.</td>
+ <td><a href="components_mn.htm#win">Win</a></td>
+ <td>The win component is the root window component that will be often used in an application. It allows you to create some content in it, and it is handled by the window manager.</td>
</tr>
</tbody>
</table>
- <h3 id="focus" name="focus">Widget Focus</h3>
+
+
+ <h3 id="focus" name="focus">UI Component Focus</h3>
-<p>You can programmatically change the focus of widgets in an EFL application.</p>
+<p>You can programmatically change the focus of UI components in an EFL application.</p>
-<p><a href="widget_preferences_n.htm#focus">Managing Widget Focus</a></p>
+<p><a href="preferences_n.htm#focus">Managing UI Component Focus</a></p>
-<h3 id="styleguide" name="styleguide">Widget Styles</h3>
+<h3 id="styleguide" name="styleguide">UI Component Styles</h3>
-<p>You can apply styles to various widgets to change their appearance.</p>
+<p>You can apply styles to various UI components to change their appearance.</p>
-<p><a href="widget_preferences_n.htm#style">Using Widget Styles</a></p>
+<p><a href="styles_mn.htm">UI Component Styles</a></p>
-<h3 id="customization" name="customization">Widget Customization</h3>
+<h3 id="customization" name="customization">UI Component Customization</h3>
-<p>You can use themes and styles to customize the look and feel of widgets.</p>
+<p>You can use themes and styles to customize the look and feel of UI components.</p>
-<p><a href="widget_preferences_n.htm#customize">Customizing Widgets</a></p>
+<p><a href="preferences_n.htm#customize">Customizing UI Components</a></p>
- <h3 id="containers" name="containers">Container Widgets</h3>
+ <h3 id="containers" name="containers">Containers</h3>
<p>All applications use containers to create the layout of their UI. The EFL and Elementary support several ways to create this layout. You can use a predefined layout or an animated layout, or you can create your own layout.</p>
<table border="1">
<caption>
- Table: Available container widgets
+ Table: Available container components
</caption>
<colgroup>
<col />
</colgroup>
<tbody>
<tr>
- <th style="text-align:center;margin-left:auto;margin-right:auto;">Widget name</th>
+ <th style="text-align:center;margin-left:auto;margin-right:auto;">Container name</th>
<th style="text-align:center;margin-left:auto;margin-right:auto;">Description</th>
</tr>
<tr>
- <td><a class="opensection" href="containers_n.htm#box">Box</a></td>
+ <td><a href="containers_mn.htm#box">Box</a></td>
<td>One of the most simple containers in the EFL is a box.</td>
</tr>
<tr>
- <td><a class="opensection" href="containers_n.htm#conformant">Conformant</a></td>
- <td>A conformant is a container widget that accounts for the space taken by the indicator, virtual keyboard, and softkey windows.</td>
+ <td><a href="containers_mn.htm#conformant">Conformant</a></td>
+ <td>A conformant is a container component that accounts for the space taken by the indicator, virtual keyboard, and softkey windows.</td>
</tr>
<tr>
- <td><a class="opensection" href="containers_n.htm#grid">Grid</a></td>
+ <td><a href="containers_mn.htm#grid">Grid</a></td>
<td>In a grid, objects are placed at specific positions along a fixed grid.</td>
</tr>
<tr>
- <td><a class="opensection" href="containers_n.htm#layout">Layout</a></td>
- <td>A layout is a container widget that takes a standard Edje design file and wraps it very thinly in a widget.</td>
+ <td><a href="containers_mn.htm#layout">Layout</a></td>
+ <td>A layout is a container component that takes a standard Edje design file and wraps it very thinly in a UI component.</td>
</tr>
<tr>
- <td><a class="opensection" href="containers_n.htm#mapbuf">Mapbuf</a></td>
- <td>A mapbuf widget is a container widget that uses an Evas map to hold a content object. This widget is used to improve the moving and resizing performance of complex widgets.</td>
+ <td><a href="containers_mn.htm#mapbuf">Mapbuf</a></td>
+ <td>A mapbuf is a container component that uses an Evas map to hold a content object. This UI component is used to improve the moving and resizing performance of complex UI components.</td>
</tr>
<tr>
- <td><a class="opensection" href="containers_n.htm#naviframe">Naviframe</a></td>
- <td>A naviframe widget consists of a stack of views. New views are pushed on top of previous ones, and only the top-most view is displayed.</td>
+ <td><a href="containers_mn.htm#naviframe">Naviframe</a></td>
+ <td>A naviframe component consists of a stack of views. New views are pushed on top of previous ones, and only the top-most view is displayed.</td>
</tr>
<tr>
- <td><a class="opensection" href="containers_n.htm#panes">Panes</a></td>
- <td>A panes widget adds a draggable bar between two sections of content. The sections are resized when the bar is dragged.</td>
+ <td><a href="containers_mn.htm#panes">Panes</a></td>
+ <td>A panes component adds a draggable bar between two sections of content. The sections are resized when the bar is dragged.</td>
</tr>
<tr>
- <td><a class="opensection" href="containers_n.htm#scroller">Scroller</a></td>
+ <td><a href="containers_mn.htm#scroller">Scroller</a></td>
<td>A scroller holds (and clips) a single object and allows you to scroll across it.</td>
</tr>
<tr>
- <td><a class="opensection" href="containers_n.htm#table">Table</a></td>
+ <td><a href="containers_mn.htm#table">Table</a></td>
<td>A table is like a box but with 2 dimensions.</td>
</tr>
</tbody>
--- /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>UI Components</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+ <div id="container"><div id="contents"><div class="content">
+ <h1>UI Components</h1>
+
+<p>Click the profile you want:</p>
+<p><a href="ui_component_mn.htm"><img alt="Mobile native" src="../../images/mn_division.png"/></a> <a href="ui_component_wn.htm"><img alt="Wearable native" src="../../images/wn_division.png"/></a></p>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<div id="footer">
+<p class="footer">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</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>UI Components</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+
+ <div id="toc-navigation">
+ <div id="profile">
+ <p><img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+ </div>
+
+ <div id="toc_border"><div id="toc">
+ <p class="toc-title">Content</p>
+ <ul class="toc">
+ <li><a href="#scalability">Scaling UI Components</a></li>
+ <li><a href="#components">Using UI Components</a></li>
+ </ul>
+
+ <p class="toc-title">Related Info</p>
+ <ul class="toc">
+ <li><a href="../../../../org.tizen.tutorials/html/native/ui/ui_component_tutorials_wn.htm">UI Components Tutorials</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje__Group.html">Edje API for Wearable Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+ <h1>UI Components</h1>
+ <p>The UI component management features allow you manage the UI components and their focus on the screen, as well as create customizations. The Elementary library provides several UI components than can be used to compose the user interface of your application.</p>
+
+ <table class="note">
+<tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">This feature is supported in wearable applications only.</td>
+ </tr>
+ </tbody>
+ </table>
+
+ <p>The main features of UI component management are:</p>
+ <ul>
+ <li><a href="#scalability">Scaling UI components</a> <p>Enables you to scale UI components in order to be comfortably used with a finger and make text more readable.</p></li>
+ <li><a href="#components">Using UI components</a> <p>Enables you to build your application without having to reinvent basic objects, such as buttons, lists, or text entries.</p></li>
+ </ul>
+
+ <h2 id="scalability" name="scalability">Scaling UI Components</h2>
+
+<p>Elementary, through its configuration API (<span style="font-family: Courier New,Courier,monospace;">elm_config</span>), provides a way to scale UI components with two different parameters. <span style="font-family: Courier New,Courier,monospace;">Finger size</span> parameter is used when the interactive zones (clickable, editable) of the UI components need to be scaled in order to be comfortably used with a finger. <span style="font-family: Courier New,Courier,monospace;">Scale</span> parameter is responsible for scaling readable parts of a UI component (text or icons for example), so that it is more visible in the user interface.</p>
+
+<h3 id="Finger_Size" name="Finger_Size">Finger Size</h3>
+
+<p><span style="font-family: Courier New,Courier,monospace;">Finger size</span> parameter scales UI components based on the user's finger size. This is useful when using a touchscreen with a finger rather than with a stylus. The finger size parameter is in pixels and determines the minimum size of a square on the screen that is reliably hittable with a finger. This parameter scales the input and interactive areas.</p>
+
+<p>The global finger size is set with the <span style="font-family: Courier New,Courier,monospace;">elm_config_finger_size_set()</span> function. This adjusts the size and hit area of UI components so they are easy to hit with a finger. The current value is retrieved with the <span style="font-family: Courier New,Courier,monospace;">elm_config_finger_size_get()</span> call. The finger size is always in pixel.</p>
+
+<p>To increase the current global finger size by 20px:</p>
+
+<pre class="prettyprint">
+Evas_Coord finger_size;
+
+// Get the current finger size
+finger_size = elm_config_finger_size_get();
+
+// Add 20px to finger size parameter and set it
+// to the global Elementary configuration
+elm_config_finger_size_set(finger_size + 20);
+</pre>
+
+<h3 id="Scale" name="Scale">Scale</h3>
+
+<p>This parameter only scales the readable areas of the UI component (text, icons). Parts that must stay pixel-perfect like the highlights, shading, textures and decorations stay as they are.</p>
+
+<p><span style="font-family: Courier New,Courier,monospace;">elm_config_scale_set()</span> function is used to set the global scaling factor, that affects to all the UI components. It is also possible to use <span style="font-family: Courier New,Courier,monospace;">elm_object_scale_set()</span> to set the scaling factor on a given Elementary UI component and all its children.</p>
+
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note">The scaling factor is multiplicative, if a child already has a scale size set, it is multiplied by its parent's scale size.</td>
+</tr>
+</tbody>
+</table>
+
+<p>The following example sets the global scaling factor to 2.0. Then, the scaling factor of an existing Elementary object is set to 2.0, meaning that this object appears as if it had a 4.0 scale factor, the rest of the application is displayed with a 2.0 scaling factor:</p>
+
+<pre class="prettyprint">
+Evas_Object *button;
+
+// The button object is created and configured
+
+// Set the global scale factor to 2.0
+elm_config_scale_set(2.0);
+
+// Set the scaling factor of the button component to 2.0, this component
+// appears 4 times bigger than its initial size
+elm_object_scale_set(button, 2.0);
+</pre>
+
+<h3 id="Example" name="Example">Example</h3>
+
+<p>This chapter shows the visual result of finger size and scaling factors modification.</p>
+
+<p class="figure">Figure: <span style="font-family: Courier New,Courier,monospace;">elementary_config</span> application</p>
+<p align="center"><img alt="elementary_config application" src="../../images/scale_1_finger_50.png" /></p>
+
+<p>The previous picture shows the <span style="font-family: Courier New,Courier,monospace;">elementary_config</span> application that enables the user to set global scale factor and finger size parameter. As the user drags the sliders, the UI is updated, directly showing the result of the new parameter value.</p>
+
+<p>The next picture shows the behavior when the finger size parameter has been increased to 1.30. The text of the sliders and the text of the items in the toolbar are bigger.</p>
+
+<p class="figure">Figure: Scale increased (1.30)</p>
+<p align="center"><img alt="Scale increased (1.30)" src="../../images/scale_1.3_finger_50.png" /></p>
+
+<p>A finger size increase is showed in the image below (increase from 50px to 90 px). Now, the buttons in the toolbar are bigger, so the user can more reliably hit them with a big finger.</p>
+
+<p class="figure">Figure: Finger size increased (90px)</p>
+<p align="center"><img alt="Finger size increased (90px)" src="../../images/scale_1_finger_90.png" /></p>
+
+<table class="note">
+<tbody>
+<tr>
+<th class="note">Note</th>
+</tr>
+<tr>
+<td class="note">It is up to the theme (Edje file) to set the parts that are scalable. This is something that needs to be taken into account when developing a new Edje theme. This can be done in EDC with the <span style="font-family: Courier New,Courier,monospace;">scale</span> parameter. Refer to the <a href="edje_n.htm">Edje</a> guide for more information on how to do that.</td>
+</tr>
+</tbody>
+</table>
+
+<h3 id="Scalable_EDC_Object" name="Scalable_EDC_Object">Creating Scalable EDC Objects</h3>
+
+<h4>Scale Parameter </h4>
+
+<p>This chapter explains how to make a scalable Edje object and give hints how to write an EDC file that is scalable. The example shows a basic button that is composed of a background image part and a swallow part that can receive some content.</p>
+
+<pre class="prettyprint">
+group
+{
+ name: "button";
+ images
+ {
+ image: "bg.png" COMP;
+ }
+ parts
+ {
+ part
+ {
+ name: "bg";
+ type: IMAGE;
+ description
+ {
+ state: "default" 0.0;
+ image.normal: "bg.png";
+ }
+ }
+ part
+ {
+ name: "elm.swallow.content";
+ type: SWALLOW;
+ description
+ {
+ state: "default" 0.0;
+ visible: 0;
+ }
+ description
+ {
+ state: "visible" 0.0;
+ visible:1;
+ }
+ }
+ }
+}
+</pre>
+
+<p>To have a scalable object, set the <span style="font-family: Courier New,Courier,monospace;">scale</span> parameter to 1 on the parts you want to be scalable as explained in the <a href="edje_n.htm#Scalability">scalability chapter of the Edje guide</a>. Here the <span style="font-family: Courier New,Courier,monospace;">bg</span> and <span style="font-family: Courier New,Courier,monospace;">elm.swallow.content</span> parts must be scalable.</p>
+
+<pre class="prettyprint">
+group
+{
+ name: "button";
+ images
+ {
+ image: "bg.png" COMP;
+ }
+ parts
+ {
+ part
+ {
+ name: "bg";
+ type: IMAGE;
+ scale: 1;
+ description
+ {
+ state: "default" 0.0;
+ image.normal: "bg.png";
+ }
+ }
+ part
+ {
+ name: "elm.swallow.content";
+ type: SWALLOW;
+ scale: 1;
+ description
+ {
+ state: "default" 0.0;
+ visible: 0;
+ }
+ description
+ {
+ state: "visible" 0.0;
+ visible:1;
+ }
+ }
+ }
+}
+</pre>
+
+<h4>Image Set</h4>
+
+<p>If your application needs to be used at different resolutions it is recommended to have 2 images for the background image <span style="font-family: Courier New,Courier,monospace;">bg.png</span>. Here the <span style="font-family: Courier New,Courier,monospace;">bg_low.png</span> is added to the application. It is used when the size of the image is under 500 px, and a <span style="font-family: Courier New,Courier,monospace;">bg_high.png</span> image is for higher resolutions. Use a set on the <span style="font-family: Courier New,Courier,monospace;">bg.png</span> image as explained in the Using Image Set chapter of the <a href="edje_n.htm">Edje</a> guide.</p>
+
+<pre class="prettyprint">
+group
+{
+ name: "button";
+ images
+ {
+ set
+ {
+ name: "bg.png";
+ image
+ {
+ image: "bg_low.png" COMP;
+ size: 0 0 200 100;
+ }
+ image
+ {
+ image: "bg_high.png" COMP;
+ size: 201 101 5000 5000;
+ }
+ }
+ }
+}
+</pre>
+
+<p>The image below shows three buttons with only a background part visible (the SWALLOW part is empty).</p>
+
+<p class="figure">Figure: Image set example</p>
+<p align="center"><img alt="Image set example" src="../../images/scale.png" /></p>
+
+<p>The first button's size is 100x50 pixels, the background image (<span style="font-family: Courier New,Courier,monospace;">bg_low.png</span>) is the same size. The second button is twice bigger than the first one (200x100 pixels). The image is scaled and it does not render well, the borders are quite blurry.</p>
+
+<p>To prevent this, the image set has a bigger image to use when the size is bigger than 200x100 pixels (<span style="font-family: Courier New,Courier,monospace;">bg_high.png</span>). The third button size is 201x101 pixels and it uses the new image, which has a better quality than the scaled image.</p>
+
+<h4>Image Borders</h4>
+
+<p>When the button is resized, the image part is also resized because it is marked as scalable. To get the image resized but to keep the image border as it is, use the <span style="font-family: Courier New,Courier,monospace;">border</span> parameter. It specifies the border size which is not resized even if the image is. This is explained in the Border resizing chapter of the <a href="edje_n.htm">Edje</a> guide.</p>
+
+<p>To add a 40 pixel border on the left and right part of the <span style="font-family: Courier New,Courier,monospace;">bg</span> image and a 20 pixel border on top and bottom borders:</p>
+
+<pre class="prettyprint">
+parts
+{
+ part
+ {
+ name: "bg";
+ type: IMAGE;
+ scale: 1;
+ description
+ {
+ state: "default" 0.0;
+ image.normal: "bg.png";
+ image.border: 40 40 20 20;
+ }
+ }
+}
+</pre>
+
+<p>The image below shows that when resizing the button, the corners keep their initial ratio. Only the middle part of the button is resized.</p>
+
+<p class="figure">Figure: Border example</p>
+<p align="center"><img alt="Border example" src="../../images/border.png" /></p>
+
+ <h2 id="components" name="components">Using UI Components</h2>
+
+ <p class="figure">Figure: Elementary</p>
+<p align="center"><img alt="Elementary" src="../../images/elementary.png" /></p>
+
+<p>The Elementary library is a simple toolkit. It provides several UI components than can be used to compose the user interface of your application. UI components allow you to build your application without having to reinvent basic objects, such as buttons, lists, or text entries. UI components will often generate signals that can be caught in the application when the user interacts with the UI components. This guide teaches you the basics of Elementary, describes selected concepts of the Elementary configuration framework, and describes the most common UI components.</p>
+
+<h3 id="elm_basics" name="elm_basics">Elementary Basics</h3>
+
+<p>In this chapter, we explain how UI components are built in a hierarchical manner, how to build a minimal Elementary application, and what the differences are between the callbacks that can be registered for UI components.</p>
+
+<p><a href="elementary_wn.htm#basics">Elementary Basics</a></p>
+
+<h3 id="elm_config" name="elm_config">Elementary Configuration</h3>
+
+<p>Elementary can be configured using profiles. This chapter details some configuration items that can be modified to tweak the use of Elementary.</p>
+
+<p><a href="elementary_wn.htm#config">Elementary Configuration</a></p>
+
+<h3 id="ui" name="ui">Components</h3>
+
+ <table border="1">
+ <caption>
+ Table: Available UI components
+ </caption>
+ <colgroup>
+ <col />
+ <col />
+ </colgroup>
+ <tbody>
+ <tr>
+ <th style="text-align:center;margin-left:auto;margin-right:auto;">Component name</th>
+ <th style="text-align:center;margin-left:auto;margin-right:auto;">Description</th>
+ </tr>
+ <tr>
+ <td><a href="components_wn.htm#background">Background</a></td>
+ <td>The background component can be used to set a solid background decoration to a window or a container object. It works like an image, but has some background specific properties, such as setting it to tiled, centered, scaled, or stretched.</td>
+ </tr>
+ <tr>
+ <td><a href="components_wn.htm#button">Button</a></td>
+ <td>The button component is a simple push button. It is composed of a label icon and an icon object, and has an auto-repeat feature.</td>
+ </tr>
+ <tr>
+ <td><a href="components_wn.htm#check">Check</a></td>
+ <td>The check component toggles the value of a Boolean between true and false.</td>
+ </tr>
+ <tr>
+ <td><a href="components_wn.htm#ctxpopup">Ctxpopup</a></td>
+ <td>The ctxpopup component is a contextual popup that can show a list of items.</td>
+ </tr>
+ <tr>
+ <td><a href="components_wn.htm#datetime">Datetime</a></td>
+ <td>The datetime component can display and input date and time values.</td>
+ </tr>
+ <tr>
+ <td><a href="components_wn.htm#entry">Entry</a></td>
+ <td>The entry component is a box to which the user can enter text.</td>
+ </tr>
+ <tr>
+ <td><a href="components_wn.htm#genlist">Genlist</a></td>
+ <td>The genlist component displays a scrollable list of items. It can hold a lot of items while still being fast and memory-efficient (only the visible items are allocated memory).</td>
+ </tr>
+ <tr>
+ <td><a href="components_wn.htm#glview">GLView</a></td>
+ <td>The GLView component can render OpenGL in an Elementary object, hiding EvasGL complexity.</td>
+ </tr>
+ <tr>
+ <td><a href="components_wn.htm#icon">Icon</a></td>
+ <td>The icon component inherits from the image component. It is used to display images in an icon context.</td>
+ </tr>
+ <tr>
+ <td><a href="components_wn.htm#image">Image</a></td>
+ <td>The image component can load and display an image from a file or from memory.</td>
+ </tr>
+ <tr>
+ <td><a href="components_wn.htm#index">Index</a></td>
+ <td>The index component provides an index for fast access to another group of UI items.</td>
+ </tr>
+ <tr>
+ <td><a href="components_wn.htm#label">Label</a></td>
+ <td>The label component displays text with simple HTML-like markup.</td>
+ </tr>
+ <tr>
+ <td><a href="components_wn.htm#list">List</a></td>
+ <td>The list component is a very simple list for managing a small number of items. If you need to manage a lot of items, use the genlist component instead.</td>
+ </tr>
+ <tr>
+ <td><a href="components_wn.htm#notify">Notify</a></td>
+ <td>The notify component displays a container in a specific region of the parent object. It can receive some content, and it can be automatically hidden after a certain amount of time.</td>
+ </tr>
+ <tr>
+ <td><a href="components_wn.htm#plug">Plug</a></td>
+ <td>The plug component allows you to show an Evas object created by another process. It can be used anywhere like any other Elementary UI component.</td>
+ </tr>
+ <tr>
+ <td><a href="components_wn.htm#popup">Popup</a></td>
+ <td>The popup component shows a pop-up area that can contain a title area, a content area, and an action area.</td>
+ </tr>
+ <tr>
+ <td><a href="components_wn.htm#progressbar">Progressbar</a></td>
+ <td>The progressbar component can be used to display the progress status of a given job.</td>
+ </tr>
+ <tr>
+ <td><a href="components_wn.htm#radio">Radio</a></td>
+ <td>The radio component can display 1 or more options, but the user can only select one of them. The UI component is composed of an indicator (selected/unselected), an optional icon, and an optional label. Even though it is usually grouped with 2 or more other radio components, it can also be used alone.</td>
+ </tr>
+ <tr>
+ <td><a href="components_wn.htm#slider">Slider</a></td>
+ <td>The slider component is a draggable bar that is used to select a value from a range of values.</td>
+ </tr>
+ <tr>
+ <td><a href="events_effects_n.htm#animation_effect">Transit</a></td>
+ <td>The transit component can apply several transition effects to an Evas object, such as translations and rotations. The use of the transit component is documented in the Creating Animations and Effects guide.</td>
+ </tr>
+ <tr>
+ <td><a href="components_wn.htm#win">Win</a></td>
+ <td>The win component is the root window component that will be often used in an application. It allows you to create some content in it, and it is handled by the window manager.</td>
+ </tr>
+ </tbody>
+ </table>
+
+ <table border="1">
+ <caption>
+ Table: Available circle UI components
+ </caption>
+ <colgroup>
+ <col />
+ <col />
+ </colgroup>
+ <tbody>
+ <tr>
+ <th style="text-align:center;margin-left:auto;margin-right:auto;">Component name</th>
+ <th style="text-align:center;margin-left:auto;margin-right:auto;">Description</th>
+ </tr>
+ <tr>
+ <td><a href="circle_components_wn.htm#datetime">Circle Datetime</a></td>
+ <td>The circle datetime extends <span style="font-family: Courier New,Courier,monospace">elm_datetime</span> by visualizing the selected field.</td>
+ </tr>
+ <tr>
+ <td><a href="circle_components_wn.htm#genlist">Circle Genlist</a></td>
+ <td>The circle genlist provides a scrollbar with circular movement. It is also operated with rotary events to move to the next or previous item.</td>
+ </tr>
+ <tr>
+ <td><a href="circle_components_wn.htm#object">Circle Object</a></td>
+ <td>The circle object extends elementary components in a form of circular design. Sometimes a circle object merely provides additional UI features to elementary component, and sometimes it works as an independent component with UI and functionalities.</td>
+ </tr>
+ <tr>
+ <td><a href="circle_components_wn.htm#progressbar">Circle Progressbar</a></td>
+ <td>The circle progressbar aims to show the progress status of a given task with circular design. It visualizes the progress status within a range.</td>
+ </tr>
+ <tr>
+ <td><a href="circle_components_wn.htm#scroller">Circle Scroller</a></td>
+ <td>The circle scroller changes corresponding to the rotary events. It shows the whole scrollable area with a circular scroll bar.</td>
+ </tr>
+ <tr>
+ <td><a href="circle_components_wn.htm#slider">Circle Slider</a></td>
+ <td>The circle slider changes corresponding to rotary events. The circle slider not only extends the UI feature of the <span style="font-family: Courier New,Courier,monospace">elm_slider</span>, but also replaces the functionalities of the <span style="font-family: Courier New,Courier,monospace">elm_slider</span> in a circular design.</td>
+ </tr>
+ <tr>
+ <td><a href="circle_components_wn.htm#surface">Circle Surface</a></td>
+ <td>The circle surface manages and renders circle objects. Multiple circle objects can be connected to one circle surface as candidates of an object to be rendered.</td>
+ </tr>
+ </tbody>
+ </table>
+
+
+ <h3 id="focus" name="focus">UI Component Focus</h3>
+
+<p>You can programmatically change the focus of UI components in an EFL application.</p>
+
+<p><a href="preferences_n.htm#focus">Managing UI Component Focus</a></p>
+
+<h3 id="styleguide" name="styleguide">UI Component Styles</h3>
+
+<p>You can apply styles to various UI components to change their appearance.</p>
+
+<p><a href="styles_wn.htm">UI Component Styles</a></p>
+
+<h3 id="customization" name="customization">UI Component Customization</h3>
+
+<p>You can use themes and styles to customize the look and feel of UI components.</p>
+
+<p><a href="preferences_n.htm#customize">Customizing UI Components</a></p>
+
+ <h3 id="containers" name="containers">Containers</h3>
+
+ <p>All applications use containers to create the layout of their UI. The EFL and Elementary support several ways to create this layout. You can use a predefined layout or an animated layout, or you can create your own layout.</p>
+
+<p>In this guide, we look at how to use the different containers provided by Elementary.</p>
+
+ <table border="1">
+ <caption>
+ Table: Available container components
+ </caption>
+ <colgroup>
+ <col />
+ <col />
+ </colgroup>
+ <tbody>
+ <tr>
+ <th style="text-align:center;margin-left:auto;margin-right:auto;">Container name</th>
+ <th style="text-align:center;margin-left:auto;margin-right:auto;">Description</th>
+ </tr>
+ <tr>
+ <td><a href="containers_wn.htm#box">Box</a></td>
+ <td>One of the most simple containers in the EFL is a box.</td>
+ </tr>
+ <tr>
+ <td><a href="containers_wn.htm#conformant">Conformant</a></td>
+ <td>A conformant is a container component that accounts for the space taken by the indicator, virtual keyboard, and softkey windows.</td>
+ </tr>
+ <tr>
+ <td><a href="containers_wn.htm#grid">Grid</a></td>
+ <td>In a grid, objects are placed at specific positions along a fixed grid.</td>
+ </tr>
+ <tr>
+ <td><a href="containers_wn.htm#layout">Layout</a></td>
+ <td>A layout is a container component that takes a standard Edje design file and wraps it very thinly in a UI component.</td>
+ </tr>
+ <tr>
+ <td><a href="containers_wn.htm#mapbuf">Mapbuf</a></td>
+ <td>A mapbuf is a container component that uses an Evas map to hold a content object. This UI component is used to improve the moving and resizing performance of complex UI components.</td>
+ </tr>
+ <tr>
+ <td><a href="containers_wn.htm#naviframe">Naviframe</a></td>
+ <td>A naviframe component consists of a stack of views. New views are pushed on top of previous ones, and only the top-most view is displayed.</td>
+ </tr>
+ <tr>
+ <td><a href="containers_wn.htm#scroller">Scroller</a></td>
+ <td>A scroller holds (and clips) a single object and allows you to scroll across it.</td>
+ </tr>
+ <tr>
+ <td><a href="containers_wn.htm#table">Table</a></td>
+ <td>A table is like a box but with 2 dimensions.</td>
+ </tr>
+ </tbody>
+ </table>
+
+
+<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 is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</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
<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>UI</title>
+ <title>UI Framework</title>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a href="../../../../org.tizen.tutorials/html/native/ui/ui_tutorials_n.htm">UI Tutorials</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UI__FRAMEWORK.html">UI API</a></li>
+ <li><a href="../../../../org.tizen.tutorials/html/native/ui/ui_tutorials_n.htm">UI Framework Tutorials</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UI__FRAMEWORK.html">UI Framework API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UI__FRAMEWORK.html">UI Framework API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
- <h1>UI</h1>
- <p>UI features include all aspects of creating a visual outlook for your application to ensure the best possible user experience.</p>
+ <h1>UI Framework</h1>
+ <p>UI framework features include all aspects of creating a visual outlook for your application to ensure the best possible user experience.</p>
<p>The main UI features are:</p>
<ul>
<li><a href="efl_n.htm">EFL</a> <p>Enables you to construct graphical user interfaces.</p></li>
<li><a href="edje_n.htm">Edje</a> <p>Enables you to theme an application.</p></li>
<li><a href="ecore_n.htm">Ecore</a><p></p>Enables you to manage the application main loop.</li>
<li><a href="events_effects_n.htm">Event and Effect</a> <p>Enables you to handle different kinds of events.</p></li>
- <li><a href="ui_control_n.htm">UI Control</a><p></p>Enables you to manage shortcuts, widgets, and scalability.</li>
+ <li><a href="ui_component_n.htm">UI Components</a><p></p>Enables you to manage shortcuts, UI components, and scalability.</li>
<li><a href="efl_extension_n.htm">Efl Extension</a> <p>Enables you to work with the Menu and Back hardware keys on devices.</p></li>
<li><a href="font_setting_n.htm">Font Setting</a> <p>Enables you to change the font of your application to another system default font or your own font.</p></li>
<li><a href="efl_util_n.htm">EFL UTIL</a> <p>Enables you to manage notification window levels.</p> </li>
- <li><a href="multiple_screens_n.htm">Multiple Screen Support</a> <p>Enables you to design applications for different kids of screens.</p></li>
- <li><a href="eom_n.htm">EOM</a> <p>Enables you to handle external output.</p></li>
+ <li><a href="multiple_screens_n.htm">Multiple Screen Support</a> <p>Enables you to design applications for different kinds of screens.</p></li>
+ <li><a href="scalability_n.htm">Scalability Support</a> <p>Enables you to design applications so that their UI can be scaled for diverse devices without problems.</p></li>
+ <li><a href="eom_n.htm">EOM</a> <p>Enables you to handle external output devices.</p></li>
</ul>
</script>
</body>
-</html>
+</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>UI Widgets</title>
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="navigation">
- <div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/><br/></p>
- </div>
- <div id="toc_border"><div id="toc">
- <p class="toc-title">Content</p>
- <ul class="toc">
- <li><a href="#background">Background Widget</a></li>
- <li><a href="#button">Button Widget</a></li>
- <li><a href="#check">Check Widget</a></li>
- <li><a href="#colorselector">Colorselector Widget</a></li>
- <li><a href="#ctxpopup">Ctxpopup Widget</a></li>
- <li><a href="#datetime">Datetime Widget</a></li>
- <li><a href="#entry">Entry Widget</a></li>
- <li><a href="#flip">Flip Widget</a></li>
- <li><a href="#gengrid">Gengrid Widget</a></li>
- <li><a href="#genlist">Genlist Widget</a></li>
- <li><a href="#glview">GLView Widget</a></li>
- <li><a href="#icon">Icon Widget</a></li>
- <li><a href="#image">Image Widget</a></li>
- <li><a href="#index">Index Widget</a></li>
- <li><a href="#label">Label Widget</a></li>
- <li><a href="#list">List Widget</a></li>
- <li><a href="#map">Map Widget</a></li>
- <li><a href="#notify">Notify Widget</a></li>
- <li><a href="#panel">Panel Widget</a></li>
- <li><a href="#photo">Photo Widget</a></li>
- <li><a href="#photocam">Photocam Widget </a></li>
- <li><a href="#plug">Plug Widget</a></li>
- <li><a href="#popup">Popup Widget</a></li>
- <li><a href="#progressbar">Progressbar Widget</a></li>
- <li><a href="#radio">Radio Widget</a></li>
- <li><a href="#segmentcontrol">Segmentcontrol Widget</a></li>
- <li><a href="#slider">Slider Widget</a></li>
- <li><a href="#spinner">Spinner Widget</a></li>
- <li><a href="#toolbar">Toolbar Widget</a></li>
- <li><a href="#tooltip">Tooltip Widget</a></li>
- <li><a href="#win">Win Widget</a></li>
- </ul>
- <p class="toc-title">Related Info</p>
- <ul class="toc">
- <li><a href="../../../../org.tizen.tutorials/html/native/ui/ui_control_tutorials_n.htm">UI Control Tutorials</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API</a></li>
- </ul>
- </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-<h1>UI Widgets</h1>
-<div class="cont"><div class="static-cont">
-
- <!-- Show / Hide all links -->
- <div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
- <!-- Folds -->
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="background" name="background" class="items-tit-h2">Background Widget</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
-<p class="figure">Figure: Red color background</p>
-<p style="text-align:center;"><img alt="Red color background" src="../../images/bg.png" /></p>
-
-<p class="figure">Figure: Background hierarchy</p>
-<p style="text-align:center;"><img alt="Background hierarchy" src="../../images/bg_tree.png" /></p>
-
-<p>The background widget can be used to set a solid background decoration to a window or to a container object. It works like an image, but has some background specific properties, for example it can be set to tiled, centered, scaled or stretched mode. There are no specific signals relative to background object.</p>
-
-<h3>Adding a Background</h3>
-
-<p>A background is created with the <span style="font-family: Courier New,Courier,monospace">elm_bg_add()</span>.</p>
-
-<pre class="prettyprint">
-Evas_Object *bg, *parent;
-
-// Creating a background
-bg = elm_bg_add(parent);
-</pre>
-
-<h3>Change Color of the Background</h3>
-
-<p>You can set the color of the bg with <span style="font-family: Courier New,Courier,monospace">elm_bg_color_set()</span>. Here we set the background color to red.</p>
-
-<pre class="prettyprint">
-Evas_Object *bg;
-
-// Use red color for background
-elm_bg_color_set(bg, 0xFF, 0x00, 0x00);
-</pre>
-
-<h3>Change Image of the Background</h3>
-
-<p>It is also possible to set an image or an Edje group with <span style="font-family: Courier New,Courier,monospace">elm_bg_file_set()</span>. The display mode of the image in the background can be chosen with <span style="font-family: Courier New,Courier,monospace">elm_bg_option_set()</span>, where the following modes are available:</p>
-
-<ul class="ul">
- <li><span style="font-family: Courier New,Courier,monospace">ELM_BG_OPTION_CENTER</span>: center the background image</li>
- <li><span style="font-family: Courier New,Courier,monospace">ELM_BG_OPTION_SCALE</span>: scale the background image, retaining aspect ratio</li>
- <li><span style="font-family: Courier New,Courier,monospace">ELM_BG_OPTION_STRETCH</span>: stretch the background image to fill the widget's area</li>
- <li><span style="font-family: Courier New,Courier,monospace">ELM_BG_OPTION_TILE</span>: tile background image at its original size</li>
-</ul>
-
-<pre class="prettyprint">
-Evas_Object *bg;
-
-// Set a file on the disk as background image
-elm_bg_file_set(bg, "/path/to/the/image", NULL);
-// Set an edje group as background image
-elm_bg_file_set(bg, "/path/to/the/edje", "edje_group");
-elm_bg_option_set(bg, ELM_BG_OPTION_STRETCH)
-</pre>
-
-<h3>Using Overlay</h3>
-
-<p>An overlay can be set using the "overlay" part name.</p>
-
-<pre class="prettyprint">
-elm_object_part_content_set(bg, "overlay", over);
-</pre>
-
-<p>Here, over is an Edje object that will be displayed on top of the current bg object.</p>
-
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="button" name="button" class="items-tit-h2">Button Widget</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
-
-<p class="figure">Figure: Button widget</p>
-<p style="text-align:center;"><img alt="##" src="../../images/button.png" /></p>
-
-<p class="figure">Figure: Button hierarchy</p>
-<p style="text-align:center;"><img alt="##" src="../../images/button_tree.png" /></p>
-
-<p>The Elementary button widget is a simple push button. It is composed of a label icon and an icon object and has autorepeat feature.</p>
-
-<h3>Adding a Button</h3>
-
-<pre class="prettyprint">
-Evas_Object *button, *parent;
-
-// Creating a button
-button = elm_button_add(parent);</pre>
-
-<h3>Adding an Icon Inside a Button</h3>
-
-<p>The icon can be updated with <span style="font-family: Courier New,Courier,monospace">elm_object_part_content_set()</span> function with the "icon" part name.</p>
-
-<pre class="prettyprint">
-Evas_Object *ic;
-ic = elm_icon_add(button);
-elm_image_file_set(ic, "icon.png", NULL);
-elm_object_part_content_set(button, "icon", ic);</pre>
-
-<h3>Adding Text Inside a Button</h3>
-
-<p>The label can be modified using the <span style="font-family: Courier New,Courier,monospace">elm_object_text_set()</span> function.</p>
-
-<pre class="prettyprint">elm_object_text_set(button, "Click me!");</pre>
-
-<h3>Using Button Style</h3>
-
-<p>Other styles may be used on the button. Tizen supports the following styles:</p>
-
-<ul class="ul">
- <li>"icon_reorder"</li>
- <li>"icon_expand_add"</li>
- <li>"icon_expand_delete"</li>
- <li>"default"</li>
- <li>"circle"</li>
- <li>"bottom"</li>
- <li>"contacts"</li>
- <li>"option"</li>
-</ul>
-
-<p>You can see these themes in action on the following screenshot (in the above order).</p>
-
-<p class="figure">Figure: Button widget</p>
-<p style="text-align:center;"><img alt="##" src="../../images/button.png" /></p>
-
-<p>To change the style of the button, we call the <span style="font-family: Courier New,Courier,monospace">elm_object_style_set()</span> function on our button object.</p>
-
-<pre class="prettyprint">elm_object_style_set(button,"icon_expand_add");</pre>
-
-<h3>Using Button Callbacks</h3>
-
-<p>Button emits the following signals:</p>
-
-<ul class="ul">
- <li>"clicked": the user clicked the button (press/release)</li>
- <li>"repeated": the user pressed the button without releasing it</li>
- <li>"pressed": the user pressed the button</li>
- <li>"unpressed": the user released the button after pressing it</li>
-</ul>
-
-<p>For all these signals the <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter returned in the callback is NULL.</p>
-
-<p>This is an example to register and define callback function called by the clicked signal.</p>
-
-<pre class="prettyprint">{
- evas_object_smart_callback_add(button, "clicked", clicked_cb, data);
-}
-// Callback function for the "clicked" signal
-// This callback is called when the button is clicked by the user
-
-void clicked_cb(void *data, Evas_Object *obj, void *event_info)
-{
- dlog_print(DLOG_INFO, LOG_TAG, "Button clicked\n");
-}</pre>
-
-<h3>Using Autorepeat Feature</h3>
-
-<p>The autorepeat feature (enabled by default) consists of calling the "repeated" signal when the user keeps the button pressed. This feature can be disabled with the <span style="font-family: Courier New,Courier,monospace">elm_button_autorepeat_set()</span> function. The autorepeat is configured with</p>
-
-<ul class="ul">
- <li><span style="font-family: Courier New,Courier,monospace">elm_button_autorepeat_initial_timeout_set()</span>: to set the initial timeout before the autorepeat event is generated</li>
- <li><span style="font-family: Courier New,Courier,monospace">elm_button_autorepeat_gap_timeout_set()</span>: to set the interval between two autorepeat events</li>
-</ul>
-
-<p>Disable the autorepeat feature:</p>
-
-<pre class="prettyprint">elm_button_autorepeat_set(button, EINA_FALSE);</pre>
-
-<p>Enable the autorepeat feature (enabled by default):</p>
-
-<pre class="prettyprint">elm_button_autorepeat_set(button, EINA_TRUE);</pre>
-
-<p>Set the initial timeout to five seconds:</p>
-
-<pre class="prettyprint">elm_button_autorepeat_initial_timeout_set(button, 5.0);</pre>
-
-<p>Set the gap between two signals to 0.5 seconds:</p>
-
-<pre class="prettyprint">elm_button_autorepeat_gap_timeout_set(button, 0.5);</pre>
-
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="check" name="check" class="items-tit-h2">Check Widget</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
-
-<p class="figure">Figure: Check widget</p>
-<p style="text-align:center;"><img alt="Check widget" src="../../images/check.png" /></p>
-
-<p class="figure">Figure: Check hierarchy</p>
-<p style="text-align:center;"><img alt="Check hierarchy" src="../../images/check_tree.png" /></p>
-
-<p>The check widget is similar to the radio widget, except that it does not work as a group. It toggles the value of a boolean between true and false.</p>
-
-<p>This widget inherits from the layout widget. All layout functions can be used on the check widget.</p>
-
-<h3 id="Adding" name="Adding">Adding Check Widget</h3>
-
-<p>This is how to create a check widget.</p>
-
-<pre class="prettyprint">
-Evas_Object *check, *parent;
-check = elm_check_add(parent);
-</pre>
-
-<h3 id="Modifying" name="Modifying">Modifying Check Styles</h3>
-
-<p>Check widget style can be set with the <span style="font-family: Courier New,Courier,monospace;">elm_object_style_set()</span> function. The following styles are available:</p>
-<ul class="ul">
- <li><span style="font-family: Courier New,Courier,monospace;">default</span></li>
- <li><span style="font-family: Courier New,Courier,monospace;">favorite</span></li>
- <li><span style="font-family: Courier New,Courier,monospace;">on</span> and <span style="font-family: Courier New,Courier,monospace;">off</span></li>
-</ul>
-
-<p>As an example we will set the favorite style on our check object.</p>
-
-<pre class="prettyprint">
-elm_object_style_set(check, "favorite");
-</pre>
-
-<p>We can get the current style with <span style="font-family: Courier New,Courier,monospace;">elm_object_style_get()</span> function.</p>
-
-<pre class="prettyprint">
-char *style = elm_object_style_get(check);
-</pre>
-
-<h3 id="Using_Check_Widget" name="Using_Check_Widget">Using Check Widget</h3>
-
-<p>After having created a check object, it is possible to set its boolean value to <span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span>.</p>
-
-<pre class="prettyprint">
-elm_check_state_set(check, EINA_TRUE);
-</pre>
-
-<p>We can also retrieve the current value of the check object.</p>
-
-<pre class="prettyprint">
-Eina_Bool value = elm_check_state_get(check);
-</pre>
-
-<p>As with the radio object, an icon and a label can be set.</p>
-
-<pre class="prettyprint">
-// Create a Home icon
-Evas_Object *icon;
-
-icon = elm_icon_add(parent);
-elm_icon_standard_set(icon, "home");
-
-// Set it to the check object
-elm_object_part_content_set(check, "icon", icon);
-
-// Set the check label
-elm_object_text_set(check, "Check label");
-</pre>
-
-<p>We can also modify the "on" and "off" labels.</p>
-
-<pre class="prettyprint">
-elm_object_part_text_set(check, "on", "True");
-elm_object_part_text_set(check, "off", "False");
-</pre>
-
-<p>The get functions of the elementary object API can be used to retrieve the content set to the check object.</p>
-
-<pre class="prettyprint">
-// Get the current set text of the check label
-char *text = elm_object_text_get(check);
-
-// Get the content set in the icon part
-Evas_Object *icon = elm_object_part_content_get(check, "icon");
-</pre>
-
-<h3 id="Using_Check_Callbacks" name="Using_Check_Callbacks">Using Check Callbacks</h3>
-
-<p>When the value is changed by the user, the changed signal is emitted. <span style="font-family: Courier New,Courier,monospace;">event_info</span> parameter is <span style="font-family: Courier New,Courier,monospace;">NULL</span>.</p>
-
-<p>This example shows how to register a callback on this signal.</p>
-
-<pre class="prettyprint">
-{
- evas_object_smart_callback_add(check, "changed", changed_cb, data);
-}
-
-// Callback function for the "changed" signal
-// This callback is called when the check value changes
-void changed_cb(void *data, Evas_Object *obj, void *event_info)
-{
- dlog_print(DLOG_INFO, LOG_TAG, "The value has changed\n");
-}
-</pre>
-
-
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="colorselector" name="colorselector" class="items-tit-h2">Colorselector Widget</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
-
- <p class="figure">Figure: Colorselector widget</p>
- <p style="text-align:center;"><img alt="Colorselector widget" src="../../images/colorsel.png" /></p>
-
- <p class="figure">Figure: Colorselector hierarchy</p>
- <p style="text-align:center;"><img alt="Colorselector hierarchy" src="../../images/colorselector_tree.png" /></p>
-
-
-<p> The colorselector widget provides a color selection solution to the user. There are different modes available, each of them showing a different configuration of the colorselector widget.</p>
-
-<p>As for now, only the <strong>PALETTE</strong> mode is available in Tizen.</p>
-
-<ul class="ul">
-<li>ELM_COLORSELECTOR_PALETTE</li>
-</ul>
-
-<p>The Palette mode displays several color items that enable the user to choose a color in the items displayed. It is possible to add new items, or to update the color of the current item. The list of color items is called a palette, it is associated with a unique identifier. This enable the developer to create new series of colors (new palette) and save it under another identifier. By default, the color palette is using the "default" identifier.</p>
-
-<p>This widget inherits from the layout widget, so all function concerning the layout widget can also be used on the colorselector widget.</p>
-
-<h3>Adding a Colorselector Widget</h3>
-
-<p>This is how to create a colorselector object.</p>
-
-<pre class="prettyprint">
-Evas_Object *colorsel, *parent;
-
-colorsel = elm_colorselector_add(parent);
-</pre>
-
-<h3>Setting Colorselector Modes</h3>
-
-<p>This is how to set the mode of the colorselector to the palette mode.</p>
-
-<pre class="prettyprint">
-elm_colorselector_mode_set(colorsel, ELM_COLORSELECTOR_PALETTE);
-</pre>
-
-<p>We want to create a new palette called "mypalette". This new palette will be saved by elementary config and we will be able to load it again later. We then add three colors in "mypalette": red, green, and blue.</p>
-
-<pre class="prettyprint">
-elm_colorselector_palette_name_set(colorsel, "mypalette");
-elm_colorselector_palette_color_add(colorsel, 255, 0, 0, 255);
-elm_colorselector_palette_color_add(colorsel, 0, 255, 0, 255);
-elm_colorselector_palette_color_add(colorsel, 0, 0, 255, 255);
-</pre>
-
-<p>The "default" palette already contains 14 colors.</p>
-
-<pre class="prettyprint">elm_colorselector_palette_name_set(colorsel, "default");
-</pre>
-
-<p>When the user clicks on the color elements, it changes the color that is set to the colorselector widget. We can use the function below to retrieve the current selected color.</p>
-
-<pre class="prettyprint">int r, g, b, a;
-
-elm_colorselector_color_get(colorsel, &r, &g, &b, &a);
-</pre>
-
-<h3>Using Colorselector Callbacks</h3>
-
-<p>We can register callbacks on the following signals:</p>
-
-<ul class="ul">
-<li>"changed" - The color value changes on the selector. event_info is NULL.</li>
-<li>"color,item,selected" - The user clicks on a color item. The event_info parameter of the callback is the selected color item.</li>
-<li>"color,item,longpressed" - The user long presses on a color item. The event_info parameter of the callback contains the selected color item.</li>
-</ul>
-
-<p>This is how to register a callback on "changed" signal.</p>
-
-<pre class="prettyprint">
-{
- evas_object_smart_callback_add(colorselector, "changed", changed_cb, data);
-}
-
-// Callback function for the "changed" signal
-// This callback is called when the colorselector value changes
-
-void changed_cb(void *data, Evas_Object *obj, void *event_info)
-{
- dlog_print(DLOG_INFO, LOG_TAG, "The color has changed\n");
-}
-</pre>
-
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="ctxpopup" name="ctxpopup" class="items-tit-h2">Ctxpopup Widget</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
-
- <p class="figure">Figure: Context popup widget</p>
- <p style="text-align:center;"><img alt="Context popup widget" src="../../images/ctxpopup1.png" /></p>
-
- <p class="figure">Figure: Context popup hierarchy</p>
- <p style="text-align:center;"><img alt="Context popup hierarchy" src="../../images/ctxpopup_tree.png" /></p>
-
-
-<p> Ctxpopup is a contextual popup, which can show a list of items.</p>
-
-<h3>Adding a Ctxpopup</h3>
-
-<p>A ctxpopup can be created with <span style="font-family: Courier New,Courier,monospace">elm_ctxpopup_add()</span> and when shown, it automatically chooses an area inside its parent object's view (set via <span style="font-family: Courier New,Courier,monospace">elm_ctxpopup_hover_parent_set()</span>) to optimally fit into it.</p>
-
-<pre class="prettyprint">
-Evas_Object *ctxpopup, *parent;
-
-// Creating a ctxpopup
-ctxpopup = elm_ctxpopup_add(parent);
-</pre>
-
-<h3>Modifying Ctxpopup Style</h3>
-
-<p>The following styles are available:</p>
-
-<ul class="ul">
-<li>"dropdown/list"</li>
-<li>"dropdown/label"</li>
-<li>"more/default"</li>
-</ul>
-
- <p class="figure">Figure: Context popup more/default style</p>
- <p style="text-align:center;"><img alt="Context popup more/default style" src="../../images/ctxpopup1.png" /></p>
-
- <p class="figure">Figure: Context popup dropdown/list</p>
- <p style="text-align:center;"><img alt="Context popup dropdown/list" src="../../images/ctxpopup2.png" /></p>
-
- <p class="figure">Figure: Context popup dropdown/label</p>
- <p style="text-align:center;"><img alt="Context popup dropdown/label" src="../../images/ctxpopup3.png" /></p>
-
-<p> In the following example, we set the "more/default" style.</p>
-
-<pre class="prettyprint">elm_object_style_set(ctxpopup, "more/default");</pre>
-
-<h3>Configuring Ctxpopup</h3>
-
-<p>The context popup orientation can be set with <span style="font-family: Courier New,Courier,monospace">elm_ctxpopup_horizontal_set()</span>. Here we set it to horizontal.</p>
-
-<pre class="prettyprint">elm_ctxpopup_horizontal_set(ctxpopup, EINA_TRUE);
-</pre>
-
-<p>We can also disable auto hiding if we want the ctxpopup never to be hidden. (Auto hide is enabled by default.)</p>
-
-<pre class="prettyprint">elm_ctxpopup_auto_hide_disabled_set(ctxpopup, EINA_TRUE);
-</pre>
-
-<h3>Managing Ctxpopup Items</h3>
-
-<p>The ctxpopup can contain a small number of items. Each of them can have a label and an icon. Here we append an item with the "Test" label and no icon.</p>
-<pre class="prettyprint">
-Elm_Object_Item *it;
-
-it = elm_ctxpopup_item_append(ctxpopup, "test", NULL, _ctxpopup_item_cb,
- NULL);
-</pre>
-
-<p>The _ctxpopup_item_cb() callback will be called when the item is clicked. This is how to write the definition of this callback.</p>
-
-<pre class="prettyprint">static void
-_ctxpopup_item_cb(void *data, Evas_Object *obj, void *event_info)
-{
- dlog_print(DLOG_INFO, LOG_TAG, "ctxpopup item selected\n");
-}
-</pre>
-
-<p>Then the item label is set to "New label".</p>
-
-<pre class="prettyprint">elm_object_item_part_text_set(it, "default", "New label");
-</pre>
-
-<p>And its icon is modified to the standard "home" icon.</p>
-
-<pre class="prettyprint">
-Evas_Object *home_icon = elm_icon_add(ctxpopup);
-elm_icon_standard_set(home_icon, "home");
-
-elm_object_item_part_content_set(it, "icon", home_icon);
-</pre>
-
-<h3>Using Ctxpopup Callbacks</h3>
-
-<p>The context popup emits the "dismissed" signal when it is dismissed. We can register a callback to this signal. The event_info parameter is NULL.</p>
-
-<pre class="prettyprint">{
- evas_object_smart_callback_add(ctxpopup, "dismissed", dismissed_cb, data);
-}
-
-// Callback function for the "dismissed" signal
-// This callback is called when the ctxpopup is dismissed.
-
-void dismissed_cb(void *data, Evas_Object *obj, void *event_info)
-{
- dlog_print(DLOG_INFO, LOG_TAG, "Ctxpopup dismissed\n");
-}
-</pre>
-
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="datetime" name="datetime" class="items-tit-h2">Datetime Widget</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
-
-<p class="figure">Figure: Datetime selection</p>
-<p style="text-align: center;"> <img alt="Datetime selection" src="../../images/date2.png" /> </p>
-
-<p class="figure">Figure: Datetime hierarchy</p>
-<p style="text-align: center;"> <img alt="Datetime hierarchy" src="../../images/datetime_tree.png" /> </p>
-
-<p>The datetime widget displays and adds date and time values.</p>
-
-<h3>Adding a Datetime Widget</h3>
-
-<p>The widget is created with <span style="font-family: Courier New,Courier,monospace">elm_datetime_add()</span>. It is then possible to select the visible fields with <span style="font-family: Courier New,Courier,monospace">elm_datetime_field_visible_set()</span>. The following fields can be controlled:</p>
- <ul class="ul">
- <li>ELM_DATETIME_YEAR: The Year field</li>
- <li>ELM_DATETIME_MONTH: The Month field</li>
- <li>ELM_DATETIME_DATE: The Date field</li>
- <li>ELM_DATETIME_HOUR: The Hour field</li>
- <li>ELM_DATETIME_MINUTE: The Minute field</li>
- <li>ELM_DATETIME_AMPM: The AM/PM field</li>
- </ul>
-
-<p>As an example, this is how to create a datetime widget and set the HOUR and MINUTE fields visible.</p>
-
-<pre class="prettyprint">
-Evas_Object *datetime, *parent;
-
-datetime = elm_datetime_add(parent);
-
-elm_datetime_field_visible_set(datetime, ELM_DATETIME_HOUR, EINA_TRUE);
-elm_datetime_field_visible_set(datetime, ELM_DATETIME_MINUTE, EINA_TRUE);
-
-elm_datetime_field_visible_set(datetime, ELM_DATETIME_YEAR, EINA_FALSE);
-elm_datetime_field_visible_set(datetime, ELM_DATETIME_MONTH, EINA_FALSE);
-elm_datetime_field_visible_set(datetime, ELM_DATETIME_DATE, EINA_FALSE);
-elm_datetime_field_visible_set(datetime, ELM_DATETIME_AMPM, EINA_FALSE);
-</pre>
-
-<h3>Using Datetime Styles</h3>
-
-<p>The following styles are available:</p>
- <ul class="ul">
- <li>"date_layout"</li>
- <li>"time_layout"</li>
- <li>"time_layout_24h"</li>
- </ul>
-
-<p>This is how to create the "date_layout" style.</p>
-
-<pre class="prettyprint">
-elm_object_style_set(datetime, "date_layout");
-</pre>
-
-<h3>Setting Datetime Format</h3>
-
-<p>The format of the date and time can be configured with <span style="font-family: Courier New,Courier,monospace">elm_datetime_format_set()</span> using a combination of allowed Libc date format specifiers. Here, as an example, we set the format to: "HH : MM".</p>
-
-<pre class="prettyprint">
-elm_datetime_format_set(datetime, "%H : %M");
-</pre>
-
-<p>Please refer to the API documentation for a complete list of all the options available.</p>
-
-<h3>Using Datetime Callbacks</h3>
-
-<p>A callback can be registered on the "changed" signal to detect when the Datetime field values are changed. The event_info parameter is NULL.</p>
-
-<pre class="prettyprint">
-{
- evas_object_smart_callback_add(datetime, "changed", changed_cb, data);
-}
-
-// Callback function for the "changed" signal
-// This callback is called when the datetime fields change
-void changed_cb(void *data, Evas_Object *obj, void *event_info)
-{
- dlog_print(DLOG_INFO, LOG_TAG, "Datetime field changed. \n");
-}</pre>
-
-<p>The "language,changed" signal is emitted when the system locale changes.</p>
-
-
-<h3>UX Issue in Tizen 2.3</h3>
-
-<ul class="ul">
- <li><span style="font-family: Courier New,Courier,monospace">date_layout</span> (default): Year, Month, Day</li>
- <li><span style="font-family: Courier New,Courier,monospace">time_layout</span>: Hour, Minute, AM/PM button</li>
- <li><span style="font-family: Courier New,Courier,monospace">time_layout_24hr</span>: Hour, Minute</li>
-</ul>
-
-<p>Basically, the <span style="font-family: Courier New,Courier,monospace">elm_datetime</span> widget needs a full-length format that includes the Year, Month, Day, Hour, Minute, and AM/PM. Each style then shows specific fields according their style, limited by the UX concept. If you call the <span style="font-family: Courier New,Courier,monospace">elm_datetime_field_visible_set()</span> function for a field that is not supported in the style, it does not work.</p>
-
- </div>
- </li>
-
-
- <li>
- <div class="devicespec-tit">
- <h2 id="entry" name="entry" class="items-tit-h2">Entry Widget</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
-
-<p class="figure">Figure: Entry widget</p>
-<p style="text-align: center;"> <img alt="Entry widget" src="../../images/entry.png" /> </p>
-
-<p class="figure">Figure: Entry widget</p>
-<p style="text-align: center;"> <img alt="Entry widget" src="../../images/entry2.png" /> </p>
-
-<p class="figure">Figure: Entry hierarchy</p>
-<p style="text-align: center;"> <img alt="Entry hierarchy" src="../../images/entry_tree.png" /> </p>
-
-<p>The entry widget is a box where the user can enter text. It supports the following features:</p>
- <ul class="ul">
- <li>text wrapping</li>
- <li>multiline</li>
- <li>scrolling</li>
- <li>formatted markup text</li>
- <li>password mode</li>
- <li>filtering text</li>
- <li>read/write from a file</li>
- <li>theme style overrides</li>
- </ul>
-
-<h3>Adding Entry Widget</h3>
-
-<p>The entry widget is created with the <span style="font-family: Courier New,Courier,monospace">elm_entry_add()</span> function, and the text inside the entry can be set with <span style="font-family: Courier New,Courier,monospace">elm_entry_entry_set()</span>.</p>
-
-<pre class="prettyprint">
-Evas_Object *entry, *parent;
-
-entry = elm_entry_add(parent);
-elm_entry_entry_set(entry, "A short text.");
-</pre>
-
-<h3>Using Text Edition</h3>
-
-<p>We can also append text to the end of existing content,</p>
-
-<pre class="prettyprint">
-elm_entry_entry_append(entry, "END");
-</pre>
-
-<p>or insert text at the current cursor position.</p>
-
-<pre class="prettyprint">
-elm_entry_entry_insert(entry, "CURSOR");
-Eina_Bool Empty = elm_entry_is_empty(entry);
-</pre>
-
-<p>Call <span style="font-family: Courier New,Courier,monospace">elm_entry_is_empty()</span> to see whether the entry is empty. Here, the boolean variable Empty will return EINA_FALSE.</p>
-
-<p>By default, the user can enter text in the entry widget when it is in the focus. We can prevent the user from editing text if needed.</p>
-
-<pre class="prettyprint">
-elm_entry_editable_set(entry, EINA_FALSE);
-</pre>
-
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">It is still possible to use the previous functions to modify the text of a non-editable entry.</td>
- </tr>
- </tbody>
- </table>
-
-<h3>Setting Password Mode</h3>
-
-<p>When dealing with password content, the password mode activates to hide what the user is typing. In this mode, the display of any text is replaced by asterisks (*), and the entry is single line (there is no line wrap).</p>
-
-<pre class="prettyprint">
-elm_entry_password_set(entry, EINA_TRUE);
-</pre>
-
-<h3>Entry Line Modes And Wrapping</h3>
-
-<p>The entry widget has two line modes:</p>
- <ul class="ul">
- <li>single line mode</li>
- <li>multiline mode</li>
- </ul>
-
-<p>First, we set the entry in single line mode.</p>
-
-<pre class="prettyprint">
-elm_entry_single_line_set(entry, EINA_TRUE);
-</pre>
-
-<p>In this mode, the text does not wrap when reaching the edge, but the entry grows horizontally instead. Pressing the "Enter" key in this mode generates an "activate" event instead of adding a new line.</p>
-
-<p>When the entry is set to multiline mode (single line off), the text wraps at the end of the entry and pressing "Enter" creates a new line.</p>
-
-<pre class="prettyprint">
-elm_entry_single_line_set(entry, EINA_FALSE);
-elm_entry_line_wrap_set(entry, ELM_WRAP_WORD);
-</pre>
-
-<p>In multiline entries, <span style="font-family: Courier New,Courier,monospace">elm_entry_line_wrap_set()</span> provides a way to cut the text implicitly into a new line when it reaches the far edge of the widget. The following wrap modes are available:</p>
- <ul class="ul">
- <li>ELM_WRAP_NONE: No wrap</li>
- <li>ELM_WRAP_CHAR: Wrap between characters</li>
- <li>ELM_WRAP_WORD: Wrap in allowed wrapping points (as defined in the unicode standard)</li>
- <li>ELM_WRAP_MIXED: Word wrap, and if that fails, char wrap</li>
- </ul>
-
-<h3>Selecting Text</h3>
-
-<p>Text selections can be made with different functions. This selects all the content of the entry widget.</p>
-
-<pre class="prettyprint">
-elm_entry_select_all(entry);
-</pre>
-
-<p>We can drop the current selection with</p>
-
-<pre class="prettyprint">
-elm_entry_select_none(entry);
-</pre>
-
-<p>To select part of the text, use <span style="font-family: Courier New,Courier,monospace">elm_entry_select_region_set()</span>. The code below selects the first twenty characters of the entry content.</p>
-
-<pre class="prettyprint">
-elm_entry_select_region_set(entry, 0, 20);
-</pre>
-
-<p>Current selected text within the entry can be retrieved like this.</p>
-
-<pre class="prettyprint">
-const char *selection;
-
-selection = elm_entry_selection_get(entry);
-</pre>
-
-<p>If the entry text is empty, <span style="font-family: Courier New,Courier,monospace">elm_entry_selection_get()</span> will return NULL.</p>
-
-<p>We can copy or cut the selection to the clipboard. (There is an example of a cut below.)</p>
-
-<pre class="prettyprint">
-elm_entry_selection_cut(entry);
-</pre>
-
-<p>This selection can be pasted in the same or a different entry.</p>
-
-<pre class="prettyprint">
-elm_entry_selection_paste(entry);
-</pre>
-
-<h3>Controlling Cursor</h3>
-
-<p>The cursor represents the current position in the entry, where the next action is done (for example, text insertion or deletion). Usually, the cursor is represented as a blinking character, but that depends on the theme configuration. Cursor position can be modified by using several functions.</p>
-
-<p>It can be moved to the beginning of the entry,</p>
-
-<pre class="prettyprint">
-elm_entry_cursor_begin_set(entry);
-</pre>
-
-<p>or to the end.</p>
-
-<pre class="prettyprint">
-elm_entry_cursor_end_set(entry);
-</pre>
-
-<p>It can be moved one line down or up.</p>
-
-<pre class="prettyprint">
-elm_entry_cursor_down(entry);
-elm_entry_cursor_up(entry);
-</pre>
-
-<p>It can also be moved one character to the left or right,</p>
-
-<pre class="prettyprint">
-elm_entry_cursor_prev(entry);
-elm_entry_cursor_next(entry);
-</pre>
-
-<p>or set at a specific position (15th character, for example).</p>
-
-<pre class="prettyprint">
-elm_entry_cursor_pos_set(entry, 15);
-</pre>
-
-<p>We can start a selection at the current cursor position, move five characters to the right and end the selection.</p>
-
-<pre class="prettyprint">
-elm_entry_cursor_selection_begin(entry);
-
-for(i = 0; i < 5; i++)
-{
- elm_entry_cursor_next(entry);
-}
-
-elm_entry_cursor_selection_end(entry);
-</pre>
-
-<h3>Formatting Text</h3>
-
-<p>Text within an entry can be formatted by using markups tags that are defined in the theme. The available markups in the default theme are</p>
- <ul class="ul">
- <li><br>: Inserts a line break.</li>
- <li><ps>: Inserts a paragraph separator. This is preferred over line breaks.</li>
- <li><tab>: Inserts a tab.</li>
- <li><em>...</em>: Emphasis. Sets the oblique style for the enclosed text.</li>
- <li><b>...</b>: Sets the bold style for the enclosed text.</li>
- <li><link>...</link>: Underlines the enclosed text.</li>
- <li><hilight>...</hilight>: Highlights the enclosed text.</li>
- </ul>
-
-<h3>Using Special Markups</h3>
-
-<p>Special markups can be added within the text of the entry.</p>
- <ul class="ul">
- <li><a href = ..>...</a>: Anchors</li>
- <li><item size = .. vsize = .. href = ..>...</item>: Items</li>
- </ul>
-
-<p>Anchors generate an "anchor,clicked" signal when the user clicks on them. The href attribute is used to identify the anchor. It also reacts to the "anchor,in" (mouse in), "anchor,out" (mouse out), "anchor,down" (mouse down), and "anchor,up" (mouse up) events.</p>
-
-<p>The item markup provides a way to insert any Evas_Object in the text. The Evas_Object name has to be specified in the href attribute.</p>
-
-<h3>Overriding Style</h3>
-
-<p>To tweak the style of the text within the entry widget, it is possible to override parts of the theme style to the textblock object by using <span style="font-family: Courier New,Courier,monospace">elm_entry_text_style_user_push()</span>. This function pushes a new style on top of the user style stack that overrides the current style. Remove the style in the top of user style stack with <span style="font-family: Courier New,Courier,monospace">elm_entry_text_style_user_pop()</span>.</p>
-
-<h3>Filtering Text</h3>
-
-<p>Text within an entry can be filtered in size. Here we set the maximum number of characters allowed in the entry to eight.</p>
-
-<pre class="prettyprint">
-static Elm_Entry_Filter_Limit_Size limit_size =
-{
- .max_char_count = 8,
- .max_byte_count = 0
-};
-
-// Append a new callback to the list, this function will be called each time
-// a text is inserted in the entry. Pass the limit_size struct previously
-// created to set the maximum number of characters allowed to 8
-
-elm_entry_markup_filter_append(entry, elm_entry_filter_limit_size,
- &limit_size);
-</pre>
-
-<p>Content can be filtered by passing an <span style="font-family: Courier New,Courier,monospace">Elm_Entry_Filter_Accept_Set</span> structure. This structure contains the accepted characters and rejected characters. In the example below we reject the '+', '-', '*', and '/' characters.</p>
-
-<pre class="prettyprint">
-static Elm_Entry_Filter_Accept_Set accept_set =
-{
- .accepted = NULL,
- .rejected = "+*-/"
-};
-
-elm_entry_markup_filter_append(entry, elm_entry_filter_accept_set,
- &accept_set);
-</pre>
-
-<h3>File Load/Save</h3>
-
-<p>The entry content can be saved to a file (<span style="font-family: Courier New,Courier,monospace">/tmp/test.txt</span>, for example).</p>
-
-<pre class="prettyprint">
-// Set the file in which the entry text will be saved. This function
-// implicitly loads the existing file content
-elm_entry_file_set(entry, "/tmp/test.txt", ELM_TEXT_FORMAT_MARKUP_UTF8);
-</pre>
-
-<p>Autosave is activated by default and changes are written back to the file after a short delay. This feature can be deactivated and we can manually save the content when needed.</p>
-
-<pre class="prettyprint">
-// Disable autosaving
-elm_entry_autosave_set(entry, EINA_FALSE);
-
-// Trigger saving when needed
-elm_entry_file_save(entry);
-</pre>
-
-<h3>Using Entry Theme Content</h3>
-
-<p>Two content parts of the default theme are available: "icon" and "end". Here we set an icon in the "end" content part.</p>
-
-<pre class="prettyprint">
-Evas_Object *icon;
-
-ic = elm_icon_add(entry);
-elm_image_file_set(ic, "icon.png", NULL);
-elm_object_part_content_set(entry, "end", icon);
-</pre>
-
-<h3>Using Entry Theme Texts</h3>
-
-<p>The default theme allows the use of the following text parts:</p>
- <ul class="ul">
- <li>"default" - text of the entry</li>
- <li>"guide" - placeholder of the entry</li>
- </ul>
-
-<p>This is how to set the placeholder text of the entry to "Hello World".</p>
-
-<pre class="prettyprint">
-elm_object_part_text_set(entry, "Hello World");
-</pre>
-
-<h3>Using Entry Callbacks</h3>
-
-<p>Entry widget emits the following signals:</p>
- <ul class="ul">
- <li>"aborted": The escape key is pressed on a single line entry.</li>
- <li>"activated": The enter key is pressed on a single line entry.</li>
- <li>"anchor,clicked": An anchor is clicked. event_info points to an object of the type Elm_Entry_Anchor_Info.</li>
- <li>"anchor,down": Mouse button is pressed on an anchor. event_info points to an object of the type Elm_Entry_Anchor_Info.</li>
- <li>"anchor,hover,opened": The anchor is clicked. event_info points to an object of the type Elm_Entry_Anchor_Info.</li>
- <li>"anchor,in": Mouse cursor is moved into an anchor. event_info points to an object of the type Elm_Entry_Anchor_Info.</li>
- <li>"anchor,out": Mouse cursor is moved out of an anchor. event_info points to an object of the type Elm_Entry_Anchor_Info.</li>
- <li>"anchor,up": Mouse button is unpressed on an anchor. event_info points to an object of the type Elm_Entry_Anchor_Info.</li>
- <li>"changed": The text within the entry is changed.</li>
- <li>"changed,user": The text within the entry is changed because of user interaction. event_info points to an object of the type Edje_Entry_Change_Info.</li>
- <li>"clicked": The entry is clicked (mouse press and release).</li>
- <li>"clicked,double": The entry is double clicked.</li>
- <li>"clicked,triple": The entry is triple clicked.</li>
- <li>"cursor,changed": The cursor position is changed.</li>
- <li>"cursor,changed,manual": The cursor position is changed manually.</li>
- <li>"focused": The entry receives focus. event_info points to an object of the type Elm_Focus_Info.</li>
- <li>"unfocused": The entry loses focus.</li>
- <li>"language,changed": Program language is changed.</li>
- <li>"longpressed": A mouse button is pressed and held for a couple of seconds.</li>
- <li>"maxlength,reached": A maximum length is reached.</li>
- <li>"preedit,changed": The preedit string is changed.</li>
- <li>"press": A mouse button is pressed on the entry.</li>
- <li>"redo,request": The request is redone.</li>
- <li>"selection,changed": The current selection is changed.</li>
- <li>"selection,cleared": The current selection is cleared.</li>
- <li>"selection,copy": A copy of the selected text into the clipboard is requested.</li>
- <li>"selection,cut": A cut of the selected text into the clipboard is requested.</li>
- <li>"selection,paste": A paste of the clipboard contents is requested.</li>
- <li>"selection,start": A selection is begun and no previous selection exists.</li>
- <li>"text,set,done": The whole text is set to the entry.</li>
- <li>"theme,changed": The theme is changed.</li>
- <li>"undo,request": The request is undone.</li>
- </ul>
-
-<p>For signals, where event_info has not been explicitly described, it is set to NULL.</p>
-
-<p>As an example, we register a callback to the "focused" signal.</p>
-
-<pre class="prettyprint">
-{
- evas_object_smart_callback_add(entry, "focused", focused_cb, data);
-}
-
-// Callback function for the "focused" signal
-// This callback is called when the entry receive the focus
-
-void focused_cb(void *data, Evas_Object *obj, void *event_info)
-{
- dlog_print(DLOG_INFO, LOG_TAG, "Entry focused\n");
-}
-</pre>
-
-
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="flip" name="flip" class="items-tit-h2">Flip Widget</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
-
-<p class="figure">Figure: Flip hierarchy</p>
-<p style="text-align: center;"> <img alt="Flip hierarchy" src="../../images/flip_tree.png" /> </p>
-
-<p>The flip widget can hold two Evas_Objects and allows the user flip between them using several pre-defined animations.</p>
-
-<h3>Adding Flip Widget</h3>
-
-<p>This is how to create a flip widget.</p>
-
-<pre class="prettyprint">
-Evas_Object *flip, *parent, *content1, *content2;
-flip = elm_flip_add(parent);
-</pre>
-
-<p>We can add content to the flip widget. content1 is set to the "front" content and content2 is set to the "back" mode.</p>
-
-<pre class="prettyprint">
-elm_object_part_content_set(flip, "front", content1);
-elm_object_part_content_set(flip, "back", content2);
-</pre>
-
-<h3>Configuring Flip Animation</h3>
-
-<p>Now we can run an flip animation.</p>
-
-<pre class="prettyprint">
-elm_flip_go(flip, ELM_FLIP_CUBE_UP);
-</pre>
-
-<p>This animation flips up the "front" content object as if it was on a side of a cube, letting the down facing side of the cube appear with the "back" content object. Several animations are available:</p>
- <ul class="ul">
- <li>ELM_FLIP_ROTATE_X_CENTER_AXIS - Rotate the content around a horizontal axis.</li>
- <li>ELM_FLIP_ROTATE_Y_CENTER_AXIS - Rotate the content around a vertical axis.</li>
- <li>ELM_FLIP_ROTATE_XZ_CENTER_AXIS - Rotate the content around a diagonal axis.</li>
- <li>ELM_FLIP_ROTATE_YZ_CENTER_AXIS - Rotate the content around a diagonal axis.</li>
- <li>ELM_FLIP_CUBE_LEFT - Rotate the content left as if it was on a side of a cube.</li>
- <li>ELM_FLIP_CUBE_RIGHT - Rotate the content right as if it was on a side of a cube.</li>
- <li>ELM_FLIP_CUBE_UP - Rotate the content up as if it was on a side of a cube.</li>
- <li>ELM_FLIP_CUBE_DOWN - Rotate the content down as if it was on a side of a cube.</li>
- <li>ELM_FLIP_PAGE_LEFT - Move the content to the left as if the flip was a book.</li>
- <li>ELM_FLIP_PAGE_RIGHT - Move the content to the right as if the flip was a book.</li>
- <li>ELM_FLIP_PAGE_UP - Move the content up as if the flip was a book.</li>
- <li>ELM_FLIP_PAGE_DOWN - Move the content down as if the flip was a book.</li>
- </ul>
-
-<h3>Interacting With the User</h3>
-
-<p>By default, the user cannot interact with the flip. We can set the interaction to be possible, but we have to choose which animation appears on the interaction (rotation has been selected in the following example).</p>
-
-<pre class="prettyprint">
-elm_flip_interaction_set(flip, ELM_FLIP_INTERACTION_ROTATE);
-</pre>
-
-<p>The available modes of interaction are</p>
- <ul class="ul">
- <li>ELM_FLIP_INTERACTION_NONE - No interaction is allowed</li>
- <li>ELM_FLIP_INTERACTION_ROTATE - Interaction causes a rotating animation</li>
- <li>ELM_FLIP_INTERACTION_CUBE - Interaction causes a cube animation</li>
- <li>ELM_FLIP_INTERACTION_PAGE - Interaction causes a page animation</li>
- </ul>
-
-<p>We must also choose, which interaction directions are enabled (only right and left in the following example).</p>
-
-<pre class="prettyprint">
-elm_flip_interaction_direction_enabled_set(flip, ELM_FLIP_DIRECTION_LEFT, EINA_TRUE);
-elm_flip_interaction_direction_enabled_set(flip, ELM_FLIP_DIRECTION_RIGHT, EINA_TRUE);
-</pre>
-
-<p>We can also set the amount of the flip that is sensitive to user interaction. In the following example, it is set to the entire flip (1) to make the flip easy to interact with.</p>
-
-<pre class="prettyprint">
-elm_flip_interaction_direction_hitsize_set(flip, ELM_FLIP_DIRECTION_LEFT, 1);
-elm_flip_interaction_direction_hitsize_set(flip, ELM_FLIP_DIRECTION_RIGHT, 1);
-</pre>
-
-<h3>Using Flip Callbacks</h3>
-
-<p>Two signals are emitted by the flip: one when an animation starts and one when it ends. For these signals, event_info parameter is NULL.</p>
-
-<pre class="prettyprint">
-"animate,begin" - A flip animation is started
-"animate,done" - A flip animation is finished
-</pre>
-
-<p>We can register a callback on the "animation,begin" signal.</p>
-
-<pre class="prettyprint">
-{
- evas_object_smart_callback_add(entry, "animate,begin", anim_start_cb, data);
-}
-
-// Callback function for the "animate,begin" signal
-// This callback is called when the flip animation starts
-
-void anim_start_cb(void *data, Evas_Object *obj, void *event_info)
-{
- dlog_print(DLOG_INFO, LOG_TAG, "Animation starts\n");
-}</pre>
-
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="gengrid" name="gengrid" class="items-tit-h2">Gengrid Widget</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
-
-<p class="figure">Figure: Gengrid widget</p>
-<p style="text-align: center;"> <img alt="Gengrid widget" src="../../images/gengrid.png" /> </p>
-
-<p class="figure">Figure: Gengrid hierarchy</p>
-<p style="text-align: center;"> <img alt="Gengrid hierarchy" src="../../images/gengrid_tree.png" /> </p>
-
-<p>Gengrid widget is based on the same idea as the genlist. It aims at displaying objects on a grid layout and rendering only the visible ones. As for the genlist, callbacks are called at item creation or deletion.</p>
-
-<p>This widget inherits from the layout widget and implements the scroller interface. Thus scroller and layout functions can be used with this widget.</p>
-
-<p>A gengrid may display its items using horizontal or vertical layout. In the first layout, items are displayed in columns from top to bottom, starting a new column when the space for the current column is filled. In the second one, items are set in rows from left to right.</p>
-
-<h3>Adding a Gengrid</h3>
-
-<p>We can add a gengrid widget with the following code.</p>
-
-<pre class="prettyprint">
-Evas_Object *gengrid, *parent;
-gengrid = elm_gengrid_add(parent);
-</pre>
-
-<h3>Gengrid Items</h3>
-
-<p>A gengrid item is composed of 0 or more texts, 0 or more contents and 0 or more boolean states. The number of the text and content depends on the theme used for gengrid items. In the default Tizen gengrid item theme, items can have two content parts that can be set with the "elm.swallow.icon elm.swallow.end" part names.</p>
-
-<h3>Creating and Deleting Items</h3>
-
-<p>As with genlists, items are allocated and deleted on the go, while the user is scrolling the gengrid. Here we declare a <span style="font-family: Courier New,Courier,monospace">Elm_Gengrid_Item_Class</span> structure to inform the gengrid how to manage items.</p>
-
-<pre class="prettyprint">
-static Elm_Gengrid_Item_Class *gic = elm_gengrid_item_class_new();
-gic->item_style = "default";
-gic->func.text_get = _grid_label_get;
-gic->func.content_get = _grid_content_get;
-gic->func.state_get = _grid_state_get;
-gic->func.del = _grid_del;
-</pre>
-
-<p>The parameters of this structure will not be detailed here, because they are very similar to that of the genlist. Please refer to the genlist widget page for more detailed information.</p>
-
-<h3>Managing Items</h3>
-
-<p>As with genlists, items can be added with the <span style="font-family: Courier New,Courier,monospace">elm_gengrid_item_append()</span>, <span style="font-family: Courier New,Courier,monospace">elm_gengrid_item_prepend()</span>, <span style="font-family: Courier New,Courier,monospace">elm_gengrid_item_insert_before()</span> and <span style="font-family: Courier New,Courier,monospace">elm_gengrid_item_insert_after()</span> functions. With the gengrid, there is no need to pass the "type" parameters. They can be cleared with the <span style="font-family: Courier New,Courier,monospace">elm_gengrid_clear()</span> function.</p>
-
-<p>We can set the multiselection mode on.</p>
-
-<pre class="prettyprint">
-elm_gengrid_multi_select_set(gengrid, EINA_TRUE);
-</pre>
-
-<p>When this mode is on, selected items are retrieved with <span style="font-family: Courier New,Courier,monospace">elm_gengrid_selected_items_get()</span>. It returns a list of all the selected items.</p>
-
-<p>When the content of an item changes, we can call <span style="font-family: Courier New,Courier,monospace">elm_gengrid_item_update()</span> to ask the gengrid to update this item's content.</p>
-
-<p>We can also manually select or disable some items with <span style="font-family: Courier New,Courier,monospace">elm_gengrid_item_selected_set()</span> and <span style="font-family: Courier New,Courier,monospace">elm_object_item_disabled_set()</span>.</p>
-
-<h3>Using Gengrid Callbacks</h3>
-
-<p>The gengrid widget emits the following signals:</p>
- <ul class="ul">
- <li>"activated" - The user has double-clicked or pressed (enter | return | spacebar) on an item. The event_info parameter is the gengrid item that is activated.</li>
- <li>"clicked,double" - The user has double-clicked an item. The event_info parameter is the gengrid item that is double-clicked.</li>
- <li>"longpressed" - The item is pressed for a certain amount of time. By default it is one second.</li>
- <li>"selected" - The user has selected an item. The event_info parameter is the gengrid item that is selected.</li>
- <li>"unselected" - The user has unselected an item. The event_info parameter is the gengrid item that is unselected.</li>
- <li>"realized" - The item in the gengrid has its implementing Evas object instantiated, de facto. event_info is the gengrid item that is created. The object may be deleted at any time, so it is strongly advisable not to use the object pointer returned from <span style="font-family: Courier New,Courier,monospace">elm_gengrid_item_object_get()</span>, because it may point to freed objects.</li>
- <li>"unrealized" - The implementing Evas object for this item is deleted. event_info is the gengrid item that is deleted.</li>
- <li>"changed" - An item is added, removed, resized or moved and the gengrid is resized or has "horizontal" property changes.</li>
- <li>"scroll,anim,start" - Scrolling animation starts.</li>
- <li>"scroll,anim,stop" - Scrolling animation stops.</li>
- <li>"drag,start,up" - The item in the gengrid is dragged (not scrolled) up.</li>
- <li>"drag,start,down" - The item in the gengrid has dragged (not scrolled) down.</li>
- <li>"drag,start,left" - The item in the gengrid is dragged (not scrolled) left.</li>
- <li>"drag,start,right" - The item in the gengrid is dragged (not scrolled) right.</li>
- <li>"drag,stop" - The item in the gengrid stops being dragged.</li>
- <li>"drag" - The item in the gengrid is dragged.</li>
- <li>"scroll" - The content is scrolled (moved).</li>
- <li>"scroll,drag,start" - Dragging the content starts.</li>
- <li>"scroll,drag,stop" - Dragging the content stops.</li>
- <li>"edge,top" - The gengrid is scrolled to the top edge.</li>
- <li>"edge,bottom" - The gengrid is scrolled to the bottom edge.</li>
- <li>"edge,left" - The gengrid is scrolled to the left edge.</li>
- <li>"edge,right" - The gengrid is scrolled to the right edge.</li>
- </ul>
-
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="genlist" name="genlist" class="items-tit-h2">Genlist Widget</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
-
-<p class="figure">Figure: Genlist widget</p>
-<p style="text-align: center;"> <img alt="Genlist widget" src="../../images/genlist.png" /> </p>
-
-<p class="figure">Figure: Genlist hierarchy</p>
-<p style="text-align: center;"> <img alt="Genlist hierarchy" src="../../images/genlist_htree.png" /> </p>
-
-<p>Genlist is a widget that displays a scrollable list of items. It allows a lot of entries while being fast and has a low memory footprint (only the visible items are allocated in the memory).</p>
-
-<p>For more information, see the <a href="../../../../org.tizen.tutorials/html/native/ui/genlist_tutorial_n.htm">Genlist Tutorial</a>.</p>
-
-<h3>Genlist Item Style</h3>
-
-<p>An item can have 0 or more texts, 0 or more contents, and 0 or more boolean states. This is defined in the Edje item theme style. Genlist looks for data items named respectively "labels", "contents", and "states" in the Edje file. The "default" item style provides one text part ("elm.text"), two content parts ("elm.swalllow.icon" and "elm.swallow.end") and no state parts.</p>
-
-<p>The following item styles are available:</p>
- <ul class="ul">
- <li>"default"</li>
- <li>"full"</li>
- <li>"one_icon"</li>
- <li>"end_icon"</li>
- <li>"group_index"</li>
- <li>"double_label"</li>
- </ul>
-
-<p>Here are several examples of item styles.</p>
-
-<p class="figure">Figure: Default item style</p>
-<p style="text-align: center;"> <img alt="Default item style" src="../../images/gl-default.png" /> </p>
-
-<p class="figure">Figure: end_icon item style</p>
-<p style="text-align: center;"> <img alt="end_icon item style" src="../../images/gl-end-icon.png" /> </p>
-
-<p class="figure">Figure: double_label item style</p>
-<p style="text-align: center;"> <img alt="double_label item style" src="../../images/gl-double-label.png" /> </p>
-
-<p>Refer to the <a href="widget_preferences_n.htm#customize">Customizing Widgets</a> for creating a new genlist item style.</p>
-
-<h3>Adding a Genlist</h3>
-
-<p>Genlist widget is added with the <span style="font-family: Courier New,Courier,monospace">elm_genlist_add()</span> function.</p>
-
-<pre class="prettyprint">
-Evas_Object *genlist, *parent;
-genlist = elm_genlist_add(parent);
-</pre>
-
-<h3>Creating And Deleting Items</h3>
-
-<p>To save up memory, genlist allocates and deletes items on the go, while the user is scrolling the list. To enable that, the user creates and fills a <span style="font-family: Courier New,Courier,monospace">Elm_Genlist_Item_Class</span> structure that informs the genlist widget which callbacks to call when an item is created or deleted.</p>
-
-<pre class="prettyprint">
-Elm_Genlist_Item_Class *itc = elm_genlist_item_class_new();
-
-itc->item_style = "default";
-itc->decorate_item_style = NULL;
-itc->decorate_all_item_style = NULL;
-itc->func.text_get = _item_label_get;
-itc->func.content_get = _item_content_get;
-itc->func.state_get = _item_state_get;
-itc->func.del = _item_del;
-</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">item_style</span>, <span style="font-family: Courier New,Courier,monospace">decorate_item_style</span>, and <span style="font-family: Courier New,Courier,monospace">decorate_all_item_style</span> attributes define the names of the item style, the decorate mode item style and the decorate all item style.</p>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">func</span> structure contains pointers to functions that are called when an item is going to be created or deleted. All of them receive a data parameter that points to the same data passed to the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span> and related item creation functions, and an obj parameter that points to the genlist object itself.</p>
- <ul class="ul">
- <li>text_get
- <p>This function receives a PART parameter that is the name string of one of the existing text parts in the Edje group implementing the item's theme. It has to return a string (duplicated with the <span style="font-family: Courier New,Courier,monospace">strdup()</span> function) corresponding to the PART parameter. The caller is in charge of freeing the string when done.</p></li>
-
- <li>content_get
- <p>The PART parameter is the name string of one of the existing swallow parts in the Edje group. When no content is desired it must return NULL, or otherwise, a valid object handle. The object is deleted by the genlist on its deletion or when the item is "unrealized".</p></li>
-
- <li>state_get
- <p>The PART parameter is the name string of one of the state parts in the Edje group implementing the item's theme. It returns EINA_FALSE for false/off or EINA_TRUE for true/on. The default is false. Genlists emit a signal to the PART parameter's theming Edje object with "elm,state,xxx,active" as "emission" and "elm" as "source" argument, when the state is true. xxx is the name of the (state) part.</p></li>
-
- <li>del
- <p>This function is called when the genlist item is deleted. It deletes any data that is allocated at the item creation.</p></li>
-</ul>
-
-<h3>Managing Items</h3>
-
-<p>To add an item, several functions can be used. <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span> adds an item to the end of the list, or if there is a parent list, to the end of all the child items of the parent list. <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_prepend()</span> is otherwise the same but adds to the beginning of the list or children lists. <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_insert_before()</span> inserts an item before the indicated item and <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_insert_after()</span> inserts an item after the indicated item.</p>
-
-<p>The previous functions take a "type" parameter that can be one of the following.</p>
- <ul class="ul">
- <li>ELM_GENLIST_ITEM_NONE</li>
- <li>ELM_GENLIST_ITEM_TREE</li>
- <li>ELM_GENLIST_ITEM_GROUP</li>
- </ul>
-
-<p>If ELM_GENLIST_ITEM_TREE is set, this item is displayed as being able to expand and have child items. If ELM_GENLIST_ITEM_GROUP is set, this item is a group index item that is displayed at the top until the next group appears.</p>
-
-<p class="figure">Figure: Genlist tree</p>
-<p style="text-align: center;"> <img alt="Genlist tree" src="../../images/genlist_tree.png" /> </p>
-
-<p>The application clears the list with <span style="font-family: Courier New,Courier,monospace">elm_genlist_clear()</span>, which deletes all the items in the list. <span style="font-family: Courier New,Courier,monospace">elm_object_item_del()</span> deletes a specific item. <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_subitems_clear()</span> clears all items that are children of the indicated parent item.</p>
-
-<p>To help inspect list items, move to the item at the top of the list with <span style="font-family: Courier New,Courier,monospace">elm_genlist_first_item_get()</span>, which returns the item pointer. <span style="font-family: Courier New,Courier,monospace">elm_genlist_last_item_get()</span> moves to the item at the end of the list. <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_next_get()</span> and <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_prev_get()</span> move to the next and previous items relative to the indicated item. Using these calls you can go through the entire item list or tree.</p>
-
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">As a tree, the items are flattened on the list, so <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_parent_get()</span> gives you the name of the parent item (even to skip them if needed).</td>
- </tr>
- </tbody>
- </table>
-
-<p><span style="font-family: Courier New,Courier,monospace">elm_genlist_item_show()</span> scrolls the scroller to show the desired item as visible. </p>
-<p><span style="font-family: Courier New,Courier,monospace">elm_object_item_data_get()</span> returns the data pointer set by the item creation functions.</p>
-
-<p>If an item changes (state, boolean, text or content change), use <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_update()</span> for the genlist to update the item. Genlist will re-realize the item and call the functions in the _Elm_Genlist_Item_Class for it.</p>
-
-<h3>Selection</h3>
-
-<p>Items are manually selected or unselected with <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_selected_set()</span> or disabled with <span style="font-family: Courier New,Courier,monospace">elm_object_item_disabled_set()</span>. In case there is a tree or a group item, the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_expanded_set()</span> function is used to expand or contract the item.</p>
-
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Calling this function does not show or hide any child of an item (if it is a parent). You must manually delete and create them on the callbacks of the "expanded" or "contracted" signals.</td>
- </tr>
- </tbody>
- </table>
-
-<p>By default, the genlist is in single-selection mode: only one item can be selected at a time. You can use <span style="font-family: Courier New,Courier,monospace">elm_genlist_multi_select_set()</span> to select multiple items. In single-selection mode, the <span style="font-family: Courier New,Courier,monospace">elm_genlist_selected_item_get()</span> function can be called to retrieve the selected item. If several items are selected, the <span style="font-family: Courier New,Courier,monospace">elm_genlist_selected_items_get()</span> returns a list of the current selected items.</p>
-
-<p>In the picture below, there is a genlist in multi-selection mode with two items selected (#4 and #5) and one item disabled (#2).</p>
-
-<p class="figure">Figure: Genlist widget</p>
-<p style="text-align: center;"> <img alt="Genlist widget" src="../../images/genlist_multi.png"/> </p>
-
-<h3>Using Genlist Callbacks</h3>
-
-<p>The genlist widget emits the following signals:</p>
- <ul class="ul">
- <li>"activated": The user has double-clicked or pressed (enter | return | spacebar) on an item. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.</li>
- <li>"clicked,double": The user has double-clicked an item. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.</li>
- <li>"selected": The user selects an item. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.</li>
- <li>"unselected": The user unselects an item. event_info in the callback function points at an object of type Elm_Object_Item that contains the activated item.</li>
- <li>"expanded": The item is to be expanded with <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_expanded_set()</span>. This callback fills in the child items. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.</li>
- <li>"contracted": The item is to be contracted with <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_expanded_set()</span>. This callback deletes the child items. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.</li>
- <li>"expand,request": The user wants to expand a tree branch item. The callback decides if the item can expand (if it has any children) and calls <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_expanded_set()</span> to set the state. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.</li>
- <li>"contract,request": The user wants to contract a tree branch item. The callback decides if the item can contract (if it has any children) and calls <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_expanded_set()</span> to set the state. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.</li>
- <li>"realized": The item is created as a real evas object. event_info in the callback function points at an object of the type Elm_Object_Item, that contains the activated item.</li>
- <li>"unrealized": An item is going to be unrealized. Content objects provided are deleted and the item object is deleted or put into a floating cache. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.</li>
- <li>"drag,start,up": The item in the list is dragged (not scrolled) up. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.</li>
- <li>"drag,start,down": The item in the list is dragged (not scrolled) down. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.</li>
- <li>"drag,start,left": The item in the list is dragged (not scrolled) left. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.</li>
- <li>"drag,start,right": The item in the list is dragged (not scrolled) right. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.</li>
- <li>"drag,stop": The item in the list has stopped being dragged. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.</li>
- <li>"drag": The item in the list is being dragged. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.</li>
- <li>"longpressed": The item is pressed for a certain amount of time. The default specified time is one second. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.</li>
- <li>"scroll,anim,start": The scrolling animation is started. event_info is NULL.</li>
- <li>"scroll,anim,stop": The scrolling animation is stopped. event_info is NULL.</li>
- <li>"scroll,drag,start": Dragging the content is started. event_info is NULL.</li>
- <li>"scroll,drag,stop": Dragging the content is stopped. event_info is NULL.</li>
- <li>"edge,top": The genlist is scrolled to the top edge. event_info is NULL.</li>
- <li>"edge,bottom": The genlist is scrolled to the bottom edge. event_info is NULL.</li>
- <li>"edge,left": The genlist is scrolled to the left edge. event_info is NULL.</li>
- <li>"edge,right": The genlist is scrolled to the right edge. event_info is NULL.</li>
- <li>"multi,swipe,left": The genlist is multi-touch swiped left. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.</li>
- <li>"multi,swipe,right": The genlist is multi-touch swiped right. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.</li>
- <li>"multi,swipe,up": The genlist is multi-touch swiped up. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.</li>
- <li>"multi,swipe,down": The genlist is multi-touch swiped down. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.</li>
- <li>"multi,pinch,out": The genlist is multi-touch pinched out. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.</li>
- <li>"multi,pinch,in": The genlist is multi-touch pinched in. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.</li>
- <li>"swipe": The genlist is swiped. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.</li>
- <li>"moved": A genlist item is moved in the reorder mode. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.</li>
- <li>"moved,after": A genlist item is moved after another item in the reorder mode. To access the relative previous item, use <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_prev_get()</span>. This signal is called along with the "moved" signal. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.</li>
- <li>"moved,before": A genlist item is moved before another item in the reorder mode. To access the relative previous item, use <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_next_get()</span>. This signal is called along with the "moved" signal. event_info in the callback function points at an object of the type Elm_Object_Item that contains the activated item.</li>
- <li>"language,changed": The program's language is changed. event_info is NULL.</li>
- <li>"tree,effect,finished": A genlist tree effect is finished. event_info is NULL.</li>
- </ul>
-
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="glview" name="glview" class="items-tit-h2">GLView Widget</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
-
- <p class="figure">Figure: GLView gears example</p>
- <p style="text-align:center;"><img alt="GLView gears example" src="../../images/glview.png" /></p>
-
- <p class="figure">Figure: GLView hierarchy</p>
- <p style="text-align:center;"><img alt="GLView hierarchy" src="../../images/glview_tree.png" /></p>
-
-
-<p> This widget renders OpenGL in an elementary object, which hides Evas GL complexity. For more information, see <a href="../../../../org.tizen.guides/html/native/graphics/opengles_n.htm">OpenGL ES</a>.</p>
-
-<h3>Adding a GLView Widget</h3>
-
-<p>Create a GLView widget with the <span style="font-family: Courier New,Courier,monospace">elm_glview_add()</span> function.</p>
-
-<pre class="prettyprint">Evas_Object *glview, *parent;
-
-glview = elm_glview_add(parent);
-</pre>
-
-<p>In this example, the size of the GLView is set to 200x200 pixels.</p>
-
-<pre class="prettyprint">elm_glview_size_set(glview, 200, 200);
-</pre>
-
-<h3>Using GLView API</h3>
-
-<p>We can configure the GLView rendering mode by activating the following rendering modes:</p>
-
-<ul class="ul">
-<li><span style="font-family: Courier New,Courier,monospace">ELM_GLVIEW_ALPHA</span>: Alpha channel rendering mode</li>
-<li><span style="font-family: Courier New,Courier,monospace">ELM_GLVIEW_DEPTH</span>: Depth buffer rendering mode</li>
-<li><span style="font-family: Courier New,Courier,monospace">ELM_GLVIEW_STENCIL</span>: Stencil buffer rendering mode</li>
-<li><span style="font-family: Courier New,Courier,monospace">ELM_GLVIEW_DIRECT</span>: Direct rendering mode</li>
-<li><span style="font-family: Courier New,Courier,monospace">ELM_GLVIEW_CLIENT_SIDE_ROTATION</span>: The client handles the GL view rotation if direct rendering is enabled</li>
-</ul>
-
-<p>In this example, we enable alpha channel and depth buffer rendering mode.</p>
-<pre class="prettyprint">
-elm_glview_mode_set(glview, ELM_GLVIEW_ALPHA | ELM_GLVIEW_DEPTH);
-</pre>
-
-<p>We decide what to do with the GL surface when the GLView widget is resized.</p>
-
-<pre class="prettyprint">
-elm_glview_resize_policy_set(glview, ELM_GLVIEW_RESIZE_POLICY_RECREATE);
-</pre>
-
-<p>The GL surface is destroyed and recreated to the new size (default function). The resize policy can also be set to <span style="font-family: Courier New,Courier,monospace">ELM_GLVIEW_RESIZE_POLICY_SCALE</span>. In that case, only the image object is scaled, not the underlying GL surface.</p>
-
-<p>This is how to set the GLView rendering policy.</p>
-
-<pre class="prettyprint">
-elm_glview_render_policy_set(glview, ELM_GLVIEW_RENDER_POLICY_ALWAYS);
-</pre>
-
-<p>The glview object is always redrawn during the rendering loop. It can also be set to <span style="font-family: Courier New,Courier,monospace">ELM_GLVIEW_RENDER_POLICY_ON_DEMAND</span> (default function), where glview widget is redrawn only when it is visible.</p>
-
-<p>We can register callbacks:</p>
-
-<pre class="prettyprint">elm_glview_init_func_set(glview, _init_gl_cb);
-elm_glview_del_func_set(glview, _del_gl_cb);
-elm_glview_resize_func_set(glview, _resize_gl_cb);
-elm_glview_render_func_set(glview, _draw_gl_cb);
-</pre>
-
-<p><span style="font-family: Courier New,Courier,monospace">elm_glview_init_func_set()</span> registers an init callback that is called at the GLView object creation.</p>
-<p><span style="font-family: Courier New,Courier,monospace">elm_glview_del_func_set()</span> registers a del function that is called when the GLView object is deleted.</p>
-<p><span style="font-family: Courier New,Courier,monospace">elm_glview_resize_func_set()</span> registers the resize function that is called during the rendering loop when the GLView object is resized.</p>
-<p><span style="font-family: Courier New,Courier,monospace">elm_glview_render_func_set()</span> registers the render function that is called when the GLView object must be redrawn.</p>
-
-<h3>Using GLView Callbacks</h3>
-
-<p>GLView widget emits the following signals:</p>
-
-<ul class="ul">
-<li>"focused" The Glview widget is focused. The event_info parameter points at an object of the type Elm_Focus_Info.</li>
-<li>"unfocused" The GLView object is unfocused.</li>
-</ul>
-
-<p>This is how to register a callback.</p>
-<pre class="prettyprint">{
- evas_object_smart_callback_add(glview, "focused", focused_cb, data);
-}
-
-// Callback function for the "focused" signal
-// This callback is called when the GLView is focused
-void focused_cb(void *data, Evas_Object *obj, void *event_info)
-{
- Elm_Focus_Info *fi = event_info;
-
- dlog_print(DLOG_INFO, LOG_TAG, "GLView is focused\n");
-}
-</pre>
-
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="icon" name="icon" class="items-tit-h2">Icon Widget</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
-
-<p class="figure">Figure: Icon widget</p>
-<p style="text-align: center;"> <img alt="Icon widget" src="../../images/icon.png" /> </p>
-
-<p class="figure">Figure: Icon hierarchy</p>
-<p style="text-align: center;"> <img alt="Icon hierarchy" src="../../images/icon_tree.png" /> </p>
-
-<p>The icon widget inherits from the image widget. It is used to display images in an icon context.</p>
-
-<h3>Adding an Icon</h3>
-
-<p>We can create an icon and set it as a freedesktop.org "Home" standard icon.</p>
-
-<pre class="prettyprint">
-Evas_Object *icon, *parent;
-icon = elm_icon_add(parent);
-elm_icon_standard_set(icon, "Home");
-</pre>
-
-<h3>Changing Image File</h3>
-
-<p>We can change the image by using an image in the filesystem (for example, /tmp/Home.png),</p>
-
-<pre class="prettyprint">
-elm_image_file_set(icon, "/tmp/Home.png", NULL);
-</pre>
-
-<p>or a group in an Edje file (for example, /tmp/Home.edj).</p>
-
-<pre class="prettyprint">
-elm_image_file_set(icon, "/tmp/Home.edj", "elm/icon/Home/default");
-</pre>
-
-<p>A thumbnail can be generated and cached for future use. (For this, you need the Ethumb library support.)</p>
-
-<pre class="prettyprint">
-elm_icon_thumb_set(icon, "/tmp/Home.png", NULL);
-</pre>
-
-<p>This function sets the file in the icon and enables the use of a cached thumbnail if it already exists. Otherwise, it creates a new thumbnail and caches it for future use.</p>
-
-<h3>Using Icon Callbacks</h3>
-
-<p>The icon widget emits the following signals:</p>
- <ul class="ul">
- <li>"thumb,done" - <span style="font-family: Courier New,Courier,monospace">elm_icon_thumb_set()</span> is completed with success.</li>
- <li>"thumb,error" - <span style="font-family: Courier New,Courier,monospace">elm_icon_thumb_set()</span> fails.</li>
- </ul>
-
-<p>In both cases, event_info is NULL;</p>
-
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="image" name="image" class="items-tit-h2">Image Widget</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
-
-<p class="figure">Figure: Image widget</p>
-<p style="text-align: center;"> <img alt="Image widget" src="../../images/image.png" /> </p>
-
-<p class="figure">Figure: Image hierarchy</p>
-<p style="text-align: center;"> <img alt="Image hierarchy" src="../../images/image_tree.png" /> </p>
-
-<p>The image widget can load and display an image from a disk file or a memory region.</p>
-
-<h3>Adding an Image Widget</h3>
-
-<p>This object is created with <span style="font-family: Courier New,Courier,monospace">elm_image_add()</span>.</p>
-
-<pre class="prettyprint">
-Evas_Object *image, *parent;
-image = elm_image_add(parent);
-</pre>
-
-<h3>Configuring Image Widget</h3>
-
-<p>Various properties of the image can be tuned. First, we disable elementary scaling so that the image does not scale but resizes on both directions.</p>
-
-<pre class="prettyprint">
-elm_image_no_scale_set(image, EINA_TRUE);
-elm_image_resizable_set(image, EINA_TRUE, EINA_TRUE);
-</pre>
-
-<p>When scaling images, the smooth scaling algorithm can be used. It provides a better quality image but is slower than the default algorithm.</p>
-
-<pre class="prettyprint">
-elm_image_smooth_set(image, EINA_TRUE);
-</pre>
-
-<p>Preloading is used to load images without blocking the user interface. This preserves the reactivity of the user experience. The image is loaded in a thread. It can be disabled if desired.</p>
-
-<pre class="prettyprint">
-elm_image_preload_disabled_set(image, EINA_TRUE);
-</pre>
-
-<p>The image can be rotated or flipped. Here we rotate our image 180 degrees.</p>
-
-<pre class="prettyprint">
-elm_image_orient_set(image, ELM_IMAGE_ROTATE_180);
-</pre>
-
-<p>The following orientations are available:</p>
- <ul class="ul">
- <li>ELM_IMAGE_ORIENT_0: No orientation change</li>
- <li>ELM_IMAGE_ROTATE_90: Rotate the image 90 degrees clockwise</li>
- <li>ELM_IMAGE_ROTATE_180: Rotate the image 180 degrees clockwise</li>
- <li>ELM_IMAGE_ROTATE_270: Rotate the image 90 degrees counter-clockwise</li>
- <li>ELM_IMAGE_FLIP_HORIZONTAL: Flip the image horizontally</li>
- <li>ELM_IMAGE_FLIP_VERTICAL: Flip the image vertically</li>
- <li>ELM_IMAGE_FLIP_TRANSPOSE: Flip the image along the bottom-left to top-right line</li>
- <li>ELM_IMAGE_FLIP_TRANSVERSE: Flip the image along the top-left to bottom-right line</li>
- </ul>
-
-<p>If we want to keep the original aspect ration when resizing the image, we must define how the image fits into the object's area.</p>
-
-<pre class="prettyprint">
-// Tell the image to keep original aspect ratio
-elm_image_aspect_fixed_set(image, EINA_TRUE);
-// Then let the image fit the entire object
-elm_image_fill_outside_set(image, EINA_TRUE);
-</pre>
-
-<p>In this configuration, part of the image may go outside the object. If <span style="font-family: Courier New,Courier,monospace">elm_image_fill_outside_set</span> is set to EINA_FALSE, the image stays inside the limits of the parent object.</p>
-
-<h3>Using Image Callbacks</h3>
-
-<p>The image widget emits the signals below:</p>
- <ul class="ul">
- <li>"drop": The user drops an image typed object onto the object in question - the event info argument is the path to that image file</li>
- <li>"clicked": The user clicks the image. event_info is NULL.</li>
- </ul>
-
-<p>Here is how to register a callback when a user clicks on the image:</p>
-
-<pre class="prettyprint">
-{
- evas_object_smart_callback_add(image, "clicked", clicked_cb, data);
-}
-
-// Callback function for the "clicked" signal
-// This callback is called when the image is clicked
-
-void clicked_cb(void *data, Evas_Object *obj, void *event_info)
-{
- dlog_print(DLOG_INFO, LOG_TAG, "Image clicked\n");
-}
-</pre>
-
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="index" name="index" class="items-tit-h2">Index Widget</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
-
-<p class="figure">Figure: Index widget</p>
-<p style="text-align: center;"> <img alt="Index widget" src="../../images/index.png" /> </p>
-
-<p class="figure">Figure: Index hierarchy</p>
-<p style="text-align: center;"> <img alt="Index hierarchy" src="../../images/index_tree.png" /> </p>
-
-<p>An index widget gives you an index for fast access to whichever group of other UI items you have. By default hidden, the index appears when the user clicks over its reserved area in the canvas. In the default theme, it is a one finger wide area on the right side of the index widget's container. Generally, an index is used together with lists, generic lists or generic grids.</p>
-
-<h3>Adding an Index Widget</h3>
-
-<p>Call <span style="font-family: Courier New,Courier,monospace">elm_index_add()</span> to create a new index widget.</p>
-
-<pre class="prettyprint">
-Evas_Object *index, *parent;
-index = elm_index_add(parent);
-</pre>
-
-<h3>Adding Items</h3>
-
-<p>Here we add the listitem object at the letter "A", calling the smart callback <span style="font-family: Courier New,Courier,monospace">it_select_cb()</span> when this item is selected.</p>
-
-<pre class="prettyprint">
-Elm_Object_Item *list_item1, *list_item2;
-elm_index_item_append(index, "A", it_select_cb, list_item1);
-</pre>
-
-<p>This is how to define the smart callback.</p>
-
-<pre class="prettyprint">
-// Callback function called when the list_item1 object
-// is selected
-void it_select_cb(void *data, Evas_Object *obj, void *event_info)
-{
- dlog_print(DLOG_INFO, LOG_TAG, "Item1 selected\n");
-}
-</pre>
-
-<p>In the previous case, the indexes are appended to the existing ones. It is also possible to prepend index items with <span style="font-family: Courier New,Courier,monospace">elm_index_item_prepend()</span>.</p>
-
-<h3>Sorting Index Items</h3>
-
-<p>We can insert index items using a sorting function. Indexes can be sorted, for example, by alphabetic order.</p>
-
-<p>We must write a compare function that returns a positive int, 0 or a negative int when the data2 item parameter is respectively greater than, equal to or lower than the data1 parameter.</p>
-
-<pre class="prettyprint">
-static int
-_index_icmp(const void *data1,
- const void *data2)
-{
- int result;
-
- // Code that does the item comparison will be written here
-
- return result;
-}
-</pre>
-
-<p>We add a new item at the "B" index using the compare function to sort the indexes.</p>
-
-<pre class="prettyprint">
-elm_index_item_sorted_insert(index, "B", NULL, list_item2, _index_icmp, NULL);
-</pre>
-
-<h3>Using Index Callbacks</h3>
-
-<p>The index widget emits the following signals:</p>
- <ul class="ul">
- <li>"changed" - The selected index item changes. event_info is the selected item's data pointer.</li>
- <li>"delay,changed" - The selected index item changes, but after a small idling period. event_info is the selected item's data pointer.</li>
- <li>"selected" - The user releases a mouse button and selects an item. event_info is the selected item's data pointer.</li>
- <li>"level,up" - The user moves a finger from the first level to the second level.</li>
- <li>"level,down" - The user moves a finger from the second level to the first level.</li>
- </ul>
-
-<p>When the user selects an item in the index, the "selected" signal is emitted. The developer can then implement the associated callback to do the appropriate action (to show a given area or child object depending on the index item selected, for example). Here is an example of such a callback.</p>
-
-<pre class="prettyprint">
-static void
-_index_selected_cb(void *data, Evas_Object *obj, void *event_info)
-{
- Elm_Object_Item *lit = event_info;
-
- // Code that does the desired action
-}
-</pre>
-
-<p>Then we register this callback to the "selected" signal.</p>
-
-<pre class="prettyprint">
-evas_object_smart_callback_add(index, "selected", _index_selected_cb, NULL);
-</pre>
-
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="label" name="label" class="items-tit-h2">Label Widget</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
-
-<p class="figure">Figure: Label widget</p>
-<p style="text-align: center;"> <img alt="Label widget" src="../../images/label.png" /> </p>
-
-<p class="figure">Figure: Label hierarchy</p>
-<p style="text-align: center;"> <img alt="Label hierarchy" src="../../images/label_tree.png" /> </p>
-
-<p>The label widget displays text with simple html-like markup.</p>
-
-<h3>Adding a Label</h3>
-
-<p>To add a label and set the text in it, use the following functions.</p>
-
-<pre class="prettyprint">
-Evas_Object *label = elm_label_add(win);
-
-elm_object_text_set(label, "Some long text for our label, that is not so
- long");
-</pre>
-
-<h3>Using Label Styles</h3>
-
-<p>Label displays the text with several predefined styles.</p>
- <ul class="ul">
- <li>default: No animation</li>
- <li>marker: The text is centered and bolded.</li>
- <li>slide_long: The text appears from the right of the screen and slides until it disappears in the left of the screen(reappearing on the right again).</li>
- <li>slide_short: The text appears in the left of the label and slides to the right to show the overflow. When all of the text has been shown the position is reset.</li>
- <li>slide_bounce: The text appears in the left of the label and slides to the right to show the overflow. When all of the text has been shown, the animation reverses, moving the text to the left.</li>
- </ul>
-
-<p>Here we set the style to "slide_long".</p>
-
-<pre class="prettyprint">
-elm_object_style_set(label, "slide_long");
-</pre>
-
-<h3>Configuring the Label</h3>
-
-<p>The duration of the animation and the slide mode can be set.</p>
-
-<pre class="prettyprint">
-elm_label_slide_duration_set(label, 3);
-elm_label_slide_mode_set(label, ELM_LABEL_SLIDE_MODE_ALWAYS);
-</pre>
-
-<p>The style can be modified.</p>
-
-<pre class="prettyprint">
-elm_object_style_set(label, "slide_bounce");
-</pre>
-
-<h3>Using Label Callbacks</h3>
-
-<p>This widget emits the following signals:</p>
- <ul class="ul">
- <li>"language,changed": The program's language changes.</li>
- <li>"slide,end": The slide reaches the end.</li>
- <li>"anchor,clicked": The anchor is clicked. event_info points to an object of the type Elm_Label_Anchor_Info.</li>
- <li>"anchor,mouse,down" event_info points to an object of the type Elm_Label_Anchor_Info.</li>
- <li>"anchor,mouse,up" event_info points to an object of the type Elm_Label_Anchor_Info.</li>
- </ul>
-
-<p>Here we register a callback on the "slide,end" signal.</p>
-
-<pre class="prettyprint">
-{
-
- evas_object_smart_callback_add(label, "slide,end", slide_end_cb, data);
-
-}
-
-// Callback function for the "slide,end" signal
-// This callback is called when the label slide reaches the end
-
-void slide_end_cb(void *data, Evas_Object *obj, void *event_info)
-{
- dlog_print(DLOG_INFO, LOG_TAG, "Slide has reach the end.\n");
-}
-</pre>
-
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="list" name="list" class="items-tit-h2">List Widget</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
- <p class="figure">Figure: List widget</p>
-<p style="text-align: center;"> <img alt="List widget" src="../../images/list.png" /> </p>
-
- <p class="figure">Figure: List hierarchy</p>
-<p style="text-align: center;"> <img alt="List hierarchy" src="../../images/list_tree.png" /> </p>
-
-
- <p>This widget is a very simple type of a list widget. It is not to be used to manage a lot of items. For that, genlists are a better option. </p>
-
- <p>The list items can contain a text and two contents ("start", and "end"). These are set with the <span style="font-family: Courier New,Courier,monospace">elm_object_item_*()</span> functions. </p>
-
-<h3>Adding a List Widget</h3>
-
-<pre class="prettyprint">
-Evas_Object *list, *parent;
-
-// Create a list
-list = elm_list_add(parent);
-</pre>
-
-<h3>Using the List</h3>
-
- <p>This widget implements the scrollable interface, so the scroller widget functions can be used on it. For example, if you want to change the bounce property of the scroller or the scrolling policy:</p>
-
-<pre class="prettyprint">
-Evas_Object *list;
-
-// Change the scroller policy to fix the scroll only vertically
-elm_scroller_policy_set(list, ELM_SCROLLER_POLICY_ON, ELM_SCROLLER_POLICY_OFF);
-// Enable bounce effect when the list reaches the upper and lower limits
-elm_scroller_bounce_set(list, EINA_TRUE, EINA_TRUE);
-</pre>
-
- <p>The <span style="font-family: Courier New,Courier,monospace">elm_list_multi_select_set()</span> function can be called to enable multi-selection of items. Each time an item is clicked, the state changes to "selected".</p>
-
-<pre class="prettyprint">
-Evas_Object *list;
-
-// Activate multi selection
-elm_list_multi_select_set(list, EINA_TRUE);
-</pre>
-
-<h3>Adding Item to the List</h3>
-
- <p>Items are added with <span style="font-family: Courier New,Courier,monospace">elm_list_item_append()</span> or <span style="font-family: Courier New,Courier,monospace">elm_list_item_prepend()</span>. Here an example of adding ten items with text and one icon on the front: The last two arguments are the callback function when the created item is clicked and the data passed to the callback function.</p>
-
-<pre class="prettyprint">
-Evas_Object *list;
-int i;
-
-// This function is called when the list item is selected
-static void _selected_item_cb(void *data, Evas_Object *obj, void *event_info)
-{
- Elm_Object_Item *list_it = elm_list_selected_item_get(obj);
- Eina_Bool selected = elm_list_item_selected_get(list_it);
- dlog_print(DLOG_INFO, LOG_TAG, "item is %s\n", selected? "selected": "unselected");
-}
-
-for (i = 0; i < 10; i++)
-{
- Evas_Object *ic;
- char tmp[8];
- snprintf(tmp, sizeof(tmp), "Item %02d", i);
- // Create an icon
- ic = elm_icon_add(win);
- // Set the file to the icon file
- elm_image_file_set(ic, "path/to/file", NULL);
- // Add item to the list
- elm_list_item_append(list, tmp, ic, NULL, _selected_item_cb, NULL);
-}
-
-</pre>
-
-<h3>Changing Text Or Icon of an Item</h3>
-
-<p>If you want to change the state of an item, you can do it by using all the functions relative to Elm_Object_Item. Each item of the list contains two evas_object. Give those as the third and the fourth arguments when you append or prepend the item in the list. Those evas objects are changed with <span style="font-family: Courier New,Courier,monospace">elm_object_item_part_content_set</span>. The first object is referenced as the "start" object in the theme, whereas the second one is referenced as the "end" object. Give these names when you use the <span style="font-family: Courier New,Courier,monospace">elm_object_item_part_content_set</span>. The label of the item is changed by using <span style="font-family: Courier New,Courier,monospace">elm_object_item_text_set</span>.</p>
-
-<pre class="prettyprint">
-Evas_Object *list;
-Eina_List *l;
-Elm_Object_Item *it;
-
-// Retrieve the current selected item
-it = elm_list_selected_item_get(list);
-if (!it)
- return;
-
-ic = elm_icon_add(win);
-// Set the file to the icon file
-elm_image_file_set(ic, "path/to/file", NULL);
-// Change the first icon
-elm_object_item_part_content_set(it, "start", ic);
-// Change the second icon
-elm_object_item_part_content_set(it, "end", ic);
-// Change the label
-elm_object_item_text_set(it, "I've been selected !");
-</pre>
-
-<h3>Retrieving Selected Items</h3>
-
- <p>The list of the currently selected items is retrieved with <span style="font-family: Courier New,Courier,monospace">elm_list_selected_items_get()</span>. If the multiselect mode is false, you can retrieve the only selected item with <span style="font-family: Courier New,Courier,monospace">elm_list_selected_item_get()</span>. For example, this is how to unselect all previously selected items.</p>
-
-<pre class="prettyprint">
-Evas_Object *list; Eina_List *l;
-Eina_List *selected_items;
-// List of Elm_Object_Item
-Elm_Object_Item *it;
-
-selected_items = elm_list_selected_items_get(list);
-EINA_LIST_FOREACH(selected_items, l, it)
- elm_list_item_selected_set(it, EINA_FALSE);
-</pre>
-
-<h3>List Item Operations</h3>
-
- <p>To find out if an item is selected, call <span style="font-family: Courier New,Courier,monospace">elm_list_item_selected_get</span>. This function returns EINA_TRUE if the item is selected, otherwise EINA_FALSE.</p>
-
- <p>Elementary list provides two functions for sliding a list to a specific item. <span style="font-family: Courier New,Courier,monospace">elm_list_item_show</span> shows the item passed as an argument, whereas <span style="font-family: Courier New,Courier,monospace">elm_list_item_bring_in</span> shows the item, but only after animating the slide.</p>
-
- <p>You can go to the item immediately preceding a specific item with the function <span style="font-family: Courier New,Courier,monospace">elm_list_item_prev</span>, or to the one immediately following a specific item with the function <span style="font-family: Courier New,Courier,monospace">elm_list_item_next</span>.</p>
-
- <p>The following example shows selecting the item immediately following the currently selected one, unselecting it, selecting the next one and bringing it to the screen. </p>
-
-<pre class="prettyprint">
-Evas_Object *list;
-Elm_Object_Item *current, *next;
-current = elm_list_selected_item_get(list);
-elm_list_item_selected_set(current, EINA_FALSE);
-next = elm_list_item_next(current);
-elm_list_item_selected_set(next, EINA_TRUE);
-elm_list_item_bring_in(next);
-</pre>
-
-<h3>Using List Callbacks</h3>
-
- <p>The list emits the following signals: </p>
- <ul class="ul">
- <li>"activated": The user double-clicks or presses (enter | return | spacebar) on an item. The event_info parameter of the callback function contains a pointer to the item activated.</li>
- <li>"clicked,double": The user double-clicks an item. The event_info parameter of the callback function contains a pointer to the item activated.</li>
- <li>"selected": The user selects an item. The event_info parameter of the callback function contains a pointer to the item activated.</li>
- <li>"unselected": The user unselects an item. The event_info parameter of the callback function contains a pointer to the item activated.</li>
- <li>"longpressed": The user long-presses an item. The event_info parameter of the callback function contains a pointer to the item activated.</li>
- <li>"edge,top": The list is scrolled to the top edge.</li>
- <li>"edge,bottom": The list is scrolled to the bottom edge.</li>
- <li>"edge,left": The list is scrolled to the left edge.</li>
- <li>"edge,right": The list is scrolled to the right edge.</li>
- <li>"highlighted": The user highlights an item on the list. The event_info parameter of the callback function contains a pointer to the item activated.</li>
- <li>"unhighlighted": The user unhighlights an item in the list. The event_info parameter of the callback function contains a pointer to the item activated.</li>
- </ul>
-
-<p>You can register to the "clicked,double" signal with the following code. Note that the currently double-clicked item can be retrieved via the event_info pointer. This code registers to the "double,clicked" signal and unselects the item that has been double-clicked.</p>
-
-<pre class="prettyprint">
-{
- Evas_Object *list;
-
- evas_object_smart_callback_add(list, "clicked,double", double_clicked_cb, data);
-}
-
-// Callback function for the "clicked" signal
-// This callback is called when the button is clicked by the user
-void double_clicked_cb(void *data, Evas_Object *obj, void *event_info)
-{
- elm_Object_Item *it = event_info;
- elm_list_selected_item_set(it, EINA_FALSE);
-}
-</pre>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="map" name="map" class="items-tit-h2">Map Widget</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
-
-<p class="figure">Figure: Map hierarchy</p>
-<p style="text-align: center;"> <img alt="Map hierarchy" src="../../images/map_tree.png" /> </p>
-
-<p>The map widget displays a geographic map. The default map data are provided by the OpenStreetMap project <a href="http://www.openstreetmap.org/" target="_blank">(http://www.openstreetmap.org/)</a>. Custom providers can also be added.</p>
-
-<p>This widget supports</p>
- <ul class="ul">
- <li>zooming</li>
- <li>scrolling</li>
- <li>markers with content to be displayed when user clicks over them</li>
- <li>group of markers</li>
- <li>routes</li>
- </ul>
-
-<p>The map widget implements the scroller interface so that all the functions that work with the scroller widget also work with maps.</p>
-
-<h3>Adding a Map</h3>
-
-<p>Once created with the <span style="font-family: Courier New,Courier,monospace">elm_map_add()</span> function, zoom level x12 can be set.</p>
-
-<pre class="prettyprint">
-Evas_Object *map, *parent;
-
-map = elm_map_add(parent);
-elm_map_zoom_mode_set(map, ELM_MAP_ZOOM_MODE_MANUAL);
-elm_map_zoom_set(map, 12);
-</pre>
-
-<p>Here the zoom mode is set to manual, but it can also be set to the <span style="font-family: Courier New,Courier,monospace">ELM_MAP_ZOOM_MODE_AUTO_FIT</span> mode and the <span style="font-family: Courier New,Courier,monospace">ELM_MAP_ZOOM_MODE_AUTO_FILL</span> mode. In that case however, the <span style="font-family: Courier New,Courier,monospace">elm_map_zoom_set()</span> function cannot be used.</p>
-
-<h3>Playing with the Map</h3>
-
-<p>If we have coordinates of a specific area (2 2 N, 48 8 E), we can show it on the map.</p>
-
-<pre class="prettyprint">
-elm_map_region_show(map, 2.2, 48.8);
-</pre>
-
-<p>This shows the desired coordinates. We can also show the location with a bring-in animation.</p>
-
-<pre class="prettyprint">
-elm_map_region_bring_in(map, 2.2, 48.8);
-</pre>
-
-<p>The map is rotated 90 degrees around the current position.</p>
-
-<pre class="prettyprint">
-elm_map_rotate_set(map, 90, 2.2, 48.8);
-</pre>
-
-<h3>Drawing Overlays</h3>
-
-<p>Overlays are markers that can be placed anywhere on the map. They can represent any object we want to put on the map.</p>
-
-<h4>Creating an Overlay Class</h4>
-
-<p>Overlay classes can be created if several objects are of the same type. For example, we create a forest overlay class to represent the forests visible on the map. We set the minimum zoom level at which this class is visible. The forest class overlay is visible when the zoom level is superior to eight.</p>
-
-<p>We set an icon ("Home" icon here) to the forest class. This icon is displayed in place of the forest class on the map.</p>
-
-<pre class="prettyprint">
-Evas_Object *icon;
-Elm_Map_Overlay *forest_class = elm_map_overlay_class_add(map);
-
-// Set min zoom level at which class is displayed
-elm_map_overlay_displayed_zoom_min_set(forest_class, 8);
-
-// Create a Home icon object and set it to the forest class
-icon = elm_icon_add(map);
-elm_icon_standard_set(icon, "home");
-elm_map_overlay_icon_set(forest_class, icon);
-</pre>
-
-<h4>Adding Overlays to a Class</h4>
-
-<p>After creating a forest class, we can add overlay objects to it. Here we create an overlay for the Meudon forest. Data is linked to the overlay with the <span style="font-family: Courier New,Courier,monospace">elm_map_overlay_data_set()</span> function. We set the name of the forest in the data. The icon can be set to the overlay with the <span style="font-family: Courier New,Courier,monospace">elm_map_overlay_icon_set()</span> function.</p>
-
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Do not use the same icon object for two different overlays. Create a new icon object each time you need one.</td>
- </tr>
- </tbody>
- </table>
-
-<pre class="prettyprint">
-Elm_Map_Overlay *ovl;
-const char* data_meudon = "Meudon forest";
-const char* data_fausses = "Fausse forest";
-
-// Add an overlay
-ovl = elm_map_overlay_add(map, 2.20718, 48.79759);
-icon = elm_icon_add(map);
-elm_icon_standard_set(icon, "stop");
-elm_map_overlay_icon_set(ovl, icon);
-elm_map_overlay_data_set(ovl, &data_meudon);
-
-// Add the new ovl object to the forest class
-elm_map_overlay_class_append(forest_class, ovl);
-
-// Add another overlay next to the first one
-ovl = elm_map_overlay_add(map, 2.1699, 48.8189);
-icon = elm_icon_add(map);
-elm_icon_standard_set(icon, "stop");
-elm_map_overlay_icon_set(ovl, icon);
-elm_map_overlay_data_set(ovl, &data_fausses);
-elm_map_overlay_class_append(forest_class, ovl);
-</pre>
-
-<p>If we add another overlay to the forest class, the two overlays can be grouped under the forest class icon on certain zoom level conditions. We can define on which zoom level items are grouped.</p>
-
-<pre class="prettyprint">
-elm_map_overlay_class_zoom_max_set(forest_class, 8);
-</pre>
-
-<p>In this case, overlay members of the forest class are grouped when the map is displayed at less than zoom level eight.</p>
-
-<h4>Creating Bubbles Following Overlays</h4>
-
-<p>This is how to set a content in a bubble following an overlay.</p>
-
-<pre class="prettyprint">
-// Add an overlay bubble object
-Elm_Map_Overlay *bubble = elm_map_overlay_bubble_add(map);
-
-// Set it to follow a specific overlay (the last created one here)
-elm_map_overlay_bubble_follow(bubble, ovl);
-</pre>
-
-<p>Once following an overlay, the bubble appears, moves or hides following the parent overlay's behavior.</p>
-
-<p>Content is added to the bubble with the <span style="font-family: Courier New,Courier,monospace">elm_map_overlay_bubble_content_append()</span> function.</p>
-
-<h3>Adding Other Overlays</h3>
-
-<p>We can draw a circle on the map with coordinates and a radius size.</p>
-
-<pre class="prettyprint">
-Elm_Map_Overlay *circle = elm_map_overlay_circle_add(map, 2.2, 48.8, 0.02);
-</pre>
-
-<p>We can also add a scale at the 200x0 coordinate (in pixels).</p>
-
-<pre class="prettyprint">
-Elm_Map_Overlay *scale = elm_map_overlay_scale_add(map, 200, 0);
-</pre>
-
-<p>Or we can draw a line, a polygon, or a route. See the full API for a full description of these functions.</p>
-
-<h3>Calculating Routes</h3>
-
-<p>A route between a starting point and an ending point is calculated with the <span style="font-family: Courier New,Courier,monospace">elm_map_route_add()</span> call. The type of transport and the routing calculation method can be provided so as to have the desired result.</p>
-
-<p>In this example, we want a route calculation between the first and the second overlay. We configure it to use the bicycle, and we want to find the fastest route in time.</p>
-
-<pre class="prettyprint">
-Elm_Map_Route *route = elm_map_route_add(map,
- ELM_MAP_ROUTE_TYPE_BICYCLE,
- ELM_MAP_ROUTE_METHOD_FASTEST,
- 2.20718, 48.79759,
- 2.1699, 48.8189,
- NULL, NULL);
-
-// Add a callback to when the route has been calculated and loaded
-evas_object_smart_callback_add(map, "route,loaded", _route_loaded_cb, route);
-</pre>
-
-<p>Once the route is calculated, we can create a route overlay object and change its color. In this example, we use the "route,loaded" callback.</p>
-
-<pre class="prettyprint">
-static void
-_route_loaded_cb(void *data, Evas_Object *obj, void *ev)
-{
- Elm_Map_Route *route = data;
-
- Elm_Map_Overlay *route_ovl = elm_map_overlay_route_add(obj, route);
- elm_map_overlay_color_set(route_ovl, 0, 255, 0, 255);
-}
-</pre>
-
-<h3>Using Map Callbacks</h3>
-
-<p>The map widget emits the following callbacks:</p>
-<ul class="ul">
- <li>"clicked" - The user has clicked the map without dragging around.</li>
- <li>"clicked,double" - The user has double-clicked the map.</li>
- <li>"press" - The user has pressed down on the map.</li>
- <li>"longpressed" - The user has pressed down on the map for a long time without dragging around.</li>
- <li>"scroll" - The content is scrolled (moved).</li>
- <li>"scroll,drag,start" - Dragging the contents around starts.</li>
- <li>"scroll,drag,stop" - Dragging the contents around stops.</li>
- <li>"scroll,anim,start" - Scrolling animation starts.</li>
- <li>"scroll,anim,stop" - Scrolling animation stops.</li>
- <li>"zoom,start" - Zoom animation starts.</li>
- <li>"zoom,stop" - Zoom animation stops.</li>
- <li>"zoom,change" - The zoom is changed when using an auto zoom mode.</li>
- <li>"tile,load" - A map tile image load begins.</li>
- <li>"tile,loaded" - A map tile image load ends.</li>
- <li>"tile,loaded,fail" - A map tile image load fails.</li>
- <li>"route,load" - Route request begins.</li>
- <li>"route,loaded" - Route request ends.</li>
- <li>"route,loaded,fail" - Route request fails.</li>
- <li>"name,load" - Name request begins.</li>
- <li>"name,loaded" - Name request ends.</li>
- <li>"name,loaded,fail" - Name request fails.</li>
- <li>"overlay,clicked" - An overlay is clicked.</li>
- <li>"loaded" - The map is loaded.</li>
-</ul>
-
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="notify" name="notify" class="items-tit-h2">Notify Widget</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
-
- <p class="figure">Figure: Notify hierarchy</p>
-<p style="text-align: center;"> <img alt="File analysis" src="../../images/notify_tree.png" /> </p>
-
- <p>This widget displays a container in a particular region of the parent object. It can receive some content, and can be automatically hidden after a certain amount of time.</p>
-
-<h3>Adding a Notify Widget</h3>
-
-<p>This is how to create a notify object.</p>
-
-<pre class="prettyprint">
-Evas_Object *notify, *parent;
-notify = elm_notify_add(parent);
-</pre>
-
-<h3>Configuring Notify Widget</h3>
-
-<p>We create a label and add it to the notify object.</p>
-
-<pre class="prettyprint">
-Evas_Object *content;
-
-// Create the label and set some text to it
-content = elm_label_add(parent);
-
-elm_object_text_set(content, "A label text");
-evas_object_show(content);
-
-// Add the label object to the notify widget
-elm_object_content_set(notify, content);
-</pre>
-
-<p>In this example, we show the notify object on the bottom left corner of the parent object.</p>
-
-<pre class="prettyprint">
-elm_notify_align_set(notify, 1.0, 1.0);
-evas_object_show(notify);
-</pre>
-
-<p>We can set a timeout interval, after which the notify widget is hidden. In this example, the timeout interval is five seconds.</p>
-
-<pre class="prettyprint">
-elm_notify_timeout_set(notify, 5.0);
-</pre>
-
-<h3>Using Notify Callbacks</h3>
-
-<p>The notify widget emits the following signals:</p>
- <ul class="ul">
- <li>"timeout" - The timeout count ends and the notify is hidden</li>
- <li>"block,clicked" - The user clicks outside of the notify</li>
- </ul>
-
-<p>For both these signals event_info is NULL.</p>
-
-<p>Here we register a callback on the "timeout" signal.</p>
-
-<pre class="prettyprint">
-{
- evas_object_smart_callback_add(notify, "timeout", timeout_cb, data);
-}
-
-// Callback function for the "timeout" signal
-// The timeout expires and the notify object is hidden
-
-void timeout_cb(void *data, Evas_Object *obj, void *event_info)
-{
- dlog_print(DLOG_INFO, LOG_TAG, "Notify is hidden\n");
-}
-</pre>
-
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="panel" name="panel" class="items-tit-h2">Panel Widget</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
- <p class="figure">Figure: Panel hierarchy</p>
-<p style="text-align: center;"> <img alt="Panel hierarchy" src="../../images/panel_tree.png" /> </p>
- <p>The panel widget is an animated object that can contain subobjects. It can be expanded or contracted by clicking on the button on its edge.</p>
-
- <p>Panel inherits from layout widget, so the layout API can be used on this widget.</p>
-
-<h3 id="example">Adding Panel Widget</h3>
-
-<p>This is how to add a panel and set its orientation to left.</p>
-
-<pre class="prettyprint">
-Evas_Object *panel, *parent;
-
-panel = elm_panel_add(parent);
-elm_panel_orient_set(panel, ELM_PANEL_ORIENT_LEFT);
-</pre>
-
-<h3 id="example">Using the Panel</h3>
-
-<p>The panel is manually hidden.</p>
-
-<pre class="prettyprint">
-elm_panel_hidden_set(pan, EINA_TRUE);
-</pre>
-
-<p>It can be toggled if we do not know the hidden state of the widget.</p>
-
-<pre class="prettyprint">
-elm_panel_toggle(pan);
-</pre>
-
-<p>It can be set scrollable.</p>
-
-<pre class="prettyprint">
-elm_panel_scrollable_set(pan, EINA_TRUE);
-</pre>
-
-<h3 id="example">Creating a Drawer</h3>
-
-<p>Tizen SDK has implemented a layout theme to add a drawer in the application. In this example, we add a new Elementary layout object and set the theme of this layout to the drawer.</p>
-
-<pre class="prettyprint">
-Evas_Object *layout;
-
-// Create a new layout object
-layout = elm_layout_add(parent);
-
-// Set the "drawer" group theme and "panel" style to it
-elm_layout_theme_set(layout,"layout", "drawer", "panel");
-
-// Show the new layout
-evas_object_show(layout);
-</pre>
-
-<p>Once the panel object is created, we can swallow it in the new layout.</p>
-
-<pre class="prettyprint">
-elm_object_part_content_set(layout, "elm.swallow.left", pan);
-</pre>
-
-<p>We can set content to the "elm.swallow.bg" and "elm.swallow.content" parts of the layout.</p>
-
-<pre class="prettyprint">
-// Panel Background (Dimmed Area)
-Evas_Object *bg = create_bg(layout);
-elm_object_part_content_set(layout, "elm.swallow.bg", bg);
-
-// Add content to the drawer
-Evas_Object *content;
-elm_object_part_content_set(layout, "elm.swallow.content", content);
-</pre>
-
-<h3 id="example">Using Panel Callbacks</h3>
-
-<p>We can register a callback on the "scroll" signal, when the user scrolls the panel. The event_info parameter is of the type Elm_Panel_Scroll_Info.</p>
-
-<pre class="prettyprint">
-{
- evas_object_smart_callback_add(pan, "scroll", scroll_cb, data);
-}
-// Callback function for the "scroll" signal
-// This callback is called when the user scrolls the panel
-
-void scroll_cb(void *data, Evas_Object *obj, void *event_info)
-{
- Elm_Panel_Scroll_Info *scrollinfo = event_info;
- dlog_print(DLOG_INFO, LOG_TAG, "The panel was scrolled.\n");
-}
-</pre>
-
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="photo" name="photo" class="items-tit-h2">Photo Widget</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
-
- <p class="figure">Figure: Photo hierarchy</p>
-<p style="text-align: center;"> <img alt="Photo hierarchy" src="../../images/photo_tree.png" /> </p>
-
- <p>The photo widget is used to display a photo (such as a contact image). If no photo is set on it, it displays a person icon to show that it is a photo placeholder.</p>
-
-<h3 id="example">Adding a Photo Widget</h3>
-
- <p>This is how to create a photo object.</p>
-
- <pre class="prettyprint">
-Evas_Object *photo, *parephotoslider = elm_photo_add(parent);
-photo = elm_photo_add(parent);
-</pre>
-
-<h3 id="example">Using Photo Widget</h3>
-
- <p>A file can be set to the photo widget. Here, <span style="font-family: Courier New,Courier,monospace">PHOTO_FILENAME</span> is a string corresponding to the photo file name on the system.</p>
-
-<pre class="prettyprint">
-elm_photo_file_set(photo, PHOTO_FILENAME);</pre>
-
- <p>We can set the photo as editable, so it can be copied, cut or dragged in another region of the screen.</p>
-
-<pre class="prettyprint">
-elm_photo_editable_set(photo, EINA_TRUE);</pre>
-
- <p>It can also be completely visible on the screen.</p>
-
-<pre class="prettyprint">
-elm_photo_fill_inside_set(photo, EINA_TRUE);</pre>
-
-<h3 id="example">Using Photo Callbacks</h3>
-
- <p>The following callbacks are registered on the photo widget.</p>
- <ul class="ul">
- <li>"clicked" - The user has clicked the photo.</li>
- <li>"drag,start" - The user starts dragging the inner image out of the photo's frame.</li>
- <li>"drag,end" - The user drops the dragged image.</li>
- </ul>
-
-<p>event_info is always NULL.</p>
-
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="photocam" name="photocam" class="items-tit-h2">Photocam Widget</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
-
- <p class="figure">Figure: Photocam hierarchy</p>
-<p style="text-align: center;"> <img alt="Photocam hierarchy" src="../../images/photocam_tree.png" /> </p>
-
- <p>The photocam widget displays high resolution photos taken from digital cameras. It provides a way to zoom in the photo, load it fast and fit it nicely. It is optimized for .jpeg images format and has a low memory footprint.</p>
-
- <p>This widget implements the scroller interface, so all the functions concerning the scroller can be used with the photocam widget.</p>
-
-<h3 id="example">Adding a Photocam Widget</h3>
-
-<p>This is how to create a photocam widget and set an image file on it.</p>
-
-<pre class="prettyprint">
-Evas_Object *photocam;
-photocam = elm_photocam_add(win);
-elm_photocam_file_set(photocam, "/tmp/photo.jpeg");
-</pre>
-
-<h3 id="example">Using Photocam Zoom</h3>
-
-<p>We can choose between two automatic zoom modes and a manual zoom mode. Here we set the zoom mode to manual and ask for a double zoom.</p>
-
-<pre class="prettyprint">
-elm_photocam_zoom_mode_set(photocam, ELM_PHOTOCAM_ZOOM_MODE_MANUAL);
-elm_photocam_zoom_set(photocam, 2.0);
-</pre>
-
-<p>The zoom mode can be set to <span style="font-family: Courier New,Courier,monospace">ELM_PHOTOCAM_ZOOM_MODE_AUTO_FIT</span>. In this case, the photo fits exactly inside the scroll frame with no pixels outside this region. The zoom mode can also be set to <span style="font-family: Courier New,Courier,monospace">ELM_PHOTOCAM_ZOOM_MODE_AUTO_FILL</span> to fill all the pixels of the photocam widget.</p>
-
-<p>Multi-touch zooming is activated by enabling gestures.</p>
-
-<pre class="prettyprint">
-elm_photocam_gesture_enabled_set(photocam, EINA_TRUE);
-</pre>
-
-<p>We can zoom in a specific region. In this example, we want to zoom in the region starting at the coordinates (200x200), with a width of 400px and a height of 300px.</p>
-
-<pre class="prettyprint">
-elm_photocam_image_region_bring_in(photocam, 200, 200, 400, 300);
-</pre>
-
-<h3 id="example">Using Photocam Callbacks</h3>
-
-<p>The photocam widget emits the following signals:</p>
-<ul class="ul">
- <li>"clicked" - The user has clicked the photo without dragging around.</li>
- <li>"press" - The user has pressed down on the photo.</li>
- <li>"longpressed" - The user has pressed down on the photo for a long time without dragging around.</li>
- <li>"clicked,double" - The user has double-clicked the photo.</li>
- <li>"load" - The photo load begins.</li>
- <li>"loaded" - The image file load is complete for the first view (a low resolution blurry version).</li>
- <li>"load,detail" - A photo detailed data load begins.</li>
- <li>"loaded,detail" - The image file load is complete for the detailed image data (full resolution is needed).</li>
- <li>"zoom,start" - Zoom animation starts.</li>
- <li>"zoom,stop" - Zoom animation stops.</li>
- <li>"zoom,change" - The zoom is changed when using an auto zoom mode.</li>
- <li>"scroll" - The content is scrolled.</li>
- <li>"scroll,anim,start" - Scrolling animation starts.</li>
- <li>"scroll,anim,stop" - Scrolling animation stops.</li>
- <li>"scroll,drag,start" - Dragging the content around starts.</li>
- <li>"scroll,drag,stop" - Dragging the content around stops.</li>
- </ul>
-
-<p>For all these signals, event_info is NULL.</p>
-
-<p>This is how to register a callback on the "loaded" signal.</p>
-
-<pre class="prettyprint">
-void message_port_cb(int local_port_id, const char *remote_app_id, bundle *message)
-{
- evas_object_smart_callback_add(photocam, "loaded", loaded_cb, data);
-}
-
-// Callback function for the "loaded" signal
-// The photocam has loaded the photo file in a low resolution
-
-void loaded_cb(void *data, Evas_Object *obj, void *event_info)
-{
- dlog_print(DLOG_INFO, LOG_TAG, "The photo has been loaded\n");
-}
-</pre>
-
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="plug" name="plug" class="items-tit-h2">Plug Widget</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
-
- <p class="figure">Figure: Plug hierarchy</p>
-<p style="text-align: center;"> <img alt="Plug hierarchy" src="../../images/plug_tree.png" /> </p>
-
-<p>The plug widget shows an Evas_Object created by an other process. It can be used anywhere the same way as any other elementary widget.</p>
-
-<h3 id="example">Adding Plug Widget</h3>
-
-<p>This is how to create a plug.</p>
-
-<pre class="prettyprint">
-Evas_Object *plug, *parent;
-plug = elm_plug_add(parent);
-</pre>
-
-<h3 id="example">Using the Plug</h3>
-
-<p>The socket image provides the service where we can connect the plug object with the <span style="font-family: Courier New,Courier,monospace">elm_plug_connect()</span> function. In this process we use the service name and number set by the socket we want to connect to.</p>
-
-<p>As an example, we connect to a service named "plug_test" on the number 0.</p>
-
-<pre class="prettyprint">
-elm_plug_connect(plug, "plug_test", 0, EINA_FALSE);
-</pre>
-
-<p>The Evas_Object corresponding to the distant image is retrieved with the <span style="font-family: Courier New,Courier,monospace">elm_plug_image_object_get()</span> function.</p>
-
-<pre class="prettyprint">
-Evas_Object *plug_img = elm_plug_image_object_get(plug);
-</pre>
-
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The socket we try to connect to must be started with the <span style="font-family: Courier New,Courier,monospace">elm_win_socket_listen()</span> function in the other process on the remote window object (it is called remote_win here).</td>
- </tr>
- </tbody>
- </table>
-
-<pre class="prettyprint">
-// Create a remote window in the other process
-Elm_Win *remote_win = elm_win_add(NULL,
- "Window Socket",
- ELM_WIN_SOCKET_IMAGE);
-// Create a socket named "plug_test" and listen to it
-elm_win_socket_listen(remote_win, "plug_test", 0, EINA_FALSE);
-</pre>
-
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="popup" name="popup" class="items-tit-h2">Popup Widget</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
-
-<p class="figure">Figure: Popup widget</p>
-<p style="text-align:center;"><img alt="Popup widget" src="../../images/popup.png" /></p>
-
-<p class="figure">Figure: Popup hierarchy</p>
-<p style="text-align:center;"><img alt="Popup hierarchy" src="../../images/popup_tree.png" /></p>
-
-
-<p> The popup widget shows a popup area that may contain</p>
-<ul class="ul">
-<li>a title area (optional)</li>
-<li>a content area</li>
-<li>an action area (optional)</li>
-</ul>
-
-<p>The optional title area may contain an icon and text, the action area may contain up to three buttons.</p>
-
-<h3>Adding a Popup</h3>
-
-<p>This is how to create a popup widget.</p>
-<pre class="prettyprint">
-Evas_Object *popup, *parent;
-
-// Creating a popup
-popup = elm_popup_add(parent);
-</pre>
-
-<h3>Using Popup Styles</h3>
-
-<p>A popup has two different styles.</p>
-<ul class="ul">
-<li>"popup"</li>
-<li>"toast"</li>
-</ul>
-
-<p>Here we set the style of the popup to "toast".</p>
-
-<pre class="prettyprint">elm_object_style_set(popup, "toast");</pre>
-
-<h3>Setting the Popup Areas</h3>
-
-<p>We configure the title area. We set the icon object using the part name "title,icon". We set the title text to "Test popup" using the partname "title,text".</p>
-
-<pre class="prettyprint">
-Evas_Object *icon;
-
-// Adding an icon to the title area
-elm_object_part_content_set(popup, "title,icon", icon);
-
-// Setting the title text
-elm_object_part_text_set(popup, "title,text", "Test popup");
-</pre>
-
-<p>We set the content of the popup. It can be a simple text</p>
-
-<pre class="prettyprint">elm_object_part_text_set(popup, "default", "Test popup");</pre>
-
-<p>or an Evas object.</p>
-
-<pre class="prettyprint">
-Evas_Object *content;
-
-elm_object_content_set(popup, content);
-</pre>
-
-<p>We set the buttons of the action area by creating an "OK" button, a "Cancel" button and a "Help" button.</p>
-
-<pre class="prettyprint">
-Evas_Object *button1, *button2, *button3;
-
-// Create the three buttons
-
-button1 = elm_button_add(popup);
-elm_object_text_set(button1, "OK");
-
-button2 = elm_button_add(popup);
-elm_object_text_set(button2, "Cancel");
-
-button3 = elm_button_add(popup);
-elm_object_text_set(button3, "Help");
-
-// Set the buttons to the action area
-elm_object_part_content_set(popup, "button1", button1);
-elm_object_part_content_set(popup, "button2", button2);
-elm_object_part_content_set(popup, "button3", button3);
-</pre>
-
-<h3>Using Popup Callbacks</h3>
-<p>The popup emits the following signals:</p>
-<ul class="ul">
-<li>"timeout" - The popup is closed as a result of timeout.</li>
-<li>"block,clicked" - The user clicks on the Blocked Event area.</li>
-</ul>
-
-<p><span style="font-family: Courier New,Courier,monospace">elm_popup_timeout_set()</span> is used to hide the popup after a certain time. In this example, we set the timeout to five seconds.</p>
-
-<pre class="prettyprint">elm_popup_timeout_set(popup, 5.0);</pre>
-
-<p>When the timeout expires, the "timeout" signal is sent to the user.</p>
-
-<pre class="prettyprint">{
- evas_object_smart_callback_add(popup, "timeout", _timeout_cb, data);
-}
-
-static void
-_timeout_cb(void *data, Evas_Object *obj, void *event_info)
-{
- dlog_print(DLOG_INFO, LOG_TAG, "Timeout \n");
-}
-</pre>
-
-<p>The visible region of the popup is surrounded by a translucent region called <strong>Blocked Event</strong> area. By clicking on this area, the signal "block,clicked" is sent to the application.</p>
-
- </div>
- </li>
-
-
- <li>
- <div class="devicespec-tit">
- <h2 id="progressbar" name="progressbar" class="items-tit-h2">Progressbar Widget</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
-
- <p class="figure">Figure: Progressbar widget</p>
- <p style="text-align:center;"><img alt="Progressbar widget" src="../../images/progressbar.png" /></p>
-
- <p class="figure">Figure: Progressbar hierarchy</p>
- <p style="text-align:center;"><img alt="Progressbar hierarchy" src="../../images/progressbar_tree.png" /></p>
-
-
- <h3>Adding the Progressbar Widget</h3>
-
-<p>This widget is used to display the progress status of a given job. It inherits from the layout widget, so all function concerning the layout widget is used on the progressbar widget.</p>
-<p>This is how to create a progressbar widget.</p>
-
-<pre class="prettyprint">Evas_Object *pb = elm_progressbar_add(win);</pre>
-<h3>Using Progressbar Styles</h3>
-
-<p>The progressbar has several styles:</p>
-<ul class="ul">
-<li>"default"</li>
-<li>"pending_list"</li>
-<li>"process_large"</li>
-<li>"process_medium"</li>
-<li>"process_small"</li>
-</ul>
-
-<p>We set the style of the progressbar to "pending_list".</p>
-
-<pre class="prettyprint">elm_object_style_set(pb, "pending_list");</pre>
-
-<h3>Using the Progressbar</h3>
-
-<p>By default, the progressbar does not show a label or an icon, and the unit label is set to "%.0f %%".</p>
-
-<p>This is how to set a label (in this example, it is named "Test label").</p>
-
-<pre class="prettyprint">elm_object_text_set(pb, "Test label");</pre>
-
-<p>An icon is set with <span style="font-family: Courier New,Courier,monospace">elm_object_part_content_set()</span> using the partname "icon".</p>
-<pre class="prettyprint">elm_object_part_content_set(pb, "icon", icon_object);</pre>
-
-<p>The unit label format string can be modified using a "printf" style format. We set it to be a float number with two decimals.</p>
-<pre class="prettyprint">elm_progressbar_unit_format_set(pb, "%1.2f%%");</pre>
-
-<h3>Configuring the Progressbar</h3>
-
-<p>The progressbar pulse mode is activated to make the progressbar loop infinitely between the start and end position.</p>
-
-<pre class="prettyprint">elm_progressbar_pulse_set(pb, EINA_TRUE);
-elm_progressbar_pulse(pb, EINA_TRUE);
-</pre>
-
-<p>It can be inverted. In that mode, the values are inverted so that the high values are on the left and the low values on the right.</p>
-
-<pre class="prettyprint">elm_progressbar_inverted_set(pb, EINA_TRUE);</pre>
-
-<p>The progressbar emits the "changed" signal when the progress value changes. The value is changed with the <span style="font-family: Courier New,Courier,monospace">elm_progressbar_value_set()</span> function. Here the pb progress value is set to 20%.</p>
-<pre class="prettyprint">elm_progressbar_value_set(pb, 0.2);</pre>
-
-<p>The current value can be read.</p>
-<pre class="prettyprint">double value = elm_progressbar_value_get(pb);</pre>
-
-<p>We can set the orientation of the progressbar to vertical instead of the default horizontal orientation.</p>
-<pre class="prettyprint">elm_progressbar_horizontal_set(pb, EINA_FALSE);</pre>
-
-<h3>Using Progressbar Callbacks</h3>
-
-<p>The "changed" signal is the only signal specifically emitted by the progressbar widget.</p>
-<p>This is how to register a callback on this signal.</p>
-
-<pre class="prettyprint">{
- evas_object_smart_callback_add(pb, "changed", changed_cb, data);
-}
-
-// Callback function for the "changed" signal
-// This callback is called when the progressbar value changes
-
-void changed_cb(void *data, Evas_Object *obj, void *event_info)
-{
- dlog_print(DLOG_INFO, LOG_TAG, "The value has changed\n");
-}
-</pre>
-
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="radio" name="radio" class="items-tit-h2">Radio Widget</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
-
-<p class="figure">Figure: Radio widget</p>
-<p style="text-align:center;"><img alt="Radio widget" src="../../images/radio.png" /></p>
-
-<p class="figure">Figure: Radio hierarchy</p>
-<p style="text-align:center;"><img alt="Radio hierarchy" src="../../images/radio_tree.png" /></p>
-
-<p> This widget displays one or more options, but the user can only select one of them. It is composed of an indicator (selected/unselected), an optional icon and an optional label. Usually grouped with two or more other radio objects, it can also be used alone.</p>
-<p>The radio widget inherits from the layout widget. All the layout functions can be used with radio objects.</p>
-
-<h3>Adding a Radio Widget</h3>
-
-<p>We create a radio widget and set a label to it.</p>
-<pre class="prettyprint">Evas_Object *radio, *parent;
-
-// Creating a radio
-radio = elm_radio_add(parent);
-
-// Set a label to it
-elm_object_text_set(radio, "Radio widget");
-</pre>
-
-<p>We set an icon to the radio object.</p>
-<pre class="prettyprint">
-// Create a Home icon
-Evas_Object *icon;
-
-icon = elm_icon_add(parent);
-elm_icon_standard_set(icon, "home");
-
-// Set it to the radio widget
-elm_object_part_content_set(radio, "icon", icon);
-</pre>
-
-<h3>Changing Radio Value</h3>
-
-<p>The user can select one of a set of values with the radio widget. Each radio object from a group of radio objects represents an integer value. Here we set the value one to the new radio object.</p>
-<pre class="prettyprint">elm_radio_state_value_set(radio, 1);</pre>
-
-<h3>Managing Radio Groups</h3>
-
-<p>We create a group of radio objects with at least two radio widgets.</p>
-
-<pre class="prettyprint">
-// Create another radio object
-Evas_Object *radio2 = elm_radio_add(parent);
-elm_radio_state_value_set(radio2, 2);
-
-// Create a group composed of radio and radio2
-Evas_Object *group = radio;
-elm_radio_group_add(radio2, group);
-</pre>
-
-<p>Now that we have a group composed of two radio objects, we can choose which one is selected. Here we select radio2.</p>
-
-<pre class="prettyprint">elm_radio_value_set(group, 2);</pre>
-
-<p>We can use <span style="font-family: Courier New,Courier,monospace">elm_radio_value_get()</span> to see the currently selected radio of the group.</p>
-
-<h3>Using Radio Callbacks</h3>
-
-<p>When the state of a radio is modified in a group of radio objects, the "changed" signal is emitted.</p>
-<p>This is how to register a callback on this signal.</p>
-
-<pre class="prettyprint">{
- evas_object_smart_callback_add(radio, "changed", changed_cb, data);
-}
-
-// Callback function for the "changed" signal
-// This callback is called when the radio value changes
-
-void changed_cb(void *data, Evas_Object *obj, void *event_info)
-{
- dlog_print(DLOG_INFO, LOG_TAG, "The value has changed\n");
-}
-</pre>
-
- </div>
- </li>
-
-
- <li>
- <div class="devicespec-tit">
- <h2 id="segmentcontrol" name="segmentcontrol" class="items-tit-h2">Segmentcontrol Widget</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
-
-<p class="figure">Figure: Segmentcontrol with text</p>
-<p style="text-align:center;"><img alt="Segmentcontrol with text" src="../../images/segment_text.png" /></p>
-
-<p class="figure">Figure: Segmentcontrol with icons</p>
-<p style="text-align:center;"><img alt="Segmentcontrol with icons" src="../../images/segment.png" /></p>
-
-<p class="figure">Figure: Segmentcontrol hierarchy</p>
-<p style="text-align:center;"><img alt="Segmentcontrol hierarchy" src="../../images/segment_control_tree.png" /></p>
-
-<p> This widget consists of several segment items. A segment item is similar to a discrete two state button. Any time, only one segment item can be selected. A segment item is composed of a label (text) and an icon.</p>
-<p>This widget inherits from the layout widget, so all the layout widgets API can be used on segmentcontrol objects.</p>
-
-<h3>Adding Segmentcontrol Widget</h3>
-
-<p>This is how to add a segmentcontrol widget.</p>
-
-<pre class="prettyprint">Evas_Object *segcontrol, *parent;
-
-segcontrol = elm_segment_control_add(parent);
-</pre>
-
-<h3>Adding Items</h3>
-
-<p>We can add items to it. Here we add four items containing only text labels (no icons).</p>
-<pre class="prettyprint">Elm_Object_Item *it;
-
-elm_segment_control_item_add(segcontrol, NULL, "item1");
-elm_segment_control_item_add(segcontrol, NULL, "item2");
-elm_segment_control_item_add(segcontrol, NULL, "item3");
-it = elm_segment_control_item_add(segcontrol, NULL, "item4");
-</pre>
-
-<p>We can insert an item at a specific position starting at 0</p>
-<pre class="prettyprint">elm_segment_control_item_insert_at(segcontrol, NULL, "item7", 2);</pre>
-
-<p>or delete an item.</p>
-<pre class="prettyprint">elm_segment_control_item_del_at(segcontrol, 2);</pre>
-<p>We can also set the selected state of an item manually</p>
-<pre class="prettyprint">elm_segment_control_item_selected_set(it, EINA_TRUE);</pre>
-<p>or disable the whole segment control.</p>
-<pre class="prettyprint">elm_object_disabled_set(segcontrol, EINA_TRUE);</pre>
-
-<h3>Using the Segmentcontrol Callbacks</h3>
-
-<p>This is how to register a callback on the "changed" signal. It is called when the user clicks on a segment item which is not previously selected. The event_info parameter is the segment item pointer.</p>
-<pre class="prettyprint">{
- evas_object_smart_callback_add(segcontrol, "changed", changed_cb, data);
-}
-
-// Callback function for the "changed" signal
-// This callback is called when the segcontrol selected item changes
-
-void changed_cb(void *data, Evas_Object *obj, void *event_info)
-{
- Elm_Segment_Item *it = event_info;
-
- dlog_print(DLOG_INFO, LOG_TAG, "The selected segment item has changed\n");
-}
-</pre>
-
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="slider" name="slider" class="items-tit-h2">Slider Widget</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
-
-<p class="figure">Figure: Slider widget</p>
-<p style="text-align:center;"><img alt="Slider widget" src="../../images/slider.png" /></p>
-
-<p class="figure">Figure: Slider hierarchy</p>
-<p style="text-align:center;"><img alt="Slider hierarchy" src="../../images/slider_tree.png" /></p>
-
-<p> The slider widget is a draggable bar that is used to select a value within a certain range.</p>
-
-<h3>Adding a Slider Widget</h3>
-
-<p>This is how to create a slider object.</p>
-<pre class="prettyprint">Evas_Object *slider, *parent;
-
-slider = elm_slider_add(parent);
-</pre>
-
-<h3>Using the Slider Styles</h3>
-
-<p>A slider has the following styles:</p>
-<ul class="ul">
-<li>"default"</li>
-<li>"center_point"</li>
-</ul>
-
-<p>Here we set the style to "center_point".</p>
-<pre class="prettyprint">elm_object_style_set(slider, "center_point");</pre>
-
-<p>With this style, the slider "0" point is in the middle of the widget.</p>
-
-<h3>Configuring the Slider</h3>
-<p>Orientation is set with the <span style="font-family: Courier New,Courier,monospace">elm_slider_horizontal_set()</span> function, and it is inverted the same way as the progressbar widget. Here we set it vertical and inverted.</p>
-<pre class="prettyprint">elm_slider_horizontal_set(slider, EINA_FALSE);
-elm_slider_inverted_set(slider, EINA_TRUE);
-</pre>
-
-<p>It can contain icons ("icon" and "end" partnames), a label, a unit label and an indicator label.</p>
-<pre class="prettyprint">Evas_Object *icon1, *icon2;
-
-// Set the icons
-elm_object_part_content_set(slider, "icon", icon1);
-elm_object_part_content_set(slider, "end", icon2);
-
-// Set the label
-elm_object_part_text_set(slider, "default", "slider label");
-
-// Set the unit format
-elm_slider_unit_format_set(slider, "%1.2f meters");
-</pre>
-
-<p>Before using the slider, its minimum and maximum values are set with <span style="font-family: Courier New,Courier,monospace">elm_slider_min_max_set()</span>. The current value is set with (<span style="font-family: Courier New,Courier,monospace">elm_slider_value_set()</span>). Here we set the minimum value to 0, the maximum value to 100, and the current value to 50.</p>
-<pre class="prettyprint">elm_slider_min_max_set(slider, 0.0, 100.0);
-elm_slider_value_set(slider, 50.0);
-</pre>
-
-<p>The span of the slider represents its length (horizontally or vertically). It is set with <span style="font-family: Courier New,Courier,monospace">elm_slider_span_size_set()</span> and is scaled by the object or applications scaling factor.</p>
-<p>We can retrieve the current value of the slider anytime.</p>
-
-<pre class="prettyprint">double value = elm_slider_value_get(slider);</pre>
-
-<p>By default, the slider indicator becomes bigger when the user drags it. This can be disabled if we want the slider indicator to keep its default size. Here we set the state of the indicator enlargement and then invert the behavior.</p>
-
-<pre class="prettyprint">
-// Get the current state of the indicator
-Eina_Bool enlarge = elm_slider_indicator_show_get(slider);
-
-// Invert the behavior
- elm_slider_indicator_show_set(slider, !enlarge);
- </pre>
-
-<h3>Using Slider Callbacks</h3>
-
-<p>This widget emits the following signals:</p>
-<ul class="ul">
-<li>"changed": The user changes the slider value.</li>
-<li>"slider,drag,start": Dragging the slider indicator around starts.</li>
-<li>"slider,drag,stop": Dragging the slider indicator around stops.</li>
-<li>"delay,changed": A short time after the user changes the value. This is called only when the user stops dragging for a very short period or when releases the finger or mouse, so that it avoids possibly expensive reactions to the value change.</li>
-</ul>
-
-<p>For all these signals, event_info is NULL.</p>
-<p>This is how to register a callback on the "changed" signal.</p>
-<pre class="prettyprint">{
- evas_object_smart_callback_add(slider, "changed", changed_cb, data);
-}
-
-// Callback function for the "changed" signal
-// This callback is called when the slider value changes
-
-void changed_cb(void *data, Evas_Object *obj, void *event_info)
-{
- dlog_print(DLOG_INFO, LOG_TAG, "The slider has changed\n");
-}
-</pre>
-
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="spinner" name="spinner" class="items-tit-h2">Spinner Widget</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
-<p class="figure">Figure: Spinner widget</p>
-<p style="text-align:center;"><img alt="Spinner widget" src="../../images/spin.png" /></p>
-
-<p class="figure">Figure: Spinner hierarchy</p>
-<p style="text-align:center;"><img alt="Spinner hierarchy" src="../../images/spinner_tree.png" /></p>
-
-<p> The spinner widget increases or decreases a numeric value with the arrow buttons.</p>
-
-<p>This widget inherits from the layout widget, so all functions concerning the layout widget are used on the spinner widget.</p>
-
-<h3>Adding a Spinner Widget</h3>
-<p>This is how to create a spinner object.</p>
-
-<pre class="prettyprint">
-Evas_Object *spin, *parent;
-
-spin = elm_spinner_add(parent);
-</pre>
-
-<h3>Configuring the Spinner</h3>
-
-<p>The label format is set to a different value:</p>
-<pre class="prettyprint">elm_spinner_label_format_set(spin, "%1.2f meters");</pre>
-
-<p>You can determine the result of clicking the arrow buttons. In this example, a click on an arrow increases or decreases with 2.0 units:</p>
-<pre class="prettyprint">elm_spinner_step_set(spin, 2.0);</pre>
-<p>The wrapping mode is activated. In this mode, the spinner wraps when it reaches its minimum or maximum value.</p>
-<pre class="prettyprint">elm_spinner_wrap_set(spin, EINA_TRUE);</pre>
-
-<p>We set the minimum and maximum values of the spinner.</p>
-<pre class="prettyprint">elm_spinner_min_max_set(spin, -25.0, 100.0);</pre>
-
-<p>The spinner object can be set vertical, and the change interval when the user presses the arrows long can be modified so that it changes faster.</p>
-<pre class="prettyprint">elm_object_style_set(spin, "vertical");
-elm_spinner_interval_set(spin, 0.1);
-</pre>
-
-<p>If the user has to select between text values instead of numerical values, it is possible to add our own text labels. Here spin2 object shows three numbers written in text characters.</p>
-<pre class="prettyprint">Evas_Object *spin2 = elm_spinner_add(parent);
-elm_spinner_min_max_set(spin2, 1, 3);
-elm_spinner_special_value_add(spin2, 1, "One");
-elm_spinner_special_value_add(spin2, 2, "Two");
-elm_spinner_special_value_add(spin2, 3, "Three");
-</pre>
-
-<h3>Using Spinner Callbacks</h3>
-
-<p>This widget emits the following signals:</p>
-<ul class="ul">
-<li>"changed" - The spinner value changes.</li>
-<li>"delay,changed" - A short time after the user changes the value. This is called only when the user stops dragging for a very short period or releases the finger or mouse, so that it avoids possibly expensive reactions to the value change.</li>
-</ul>
-
-<p>This is how to register a callback on the "delay,changed" signal.</p>
-
-<pre class="prettyprint">{
- evas_object_smart_callback_add(spin, "delay,changed", delay_changed_cb, data);
-}
-
-// Callback function for the "delay,changed" signal
-// This callback is called a short time after the spinner value changes
-
-void delay_changed_cb(void *data, Evas_Object *obj, void *event_info)
-{
- dlog_print(DLOG_INFO, LOG_TAG, "The spinner value has changed\n");
-}
-</pre>
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="toolbar" name="toolbar" class="items-tit-h2">Toolbar Widget</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
-
- <p class="figure">Figure: Toolbar widget</p>
- <p style="text-align:center;"><img alt="toolbar widget" src="../../images/toolbar.png" /></p>
-
- <p class="figure">Figure: Toolbar hierarchy</p>
- <p style="text-align:center;"><img alt="Toolbar hierarchy" src="../../images/toolbar_tree.png" /></p>
-
-
-<p> This widget is a scrollable list of items and shows a menu when an item is selected. Only one item can be selected at a time.</p>
-
-<h3>Adding and Configuring the Toolbar</h3>
-<p>Use the following function to create a toolbar.</p>
-<pre class="prettyprint">
-Evas_Object *toolbar, *parent;
-
-toolbar = elm_toolbar_add(parent);
-</pre>
-
-<h3>Using Toolbar Styles</h3>
-<p>The toolbar has the following styles:</p>
-<ul class="ul">
-<li>"default"</li>
-<li>"tabbar"</li>
-<li>"tabbar_with_title"</li>
-<li>"navigationbar"</li>
-</ul>
-<p>Here, we set the style to "navigationbar".</p>
-<pre class="prettyprint">
-elm_object_style_set(toolbar, "navigationbar");
-</pre>
-
-<h3>Configuring the Toolbar</h3>
-<p>The toolbar displays its items in one of the following options.</p>
-<ul class="ul">
-<li>ELM_TOOLBAR_SHRINK_NONE: Toolbar sets a minimum size to its items so that all of them fit without scrolling.</li>
-<li>ELM_TOOLBAR_SHRINK_HIDE: Toolbar does not scroll or show the items that do not fit in.</li>
-<li>ELM_TOOLBAR_SHRINK_SCROLL: Toolbar scrolls to show the items that do not fit in.</li>
-<li>ELM_TOOLBAR_SHRINK_MENU: Toolbar creates a button to popup hidden items.</li>
-</ul>
-<p>Here we set the Toolbar to ELM_TOOLBAR_SHRINK_NONE.</p>
-<pre class="prettyprint">elm_toolbar_shrink_mode_set(toolbar, ELM_TOOLBAR_SHRINK_NONE);</pre>
-<p>By default, the toolbar displays items homogeneously. Items with long labels occupy a lot of space. To avoid that, we can disable the homogeneous mode.</p>
-<pre class="prettyprint">elm_toolbar_homogeneous_set(toolbar, EINA_FALSE);</pre>
-
-<h3>Adding Items to the Toolbar</h3>
-<p>In the following code, we add two items and choose the associated icon, label, and function to call when the item is clicked.</p>
-<pre class="prettyprint">{
- Elm_Object_Item *home_it, *help_it;
-
- home_it = elm_toolbar_item_append(toolbar, "home", "Home",
- _home_item_pressed_cb, NULL);
- help_it = elm_toolbar_item_append(toolbar, "help", "Help",
- _help_item_pressed_cb, NULL);
-}
-
-static void
-_home_item_pressed_cb(void *data, Evas_Object *obj, void *event_info)
-{
- dlog_print(DLOG_INFO, LOG_TAG, "Home item clicked \n");
-}
-
-static void
-_help_item_pressed_cb(void *data, Evas_Object *obj, void *event_info)
-{
- dlog_print(DLOG_INFO, LOG_TAG, "Help item clicked \n");
-}
-</pre>
-
-<p>An item may be disabled. This is how to disable the help item. The disabled item does not receive input and, if the theme supports it, is themed differently (usually greyed out) from its normal state.</p>
-<pre class="prettyprint">elm_object_item_disabled_set(help_it, EINA_TRUE);</pre>
-
-<h3>Adding Items with States</h3>
-<p>Items have two or more states. Each state has its own icon, label, and function to call when an item is clicked. As an example, we create two states to the help item with the same icon but two different labels.</p>
-<pre class="prettyprint">
-elm_toolbar_item_state_add(help_it, "help", "Help state 1",
- _help_item_pressed_cb, NULL);
-elm_toolbar_item_state_add(help_it, "help", "Help state 2",
- _help_item_pressed_cb, NULL);
-</pre>
-<p>We can cycle through the states of the help item by using the following code.</p>
-<pre class="prettyprint">elm_toolbar_item_state_set(help_it, elm_toolbar_item_state_next(help_it));
-</pre>
-
-<h3>Using Toolbar Callbacks</h3>
-<p>This widget emits the following signals:</p>
-<ul class="ul">
-<li>"clicked": The user clicks on a toolbar item, which is selected. event_info is an object of the type Elm_Toolbar_Item.</li>
-<li>"clicked,double": The user double-clicks on a toolbar item. event_info is an object of the type Elm_Toolbar_Item.</li>
-<li>"longpressed": The toolbar is pressed for a certain amount of time. event_info is an object of the type Elm_Toolbar_Item.</li>
-<li>"language,changed" - The program language changes.</li>
-<li>"item,focused" - The item is highlighted. event_info is an object of the type Elm_Toolbar_Item.</li>
-<li>"item,unfocused" - The highlight is removed from the item. event_info is an object of the type Elm_Toolbar_Item.</li>
-<li>"scroll" - The toolbar scrolls. event_info is NULL.</li>
-<li>"scroll,anim,start" - The toolbar scrolling animation starts. event_info is NULL.</li>
-<li>"scroll,anim,stop" - The toolbar scrolling animation stops. event_info is NULL.</li>
-<li>"scroll,drag,start" - The user starts dragging the toolbar. event_info is NULL.</li>
-<li>"scroll,drag,stop" - The user stops dragging the toolbar. event_info is NULL.</li>
-</ul>
-<p>This is how to register a callback on the "clicked" signal.</p>
-<pre class="prettyprint">{
- evas_object_smart_callback_add(toolbar, "clicked", clicked_cb, data);
-}
-
-// Callback function for the "clicked" signal
-// This callback is called when a toolbar item is clicked
-
-void clicked_cb(void *data, Evas_Object *obj, void *event_info)
-{
- Elm_Toolbar_Item * item = event_info;
-
- dlog_print(DLOG_INFO, LOG_TAG, "Item clicked\n");
-}
-</pre>
-
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="tooltip" name="tooltip" class="items-tit-h2">Tooltip Widget</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
-
-<p>The tooltip widget is a smart object that shows a content in a frame when mouse hovers a parent object. The widget provides tips or information about the parent object.</p>
-
-<h3>Adding a Tooltip</h3>
-<p>The tooltip widget cannot be created with the <span style="font-family: Courier New,Courier,monospace">elm_tooltip_add()</span> function. This widget is already contained in a widget when it is created. We can only activate or disable it.</p>
-
-<h3>Activating the Tooltip</h3>
-<p>To activate the tooltip on a parent object, we can set a tooltip text to the parent object,</p>
-<pre class="prettyprint">Evas_Object *parent;
-
-elm_object_tooltip_text_set(parent, "The tooltip text";</pre>
-<p>or set a content to the parent object.</p>
-<pre class="prettyprint">{
- elm_object_tooltip_content_cb_set(parent,
- tooltip_content_cb,
- NULL,
- tooltip_content_del_cb);
-}
-
-Evas_Object*
-tooltip_content_cb(void*data, Evas_Object *obj, Evas_Object *tooltip)
-{
- // Create the tooltip content
-}
-
-void tooltip_content_del_cb(void *data, Evas_Object *obj, void *event_info)
-{
- // Destroy the tooltip content
-}
-</pre>
-
-<p>When passing content to the tooltip, the <span style="font-family: Courier New,Courier,monospace">tooltip_content_cb</span> function is called each time the tooltip is showed. The role of this function is to create the content to set in the tooltip. It returns a pointer to an Evas_Object.</p>
-<p>When the tooltip disappears, the <span style="font-family: Courier New,Courier,monospace">tooltip_content_del_cb</span> function is called. This function is in charge of deleting the previously allocated Evas_Object.</p>
-<p>Once set, the tooltip can be manually hidden or shown.</p>
-
-<pre class="prettyprint">elm_object_tooltip_hide(parent);
-elm_object_tooltip_show(parent);
-</pre>
-
-<p>The tooltip can be removed from the parent object when it is not needed.</p>
-<pre class="prettyprint">elm_object_tooltip_unset(parent);</pre>
-
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">When content is set into the tooltip object, unsetting it calls the callback provided as del_cb to notify that the tooltip cannot be used any longer.</td>
- </tr>
- </tbody>
- </table>
-
-<p>A tooltip object is not a widget, so it does not emit signals. There are no registered callbacks for it.</p>
-
-
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="win" name="win" class="items-tit-h2">Win Widget</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
-
- <p class="figure">Figure: Win hierarchy</p>
- <p style="text-align:center;"><img alt="Win hierarchy" src="../../images/win_tree.png" /></p>
-
-
-<p> The window widget is the root widget that is often used in an application. It allows the developer create content in it, and it is handled by the window manager.</p>
-<p>The window widget is created with <span style="font-family: Courier New,Courier,monospace">elm_win_add()</span> or <span style="font-family: Courier New,Courier,monospace">elm_win_util_standard_add()</span>. Content can be added in the window with <span style="font-family: Courier New,Courier,monospace">elm_win_resize_object_add()</span> so that a window resize also resizes the content inside.</p>
-
-<h3>Adding a Window Widget</h3>
-
-<p>Create a new window and change the title.</p>
-<pre class="prettyprint">
-Evas_Object *window;
-
-// Creating a window
-window = elm_win_add(NULL, "main", ELM_WIN_BASIC);
-
-// Change window title
-elm_win_title_set(window, "Example Window");
-</pre>
-
-<p>The first element of <span style="font-family: Courier New,Courier,monospace">elm_win_add()</span> is the parent window. For example, for a dialog you want to have the main window as the parent. Here, it is NULL meaning there is no parent. "main" is the name of the window used by the window manager for identifying the window uniquely amongst all the windows within this application (and all instances of the application). The type is a basic window (the final parameter).</p>
-
-<p>Create a new window with a title and a background. This API is a shortcut of the previous one. It also creates a standard background to the window with <span style="font-family: Courier New,Courier,monospace">elm_bg_add</span>. The window created is of the type ELM_WIN_BASIC.</p>
-
-<pre class="prettyprint">
-Evas_Object *window;
-
-// Creating a standard window
-
-window = elm_win_util_standard_add("main", "Example Window");
-</pre>
-
-<h3>Closing a Window</h3>
-<p>When the user closes the window outside of the program control, a "delete,request" signal is emitted to indicate that this event occurred. The developer can take any action, for example, destroy the window object.</p>
-<p>When the autodel parameter is set, the window is automatically destroyed after the signal is emitted. If autodel is <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span>, the window is not destroyed and the program does so when required. The default is <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span>, where the window is not destroyed automatically.</p>
-<p>The autodel is set using the following call:</p>
-<pre class="prettyprint">elm_win_autodel_set(window, EINA_TRUE);</pre>
-
-<p>To close the window, use the <span style="font-family: Courier New,Courier,monospace">evas_object_del</span> API. The window is destroyed and the signal "delete,request" is sent.</p>
-
-<h3>Using the Window Callbacks</h3>
-<p>The window widget emits the following signals:</p>
-<ul class="ul">
-<li>"focus,in": The window received focus.</li>
-<li>"focus,out": The window lost focus.</li>
-<li>"moved": The window that holds the canvas is moved.</li>
-<li>"withdrawn": The window is managed normally but is removed from the view.</li>
-<li>"iconified": The window is minimized (for example, into an icon or a taskbar).</li>
-<li>"normal": The window is in the normal state (not withdrawn or iconified).</li>
-<li>"stick": The window shows on all desktops.</li>
-<li>"unstick": The window shows only on one desktop.</li>
-<li>"fullscreen": The window is fullscreen.</li>
-<li>"unfullscreen": The window stops being fullscreen.</li>
-<li>"maximized": The window is maximized.</li>
-<li>"unmaximized": The window is diminished.</li>
-<li>"wm,rotation,changed": The rotation of the window is changed by the Windows Manager.</li>
-<li>"ioerr": A low-level I/O error occurred in the display system.</li>
-</ul>
-<p>With all these signals, event_info is NULL.</p>
-<p>This is an example to register a callback function called on the "fullscreen" signal.</p>
-<pre class="prettyprint">{
- evas_object_smart_callback_add(window, "fullscreen", fullscreen_cb, data);
-}
-
-// Callback function for the "fullscreen" signal
-// This callback is called when the window becomes fullscreen
-
-void fullscreen_cb(void *data, Evas_Object *obj, void *event_info)
-{
- dlog_print(DLOG_INFO, LOG_TAG, "Window fullscreen\n");
-}
-</pre>
-
- </div>
- </li>
-
-
-
-
- </ul>
-</div>
-</div>
-
-<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 is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</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>Widget Preferences</title>
- </head>
- <body onload="prettyPrint()" style="overflow: auto;">
-
- <div id="navigation">
- <div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
- </div>
-
- <div id="toc_border"><div id="toc">
- <p class="toc-title">Content</p>
- <ul class="toc">
- <li><a href="#customize">Customizing Widgets</a></li>
- <li><a href="#focus">Managing Widget Focus</a></li>
- <li><a href="#style">Using Widget Styles</a></li>
- </ul>
- <p class="toc-title">Related Info</p>
- <ul class="toc">
- <li><a href="../../../../org.tizen.tutorials/html/native/ui/ui_control_tutorials_n.htm">UI Control Tutorials</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API</a></li>
- </ul>
- </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-
- <h1>Widget Preferences</h1>
-
- <h2 id="customize" name="customize">Customizing Widgets</h2>
-
-
-<p>Elementary widgets use the Edje library EDC themes to manage their look.</p>
-
-<h3 id="elm_theme" name="elm_theme">Elementary Theme</h3>
-
-<p>An Elementary theme is an Edje EDC file that contains groups composed of parts and programs. For more information about Edje, refer to the <a href="edje_n.htm">Edje</a> guide.</p>
-
-<h4 id="use_theme_styles" name="use_theme_styles">Use Theme Styles</h4>
-
-<p>Elementary widgets provide a way to modify only some parts of the styles using the default theme. A style is a part of the EDC theme (a group) that concerns only one widget. For example, you can create a new style for a button widget to change its appearance without modifying the default theme.</p>
-
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">When creating a new style, knowledge of how each widget is themed is required, because setting another style always replaces the entire group used by the widget. Important signals and parts must be there for the object to behave properly.</td>
- </tr>
- </tbody>
- </table>
-
-<p>When several styles are loaded in the current theme, you can set a different style to a specific widget using the <span style="font-family: Courier New,Courier,monospace">elm_object_style_set()</span> function. It is also possible to see the current style with the <span style="font-family: Courier New,Courier,monospace">elm_object_style_get()</span> function.</p>
-
-<p>The default theme specifies several styles for the button widget. The code below shows how to set the "anchor" style of a newly created button widget.</p>
-
-<pre class="prettyprint">
-Evas_Object *parent, *button;
-
-// Create a button object
-button = elm_button_add(parent);
-
-// Set its style to "anchor""
-elm_object_style_set(button, "anchor");
-</pre>
-
-<h4 id="load_theme_styles" name="load_theme_styles">Load Theme Styles</h4>
-
-<p>Once written and compiled with Edje tools, the Elementary provides two methods to load the style in the application theme:</p>
- <ul>
- <li>overlays</li>
- <li>extensions</li>
- </ul>
-
-<p>When looking for a theme, the Elementary checks the list of overlays, if any are defined. Then it takes the default theme, and if it cannot find a theme for the widget, it looks at the extensions list.</p>
-
-<h5 id="overlay_chapter" name="overlay_chapter">Overlay</h5>
-
-<p>An overlay can replace the look of all widgets by overriding the default style. If we create a new style called "default" for the button widget and add it as an overlay, the Elementary uses the overlay for all button widgets overriding the default theme.</p>
-
-<p>Here is how to add an overlay to your application's theme.</p>
-
-<pre class="prettyprint">
-elm_theme_overlay_add(NULL, "./theme_button.edj");
-</pre>
-
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Here we assume that the "theme_button.edj" file only contains a new theme for the button widget.</td>
- </tr>
- </tbody>
- </table>
-
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Doing this is not recommended. Adding a file as an overlay makes the Elementary use the new theme for all the button widgets defined in the application. You must make sure that the "theme_button.edj" file reimplements everything that was previously defined in the default theme concerning the button widget.</td>
- </tr>
- </tbody>
- </table>
-
-<p>This is how to remove the previously added overlay to return to the default theme.</p>
-
-<pre class="prettyprint">
-elm_theme_overlay_del(NULL, "./theme_button.edj");
-</pre>
-
-<h5 id="extension" name="extension">Extension</h5>
-
-<p>With extensions, we can write styles that we can apply to some widgets (not all of them) by using the <span style="font-family: Courier New,Courier,monospace">elm_object_style_set()</span> function.</p>
-
-<p>The application adds a theme to the list of extensions with the following call.</p>
-
-<pre class="prettyprint">
-elm_theme_extension_add(NULL, "./theme_button_style_custom.edj");
-</pre>
-
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Here we assume that the "theme_button_style_custom.edj" file contains a new button style called "custom".</td>
- </tr>
- </tbody>
- </table>
-
-<p>This is how to use the new "custom" style on a button widget.</p>
-
-<pre class="prettyprint">
-Evas_Object *parent, *button;
-
-// Create a button object
-button = elm_button_add(parent);
-
-// Set its style to "custom"
-elm_object_style_set(button, "custom");
-</pre>
-
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">When using <span style="font-family: Courier New,Courier,monospace">elm_theme_extension_add</span> or <span style="font-family: Courier New,Courier,monospace">elm_theme_overlay_add</span> to add a new theme extension or overlay to a Theme object (here called the default theme), the Elementary calls the <span style="font-family: Courier New,Courier,monospace">elm_theme_flush</span> function to flush Elementary theme caches. Thus, the theme of all widgets that use the default theme is reloaded.</td>
- </tr>
- </tbody>
- </table>
-
-<h4 id="create_new_theme" name="create_new_theme">Create a New Theme</h4>
-
-<p>This is how to create a new theme object.</p>
-
-<pre class="prettyprint">
-Elm_Theme *new_theme = elm_theme_new();
-</pre>
-
-<p>This function creates an empty specific theme that only uses the default theme. It has its own private set of extensions and overlays (which are empty by default). Specific themes do not fall back to the themes of parent objects. They are not intended for this use.</p>
-
-<p>This is how to apply this theme to a widget and its children (a button, for example).</p>
-
-<pre class="prettyprint">
-// Create a button widget
-Evas_Object *button = elm_button_add();
-
-// Set the new theme to the button widget
-elm_object_theme_set(button, new_theme);
-</pre>
-
-<h3 id="customizing_widget_style" name="customizing_widget_style">Customizing a Widget Style</h3>
-
-<p>Widget themes are written in Edje EDC source files (.edc). These files are compiled with Edje tools to make an .edj file that is used by the application. For more information on using the EDC language, see the <a href="edje_n.htm">Edje</a> guide.</p>
-
-<p>A new Edje style can be added for a widget. The best way is to copy the existing "default" style, rename it, and update it to your needs.</p>
-
-<h4 id="check_widget_custom_style" name="check_widget_custom_style">Create a Customized Style for the Check Widget</h4>
-
-<p>As an example, we show how to create a new style for the <span style="font-family: Courier New,Courier,monospace">check</span> widget. The aim is to update the background and the main pictures of this widget with custom pictures.</p>
-
-<p>The EDC source file concerning the check widget (check.edc file) is composed of several groups.</p>
-
-<pre class="prettyprint">
-group
-{
- name: "elm/check/base/default";
-}
-
-group
-{
- name: "elm/check/base/toggle";
-}
-</pre>
-
-<p>Those two groups define two different styles for the check widget (the "default" style and the "toggle" style).</p>
-
-<p>We copy the group corresponding to the "default" style in a new file to create a new style called "custom". This new style is saved in the "check_custom.edc" file.</p>
-
-<pre class="prettyprint">
-group
-{
- name: "elm/check/base/custom";
- // Here is the copy of the content of "default" style
-}
-</pre>
-
-<p>In the new group ("elm/check/base/custom"), we have to find the parts we want to modify. Here, the appropriate parts are "bg" and "check" parts.</p>
-
-<pre class="prettyprint">
-part
-{
- name: "bg";
- mouse_events: 0;
- scale: 1;
- description
- {
- state: "default" 0.0;
- rel1.offset: 1 1;
- rel2.relative: 0.0 1.0;
- rel2.offset: 1 -2;
- align: 0.0 0.5;
- min: 16 16;
- max: 16 16;
- aspect: 1.0 1.0;
- aspect_preference: VERTICAL;
- image
- {
- normal: "check_base.png";
- border: 5 5 5 5;
- middle: 0;
- }
- fill.smooth: 0;
- }
-}
-part
-{
- name: "check";
- mouse_events: 0;
- scale: 1;
- description
- {
- state: "default" 0.0;
- rel1
- {
- to: "bg";
- offset: 1 1;
- }
- rel2
- {
- to: "bg";
- offset: -2 -2;
- }
- visible: 0;
- color: 255 255 255 255;
- image.normal: "check.png";
- }
- description
- {
- state: "visible" 0.0;
- inherit: "default" 0.0;
- visible: 1;
- }
- description
- {
- state: "disabled" 0.0;
- inherit: "default" 0.0;
- visible: 0;
- color: 128 128 128 128;
- }
- description
- {
- state: "disabled_visible" 0.0;
- inherit: "default" 0.0;
- color: 128 128 128 128;
- visible: 1;
- }
-}
-</pre>
-
-<p>We do not detail all the options that can be modified here, but assume that the user is familiar with <a href="edje_n.htm">Edje</a> and knows Edje basics.</p>
-
-<p>Our custom pictures filenames are:</p>
- <ul>
- <li>check_base_custom.png for the bg part</li>
- <li>check_custom.png for the check part</li></ul>
-
-<p>We must update the image.normal attribute in both parts with our custom pictures filenames to modify the pictures of this style.</p>
-
-<pre class="prettyprint">
-part
-{
- name: "bg";
- description
- {
- state: "default" 0.0;
-
- image
- {
- normal: "check_base_custom.png";
- border: 5 5 5 5;
- middle: 0;
- }
-
- }
-}
-part
-{
- name: "check";
-
- description
- {
- state: "default" 0.0;
-
- image.normal: "check_custom.png";
- }
-
-}
-</pre>
-
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Here, we assume that the custom images are the same size as the "default" images.</td>
- </tr>
- </tbody>
- </table>
-
-<h4 id="add_theme_to_project" name="add_theme_to_project">Add the Theme File to Your Project</h4>
-
-<p>Once written, the check_custom.edc file is put in the <span style="font-family: Courier New,Courier,monospace">/res/edje/</span>. directory of the application project in the SDK.</p>
-
-<p>When building the application, the SDK calls the Edje tools automatically to build the final <span style="font-family: Courier New,Courier,monospace">check_custom.edj</span> file. This file can be loaded from our application.</p>
-
-<h4 id="use_new_style" name="use_new_style">Use the New Style</h4>
-
-<p>This is how to add the new theme file as an extension in the application.</p>
-
-<pre class="prettyprint">
-char edj_path[PATH_MAX] = {0, };
-
-// Get the full path of the edj file
-app_get_resource("/edje/check_custom.edj", edj_path, (int)PATH_MAX);
-
-// Load check custom style as an extension
-elm_theme_extension_add(NULL, edj_path);
-</pre>
-
-<p>Use the "custom" style on a new check widget.</p>
-
-<pre class="prettyprint">
-Evas_Object *parent, *check;
-
-// Create a check object
-check = elm_check_add(parent);
-
-// Set its style to "custom"
-elm_object_style_set(check, "custom");
-</pre>
-
-<h4 id="special_theme_parts" name="special_theme_parts">Special Theme Parts</h4>
-
-<p>Some parts of the EDC file can be interacted with the Elementary. The content of parts of the type <span style="font-family: Courier New,Courier,monospace">TEXT</span> are modified using the <span style="font-family: Courier New,Courier,monospace">elm_object_part_set_text()</span> function. The content of <span style="font-family: Courier New,Courier,monospace">SWALLOW</span> parts is updated using the <span style="font-family: Courier New,Courier,monospace">elm_object_part_content_set()</span> function.</p>
-
-<h5 id="swallow_parts" name="swallow_parts">Swallow Parts</h5>
-
-<p>In the previous example (the check widget "default" style), there is a part called "elm.swallow.content" that is of the type <span style="font-family: Courier New,Courier,monospace">SWALLOW</span>.</p>
-
-<pre class="prettyprint">
-part
-{
- name: "elm.swallow.content";
- type: SWALLOW;
- scale: 1;
- description
- {
- state: "default" 0.0;
- fixed: 1 0;
- visible: 0;
- align: 0.0 0.5;
- rel1.to_x: "bg";
- rel1.relative: 1.0 0.0;
- rel1.offset: 1 1;
- rel2.to_x: "bg";
- rel2.offset: 1 -2;
- rel2.relative: 1.0 1.0;
- }
- description
- {
- state: "visible" 0.0;
- inherit: "default" 0.0;
- fixed: 1 0;
- visible: 1;
- aspect: 1.0 1.0;
- min: 16 16;
- }
- description
- {
- state: "disabled" 0.0;
- inherit: "default" 0.0;
- color: 255 255 255 128;
- }
- description
- {
- state: "disabled_visible" 0.0;
- inherit: "default" 0.0;
- color: 255 255 255 128;
- fixed: 1 0;
- visible: 1;
- aspect: 1.0 1.0;
- }
-}
-</pre>
-
-<p>We can push content (Evas_Object) to this part from the application anytime. The size and position of the content pushed is controlled by the EDC theme.</p>
-
-<pre class="prettyprint">
-Evas_Object *parent, *check1, *content;
-
-// Create a check object
-check1 = elm_check_add(parent);
-
-// Set the content of the check object
-elm_object_part_content_set(check1, "elm.swallow.content", content);
-</pre>
-
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">We can add new <span style="font-family: Courier New,Courier,monospace">SWALLOW</span> parts when customizing a widget's style, if we want to be able to control more content from the application. Note that removing existing <span style="font-family: Courier New,Courier,monospace">SWALLOW</span> parts changes the widget's behavior.</td>
- </tr>
- </tbody>
- </table>
-
-<h5 id="text_parts" name="text_parts">Text Parts</h5>
-
-<p>The same is done with parts of the type <span style="font-family: Courier New,Courier,monospace">TEXT</span>. The check "default" style contains a part named "elm.text".</p>
-
-<pre class="prettyprint">
-part
-{
- name: "elm.text";
- type: TEXT;
- mouse_events: 0;
- scale: 1;
- description
- {
- state: "default" 0.0;
- visible: 0;
- rel1.to_x: "elm.swallow.content";
- rel1.relative: 1.0 0.0;
- rel1.offset: 1 1;
- rel2.relative: 1.0 1.0;
- rel2.offset: -2 -2;
- color: 0 0 0 255;
- text
- {
- font: "Sans,Edje-Vera";
- size: 10;
- min: 0 1;
- align: -1.0 0.5;
- }
- }
- description
- {
- state: "visible" 0.0;
- inherit: "default" 0.0;
- visible: 1;
- text.min: 1 1;
- }
- description
- {
- state: "disabled" 0.0;
- inherit: "default" 0.0;
- color: 0 0 0 128;
- color3: 0 0 0 0;
- }
- description
- {
- state: "disabled_visible" 0.0;
- inherit: "default" 0.0;
- color: 0 0 0 128;
- color3: 0 0 0 0;
- visible: 1;
- text.min: 1 1;
- }
-}
-</pre>
-
-<p>This is how to modify the content of the "elm.text" part from the application. The position of the text, its size, color, look and feel are managed by the EDC theme.</p>
-
-<pre class="prettyprint">
-Evas_Object *parent, *check2;
-
-// Create a check object
-check2 = elm_check_add(parent);
-
-// Set the text of the check object
-elm_object_part_text_set(check2, "elm.text", "Test text");
-</pre>
-
- <h2 id="focus" name="focus">Managing Widget Focus</h2>
-
-<h3 id="Presentation" name="Presentation">Focus Presentation</h3>
-
-<h4>Concept of Focus</h4>
-<p>Focus is a graphical user interface concept. A component, for example, a widget, has a focus when it is selected to receive input from the user. The input can be an event, such as mouse button click or key press.</p>
-
-<h4>Giving Focus</h4>
-
-<p>Focusing can be immediate (selected by the touchscreen or mouse) or relative (selected by a key press).</p>
-
-<p>There are mainly two ways to set focus on a graphical elements:</p>
-
-<ul>
-<li>Direct selection: this is done by clicking on the element.</li>
-<li>Relative selection: this is done by moving the selection from a widget to another, such as going to the previous or next one; this is done with a keyboard.</li>
-</ul>
-
-<p>Direct selection does not really need any kind of special treatment as the user explicitly selects the widget to interact with.</p>
-
-<p>Relative selection' default order is the one the widgets have been added to the canvas. That may not be appropriate, if they are added programmatically in different order than they appear on-screen.</p>
-
-<h3 id="Movement" name="Movement">Moving Focus</h3>
-
-<h4>Concept of Focus Chain</h4>
-<p>The order the focus goes from a widget to another is called the focus chain. As said before, the default focus chain is set to the order the widgets have been added to the canvas.</p>
-
-<h4>Focusable Objects</h4>
-<p>An object can be focused if the following conditions apply:</p>
-
-<ul>
-<li>object is visible</li>
-<li>object is enabled</li>
-<li>object accepts focus</li>
-<li>object's subtree (if any) is focusable</li>
-<li>all of object's parents have their subtrees focusable</li>
-</ul>
-
-<p>If any of these conditions do not apply, the object is unfocusable.</p>
-
-<h4>Handling Key Input</h4>
-
-<p>Handling of the keys is done automatically by Elementary. According to which key the user pressed, Elementary switches the focus in the selected direction. For example, using the <span style="font-family: Courier New,Courier,monospace;">Tab</span> key the focus goes to the next object in the natural order, whereas using the direction keys the focus goes to the next object in the requested direction.</p>
-
-<h4>Hiding, Deleting or Disabling a Focused Object</h4>
-
-<p>When a widget is hidden, deleted, or disabled, it becomes unfocusable.</p>
-
-<p>When a focused object is unfocusable, the focus is moved to another object.</p>
-
-<h4>Selecting Next Object</h4>
-
-<p>When the user wants to switch the focus to the next object (i.e. cycle focus), Elementary searches the first object which is focusable.</p>
-
-<p>If there is a disabled or read-only object in the focus chain, the focus goes to the following object in the requested direction.</p>
-
-<h3 id="Customization" name="Customization">Customizing Focus</h3>
-
-<p>There are several reasons why to customize the focus chain of an application, for example:</p>
-
-<ul>
-<li>If you have created a form with labels and text entries next to them, the focus moves to the entry field when the user clicks on the associated label.</li>
-<li>If you have created an interface with several columns (table), set the focus chain as you wish, for example, going horizontally instead of going vertically, regardless whatever the order the widgets are added.</li>
-</ul>
-
-<h4>Customizing Object's Focus Exit Chain </h4>
-
-<p>Set the object to focus after other object in a specific direction using <span style="font-family: Courier New,Courier,monospace;">elm_object_focus_next_object_set(object, next, direction)</span>. Use the following directions:</p>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">ELM_FOCUS_NEXT</span>: next widget in natural order</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ELM_FOCUS_PREVIOUS</span>: previous widget in natural order</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ELM_FOCUS_UP</span>: widget to focus when going up</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ELM_FOCUS_DOWN</span>: widget to focus when going down</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ELM_FOCUS_RIGHT</span>: widget to focus when going right</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ELM_FOCUS_LEFT</span>: widget to focus when going left</li>
-</ul>
-
-<p>Set the object next to another in a specific direction using <span style="font-family: Courier New,Courier,monospace;">elm_object_focus_next_object_get(object, direction)</span>.</p>
-
-<h4>Customizing Whole Application's Focus Chain</h4>
-
-<p>To customize the application's custom chain:</p>
-
-<pre class="prettyprint">
-Evas_Object *main, obj1, obj2, obj3, obj4, obj5;
-
-Eina_List *focus_chain = NULL;
-focus_chain = eina_list_append(focus_chain, obj3);
-focus_chain = eina_list_append(focus_chain, obj2);
-// The chain is obj3, then obj2. We set it.
-elm_object_focus_custom_chain_set(main, focus_chain);
-// Here we prepend obj5 at the beginning of the chain.
-elm_object_focus_chain_prepend(main, NULL, obj5);
-// We append obj1 after obj3.
-elm_object_focus_chain_append(main, obj3, obj1);
-// We prepend obj4 before obj1.
-elm_object_focus_chain_prepend(main, obj1, obj4);
-</pre>
-
-<p>The focus chain is <span style="font-family: Courier New,Courier,monospace;">obj5, obj3, obj4, obj1, obj2</span>.</p>
-
-<p>This actually applies to any container: it is possible to set the focus chain of, for example, a box.</p>
-
-<h4>Customizing Collision of Both</h4>
-
-<p>If an object is part of a focus chain and has the next focused object defined, the next object takes precedence over the focus chain.</p>
-
-<p>Following on the previous example, if <span style="font-family: Courier New,Courier,monospace;">obj4</span> has <span style="font-family: Courier New,Courier,monospace;">obj5</span> defined as its next object, the actual focus chain is <span style="font-family: Courier New,Courier,monospace;">obj5, obj3, obj4</span>, and loop back to <span style="font-family: Courier New,Courier,monospace;">obj5</span>.</p>
-
-<h3 id="On_Widget" name="On_Widget">Focus on Widget </h3>
-
-<p>If your Evas object has several sub-objects, set its focus chain using the same functions as for the application. Elementary first follows the main focus chain, and then the focus chain of each widget if applicable.</p>
-
-<p>Use <span style="font-family: Courier New,Courier,monospace;">elm_object_focus_get(object)</span> to set whether a specific object has the focus. Set the focus to an object using <span style="font-family: Courier New,Courier,monospace;">elm_object_focus_set(object, set)</span>, where <span style="font-family: Courier New,Courier,monospace;">set</span> is a Boolean value. If it is set to <span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span>, the focus is set to that given object. If it is set to <span style="font-family: Courier New,Courier,monospace;">EINA_False</span>, the focus is unset and passed back to the previous element in the focus chain. Set the focus only after the object is shown, that is, after <span style="font-family: Courier New,Courier,monospace;">evas_object_show(object)</span> has been called. Call the function back when the object receives or loses focus by registering on smart event "focused" or "unfocused"</p>
-
-<p>Use <span style="font-family: Courier New,Courier,monospace;">elm_object_tree_focus_allow_set(object, focusable)</span> to tell Elementary whether an object and its children are focusable, where <span style="font-family: Courier New,Courier,monospace;">focusable</span> is a Boolean value. Get the current value using <span style="font-family: Courier New,Courier,monospace;">elm_object_tree_focus_allow_get(object)</span>.</p>
-
-<p>The similar functions for a specific object are <span style="font-family: Courier New,Courier,monospace;">elm_object_focus_allow_set(object, focusable)</span> and <span style="font-family: Courier New,Courier,monospace;">elm_object_focus_allow_get(object)</span>. </p>
-
-
- <h2 id="style" name="style">Using Widget Styles</h2>
-
-<p>For each winset, there are many styles supported in the native framework. Following the concept of the native framework in EFL, apply styles using the <span style="font-family: Courier New,Courier,monospace">elm_object_style_set</span> function.</p>
-
-<p>The following tables list the styles for each winset, including the names of the styles, and the name of the part where to set text or some other <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> in the widget.</p>
-
-<table>
-<caption>Table: Button styles</caption>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
- <th>Text part</th>
- <th>Swallow part</th>
- <th>Notes</th>
-</tr>
- <tr>
- <td>elm/button/base/default</td>
- <td><img src="../../images/button_default.png" /> </td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
- <td></td>
- </tr>
- <tr>
- <td>elm/button/base/anchor</td>
- <td><img src="../../images/button_anchor.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
- <td></td>
- </tr>
- <tr>
- <td>elm/button/base/bottom</td>
- <td><img src="../../images/bottom.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
- <td>This style is used widely at the bottom of the screen.</td>
- </tr>
- <tr>
- <td>elm/button/base/circle</td>
- <td><img src="../../images/button_circle.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
- <td></td>
- </tr>
- <tr>
- <td>elm/button/base/dropdown</td>
- <td><img src="../../images/button_dropdown.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td></td>
- <td></td>
- </tr>
- <tr>
- <td>elm/button/base/hoversel_horizontal/default</td>
- <td><img src="../../images/button_hoversel.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
- <td></td>
- </tr>
- <tr>
- <td>elm/button/base/hoversel_horizontal_entry/default</td>
- <td><img src="../../images/button_hoversel_entry.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
- <td></td>
- </tr>
- <tr>
- <td>elm/button/base/hoversel_vertical/default</td>
- <td><img src="../../images/button_hover_v.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
- <td></td>
- </tr>
- <tr>
- <td>elm/button/base/hoversel_vertical_entry/default</td>
- <td><img src="../../images/button_hover_v_entry.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
- <td></td>
- </tr>
- <tr>
- <td>elm/button/base/icon_reorder</td>
- <td><img src="../../images/button_recorder.png" /></td>
- <td></td>
- <td></td>
- <td></td>
- </tr>
- <tr>
- <td>elm/button/base/naviframe/drawers</td>
- <td><img src="../../images/button_drawers.png" /></td>
- <td></td>
- <td></td>
- <td></td>
- </tr>
- <tr>
- <td>elm/button/base/naviframe/title_cancel</td>
- <td><img src="../../images/button_title_cancel.png" /></td>
- <td></td>
- <td></td>
- <td></td>
- </tr>
- <tr>
- <td>elm/button/base/naviframe/title_done</td>
- <td><img src="../../images/button_title_done.png" /></td>
- <td></td>
- <td></td>
- <td></td>
- </tr>
- <tr>
- <td>elm/button/base/option</td>
- <td><img src="../../images/button_option.png" /></td>
- <td></td>
- <td></td>
- <td></td>
- </tr>
- </tbody>
-</table>
-
-<table>
-<caption>Table: Check styles</caption>
-<col width="20%"/>
-<col width="80%"/>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
-</tr>
- <tr>
- <td>elm/check/base/default</td>
- <td><img src="../../images/check_default.png" /></td>
- </tr>
- <tr>
- <td>elm/check/base/favorite</td>
- <td><img src="../../images/check_favorite.png" /></td>
- </tr>
- <tr>
- <td>elm/check/base/on&off</td>
- <td><img src="../../images/check_on_off.png" /></td>
- </tr>
- </tbody>
-</table>
-
-<table>
-<caption>Table: Colorselector styles</caption>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
- <th>Notes</th>
-</tr>
- <tr>
- <td>elm/colorselector/item/color/colorplane</td>
- <td><img src="../../images/color_colorplane.png" /></td>
- <td>Use the following command: <span style="font-family: Courier New,Courier,monospace">elm_colorselector_mode_set(colorselector, ELM_COLORSELECTOR_PALETTE);</span></td>
- </tr>
- </tbody>
-</table>
-
-<table>
-<caption>Table: Progressbar styles</caption>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
-</tr>
- <tr>
- <td>default</td>
- <td><img src="../../images/progressbar_default.png" /></td>
- </tr>
- <tr>
- <td>wheel</td>
- <td><img src="../../images/progressbar_wheel.png" /></td>
- </tr>
- </tbody>
-</table>
-
-<table>
-<caption>Table: Radio styles</caption>
-<col width="20%"/>
-<col width="80%"/>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
-</tr>
- <tr>
- <td>default</td>
- <td><img src="../../images/radio_default.png" /></td>
- </tr>
- </tbody>
-</table>
-
-<table>
-<caption>Table: List styles</caption>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
- <th>Text part</th>
- <th>Swallow part</th>
-</tr>
- <tr>
- <td>default</td>
- <td><img src="../../images/styleguide_genlist_def.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span>: for the icon on the left.
- <p><span style="font-family: Courier New,Courier,monospace">elm.swallow.end</span>: for the icon on the right.</p></td>
- </tr>
- </tbody>
-</table>
-
-<table>
-<caption>Table: Multi Button Entry styles</caption>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
- <th>Text part</th>
- <th>Notes</th>
-</tr>
- <tr>
- <td>elm/multibuttonentry/base/default</td>
- <td><img src="../../images/multi_button_default.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span>, guide</td>
- <td>The guide text part is used when there is no item in the Multi Button Entry. It is removed automatically when an item is appended in the Multi Button Entry.</td>
- </tr>
- </tbody>
-</table>
-
-<table>
-<caption>Table: Toolbar styles</caption>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
- <th>Text part</th>
- <th>Swallow part</th>
- <th>Notes</th>
-</tr>
- <tr>
- <td>elm/toolbar/base/default</td>
- <td><img src="../../images/toolbar_default.png" /></td>
- <td></td>
- <td></td>
- <td></td>
- </tr>
- <tr>
- <td>elm/toolbar/base/navigationbar</td>
- <td><img src="../../images/toolbar_navigation.png" /></td>
- <td></td>
- <td></td>
- <td></td>
- </tr>
- <tr>
- <td>elm/toolbar/base/tabbar_with_title</td>
- <td><img src="../../images/toolbar_tabbar.png" /></td>
- <td></td>
- <td></td>
- <td></td>
- </tr>
- <tr>
- <td>elm/toolbar/item/default</td>
- <td></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
- <td>This style is for the toolbar's item. Check the <span style="font-family: Courier New,Courier,monospace">elm_toolbar_item_append</span> API to set the text and the icon.</td>
- </tr>
- <tr>
- <td>elm/toolbar/item/navigationbar</td>
- <td></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td></td>
- <td>This style is for the toolbar's item. Check the <span style="font-family: Courier New,Courier,monospace">elm_toolbar_item_append</span> API to set the text and the icon.</td>
- </tr>
- </tbody>
-</table>
-
-<table>
-<caption>Table: Flipselector styles</caption>
-<col width="20%"/>
-<col width="80%"/>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
-</tr>
- <tr>
- <td>default</td>
- <td><img src="../../images/flipsel_default.png" /></td>
- </tr>
- </tbody>
-</table>
-
-<p>The style of the genlist's item is not set by external APIs. Check the guide of Genlist to check how to use the item class to set the item's style.</p>
-<table>
-<caption>Table: Genlist styles</caption>
-
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
- <th>Text part</th>
- <th>Swallow part</th>
- <th>Notes</th>
-</tr>
- <tr>
- <td>default</td>
- <td><img src="../../images/styleguide_genlist_def.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span>: for the icon on the left.
- <p><span style="font-family: Courier New,Courier,monospace">elm.swallow.end</span>: for the icon on the right.</p></td>
- <td></td>
- </tr>
- <tr>
- <td>default_style</td>
- <td><img src="../../images/styleguide_genlist_defstyle.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span>: for the icon on the left.
- <p><span style="font-family: Courier New,Courier,monospace">elm.swallow.end</span>: for the icon on the right.</p></td>
- <td></td>
- </tr>
- <tr>
- <td>double_label</td>
- <td><img src="../../images/styleguide_genlist_doublelabel.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span>: for the main text.
- <p><span style="font-family: Courier New,Courier,monospace">elm.text.sub</span>: for the sub text.</p></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span>: for the icon on the left.
- <p><span style="font-family: Courier New,Courier,monospace">elm.swallow.end</span>: for the icon on the right.</p></td>
- <td></td>
- </tr>
- <tr>
- <td>end_icon</td>
- <td><img src="../../images/styleguide_genlist_end.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
- <td></td>
- </tr>
- <tr>
- <td>full</td>
- <td><img src="../../images/styleguide_genlist_full.png" /></td>
- <td></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
- <td>The swallow part is the full size of the item. There is no padding in the item.</td>
- </tr>
- <tr>
- <td>group_index</td>
- <td><img src="../../images/styleguide_genlist_group.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span>: for the icon on the left.
- <p><span style="font-family: Courier New,Courier,monospace">elm.swallow.end</span>: for the icon on the right.</p></td>
- <td></td>
- </tr>
- <tr>
- <td>one_icon</td>
- <td><img src="../../images/styleguide_genlist_oneicon.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
- <td></td>
- </tr>
- <tr>
- <td>message</td>
- <td><img src="../../images/styleguide_genlist_message.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span>: for the text on the top.
- <p><span style="font-family: Courier New,Courier,monospace">elm.title.1</span>: for the text in the middle.</p>
-<p><span style="font-family: Courier New,Courier,monospace">elm.title.2</span>: for the text on the bottom.</p></td>
- <td></td>
- <td></td>
- </tr>
- </tbody>
-</table>
-
-<p>The style of the gengrid's item is not set by external APIs. For more information on using the item class to set the item's style, see the guide of gengrid.</p>
-<table>
-<caption>Table: Gengrid styles</caption>
-
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
- <th>Text part</th>
- <th>Swallow part</th>
- <th>Notes</th>
-</tr>
- <tr>
- <td>default</td>
- <td><img src="../../images/gengrid_default.png" /></td>
- <td></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
- <td></td>
-</tr>
- <tr>
- <td>album-preview</td>
- <td><img src="../../images/gengrid_album_pre.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
- <td></td>
-</tr>
- <tr>
- <td>block</td>
- <td><img src="../../images/gengrid_block.png" /></td>
- <td></td>
- <td></td>
- <td>This style is used to show an empty area.</td>
-</tr>
- <tr>
- <td>group_index</td>
- <td><img src="../../images/gengrid_grp_index.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
- <td></td>
-</tr>
- <tr>
- <td>default_grid</td>
- <td><img src="../../images/gengrid_def.png" /></td>
- <td></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
- <td></td>
- </tr>
-<tr>
- <td>default_gridtext2</td>
- <td><img src="../../images/gengrid_def_gridtext2.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
- <td></td>
- </tr>
- <tr>
- <td>default_gridtext</td>
- <td><img src="../../images/gengrid_def_gridtext.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
- <td></td>
- </tr>
- <tr>
- <td>default_style</td>
- <td><img src="../../images/gengrid_def_style.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.text</span></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
- <td></td>
- </tr>
- </tbody>
-</table>
-
-<table>
-<caption>Table: Segmentation Control styles</caption>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
-</tr>
- <tr>
- <td>default</td>
- <td><img src="../../images/segm_control_default.png" /></td>
- </tr>
- </tbody>
-</table>
-
-<table>
-<caption>Table: Index styles</caption>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
- <th>Notes</th>
-</tr>
- <tr>
- <td>default</td>
- <td><img src="../../images/index_default.png" /></td>
- <td>This style is for supporting the vertical style.</td>
- </tr>
- <tr>
- <td>default</td>
- <td><img src="../../images/index_default02.png" /></td>
- <td>This style is for supporting the horizontal style. To set a horizontal index, use the <span style="font-family: Courier New,Courier,monospace">elm_index_horizontal_set</span>.</td>
- </tr>
- <tr>
- <td>pagecontrol</td>
- <td><img src="../../images/index_pagecontrol.png" /></td>
- <td>This style is used for the "page control" layout. For more information, refer to the Core Control sample application.</td>
- </tr>
- </tbody>
-</table>
-
-<table>
-<caption>Table: Contextual Popup (Ctxpopup) styles</caption>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
- <th>Notes</th>
-</tr>
- <tr>
- <td>default</td>
- <td><img src="../../images/ctxpopup_default.png" /></td>
- <td></td>
- </tr>
- <tr>
- <td>dropdown/list</td>
- <td><img src="../../images/ctxpopup_dropdown.png" /></td>
- <td>The size of the item and the ctxpopup follow the size of the screen.</td>
- </tr>
- <tr>
- <td>dropdown/label</td>
- <td><img src="../../images/ctxpopup_dropdown_label.png" /></td>
- <td>The size of the item and the ctxpopup follow the maximum length of the item.</td>
- </tr>
- </tbody>
-</table>
-
-<table>
-<caption>Table: Icon styles</caption>
-<col width="20%"/>
-<col width="80%"/>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
-</tr>
- <tr>
- <td>apps</td>
- <td><img src="../../images/icon_apps.png" /></td>
- </tr>
- <tr>
- <td>arrow_down</td>
- <td><img src="../../images/icon_arrowdown.png" /></td>
- </tr>
- <tr>
- <td>arrow_left</td>
- <td><img src="../../images/icon_arrowleft.png" /></td>
- </tr>
- <tr>
- <td>arrow_right</td>
- <td><img src="../../images/icon_arrowright.png" /></td>
- </tr>
- <tr>
- <td>arrow_up</td>
- <td><img src="../../images/icon_arrowup.png" /></td>
- </tr>
- <tr>
- <td>chat</td>
- <td><img src="../../images/icon_chat.png" /></td>
- </tr>
- <tr>
- <td>clock</td>
- <td><img src="../../images/icon_clock.png" /></td>
- </tr>
- <tr>
- <td>close</td>
- <td><img src="../../images/icon_close.png" /></td>
- </tr>
- <tr>
- <td>delete</td>
- <td><img src="../../images/icon_delete.png" /></td>
- </tr>
- <tr>
- <td>edit</td>
- <td><img src="../../images/icon_edit.png" /></td>
- </tr>
- <tr>
- <td>file</td>
- <td><img src="../../images/icon_file.png" /></td>
- </tr>
- <tr>
- <td>home</td>
- <td><img src="../../images/icon_home.png" /></td>
- </tr>
- <tr>
- <td>media_player/forward</td>
- <td><img src="../../images/icon_forward.png" /></td>
- </tr>
- <tr>
- <td>media_player/info</td>
- <td><img src="../../images/icon_info.png" /></td>
- </tr>
- <tr>
- <td>media_player/next</td>
- <td><img src="../../images/icon_next.png" /></td>
- </tr>
- <tr>
- <td>media_player/pause</td>
- <td><img src="../../images/icon_pause.png" /></td>
- </tr>
- <tr>
- <td>media_player/play</td>
- <td><img src="../../images/icon_play.png" /></td>
- </tr>
- <tr>
- <td>media_player/prev</td>
- <td><img src="../../images/icon_prev.png" /></td>
- </tr>
- <tr>
- <td>media_player/rewind</td>
- <td><img src="../../images/icon_rewind.png" /></td>
- </tr>
- <tr>
- <td>media_player/stop</td>
- <td><img src="../../images/icon_stop.png" /></td>
- </tr>
- <tr>
- <td>menu/apps</td>
- <td><img src="../../images/icon_menu_apps.png" /></td>
- </tr>
- <tr>
- <td>menu/arrow_down</td>
- <td><img src="../../images/icon_menu_arrdown.png" /></td>
- </tr>
- <tr>
- <td>menu/arrow_left</td>
- <td><img src="../../images/icon_menu_arrleft.png" /></td>
- </tr>
- <tr>
- <td>menu/arrow_right</td>
- <td><img src="../../images/icon_menu_arrright.png" /></td>
- </tr>
- <tr>
- <td>menu/arrow_up</td>
- <td><img src="../../images/icon_menu_arrup.png" /></td>
- </tr>
- <tr>
- <td>menu/chat</td>
- <td><img src="../../images/icon_menu_chat.png" /></td>
- </tr>
- <tr>
- <td>menu/clock</td>
- <td><img src="../../images/icon_menu_clock.png" /></td>
- </tr>
- <tr>
- <td>menu/close</td>
- <td><img src="../../images/icon_menu_close.png" /></td>
- </tr>
- <tr>
- <td>menu/delete</td>
- <td><img src="../../images/icon_menu_delete.png" /></td>
- </tr>
- <tr>
- <td>menu/edit</td>
- <td><img src="../../images/icon_menu_edit.png" /></td>
- </tr>
- <tr>
- <td>menu/file</td>
- <td><img src="../../images/icon_menu_file.png" /></td>
- </tr>
- <tr>
- <td>menu/folder</td>
- <td><img src="../../images/icon_menu_folder.png" /></td>
- </tr>
- <tr>
- <td>menu/home</td>
- <td><img src="../../images/icon_menu_home.png" /></td>
- </tr>
- <tr>
- <td>menu/refresh</td>
- <td><img src="../../images/icon_menu_refresh.png" /></td>
- </tr>
- <tr>
- <td>no_photo</td>
- <td><img src="../../images/icon_menu_nophoto.png" /></td>
- </tr>
- <tr>
- <td>photo/no_photo</td>
- <td><img src="../../images/icon_photo_nophoto.png" /></td>
- </tr>
- <tr>
- <td>refresh</td>
- <td><img src="../../images/icon_refresh.png" /></td>
- </tr>
- <tr>
- <td>toolbar/apps</td>
- <td><img src="../../images/icon_toolbar_apps.png" /></td>
- </tr>
- <tr>
- <td>toolbar/arrow_down</td>
- <td><img src="../../images/icon_toolbar_arrdown.png" /></td>
- </tr>
- <tr>
- <td>toolbar/arrow_left</td>
- <td><img src="../../images/icon_toolbar_arrleft.png" /></td>
- </tr>
- <tr>
- <td>toolbar/arrow_right</td>
- <td><img src="../../images/icon_toolbar_arrright.png" /></td>
- </tr>
- <tr>
- <td>toolbar/arrow_up</td>
- <td><img src="../../images/icon_toolbar_arrup.png" /></td>
- </tr>
- <tr>
- <td>toolbar/chat</td>
- <td><img src="../../images/icon_toolbar_chat.png" /></td>
- </tr>
- <tr>
- <td>toolbar/clock</td>
- <td><img src="../../images/icon_toolbar_clock.png" /></td>
- </tr>
- <tr>
- <td>toolbar/close</td>
- <td><img src="../../images/icon_toolbar_close.png" /></td>
- </tr>
- <tr>
- <td>toolbar/delete</td>
- <td><img src="../../images/icon_toolbar_delete.png" /></td>
- </tr>
- <tr>
- <td>toolbar/edit</td>
- <td><img src="../../images/icon_toolbar_edit.png" /></td>
- </tr>
- <tr>
- <td>toolbar/file</td>
- <td><img src="../../images/icon_toolbar_file.png" /></td>
- </tr>
- <tr>
- <td>toolbar/folder</td>
- <td><img src="../../images/icon_toolbar_folder.png" /></td>
- </tr>
- <tr>
- <td>toolbar/home</td>
- <td><img src="../../images/icon_home.png" /></td>
- </tr>
- <tr>
- <td>toolbar/more_menu</td>
- <td><img src="../../images/icon_toolbar_moremenu.png" /></td>
- </tr>
- <tr>
- <td>toolbar/refresh</td>
- <td><img src="../../images/icon_toolbar_refresh.png" /></td>
- </tr>
- </tbody>
-</table>
-
-<table>
-<caption>Table: Entry styles</caption>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
- <th>Text part</th>
- <th>Swallow part</th>
- <th>Notes</th>
-</tr>
- <tr>
- <td>default</td>
- <td><img src="../../images/entry_default.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.guide</span>: for the guide text.
- <p><span style="font-family: Courier New,Courier,monospace">elm.text</span>: for the main text.</p></td>
- <td></td>
- <td>The guide text is automatically erased when the main text is entered.</td>
- </tr>
- </tbody>
-</table>
-
-<table>
-<caption>Table: Datetime styles</caption>
-<col width="20%"/>
-<col width="80%"/>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
-</tr>
- <tr>
- <td>date_layout</td>
- <td><img src="../../images/datetime_date_layout.png" /></td>
- </tr>
- <tr>
- <td>time_layout</td>
- <td><img src="../../images/datetime_time_layout.png" /></td>
- </tr>
- <tr>
- <td>time_layout_24hr</td>
- <td><img src="../../images/datetime_time_24h.png" /></td>
- </tr>
- </tbody>
-</table>
-
-<table>
-<caption>Table: Panel (drawer) styles</caption>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
- <th>Swallow part</th>
- <th>Notes</th>
-</tr>
- <tr>
- <td>default</td>
- <td><img src="../../images/panel_default.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span></td>
- <td>For more information on the drawer, see the [UI Sample] Core Control guide.</td>
- </tr>
- </tbody>
-</table>
-
-<table>
-<caption>Table: Slider styles</caption>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
- <th>Swallow part</th>
-
-</tr>
- <tr>
- <td>horizontal/default</td>
- <td><img src="../../images/slider_hor.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
- </tr>
- <tr>
- <td>horizontal/center_point</td>
- <td><img src="../../images/slider_hor_center.png" /></td>
- <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
- </tr>
- <tr>
- <td>vertical/center_point</td>
- <td><img src="../../images/slider_ver_center.png" /></td>
- <td></td>
- </tr>
- <tr>
- <td>vertical/default</td>
- <td><img src="../../images/slider_ver.png" /></td>
- <td></td>
- </tr>
- </tbody>
-</table>
-
-<table>
-<caption>Table: Popup styles</caption>
-<col width="20%"/>
-<col width="80%"/>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
-</tr>
- <tr>
- <td>default</td>
- <td><img src="../../images/popup_default.png" /></td>
- </tr>
- <tr>
- <td>toast</td>
- <td><img src="../../images/popup_toast.png" /></td>
- </tr>
- </tbody>
-</table>
-
- <table>
-<caption>Table: Spinner styles</caption>
-<col width="20%"/>
-<col width="80%"/>
-<tbody>
-<tr>
- <th>Style</th>
- <th>Sample</th>
-</tr>
- <tr>
- <td>base/horizontal</td>
- <td><img src="../../images/spinner_hor.png" /></td>
- </tr>
- <tr>
- <td>base/vertical</td>
- <td><img src="../../images/spinner_ver.png" /></td>
- </tr>
- </tbody>
-</table>
-
-<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 is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</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
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.tutorials/html/native/uix/stt_tutorial_n.htm">STT Tutorial</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__STT__MODULE.html">STT API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__STT__MODULE.html">STT API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UIX__STT__MODULE.html">STT API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<p>The STT life-cycle is described in the following figure.</p>
<p class="figure">Figure: STT life-cycle</p>
- <p
style="text-align:center;"><img src="../../images/stt_lifecycle.png" alt="STT life-cycle" /></p>
+ <p
align="center"><img src="../../images/stt_lifecycle.png" alt="STT life-cycle" /></p>
<h2 id="info_stt" name="info_stt">Getting STT Information</h2>
<p>You can get the following information about the STT:</p>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.tutorials/html/native/uix/tts_tutorial_n.htm">TTS Tutorial</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__TTS__MODULE.html">TTS API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__TTS__MODULE.html">TTS API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UIX__TTS__MODULE.html">TTS API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<p>The TTS life-cycle is described in the following figure.</p>
<p class="figure">Figure: TTS life-cycle</p>
- <p
style="text-align:center;"><img src="../../images/tts_lifecycle.png" alt="TTS life-cycle" /></p>
+ <p
align="center"><img src="../../images/tts_lifecycle.png" alt="TTS life-cycle" /></p>
<h2 id="info_tts" name="info_tts">Getting TTS Information</h2>
<p>You can get the following information about the TTS:</p>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.tutorials/html/native/uix/uix_tutorials_n.htm">UIX Tutorials</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__FRAMEWORK.html">UIX API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__FRAMEWORK.html">UIX API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UIX__FRAMEWORK.html">UIX API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.tutorials/html/native/web/web_tutorials_n.htm">Web Tutorial</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__WEB__FRAMEWORK.html">Web API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__WEB__FRAMEWORK.html">Web API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__WEB__FRAMEWORK.html">Web API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<ul>
<li>WebView
<p>Enables you to access the Web pages and Web content.</p>
- <p>The WebView API implements the EFL WebKit (EWK), which covers various features for Web browsing, such as loading and displaying Web pages and navigating through the browsing history. <a href="../../../../org.tizen.native.mobile.apireference/group__EFL__Group.html">EFL</a> APIs, such as <span style="font-family: Courier New,Courier,monospace;">evas_*</span>, <span style="font-family: Courier New,Courier,monospace;">elm_*</span>, and <span style="font-family: Courier New,Courier,monospace;">eina_*</span>, are used to build up a complete application supporting Web browsing.</p>
+ <p>The WebView API implements the EFL WebKit (EWK), which covers various features for Web browsing, such as loading and displaying Web pages and navigating through the browsing history. EFL APIs (in <a href="../../../../org.tizen.native.mobile.apireference/group__EFL__Group.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__EFL__Group.html">wearable</a> applications), such as <span style="font-family: Courier New,Courier,monospace;">evas_*</span>, <span style="font-family: Courier New,Courier,monospace;">elm_*</span>, and <span style="font-family: Courier New,Courier,monospace;">eina_*</span>, are used to build up a complete application supporting Web browsing.</p>
</li>
</ul>
}
$('#contents').scroll();
-
- var updateH = function(){
+ var checkBreadCrumbs = function() {
if (!isScrolledIntoView($('#contents .content h1')))
{
$('a.top.sms').show();
$('.help_breadcrumbs').show();
}
$('#contents').css('padding-top', $('.help_breadcrumbs').outerHeight()*(7/6));
+ }
+
+ var updateH = function(){
+ checkBreadCrumbs();
$('a.top').css('bottom', $('#footer').outerHeight());
-
- if($('#navigation').length) {
- $('a.top').css('left', $('#navigation').position()['left'] + (($('#navigation').outerWidth() - $('a.top').outerWidth())/2));
- } else {
- $('a.top').css('left', $('#toc-navigation').position()['left'] + (($('#toc-navigation').outerWidth() - $('a.top').outerWidth())/2));
- }
+ $('a.top').css('left', $('#toc-navigation').position()['left'] + (($('#toc-navigation').outerWidth() - $('a.top').outerWidth())/2));
$('#toc').css('top', $('#toc_border').position()['top'] + 7);
$('#container #contents').css('margin-bottom', $('#footer').outerHeight());
//$('#toc').css('top', $('#toc_border').position()['top'] + 2);
$('#toc').css('top', $('#toc_border').position()['top'] + 7);
-
- if($('#navigation').length) {
- $('#contents').css('right', $(window).width() - $('#navigation').position()['left'] + 5);
+ $('#contents').css('right', $(window).width() - $('#toc-navigation').position()['left'] + 5);
//$('#toc').css('width', $('#toc_border').width() - 40);
- } else {
- $('#contents').css('right', $(window).width() - $('#toc-navigation').position()['left'] + 5);
- }
-
$('#toc').css('width', $('#toc_border').width() - 49);
};
var updateH_no_toc = function() {
+ checkBreadCrumbs();
if (!isScrolledIntoView($('#contents .content h1')))
{
$('a.top.sms').show();
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/></p>
</div>
<ul>
<li><a href="tizen/guides_tizen_w.htm">Guide to Tizen Features</a>
<p>Enables you to use Tizen features, such as alarms, calendars, and multimedia content, provided by the <a href="../../../org.tizen.web.apireference/html/device_api/device_api_cover.html">Tizen Web Device API Reference</a>.</p></li>
-
<li><a href="w3c/guides_w3c_w.htm">Guide to W3C/HTML5 and Some Supplementary Features</a>
+ <li><a href="w3c/guides_w3c_w.htm">Guide to W3C/HTML5 and Some Supplementary Features</a>
<p>Enables you to use the W3C, HTML5, and some supplementary features provided by the <a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_cover.html">W3C/HTML5 and Supplementaries API Reference</a>.</p></li>
</ul>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
</div>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/> <img alt="Wearable Web" src="../../../images/ww_icon_optional.png"/></p>
</div>
</tr>
<tr>
<td class="note">The Bluetooth API is optional for both Tizen mobile and wearable profiles, which means that it may not be supported in all mobile and wearable devices.
-<p>The Bluetooth API is not supported on any Tizen Emulators.</p>
-</td>
+ <p>The Bluetooth API is not supported on any Tizen Emulators.</p></td>
</tr>
</tbody>
</table>
<p>The main features of Bluetooth API include:</p>
<ul>
- <li>Managing the local Bluetooth adapter <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/bluetooth_tutorial_w.htm#Managing_BT_Adapter">manage the local Bluetooth adapter</a> using the system-provided service through the <span style="font-family: Courier New,Courier,monospace">ApplicationControl</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationControl">mobile</a> and
<a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#ApplicationControl">wearable</a> applications).</p> <p>To use the Bluetooth functionality of the device, you must switch the Bluetooth adapter on.</p></li>
- <li>Discovering devices <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/bluetooth_tutorial_w.htm#Discovering_BT_Devices">discover other Bluetooth devices</a>.</p> <p>The device discovery process can retrieve multiple types of Bluetooth devices, such as printers, mobile phones, and headphones. To find the kind of devices you want to communicate with, the
<span style="font-family: Courier New,Courier,monospace">BluetoothClass</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothClass">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothClass">wearable</a> applications) is used to define characteristics and capabilities of a Bluetooth device. The <span style="font-family: Courier New,Courier,monospace">BluetoothClassDeviceMajor</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothClassDeviceMajor">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothClassDeviceMajor">wearable</a> applications) and <span style="font-family: Courier New,Courier,monospace">BluetoothClassDeviceMinor</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothClassDeviceMinor">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothClassDeviceMinor">wearable</a> applications) specify the identifiers for major and minor Class of Device (CoD).</p> <p>In addition, you can retrieve the known devices which were bonded or found in a prior discovery process.</p></li>
+ <li>Managing the local Bluetooth adapter <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/bluetooth_tutorial_w.htm#Managing_BT_Adapter">manage the local Bluetooth adapter</a> using the system-provided service through the <span style="font-family: Courier New,Courier,monospace">ApplicationControl</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationControl">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#ApplicationControl">wearable</a> applications).</p> <p>To use the Bluetooth functionality of the device, you must switch the Bluetooth adapter on.</p></li>
+ <li>Discovering devices <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/bluetooth_tutorial_w.htm#Discovering_BT_Devices">discover other Bluetooth devices</a>.</p> <p>The device discovery process can retrieve multiple types of Bluetooth devices, such as printers, mobile phones, and headphones. To find the kind of devices you want to communicate with, the
<span style="font-family: Courier New,Courier,monospace">BluetoothClass</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothClass">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothClass">wearable</a> applications) is used to define characteristics and capabilities of a Bluetooth device. The <span style="font-family: Courier New,Courier,monospace">BluetoothClassDeviceMajor</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothClassDeviceMajor">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothClassDeviceMajor">wearable</a> applications) and <span style="font-family: Courier New,Courier,monospace">BluetoothClassDeviceMinor</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothClassDeviceMinor">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothClassDeviceMinor">wearable</a> applications) specify the identifiers for major and minor Class of Device (CoD).</p> <p>In addition, you can retrieve the known devices which were bonded or found in a prior discovery process.</p></li>
<li>Creating a bonding with a Bluetooth device <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/bluetooth_tutorial_w.htm#Creating_Bond">create a bonding</a> with another device retrieved through the discovery process. The bonding allows the 2 devices to establish a connection.</p> </li>
- <li>Connecting to and exchanging data with a Bluetooth device <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/bluetooth_tutorial_w.htm#Connecting_BT_device">connect to and exchange data with a remote Bluetooth device</a>. When you attempt to open a connection to another device, a Service Discovery Protocol (SDP) look-up is performed on the device, and the protocol and channel to be used for the connection are determined. If a connection is established and the socket is opened successfully, a <span style="font-family: Courier New,Courier,monospace">BluetoothSocket</span> instance (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothSocket">mobile</a> and
<a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothSocket">wearable</a> applications) with an open state is returned. The socket is subsequently used for exchanging data between the connected devices.</p> <p>If a device allows other devices to use its functionalities through this kind of connection, it is said to provide a service.</p> </li>
+ <li>Connecting to and exchanging data with a Bluetooth device <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/bluetooth_tutorial_w.htm#Connecting_BT_device">connect to and exchange data with a remote Bluetooth device</a>. When you attempt to open a connection to another device, a Service Discovery Protocol (SDP) look-up is performed on the device, and the protocol and channel to be used for the connection are determined. If a connection is established and the socket is opened successfully, a <span style="font-family: Courier New,Courier,monospace">BluetoothSocket</span> instance (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothSocket">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothSocket">wearable</a> applications) with an open state is returned. The socket is subsequently used for exchanging data between the connected devices.</p> <p>If a device allows other devices to use its functionalities through this kind of connection, it is said to provide a service.</p> </li>
<li>Communicating with a health source device <p>The Health Device Profile defines the requirements for the Bluetooth health device implementation. In the profile, there are 2 device type: one device is a source, such as a blood pressure monitor or pulse oximeter, while the other is a sink, such as a mobile phone or laptop. You can use your device as a sink and <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/bluetooth_tutorial_w.htm#Communicating_Health">communicate with a health source device</a>.</p> </li>
</ul>
</script>
</body>
-</html>
+</html>
\ No newline at end of file
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/></p>
+ <p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/> <img alt="Wearable Web" src="../../../images/ww_icon_optional.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<ul class="toc">
<li><a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/comm_tutorials_w.htm">Communication Tutorials</a></li>
<li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/index.html#Communication">Communication API for Mobile Web</a></li>
+ <li><a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/index.html#Communication">Communication API for Wearable Web</a></li>
</ul>
</div></div>
</div>
<h1>Communication</h1>
<p>Communication features include information on how your application can send data to networks and other applications, and receive data back from them.</p>
- <table class="note">
-<tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The Communication API domain is supported in mobile applications only.</td>
- </tr>
- </tbody>
- </table>
-
<p>The main communication features are:</p>
<ul>
- <li><a href="bluetooth_w.htm">Bluetooth</a> <p>Allows you to use Bluetooth functionalities, such as managing the Bluetooth service, pairing, and exchanging messages between Bluetooth-enabled devices.</p></li>
- <li><a href="messaging_w.htm">Messaging</a> <p>Allows you to create applications with messaging functionalities using SMS, MMS, and email.</p></li>
+ <li><a href="bluetooth_w.htm">Bluetooth</a> <p>Allows you to use Bluetooth functionalities, such as managing the Bluetooth service, pairing, and exchanging messages between Bluetooth-enabled devices.</p></li>
<li><a href="nfc_w.htm">NFC</a> <p>Allows you to share contacts, photos, and videos, use the device as a smartcard, and communicate with other NFC-enabled devices.</p></li>
<li><a href="push_w.htm">Push</a> <p>Allows you to receive push notifications from a push server.</p></li>
<li><a href="secure_element_w.htm">Secure Element</a> <p>Allows you to access secure elements, such as SIM card and secure SD card, in a device.</p></li>
</ul>
-
+<p>The following guides apply in <span style="color: red">mobile applications only</span>:</p>
+<ul>
+ <li><a href="messaging_w.htm">Messaging</a> <p>Allows you to create applications with messaging functionalities using SMS, MMS, and email.</p></li>
+</ul>
+
+
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/></p>
</div>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/></p>
+ <p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/> <img alt="Wearable Web" src="../../../images/ww_icon_optional.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<ul class="toc">
<li><a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/nfc_tutorial_w.htm">NFC Tutorial</a></li>
<li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html">NFC API for Mobile Web</a></li>
+ <li><a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/nfc.html">NFC API for Wearable Web</a></li>
</ul>
</div></div>
</div>
<th class="note">Note</th>
</tr>
<tr>
- <td class="note">This feature is supported in mobile applications only.</td>
+ <td class="note">The NFC API is optional for both Tizen mobile and wearable profiles, which means that it may not be supported in all mobile and wearable devices.
+<p>The NFC API is not supported on any Tizen Emulators.</p>
+</td>
</tr>
</tbody>
</table>
<li>No device pairing requirements</li>
<li>Reduction in unwanted interruptions</li>
</ul>
- <p>An NFC tag is a chip which can securely store personal information, such as debit card numbers or contact details. The methods of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NFCTag">NFCTag</a> interface are used to access an NFC tag for reading or writing information. NFC tag types are identified using the <span style="font-family: Courier New,Courier,monospace">type</span> attribute of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NFCTagType">NFCTagType</a> type definition.</p>
+ <p>An NFC tag is a chip which can securely store personal information, such as debit card numbers or contact details. The methods of the <span style="font-family: Courier New,Courier,monospace">NFCTag</span> 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 <span style="font-family: Courier New,Courier,monospace">type</span> attribute of the <span style="font-family: Courier New,Courier,monospace">NFCTagType</span> 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>
<table class="note">
<tbody>
<tr>
<p></p>
<p>The main features of the NFC API include:</p>
<ul>
- <li>NFC device management <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/nfc_tutorial_w.htm#Managing_NFC_Conn">manage NFC connectivity</a> by enabling or disabling the NFC service.</p> <p>To use NFC, retrieve the default NFC adapter using the <span style="font-family: Courier New,Courier,monospace">getDefaultAdapter()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NFCAdapter">NFCAdapter</a> interface. You can enable and disable NFC using the <span style="font-family: Courier New,Courier,monospace">setPowered()</span> method.</p></li>
- <li>NFC tag and peer detection <p>To <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/nfc_tutorial_w.htm#Detecting_NFC_Tags">receive notifications when an NFC tag or peer device has been detected</a>, the <span style="font-family: Courier New,Courier,monospace">setTagListener()</span> and <span style="font-family: Courier New,Courier,monospace">setPeerListener()</span> methods of the <span style="font-family: Courier New,Courier,monospace">NFCAdapter</span> interface register event listeners, which trigger notifications when an NFC tag or peer device is detected, respectively. You can use the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NFCTagDetectCallback">NFCTagDetectCallback</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NFCPeerDetectCallback">NFCPeerDetectCallback</a> interfaces to define event handlers for receiving the notifications about attaching and detaching NFC tags and peers, respectively.</p></li>
- <li>NDEF message manipulation <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/nfc_tutorial_w.htm#Handling_NDEF_Messages">handle NDEF messages</a> by first creating NDEF records, using the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NDEFRecord">NDEFRecord</a> interface, and then adding the records to an NDEF message using the <span style="font-family: Courier New,Courier,monospace">records</span> attribute of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NDEFMessage">NDEFMessage</a> interface.</p></li>
- <li>NDEF data exchange <p>You can exchange NDEF data between <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/nfc_tutorial_w.htm#Exchanging_NDEF_Tags">tags</a> and <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/nfc_tutorial_w.htm#Exchanging_NDEF_Peers">peers</a>. To exchange data between tags, read from tags and write to tags using the <span style="font-family: Courier New,Courier,monospace">readNDEF()</span> and <span style="font-family: Courier New,Courier,monospace">writeNDEF()</span> methods.</p> <p>To exchange data between peers, the <span style="font-family: Courier New,Courier,monospace">setReceiveNDEFListener()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NFCPeer">NFCPeer</a> interface registers an event listener, which triggers an event when an NDEF message is received from a peer.</p> <p>You can use the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NDEFMessageReadCallback">NDEFMessageReadCallback</a> interface to define event handlers for reading NDEF messages from tags and peer devices.</p>
+ <li>NFC device management <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/nfc_tutorial_w.htm#Managing_NFC_Conn">manage NFC connectivity</a> by enabling or disabling the NFC service.</p> <p>To use NFC, retrieve the default NFC adapter using the <span style="font-family: Courier New,Courier,monospace">getDefaultAdapter()</span> method of the <span style="font-family: Courier New,Courier,monospace">NFCAdapter</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NFCAdapter">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/nfc.html#NFCAdapter">wearable</a> applications). You can enable and disable NFC using the <span style="font-family: Courier New,Courier,monospace">setPowered()</span> method.</p></li>
+ <li>NFC tag and peer detection <p>To <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/nfc_tutorial_w.htm#Detecting_NFC_Tags">receive notifications when an NFC tag or peer device has been detected</a>, the <span style="font-family: Courier New,Courier,monospace">setTagListener()</span> and <span style="font-family: Courier New,Courier,monospace">setPeerListener()</span> methods of the <span style="font-family: Courier New,Courier,monospace">NFCAdapter</span> interface register event listeners, which trigger notifications when an NFC tag or peer device is detected, respectively. You can use the <span style="font-family: Courier New,Courier,monospace">NFCTagDetectCallback</span> (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NFCTagDetectCallback">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/nfc.html#NFCTagDetectCallback">wearable</a> applications) and <span style="font-family: Courier New,Courier,monospace">NFCPeerDetectCallback</span> (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NFCPeerDetectCallback">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/nfc.html#NFCPeerDetectCallback">wearable</a> applications) interfaces to define event handlers for receiving the notifications about attaching and detaching NFC tags and peers, respectively.</p></li>
+ <li>NDEF message manipulation <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/nfc_tutorial_w.htm#Handling_NDEF_Messages">handle NDEF messages</a> by first creating NDEF records, using the <span style="font-family: Courier New,Courier,monospace">NDEFRecord</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NDEFRecord">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/nfc.html#NDEFRecord">wearable</a> applications), and then adding the records to an NDEF message using the <span style="font-family: Courier New,Courier,monospace">records</span> attribute of the <span style="font-family: Courier New,Courier,monospace">NDEFMessage</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NDEFMessage">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/nfc.html#NDEFMessage">wearable</a> applications).</p></li>
+ <li>NDEF data exchange <p>You can exchange NDEF data between <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/nfc_tutorial_w.htm#Exchanging_NDEF_Tags">tags</a> and <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/nfc_tutorial_w.htm#Exchanging_NDEF_Peers">peers</a>. To exchange data between tags, read from tags and write to tags using the <span style="font-family: Courier New,Courier,monospace">readNDEF()</span> and <span style="font-family: Courier New,Courier,monospace">writeNDEF()</span> methods.</p> <p>To exchange data between peers, the <span style="font-family: Courier New,Courier,monospace">setReceiveNDEFListener()</span> method of the <span style="font-family: Courier New,Courier,monospace">NFCPeer</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NFCPeer">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/nfc.html#NFCPeer">wearable</a> applications) registers an event listener, which triggers an event when an NDEF message is received from a peer.</p> <p>You can use the <span style="font-family: Courier New,Courier,monospace">NDEFMessageReadCallback</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NDEFMessageReadCallback">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/nfc.html#NDEFMessageReadCallback">wearable</a> applications) to define event handlers for reading NDEF messages from tags and peer devices.</p>
</li>
- <li>NFC card emulation <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/nfc_tutorial_w.htm#Using_NFC_Card_Emulation">enable NFC card emulation and monitor the secure element transaction</a> taking place using the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NFCManager">NFCManager</a> interface. The secure element transaction is carried out by the device. A Tizen application can detect the transaction and whether it was successful, but does not take part in it.</p></li>
+ <li>NFC card emulation <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/nfc_tutorial_w.htm#Using_NFC_Card_Emulation">enable NFC card emulation and monitor the secure element transaction</a> taking place using the <span style="font-family: Courier New,Courier,monospace">NFCAdapter</span> interface. The secure element transaction is carried out by the device. The Tizen application can detect the transaction, but does not take part in it. Interpreting the transaction data requires knowledge about the data protocol the transaction uses. With the required knowledge, the application can detect whether the transaction was successful.</p></li>
+ <li>NFC host-based card emulation (HCE) <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/nfc_tutorial_w.htm#Using_NFC_Host_Based_Card_Emulation">handle HCE events and transactions</a> taking place using the <span style="font-family: Courier New,Courier,monospace">NFCAdapter</span> interface. HCE is an on-device technology that permits a phone to perform card emulation on an NFC-enabled device without relying on access to a secure element. The transaction data is routed to the host application directly, instead of routing to a secure element. The Tizen application can detect the transaction and can take part in it.</p></li>
</ul>
<table class="note">
<tbody>
</tbody>
</table>
<p>* The <span style="font-family: Courier New,Courier,monospace"><protocol_code></span> and <span style="font-family: Courier New,Courier,monospace"><scheme></span> must be in sync. See <a href="http://members.nfc-forum.org/apps/group_public/document.php?document_id=5078" target="_blank">NFCForum-TS-RTD_URI_1.0</a> and NFC RTD (Record Type Definition) documentation on the NFC forum.</p>
+
<h2 id="ndef" name="ndef">NDEF Messages</h2>
- <p>Tizen provides the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NDEFMessage">NDEFMessage</a> interface to define an NDEF message. An NDEF message is composed of multiple records.</p>
- <p>An NDEF record is created using the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NDEFRecord">NDEFRecord</a> interface and is identified by record type, ID, and payload.</p>
+ <p>Tizen provides the <span style="font-family: Courier New,Courier,monospace">NDEFMessage</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NDEFMessage">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/nfc.html#NDEFMessage">wearable</a> applications) to define an NDEF message. An NDEF message is composed of multiple records.</p>
+ <p>An NDEF record is created using the <span style="font-family: Courier New,Courier,monospace">NDEFRecord</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NDEFRecord">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/nfc.html#NDEFRecord">wearable</a> applications) and is identified by record type, ID, and payload.</p>
<p>The following figure shows the conceptual structure of an NDEF message.</p>
<p class="figure">Figure: Structure of an NDEF message</p>
- <p
style="text-align: center;"><img alt="Structure of an NDEF message" src="../../../images/nfc_record.png" /></p>
+ <p
align="center"><img alt="Structure of an NDEF message" src="../../../images/nfc_record.png" /></p>
<p>A record in an NDEF message can be created by using the following payload types:</p>
<ul>
- <li>Text <p>The NDEF record content is created using text format.</p> <p>The <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NDEFRecordText">NDEFRecordText</a> interface is used to create the text format payload using the <span style="font-family: Courier New,Courier,monospace">text</span>, <span style="font-family: Courier New,Courier,monospace">languageCode</span>, and <span style="font-family: Courier New,Courier,monospace">encoding</span> attributes.</p></li>
- <li>URI <p>The NDEF record content is created using a URI.</p> <p>The <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NDEFRecordURI">NDEFRecordURI</a> interface is used to create the URI type payload using the <span style="font-family: Courier New,Courier,monospace">uri</span> attribute.</p></li>
- <li>Media <p>The NDEF record content is created using a media format.</p> <p>The <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NDEFRecordMedia">NDEFRecordMedia</a> interface is used to create the media format payload using the <span style="font-family: Courier New,Courier,monospace">mimeType</span> attribute.</p></li>
+ <li>Text <p>The NDEF record content is created using text format.</p> <p>The <span style="font-family: Courier New,Courier,monospace">NDEFRecordText</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NDEFRecordText">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/nfc.html#NDEFRecordText">wearable</a> applications) is used to create the text format payload using the <span style="font-family: Courier New,Courier,monospace">text</span>, <span style="font-family: Courier New,Courier,monospace">languageCode</span>, and <span style="font-family: Courier New,Courier,monospace">encoding</span> attributes.</p></li>
+ <li>URI <p>The NDEF record content is created using a URI.</p> <p>The <span style="font-family: Courier New,Courier,monospace">NDEFRecordURI</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NDEFRecordURI">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/nfc.html#NDEFRecordURI">wearable</a> applications) is used to create the URI type payload using the <span style="font-family: Courier New,Courier,monospace">uri</span> attribute.</p></li>
+ <li>Media <p>The NDEF record content is created using a media format.</p> <p>The <span style="font-family: Courier New,Courier,monospace">NDEFRecordMedia</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NDEFRecordMedia">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/nfc.html#NDEFRecordMedia">wearable</a> applications) is used to create the media format payload using the <span style="font-family: Courier New,Courier,monospace">mimeType</span> attribute.</p></li>
</ul>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/></p>
+ <p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/> <img alt="Wearable Web" src="../../../images/ww_icon_optional.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<ul class="toc">
<li><a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/push_tutorial_w.htm">Push Tutorial</a></li>
<li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/push.html">Push API for Mobile Web</a></li>
+ <li><a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/push.html">Push API for Wearable Web</a></li>
</ul>
</div></div>
</div>
<p>Tizen enables you to receive push notifications from a push server. The push service is a client daemon that maintains a permanent connection between the device and the push server to process the registration and deregistration requests, and deliver push notifications to the application. If the application is connected, the push service passes the notification data over the connection. Otherwise, the push service sends UI notifications with the data. The notifications are delivered when the user launches the application and selects the posting mode. The architecture of the Tizen Push service is described in the mobile native <a href="../../../../../org.tizen.guides/html/native/messaging/push_n.htm">Push</a> guide.</p>
- <table class="note">
- <tbody>
+
+ <table class="note">
+<tbody>
<tr>
<th class="note">Note</th>
</tr>
<tr>
- <td class="note">This feature is supported in mobile applications only.</td>
+ <td class="note">The Push API is optional for both Tizen mobile and wearable profiles, which means that it may not be supported in all mobile and wearable devices.
+ <p>The Push API is supported on all Tizen Emulators.</p>
+ </td>
</tr>
</tbody>
</table>
<p>The push service provides the RESTful open API for sending a push message. For more information on the Tizen Push Server API, see <a href="../../../../../org.tizen.tutorials/html/native/messaging/push_tutorial_n.htm#send">Sending Push Notifications</a>.</p>
<p>The main features of the Push API include:</p>
<ul>
- <li>Registering to the push service <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/push_tutorial_w.htm#Registering">register or unregister the application for the push service</a>. If the registration process is successful, it returns the registration identifier through the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/push.html#PushRegisterSuccessCallback">PushRegisterSuccessCallback</a> listener.</p> </li>
- <li>Receiving push notifications <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/push_tutorial_w.htm#Receiving">connect to the push service and start receiving push notifications</a> with the <span style="font-family: Courier New,Courier,monospace">connectService()</span> method. You must pass the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/push.html#PushNotificationCallback">PushNotificationCallback</a> listener instance as a parameter in the method to receive push notifications.</p> </li>
+ <li>Registering to the push service <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/push_tutorial_w.htm#Registering">register or unregister the application for the push service</a>. If the registration process is successful, it returns the registration identifier through the <span style="font-family: Courier New,Courier,monospace">PushRegisterSuccessCallback</span> listener (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/push.html#PushRegisterSuccessCallback">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/push.html#PushRegisterSuccessCallback">wearable</a> applications).</p> </li>
+ <li>Receiving push notifications <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/push_tutorial_w.htm#Receiving">connect to the push service and start receiving push notifications</a> with the <span style="font-family: Courier New,Courier,monospace">connectService()</span> method. You must pass the <span style="font-family: Courier New,Courier,monospace">PushNotificationCallback</span> listener (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/push.html#PushNotificationCallback">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/push.html#PushNotificationCallback">wearable</a> applications) instance as a parameter in the method to receive push notifications.</p> </li>
</ul>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/></p>
+ <p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/> <img alt="Wearable Web" src="../../../images/ww_icon_optional.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<ul class="toc">
<li><a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/secure_element_tutorial_w.htm">Secure Element Tutorial</a></li>
<li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/se.html">Secure Element API for Mobile Web</a></li>
+ <li><a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/se.html">Secure Element API for Wearable Web</a></li>
</ul>
</div></div>
</div>
<th class="note">Note</th>
</tr>
<tr>
- <td class="note">This feature is supported in mobile applications only.</td>
+ <td class="note">The Secure Element API is optional for both Tizen mobile and wearable profiles, which means that it may not be supported in all mobile and wearable devices.
+<p>The Secure Element API is not supported on any Tizen Emulators.</p>
+</td>
</tr>
</tbody>
</table>
<p>The main features of the Secure Element API include:</p>
<ul>
- <li>Managing secure elements<p>You <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/secure_element_tutorial_w.htm#Managing_Secure_Element">manage secure elements</a> by retrieving all the available secure element readers and receiving notifications of reader changes using the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/se.html#SEService">SEService</a> interface. You can also shut down secure elements.</p> </li>
+ <li>Managing secure elements<p>You <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/secure_element_tutorial_w.htm#Managing_Secure_Element">manage secure elements</a> by retrieving all the available secure element readers and receiving notifications of reader changes using the <span style="font-family: Courier New,Courier,monospace">SEService</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/se.html#SEService">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/se.html#SEService">wearable</a> applications). You can also shut down secure elements.</p> </li>
<li>Opening and closing sessions and channels<p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/secure_element_tutorial_w.htm#Opening_Sessions">open a session</a> to connect to a secure element reader. Within a session, you can open basic or logical channels. When the channel or session is no longer needed, you can <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/secure_element_tutorial_w.htm#Closing_Sessions">close them</a>.</p> </li>
<li>Transmitting APDUs to the applet<p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/secure_element_tutorial_w.htm#Transmitting_APDU">transmit application protocol data units (APDU)</a> to a secure element using a channel.</p> </li>
</ul>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<p>The main content features are:</p>
<ul>
<li><a href="content_w.htm">Content</a> <p>Allows you to search and manage multimedia content locally.</p></li>
- <li><a href="download_w.htm">Download</a> <p>Enables you to download files from the Internet and monitor the download progress and status.</p></li>
+ <li><a href="download_w.htm">Download</a> <p>Enables you to download files from the Internet and monitor the download progress and status.</p></li>
+ <li><a href="exif_w.htm">Exif</a> <p>Enables you to access and modify EXIF information in a JPEG file.</p></li>
</ul>
-<p>The following guides apply in <span style="color: red">mobile applications only</span>:</p>
-<ul>
- <li><a href="exif_w.htm">Exif</a> <p>Enables you to access and modify EXIF information in a JPEG file.</p></li>
-</ul>
-
-
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
</div></div></div>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<p>The main features of Content API include:</p>
<ul>
- <li>Content retrieval <p>The Content API uses the same <span style="font-family: Courier New,Courier,monospace">ContentManager</span> 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. The instance provides higher efficiency by performing batch operations on content items.</p> <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/content/content_tutorial_w.htm#browse">browse and search for content directories and content</a> using the <span style="font-family: Courier New,Courier,monospace">getDirectories()</span> and <span style="font-family: Courier New,Courier,monospace">find()</span> methods of the <span style="font-family: Courier New,Courier,monospace">ContentManager</span> interface. When searching for content items, you can create <a href="../../../../../org.tizen.tutorials/html/web/tizen/tizen/tizen_tutorials_w.htm#filter">attribute filters</a>, <a href="../../../../../org.tizen.tutorials/html/web/tizen/tizen/tizen_tutorials_w.htm#range">attribute range filters</a>, and <a href="../../../../../org.tizen.tutorials/html/web/tizen/tizen/tizen_tutorials_w.htm#composite">composite filters</a> based on <a href="../tizen/tizen_guide_w.htm#content">specific filter attributes</a> of the <span style="font-family: Courier New,Courier,monospace">ContentManager</span> interface. You can also <a href="../../../../../org.tizen.tutorials/html/web/tizen/tizen/tizen_tutorials_w.htm#use_modes">sort the search results</a>.</p>
+ <li>Content retrieval <p>The Content API uses the same <span style="font-family: Courier New,Courier,monospace">ContentManager</span> 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. The instance provides higher efficiency by performing batch operations on content items.</p> <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/content/content_tutorial_w.htm#browse">browse and search for content directories and content</a> using the <span style="font-family: Courier New,Courier,monospace">getDirectories()</span> and <span style="font-family: Courier New,Courier,monospace">find()</span> methods of the <span style="font-family: Courier New,Courier,monospace">ContentManager</span> interface. When searching for content items, you can create <a href="../../../../../org.tizen.tutorials/html/web/tizen/tizen/tizen_tutorials_w.htm#filter">attribute filters</a>, <a href="../../../../../org.tizen.tutorials/html/web/tizen/tizen/tizen_tutorials_w.htm#range">attribute range filters</a>, and <a href="../../../../../org.tizen.tutorials/html/web/tizen/tizen/tizen_tutorials_w.htm#composite">composite filters</a> based on <a href="../tizen/tizen_guide_w.htm#content
_filter">specific filter attributes</a> of the <span style="font-family: Courier New,Courier,monospace">ContentManager</span> interface. You can also <a href="../../../../../org.tizen.tutorials/html/web/tizen/tizen/tizen_tutorials_w.htm#use_modes">sort the search results</a>.</p>
<table class="note">
<tbody>
<tr>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon_optional.png"/></p>
</div>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+ <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../../org.tizen.tutorials/html/web/tizen/content/exif_tutorial_w.htm">Exif Tutorial</a></li>
- <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/exif.html">Exif API for Mobile Web</a></li>
+ <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/exif.html">Exif API for Mobile Web</a></li>
+ <li><a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/exif.html">Exif API for Wearable Web</a></li>
</ul>
</div></div>
</div>
<th class="note">Note</th>
</tr>
<tr>
- <td class="note">This feature is supported in mobile applications only.</td>
+ <td class="note">The Exif API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices.
+<p>The Exif API is supported on all Tizen Emulators.</p>
+</td>
</tr>
</tbody>
</table>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../images/ww_icon.png"/></p>
</div>
<tr>
<td class="note"> In Tizen Web Device APIs, there are 2 types of APIs: mandatory and optional.
<p>The mandatory APIs are always available on all Tizen devices. The optional APIs provide functionality that depends on the available device hardware or software capabilities, and they may not be available in all Tizen devices. For example, the Bluetooth and NFC API hardware features are optional, and not supported on all devices.</p>
-<p>To determine the availability of optional APIs, use the <span style="font-family: Courier New,Courier,monospace;">tizen.systeminfo.getCapability()</span> method of the
<span style="font-family: Courier New,Courier,monospace">System Information</span> API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfo">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html#SystemInfo">wearable</a> applications).</p>
+<p>To determine the availability of optional APIs, use the <span style="font-family: Courier New,Courier,monospace;">tizen.systeminfo.getCapability()</span> method of the
System Information API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfo">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html#SystemInfo">wearable</a> applications).</p>
<p>Note that all mandatory APIs are supported on the Tizen Emulators, while the optional APIs may or may not be supported. For the details of each API, see <a href="../../../../org.tizen.web.apireference/html/device_api/device_api_cover.html"> Tizen Web Device API Reference</a>.</p></td>
</tr>
</tbody>
<p>Enables you to handle generic events and sort and filter data.</p></li>
<li><a href="application/app_guide_w.htm">Application</a>
<p>Enables you to configure application properties, and manage application data, packages, and alarms.</p></li>
+ <li><a href="communication/comm_guide_w.htm">Communication</a>
+ <p>Enables you to send data to networks and other applications, and receive data back from them.</p></li>
<li><a href="content/content_guide_w.htm">Content</a>
<p>Enables you to manage files, playlists, and downloads, and view file details.</p></li>
<li><a href="input_output/io_guide_w.htm">Input/Output</a>
<li><a href="system/system_guide_w.htm">System</a>
<p>Enables you to access and manage and retrieve information from the device and its sensors.</p></li>
<li><a href="ui/ui_guide_w.htm">User Interface</a>
- <p>Enables you to manage badges and notifications on the screen.</p></li>
- <li><a href="communication/comm_guide_w.htm">Communication</a> <span style="color: red">in mobile applications only</span>
- <p>Enables you to send data to networks and other applications, and receive data back from them.</p></li>
+ <p>Enables you to manage badges and notifications on the screen.</p></li>
<li><a href="social/social_guide_w.htm">Social</a> <span style="color: red">in mobile applications only</span>
<p>Enables you to manage the user's personal data, such as contacts, calendars, and call and browsing history, on the device.</p></li>
</ul>
<p>Tizen provides a special architecture to guarantee that Web IME applications work just like native IME applications (however, there are some restrictions due to the capability limitations of the Web applications in general). A Web IME application can be run within the core Input Service Engine process, which is also used to run native IME applications.</p>
<p>The following figure shows the overall architecture of the Tizen Web IME support.</p>
<p class="figure">Figure: Tizen Web IME support architecture</p>
-
<p style="text-align:center;"><img alt="Tizen Web IME support architecture" src="../../../images/web_ime_architecture.png"/></p>
+
<p align="center"><img alt="Tizen Web IME support architecture" src="../../../images/web_ime_architecture.png"/></p>
<p>When a Web IME is executed, the Input Service framework launches the Input Service Engine process, just like with native IME applications. The Input Service Engine process loads a special bridge IME module, <span style="font-family: Courier New,Courier,monospace">ise-web-helper-agent</span>, which executes a Web IME within its Web container and communicates with the executed Web IME.</p>
<p>The communication between the Web IME and the <span style="font-family: Courier New,Courier,monospace">ise-web-helper-agent</span> module is accomplished by 2 utility modules, <span style="font-family: Courier New,Courier,monospace">web-helper-agent</span> on the Web helper agent side and <span style="font-family: Courier New,Courier,monospace">web-helper-client</span> on the Web IME side. Therefore, a Web IME application must contain the <span style="font-family: Courier New,Courier,monospace">web-helper-client.js</span>, which is created automatically when you create a Web IME project using the Tizen SDK.</p>
<p>Since the Web IME runs within a Web container and communicates with it, as a Web IME application developer you do not need knowledge of the platform architecture or details of the native API. You can develop Web IME applications as if they were normal Web applications, as long as the <span style="font-family: Courier New,Courier,monospace">web-helper-client.js</span> file is included and properly used.</p>
{
onInit: function ()
{
- // Do what you want when your IME gets the INIT message
+ /* Do what you want when your IME gets the INIT message */
}
};
WebHelperClient.initialize(WebHelperClientHandler);</pre>
<ol>
<li>To create the Web IME project, launch the Tizen IDE and go to <strong>File > New > Tizen Wearable Web Project > Template > IME Application > Web IME application</strong>.</li>
- <li>Enter the project name and click <strong>Finish</strong>.<p style="text-align:center;"><img alt="Create a Web IME project" src="../../../images/web_ime_create_project.png"/></p></li>
+ <li>Enter the project name and click <strong>Finish</strong>.
+ <p align="center"><img alt="Create a Web IME project" src="../../../images/web_ime_create_project.png"/></p></li>
<li>Modify the source code in, for example, the <span style="font-family: Courier New,Courier,monospace">index.html</span> and <span style="font-family: Courier New,Courier,monospace">style.css</span> files, as needed.</li>
<li>Install the Web IME package on the Emulator. To run the application, go to <strong>Run As > Tizen Wearable Web Application</strong>.</li>
- <li>In the Emulator, change the default keyboard with the Web IME you developed in <strong>Setting > Text input</strong>.<p style="text-align:center;"><img alt="Setting main" src="../../../images/web_ime_setting_main.png"/><img alt="Setting text input" src="../../../images/web_ime_setting_text_input.png"/></p></li>
+ <li>In the Emulator, change the default keyboard with the Web IME you developed in <strong>Setting > Text input</strong>.
+ <p align="center"><img alt="Setting main" src="../../../images/web_ime_setting_main.png"/><img alt="Setting text input" src="../../../images/web_ime_setting_text_input.png"/></p></li>
</ol>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+ <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../../org.tizen.tutorials/html/web/tizen/input_output/archive_tutorial_w.htm">Archive Tutorial</a></li>
- <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/archive.html">Archive API for Mobile Web</a></li>
+ <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/archive.html">Archive API for Mobile Web</a></li>
+ <li><a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/archive.html">Archive API for Wearable Web</a></li>
</ul>
</div></div>
</div>
<th class="note">Note</th>
</tr>
<tr>
- <td class="note">This feature is supported in mobile applications only.</td>
+ <td class="note">The Archive API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices.
+<p>The Archive API is supported on all Tizen Emulators.</p></td>
</tr>
</tbody>
</table>
<p>The main features of the Archive API include:</p>
<ul>
- <li>Accessing archive content <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/input_output/archive_tutorial_w.htm#read">read the content of an archive file</a> using the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/archive.html#ArchiveFile">ArchiveFile</a> interface.</p> </li>
+ <li>Accessing archive content <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/input_output/archive_tutorial_w.htm#read">read the content of an archive file</a> using the <span style="font-family: Courier New,Courier,monospace">ArchiveFile</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/archive.html#ArchiveFile">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/archive.html#ArchiveFile">wearable</a> applications).</p> </li>
<li>Creating new archives<p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/input_output/archive_tutorial_w.htm#create">create archive files and add files into them</a> using the <span style="font-family: Courier New,Courier,monospace">ArchiveFile</span> interface.</p> </li>
<li>Extracting archived files<p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/input_output/archive_tutorial_w.htm#extract">extract a single file or all files from an archive file</a> using the <span style="font-family: Courier New,Courier,monospace">ArchiveFile</span> interface.</p> </li>
<li>Aborting operations<p>You can abort an on-going archive operation using the operation ID and the <span style="font-family: Courier New,Courier,monospace">abort()</span> method of the <span style="font-family: Courier New,Courier,monospace">ArchiveManager </span> interface.</p>
</ul>
- <p>To start any kind of zip operation (packing or unpacking), you must first call the <span style="font-family: Courier New,Courier,monospace">open()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/archive.html#ArchiveManager">ArchiveManager</a> interface. The first parameter of is a <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/archive.html#FileReference">FileReference</a> object, which can be a <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/filesystem.html#File">File</a> object or the virtual path. The second parameter is a <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/filesystem.html#FileMode">FileMode</a> enumerator, whose values are described in the following table.</p>
+ <p>To start any kind of zip operation (packing or unpacking), you must first call the <span style="font-family: Courier New,Courier,monospace">open()</span> method of the <span style="font-family: Courier New,Courier,monospace">ArchiveManager</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/archive.html#ArchiveManager">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/archive.html#ArchiveManager">wearable</a> applications). The first parameter of is a <span style="font-family: Courier New,Courier,monospace">FileReference</span> object (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/archive.html#FileReference">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/archive.html#FileReference">wearable</a> applications), which can be a <span style="font-family: Courier New,Courier,monospace">File</span> object (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) or the virtual path. The second parameter is a <span style="font-family: Courier New,Courier,monospace">FileMode</span> enumerator (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/filesystem.html#FileMode">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/filesystem.html#FileMode">wearable</a> applications), whose values are described in the following table.</p>
<table border="1" style="width: 100%">
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
</tr>
<tr>
<td><span style="font-family: Courier New,Courier,monospace">wgt-package</span></td>
- <td>Location for storing widget packages (read-only location).</td>
+ <td>Location for storing Web application packages (read-only location).</td>
</tr>
<tr>
<td><span style="font-family: Courier New,Courier,monospace">wgt-private</span></td>
- <td>Location for the widget private storage.</td>
+ <td>Location for the Web application private storage.</td>
</tr>
<tr>
<td><span style="font-family: Courier New,Courier,monospace">wgt-private-tmp</span></td>
- <td>Location for the widget private temporary storage.</td>
+ <td>Location for the Web application private temporary storage.</td>
</tr>
</tbody>
</table>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<p>Input/output features include information on how your application can process input and output data.</p>
<p>The main input/output features are:</p>
<ul>
+ <li><a href="archive_w.htm">Archive</a> <p>Enables you to operate on the zip archive files.</p></li>
<li><a href="filesystem_w.htm">Filesystem</a> <p>Enables you to access specific parts of the device file system.</p></li>
<li><a href="message_port_w.htm">Message Port</a> <p>Allows you to send and receive messages through message ports.</p></li>
</ul>
-
-<p>The following guides apply in <span style="color: red">mobile applications only</span>:</p>
-<ul>
- <li><a href="archive_w.htm">Archive</a> <p>Enables you to operate on the zip archive files.</p></li>
-</ul>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<li>The application that wants to receive messages from your application can mostly be implemented as a Tizen Web or native application. To implement it as a native application, see the mobile native <a href="../../../native/app/message_port_n.htm">Message Port Communication</a> guide.</li></ul>
<p class="figure">Figure: Message port communication</p>
- <p
style="text-align:center;"><img alt="Message port communication" src="../../../images/message_port.png" /></p>
+ <p
align="center"><img alt="Message port communication" src="../../../images/message_port.png" /></p>
<p>You can communicate only with a trusted application that is signed with the same certificate as your application, using the instances of the <span style="font-family: Courier New,Courier,monospace">LocalMessagePort</span> and <span style="font-family: Courier New,Courier,monospace">RemoteMessagePort</span> interfaces that are retrieved by the <span style="font-family: Courier New,Courier,monospace">requestTrustedLocalMessagePort()</span> and <span style="font-family: Courier New,Courier,monospace">requestTrustedRemoteMessagePort()</span> methods of the <span style="font-family: Courier New,Courier,monospace">tizen.messageport</span> object.</p>
-
<p class="figure">Figure: Trusted message ports</p>
- <p
style="text-align:center;"><img alt="Trusted message ports" src="../../../images/message_port_trusted.png" /></p>
+ <p class="figure">Figure: Trusted message ports</p>
+ <p
align="center"><img alt="Trusted message ports" src="../../../images/message_port_trusted.png" /></p>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
</div>
<div id="container"><div id="contents"><div class="content">
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Media Controller</h1>
- <p>The MediaController API provides functions for communication between the media controller server and the media controller client.</p>
+ <p>Tizen provides a functionality for you to communicate between the media controller server and client.</p>
<table class="note">
<tbody>
</tr>
</tbody>
</table>
+
+
+<p>To manage the media using the Media Controller API, you have to develop 2 applications:</p>
+<ul><li>Client that sends requests to the server in order to change, for example, the playback state and position modes.</li>
+<li>Server that directly manages the media on the device.</li></ul>
<p>The main features of the Media Controller API include:</p>
<ul>
- <li>Creating a new server
- <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/multimedia/media_controller_tutorial_w.htm#example1">see the example</a> with the <span style="font-family: Courier New,Courier,monospace">createServer()</span> method.</p>
+ <li>Setting up the client and server pair
+ <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/multimedia/media_controller_tutorial_w.htm#create">set up the client and server pair</a> by creating a new server using the <span style="font-family: Courier New,Courier,monospace">createServer()</span> method. On the client side, you can get a client and find active servers using the <span style="font-family: Courier New,Courier,monospace">getClient()</span> and <span style="font-family: Courier New,Courier,monospace">findServers()</span> methods.</p>
</li>
+ <li>Managing requests
+ <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/multimedia/media_controller_tutorial_w.htm#request">send a request</a> from the client to the server to modify various playback attributes. In the server, you can set up a listener to react to the client request and perform the requested task.</p></li>
- <li>Getting a client and finding all active servers<p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/multimedia/media_controller_tutorial_w.htm#example2">see the example</a> with the <span style="font-family: Courier New,Courier,monospace">getClient()</span> and <span style="font-family: Courier New,Courier,monospace">findServers()</span> methods.</p> </li>
+ <li>Receiving notifications from the server
+ <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/multimedia/media_controller_tutorial_w.htm#noti">receive notifications on changed made by the server</a> by registering a listener with the <span style="font-family: Courier New,Courier,monospace">addPlaybackInfoChangeListener()</span> method.</p> </li>
- <li>Setting up a server
- <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/multimedia/media_controller_tutorial_w.htm#example3">see the example</a> with the following methods:</p>
- <ul>
- <li><span style="font-family: Courier New,Courier,monospace">addChangeRequestPlaybackInfoListener()</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">updatePlaybackState()</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">updatePlaybackPosition()</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">updateShuffleMode()</span></li>
- <li><span style="font-family: Courier New,Courier,monospace">updaterepeatMode()</span></li>
- </ul>
- </li>
-
- <li>Sending requests from a client to a server<p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/multimedia/media_controller_tutorial_w.htm#example4">see the example</a> with the <span style="font-family: Courier New,Courier,monospace">sendPlaybackState()</span> method.</p> </li>
-
- <li>Receiving notifications from a server<p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/multimedia/media_controller_tutorial_w.htm#example5">see the example</a> with the <span style="font-family: Courier New,Courier,monospace">addPlaybackInfoChangeListener()</span> method.</p> </li>
-
- <li>Sending custom commands by a client<p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/multimedia/media_controller_tutorial_w.htm#example6">see the example</a> with the <span style="font-family: Courier New,Courier,monospace">sendCommand()</span> method.</p> </li>
-
- <li>Receiving and handling custom commands by a server
- <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/multimedia/media_controller_tutorial_w.htm#example7">see the example</a> with the <span style="font-family: Courier New,Courier,monospace">addCommandListener()</span> method.</p>
+ <li>Sending custom commands
+ <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/multimedia/media_controller_tutorial_w.htm#send_command">use the client to send commands</a> with the <span style="font-family: Courier New,Courier,monospace">sendCommand()</span> method.</p>
+ <p>To <a href="../../../../../org.tizen.tutorials/html/web/tizen/multimedia/media_controller_tutorial_w.htm#receive_command">receive and handle incoming commands</a> in the server, use the <span style="font-family: Courier New,Courier,monospace">addCommandListener()</span> method.</p>
</li>
</ul>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/> <img alt="Wearable Web" src="../../../images/ww_icon_optional.png"/></p>
</div>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<p>Multimedia features include managing the device sound volume and media keys.</p>
<p>The main multimedia features are:</p>
<ul>
- <li><a href="sound_w.htm">Sound</a> <p>Enables you to control the volume level of several sound types and get information about the current sound mode and the state of the current sound devices.</p></li>
+ <li><a href="media_controller_w.htm">Media Controller</a> <p>Enables you to communicate between the media controller server and client.</p></li>
<li><a href="media_key_w.htm">Media Key</a> <p>Enables you to handle media keys in your application.</p></li>
+ <li><a href="sound_w.htm">Sound</a> <p>Enables you to control the volume level of several sound types and get information about the current sound mode and the state of the current sound devices.</p></li>
</ul>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<th class="note">Note</th>
</tr>
<tr>
- <td class="note">The wearable service application requires <a href="../../../../../org.tizen.gettingstarted/html/details/sec_privileges.htm#web">partner-level certification</a> in Tizen 2.3.</td>
+ <td class="note">The wearable service application requires <a href="../../../../../org.tizen.gettingstarted/html/web/details/sec_privileges_w.htm">partner-level certification</a> in Tizen 2.3.</td>
</tr>
</tbody>
</table>
<p>To make sure that you can <a href="../../../../../org.tizen.tutorials/html/web/tizen/service/service_tutorial_w.htm#create">run a service application</a>, export a number of functions using the <a href="http://wiki.commonjs.org/wiki/Modules/1.1" target="_blank">CommonJS Modules</a> API. The functions need to be added to the <span style="font-family: Courier New,Courier,monospace">module.exports</span> object which is provided by the environment. These functions are called when there are life-cycle changes or application control events which are triggered by the application management framework.</p>
<p class="figure">Figure: State transitions</p>
- <p
style="text-align:center;"><img alt="State transitions" src="../../../images/service_app.png" /></p>
+ <p
align="center"><img alt="State transitions" src="../../../images/service_app.png" /></p>
<ul>
<li><span style="font-family: Courier New,Courier,monospace">onExit()</span>: This is called when the <a href="../../../../../org.tizen.tutorials/html/web/tizen/service/service_tutorial_w.htm#terminate">service ends</a>. You can release resources or save the context by using this callback.</li></ul>
<h2 id="package_mgmt" name="package_mgmt">Package Management</h2>
-<p>Service applications are <a href="../../../../../org.tizen.tutorials/html/web/tizen/service/service_tutorial_w.htm#package">packaged</a> with at least one UI application in a widget file. The widget file is installed, updated, and uninstalled as a single <a href="../../../../../org.tizen.gettingstarted/html/app_model/application_model_w.htm#package">package</a>, making the life-cycles of the service applications and the UI application synchronous.</p>
+<p>Service applications are <a href="../../../../../org.tizen.tutorials/html/web/tizen/service/service_tutorial_w.htm#package">packaged</a> with at least one UI application in a Web application package file. The Web application package file is installed, updated, and uninstalled as a single <a href="../../../../../org.tizen.gettingstarted/html/web/app_model/application_model_w.htm#package">package</a>, making the life-cycles of the service applications and the UI application synchronous.</p>
-<p>When privileges are defined, their scope covers the entire package. Hence privileges do not have to be specified for service applications because they are packaged with at least 1 UI application in a widget file.</p>
+<p>When privileges are defined, their scope covers the entire package. Hence privileges do not have to be specified for service applications because they are packaged with at least 1 UI application in a Web application package file.</p>
<h2 id="conf" name="conf">Configuration Extensions</h2>
<p>To ensure that a service application is acknowledged by the platform, the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file of the application must be extended.</p>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
</div>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
</div>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
</div>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/></p>
</div>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
</div>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/></p>
</div>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
</div>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/></p>
</div>
</ul>
<p>The available operations depend on the current radio state. Radio states and transitions between them are illustrated in the following figure.</p>
<p class="figure">Figure: FM radio states and transitions</p>
-<p style="text-align:center;"> <img alt="Badge" src="../../../images/fmradio-state.png" /></p>
+<p align="center"><img alt="FM radio states and transitions" src="../../../images/fmradio-state.png" /></p>
<p>To get information about current radio state, read the <span style="font-family: Courier New,Courier,monospace">state</span> attribute of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/fmradio.html#FMRadioManager">FMRadioManager</a> interface. The <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/fmradio.html#RadioState">RadioState</a> enum specifies possible values of the attribute: </p>
<ul>
<li><span style="font-family: Courier New,Courier,monospace">READY</span>: Initial state, the radio is not playing and can be started or switched to scan.</li>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/> <img alt="Wearable Web" src="../../../images/ww_icon_optional.png"/></p>
</div>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/> <img alt="Wearable Web" src="../../../images/ww_icon_optional.png"/></p>
</div>
<td>Ultraviolet sensor</td>
<td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">http://tizen.org/feature/sensor.ultraviolet</span> </p> </td>
</tr>
+ <tr>
+ <td>Heart rate monitor sensor</td>
+ <td rowspan="1" colspan="1"> <p> <span style="font-family: Courier New,Courier,monospace;">http://tizen.org/feature/sensor.heart_rate_monitor</span> </p> </td>
+ </tr>
+
</tbody>
</table>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<li>Property count check<p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/system/system_info_tutorial_w.htm#state">get the number of system property information</a> using the <span style="font-family: Courier New,Courier,monospace">getCount()</span> method of the <span style="font-family: Courier New,Courier,monospace">SystemInfo</span> interface.</p> </li>
<li>Device capability retrieval <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/system/system_info_tutorial_w.htm#retrieve">get a device capability</a> using the <span style="font-family: Courier New,Courier,monospace">getCapability()</span> method of the <span style="font-family: Courier New,Courier,monospace">SystemInfo</span> interface.</p> </li>
<li>Property state checks <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/system/system_info_tutorial_w.htm#state">retrieve the current state of a specific device property</a> by using the <span style="font-family: Courier New,Courier,monospace">getPropertyValue()</span> method.</p> <p>The property state can determine whether your application has enough resources to complete a particular task or service successfully. For example, if you are creating a file, you need to check the storage property to know whether a writable storage is available on the device.</p>
- <p>For example, you can <a href="../../../../../org.tizen.tutorials/html/web/tizen/system/system_info_tutorial_w.htm#orientation">check the device orientation</a>. The device orientation defines the angle between the direction of what is considered to be the "top" side of the device and the physical upward direction. The device orientation is not directly related to the screen orientation. For example, when the <strong>Auto rotate screen</strong> option is disabled or the
widget has the <a href="../../../../../org.tizen.devtools/html/web_tools/config_editor_w.htm#mw_setting">screen-orientation option</a> set to "landscape" or "portrait", the screen is not rotated and the <span style="font-family: Courier New,Courier,monospace">window.screen.orientation</span> property does not change; however, the <span style="font-family: Courier New,Courier,monospace">SystemInfo</span> device orientation changes.</p>
+ <p>For example, you can <a href="../../../../../org.tizen.tutorials/html/web/tizen/system/system_info_tutorial_w.htm#orientation">check the device orientation</a>. The device orientation defines the angle between the direction of what is considered to be the "top" side of the device and the physical upward direction. The device orientation is not directly related to the screen orientation. For example, when the <strong>Auto rotate screen</strong> option is disabled or the
Web application has the <a href="../../../../../org.tizen.devtools/html/web_tools/config_editor_w.htm#mw_setting">screen-orientation option</a> set to "landscape" or "portrait", the screen is not rotated and the <span style="font-family: Courier New,Courier,monospace">window.screen.orientation</span> property does not change; however, the <span style="font-family: Courier New,Courier,monospace">SystemInfo</span> device orientation changes.</p>
<p>When a device is in its natural position, it is considered to be in the <span style="font-family: Courier New,Courier,monospace">PORTRAIT_PRIMARY</span> orientation (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfoDeviceOrientationStatus">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html#SystemInfoDeviceOrientationStatus">wearable</a> applications) (if the screen height is greater than its width) or the <span style="font-family: Courier New,Courier,monospace">LANDSCAPE_PRIMARY</span> orientation (otherwise). When the device is rotated 90 degrees clockwise (rotated right), the orientation changes from <span style="font-family: Courier New,Courier,monospace">LANDSCAPE_PRIMARY</span> to <span style="font-family: Courier New,Courier,monospace">PORTRAIT_PRIMARY</span>, from <span style="font-family: Courier New,Courier,monospace">PORTRAIT_PRIMARY</span> to <span style="font-family: Courier New,Courier,monospace">LANDSCAPE_SECONDARY</span>, from <span style="font-family: Courier New,Courier,monospace">LANDSCAPE_SECONDARY</span> to <span style="font-family: Courier New,Courier,monospace">PORTRAIT_SECONDARY</span>, and from <span style="font-family: Courier New,Courier,monospace">PORTRAIT_SECONDARY</span> back to <span style="font-family: Courier New,Courier,monospace">LANDSCAPE_PRIMARY</span>.</p>
<table style="text-align: center">
<caption>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
</div>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
</ul>
<h2 id="exception" name="exception">Handling Exceptions</h2>
- <p>You can enable the Tizen APIs to throw errors synchronously with the <span style="font-family: Courier New,Courier,monospace">WebAPIException</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#WebAPIException">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#WebAPIException">wearable</a> applications) of the
<span style="font-family: Courier New,Courier,monospace">Tizen</span> API (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html">wearable</a> applications), or return errors in the error event handlers of asynchronous methods with the <span style="font-family: Courier New,Courier,monospace">WebAPIError</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#WebAPIError">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#WebAPIError">wearable</a> applications).</p>
+ <p>You can enable the Tizen APIs to throw errors synchronously with the <span style="font-family: Courier New,Courier,monospace">WebAPIException</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#WebAPIException">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#WebAPIException">wearable</a> applications) of the
Tizen API (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html">wearable</a> applications), or return errors in the error event handlers of asynchronous methods with the <span style="font-family: Courier New,Courier,monospace">WebAPIError</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#WebAPIError">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#WebAPIError">wearable</a> applications).</p>
<table class="note">
<tbody>
<tr>
</table>
<h2 id="generic" name="generic">Handling Generic Events</h2>
- <p>Generic event handling features allow you to <a href="../../../../../org.tizen.tutorials/html/web/tizen/tizen/tizen_tutorials_w.htm#use_handlers">handle the results of asynchronous operations</a>. The operations can implemented using the <span style="font-family: Courier New,Courier,monospace">SuccessCallback</span> (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#SuccessCallback">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#SuccessCallback">wearable</a> applications) and <span style="font-family: Courier New,Courier,monospace">ErrorCallback</span> (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#ErrorCallback">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#ErrorCallback">wearable</a> applications) event handlers of the <span style="font-family: Courier New,Courier,monospace">Tizen</span> API.</p>
+ <p>Generic event handling features allow you to <a href="../../../../../org.tizen.tutorials/html/web/tizen/tizen/tizen_tutorials_w.htm#use_handlers">handle the results of asynchronous operations</a>. The operations can implemented using the <span style="font-family: Courier New,Courier,monospace">SuccessCallback</span> (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#SuccessCallback">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#SuccessCallback">wearable</a> applications) and <span style="font-family: Courier New,Courier,monospace">ErrorCallback</span> (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#ErrorCallback">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#ErrorCallback">wearable</a> applications) event handlers of the Tizen API.</p>
<h2 id="coordinates" name="coordinates">Managing Location Coordinates</h2>
});</pre>
<h2 id="sorting" name="sorting">Sorting and Filtering Data</h2>
- <p>The <span style="font-family: Courier New,Courier,monospace">Tizen</span> API provides a set of basic definitions and interfaces that are used in the Tizen Device API. The Tizen API contains filters and sorting modes for query methods, generic success and error event handlers, a generic error interface, and a simple coordinate interface for defining location information.</p>
+ <p>The Tizen API provides a set of basic definitions and interfaces that are used in the Tizen Device API. The Tizen API contains filters and sorting modes for query methods, generic success and error event handlers, a generic error interface, and a simple coordinate interface for defining location information.</p>
<p>The main features of the Tizen API include:</p>
<ul>
<li>Filters <p>The Tizen API supports the following filter types, which are subtypes of the <span style="font-family: Courier New,Courier,monospace">abstract filter</span> (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#AbstractFilter">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#AbstractFilter">wearable</a> applications):</p>
<li><span style="font-family: Courier New,Courier,monospace">Attribute range</span> (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#AttributeRangeFilter">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#AttributeRangeFilter">wearable</a> applications)<p>Matches objects containing an attribute whose values are within a particular range.</p> </li>
<li><span style="font-family: Courier New,Courier,monospace">Composite filter</span> (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#CompositeFilter">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#CompositeFilter">wearable</a> applications)<p>Combines several filters into a set.</p></li>
</ul>
-<p>You can create <a href="../../../../../org.tizen.tutorials/html/web/tizen/tizen/tizen_tutorials_w.htm#filter">attribute filters</a>, <a href="../../../../../org.tizen.tutorials/html/web/tizen/tizen/tizen_tutorials_w.htm#range">attribute range filters</a>, and <a href="../../../../../org.tizen.tutorials/html/web/tizen/tizen/tizen_tutorials_w.htm#composite">composite filters</a> to search for specific data and <a href="../../../../../org.tizen.tutorials/html/web/tizen/tizen/tizen_tutorials_w.htm#make">make complex queries</a>. The attributes you can use with the filter types vary depending on the API you are using. For example, <a href="#calendar">Calendar</a>, <a href="#call">Call History</a>, <a href="#contact">Contact</a>, <a href="#content">Content</a>, and <a href="#messaging">Messaging</a> query methods each have their own sets of supported filter attributes.</p> </li>
+<p>You can create <a href="../../../../../org.tizen.tutorials/html/web/tizen/tizen/tizen_tutorials_w.htm#filter">attribute filters</a>, <a href="../../../../../org.tizen.tutorials/html/web/tizen/tizen/tizen_tutorials_w.htm#range">attribute range filters</a>, and <a href="../../../../../org.tizen.tutorials/html/web/tizen/tizen/tizen_tutorials_w.htm#composite">composite filters</a> to search for specific data and <a href="../../../../../org.tizen.tutorials/html/web/tizen/tizen/tizen_tutorials_w.htm#make">make complex queries</a>. The attributes you can use with the filter types vary depending on the API you are using. For example, <a href="#calendar">Calendar</a>, <a href="#call">Call History</a>, <a href="#contact">Contact</a>, <a href="#content
_filter">Content</a>, and <a href="#messaging">Messaging</a> query methods each have their own sets of supported filter attributes.</p> </li>
<li>Sorting <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/tizen/tizen_tutorials_w.htm#use_modes">sort the results of queried data</a> using the <span style="font-family: Courier New,Courier,monospace">SortMode</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/tizen.html#SortMode">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/tizen.html#SortMode">wearable</a> applications). The following sorting modes are supported:</p>
<ul>
<li> <p><span style="font-family: Courier New,Courier,monospace">"ASC"</span>: Ascending sorting order</p> </li>
</tr>
</tbody>
</table>
- <h3 id="content" name="content">Content Filter Attributes</h3>
+ <h3 id="content_filter" name="content_filter">Content Filter Attributes</h3>
<p>The following table lists the filter types you can use with specific content attributes in the methods of the <span style="font-family: Courier New,Courier,monospace">ContentManager</span> interface (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).</p>
<table>
<caption>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
</table>
<p class="figure">Figure: Badge</p>
- <p
style="text-align:center;"> <img alt="Badge" src="../../../images/badge.png" /></p>
+ <p
align="center"><img alt="Badge" src="../../../images/badge.png" /></p>
<p>The main features of the Badge API include:</p>
<ul>
<li>Managing badges
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+ <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../../org.tizen.tutorials/html/web/tizen/ui/noti_tutorial_w.htm">Notification Tutorial</a></li>
- <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/notification.html">Notification API for Mobile Web</a></li>
+ <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/notification.html">Notification API for Mobile Web</a></li>
+ <li><a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/notification.html">Notification API for Wearable Web</a></li>
</ul>
</div></div>
</div>
<th class="note">Note</th>
</tr>
<tr>
- <td class="note">This feature is supported in mobile applications only.</td>
+ <td class="note">The Notification API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices.
+<p>All mandatory APIs are supported on the Tizen Emulators.</p>
+</td>
</tr>
</tbody>
</table>
<li><a href="../../../../../org.tizen.tutorials/html/web/tizen/ui/noti_tutorial_w.htm#progress">Creating progress notifications</a></li>
<li><a href="../../../../../org.tizen.tutorials/html/web/tizen/ui/noti_tutorial_w.htm#manage">Managing notifications</a></li>
</ul>
- <p>To display a notification, you need to create a <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/notification.html#Notification">Notification</a> object, or its subtype. </p>
+ <p>To display a notification, you need to create a <span style="font-family: Courier New,Courier,monospace">Notification</span> object (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/notification.html#Notification">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/notification.html#Notification">wearable</a> applications), or its subtype. </p>
<table class="note">
<tbody>
<tr>
<th class="note">Note</th>
</tr>
<tr>
- <td class="note">Currently, only the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/notification.html#StatusNotification">StatusNotification</a> subtype is supported. This subtype displays notifications in the status bar.</td>
+ <td class="note">Currently, only the <span style="font-family: Courier New,Courier,monospace">StatusNotification</span> subtype (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/notification.html#StatusNotification">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/notification.html#StatusNotification">wearable</a> applications) is supported. This subtype displays notifications in the status bar.</td>
</tr>
</tbody>
</table>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<p>User interface (UI) features include managing badges and notifications on the device screen.</p>
<p>The main UI features are:</p>
<ul>
- <li><a href="badge_w.htm">Badge</a> <p>Allows you to create and update badges on the Home screen.</p></li>
- </ul>
-
-<p>The following guides apply in <span style="color: red">mobile applications only</span>:</p>
-<ul>
+ <li><a href="badge_w.htm">Badge</a> <p>Allows you to create and update badges on the home screen.</p></li>
<li><a href="noti_w.htm">Notification</a> <p>Allows you to create and display different types of notifications.</p></li>
</ul>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Web UI Framework (UIFW)</h1>
- <p>Web UI Framework features allow you to create and manage various kinds of UI components. The components represent a visual UI control, such as a button or slider, which you can interact with and manipulate.</p>
+ <p>Web UI Framework features allow you to create and manage various kinds of UI components. The components represent a visual UI element, such as a button or slider, which you can interact with and manipulate.</p>
<p>The Tizen UI components creation and features include:</p>
<ul>
</script>
</body>
-</html>
+</html>
\ No newline at end of file
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
</div>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
</div>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
</div>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<p>The following image shows a simple background color (top left), a background image (top right), multiple images with a solid black border (bottom left), and an element with shading and a solid black border with rounded corners (bottom right). The background image at top right is automatically repeated to cover the entire background, while the images at bottom left are not repeated due to the <span style="font-family: Courier New,Courier,monospace">background-repeat</span> property value.</p>
<p class="figure">Figure: Background examples</p>
- <p
style="text-align:center;"><img alt="Background examples" src="../../../images/css_bg1.png" /></p>
+ <p
align="center"><img alt="Background examples" src="../../../images/css_bg1.png" /></p>
<p>The following code snippet demonstrates how to set the background color, images, borders, and shadings.</p>
<pre class="prettyprint">
-<!-- Background color -->
+<!--Background color-->
#one
{
width: 180px;
background-color: lightblue;
}
-<!-- Background image -->
+<!--Background image-->
#one
{
width: 200px;
background-image: url(t3.png);
}
-<!-- Multiple images -->
+<!--Multiple images-->
#multi
{
width: 155px;
background-repeat: no-repeat;
}
-<!-- Shading and border with rounded corners -->
+<!--Shading and border with rounded corners-->
#shading
{
width: 160px;
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<li>Box model properties
<p>A box model refers to all DOM elements excluding design elements, such as <span style="font-family: Courier New,Courier,monospace"><br></span> and <span style="font-family: Courier New,Courier,monospace"><i></span>. The box model area is set as defined in the following figure.</p>
<ul>
-<li><b>Content</b>: Content area</li>
-<li><b>Padding</b>: Gap between the content and boundary</li>
-<li><b>Border</b>: Boundary</li>
-<li><b>Margin</b>: Overall size of the box model</li>
+<li><strong>Content</strong>: Content area</li>
+<li><strong>Padding</strong>: Gap between the content and boundary</li>
+<li><strong>Border</strong>: Boundary</li>
+<li><strong>Margin</strong>: Overall size of the box model</li>
</ul>
<p class="figure">Figure: Box model structure</p>
<p align="center"><img alt="Figure: Box model structure" src="../../../images/box_model_properties_struct.png"/></p>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_color_module_level_3" target="_blank">transparent.html</a></li>
</ul>
<pre class="prettyprint">
-<!-- Keywords -->
+<!--Keywords-->
#one
{
color: blue;
color: transparent;
}
-<!-- RGB -->
+<!--RGB-->
#two
{
color: #ff0000;
}
-<!-- RGBA -->
+<!--RGBA-->
#three
{
color: rgba(100%, 0, 0, 0.5);
}
-<!-- HSL -->
+<!--HSL-->
#four
{
color: hsl(0, 100%, 50%);
}
-<!-- HSLA -->
+<!--HSLA-->
#five
{
color: hsla(0, 100%, 50%, 0.5);
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
</div>
</pre>
<p class="figure">Figure: 4 columns on different resolution displays</p>
-<p
style="text-align:center;"><img alt="4 columns on different resolution displays" src="../../../images/4_columns.png" /></p>
+<p
align="center"><img alt="4 columns on different resolution displays" src="../../../images/4_columns.png" /></p>
<p>The <span style="font-family: Courier New,Courier,monospace">column-width</span> (or <span style="font-family: Courier New,Courier,monospace">-webkit-column-width)</span> property sets the base column width.</p>
<p>In the following code snippet and figure, the column width is set to 153 px, but the effective column width is 288 px for a 480 x 800 display (shown on the left) and 154 px for a 720 x 1280 display (shown on the right). The parameter sets the column to at least the defined width, but not wider than the available display space or twice the defined width. The actual column width is calculated using a <a href="http://www.w3.org/TR/2011/CR-css3-multicol-20110412/#pseudo-algorithm" target="_blank">pseudo-algorithm</a>.</p>
</pre>
<p class="figure">Figure: Column width 153 px on different resolution displays</p>
-<p
style="text-align:center;"><img alt="Column width 153 px on different resolution displays" src="../../../images/column_width.png" /></p>
+<p
align="center"><img alt="Column width 153 px on different resolution displays" src="../../../images/column_width.png" /></p>
<h2 id="gap" name="gap">Setting the Column Gap</h2>
<p>The <span style="font-family: Courier New,Courier,monospace">column-gap</span> (or <span style="font-family: Courier New,Courier,monospace">-webkit-column-gap</span>) property sets the distance between columns. The property affects the column width, as the column width, gap, and margins all take available space. In the following code snippet and figure, the column gap is set to 17 px.</p>
</pre>
<p class="figure">Figure: Column gap</p>
-<p
style="text-align:center;"><img alt="Column gap" src="../../../images/column_gap.png" /></p>
+<p
align="center"><img alt="Column gap" src="../../../images/column_gap.png" /></p>
<h2 id="rule" name="rule">Setting the Column Rule</h2>
<p>The <span style="font-family: Courier New,Courier,monospace">column-rule</span> (or <span style="font-family: Courier New,Courier,monospace">-webkit-column-rule</span>) property displays a vertical line in the middle of the column gap.</p>
</pre>
<p class="figure">Figure: Column rule</p>
-<p
style="text-align:center;"><img alt="Column rule" src="../../../images/column_rule.png" /></p>
+<p
align="center"><img alt="Column rule" src="../../../images/column_rule.png" /></p>
<table class="note">
<tbody>
</pre>
<p class="figure">Figure: Column span</p>
-<p
style="text-align:center;"><img alt="Column span" src="../../../images/column_span.png" /></p>
+<p
align="center"><img alt="Column span" src="../../../images/column_span.png" /></p>
<h2 id="break" name="break">Setting the Column Break</h2>
<p>By default, column elements are broken to balance column height. The <span style="font-family: Courier New,Courier,monospace">break-before</span> (or <span style="font-family: Courier New,Courier,monospace">-webkit-column-break-before</span>), <span style="font-family: Courier New,Courier,monospace">break-after</span> (or <span style="font-family: Courier New,Courier,monospace">-webkit-column-break-after</span>), and <span style="font-family: Courier New,Courier,monospace">break-inside</span> (or <span style="font-family: Courier New,Courier,monospace">-webkit-column-break-inside</span>) properties can be used to define that an element cannot be broken between columns (set to <span style="font-family: Courier New,Courier,monospace">avoid</span>), or that an element must begin or end within a given column.</p>
</pre>
<p class="figure">Figure: Column break</p>
-<p
style="text-align:center;"><img alt="Column break" src="../../../images/column_break.png" /></p>
+<p
align="center"><img alt="Column break" src="../../../images/column_break.png" /></p>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<p>This property defines whether the backface of the transformed element is expressed.</p></li>
</ul>
-<pre class="prettyprint">
+<pre class="prettyprint lang-html">
<head>
<style type="text/css">
.box
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<ol>
<li>Create the applications with the following logic:
-<ol><li>Load an image.</li>
+<ol type="a"><li>Load an image.</li>
<li>Render the loaded image in the random location of the canvas.</li>
<li>Use the <span style="font-family: Courier New,Courier,monospace">requestAnimationFrame()</span> method of the Timing control for script-based animations API (in <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#timing">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#timing">wearable</a> applications) to change the color of the loaded image, based on different times.</li>
<li>Create a logic that measures FPS (frames per second) in order to check the performance.</li></ol></li>
<p>The following figure shows the result of the test: As the number of objects increase, the performance of the Canvas 2D Context API rapidly decreases when compared to WebGL (the result is subject to change according to the complexity of the application logic). As such, when expressing many graphic objects all differently, it is much more efficient to use WebGL than the Canvas 2D Context API.</p>
<p class="figure">Figure: Test result</p>
- <p
style="text-align:center;"><img alt="Test result" src="../../../images/comp_test_result.png" /></p>
+ <p
align="center"><img alt="Test result" src="../../../images/comp_test_result.png" /></p>
<p>There is one problem with using WebGL; the ratio of mobile browsers supporting it is quite low compared to the Canvas 2D Context API, and even when it is supported, usually only partial features are included (support for 3D acceleration, reflection effect, and camera effect is particularly low). The following figure shows the support status of WebGL in computer (top) and mobile (bottom) browsers, as published in <a href="http://webglstats.com/" target="_blank">http://webglstats.com/</a> in June 2013.</p>
<p class="figure">Figure: WebGL support in computer and mobile browsers</p>
- <p
style="text-align:center;"><img alt="WebGL support in computer and mobile browsers" src="../../../images/comp_test_support.png" /></p>
+ <p
align="center"><img alt="WebGL support in computer and mobile browsers" src="../../../images/comp_test_support.png" /></p>
<p>Many mobile browsers do not support WebGL or only partially support WebGL. Even though Tizen supports WebGL, it is recommended to use the Canvas 2D Context API for small amount of 2D drawings, since the API is supported in most mobile browsers. However, for performance critical applications, use WebGL for faster 2D performance.</p>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../images/ww_icon.png"/></p>
</div>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
</div>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
</div>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<pre class="prettyprint">/* Code#2 */
var search_button = $('#contents button');</pre>
<p class="figure">Figure: jQuery performance improvement result (in mobile applications only)</p>
-
<p style="text-align:center;"><img alt="jQuery performance improvement result (in mobile applications only)" src="../../../images/js_perform_result_selector1.png" /></p>
+
<p align="center"><img alt="jQuery performance improvement result (in mobile applications only)" src="../../../images/js_perform_result_selector1.png" /></p>
<table border="1">
<caption>Table: jQuery performance improvement result</caption>
<tbody>
<pre class="prettyprint">/*Code#3*/
var search_button = $('#contents button.blue');</pre>
<p class="figure">Figure: jQuery performance improvement result (in mobile applications only)</p>
-
<p style="text-align:center;"><img alt="jQuery performance improvement result (in mobile applications only)" src="../../../images/js_perform_result_selector2.png" /></p>
+
<p align="center"><img alt="jQuery performance improvement result (in mobile applications only)" src="../../../images/js_perform_result_selector2.png" /></p>
<table>
<caption>Table: jQuery performance improvement result</caption>
<tbody>
$search_button.removeClass('blue');
$search_button.addClass('red');</pre>
<p class="figure">Figure: jQuery performance improvement result (in mobile applications only)</p>
-
<p style="text-align:center;"><img alt="jQuery performance improvement result (in mobile applications only)" src="../../../images/js_perform_result_cache.png" /></p>
+
<p align="center"><img alt="jQuery performance improvement result (in mobile applications only)" src="../../../images/js_perform_result_cache.png" /></p>
<table border="1">
<caption>Table: jQuery performance improvement result</caption>
<tbody>
<pre class="prettyprint">/* Code#2 */
$("#contents").addClass('active').css('border', '1px solid').('background-color', 'red');</pre>
<p class="figure">Figure: jQuery performance improvement result (in mobile applications only)</p>
-
<p style="text-align:center;"><img alt="jQuery performance improvement result (in mobile applications only)" src="../../../images/js_perform_result_chaining.png" /></p>
+
<p align="center"><img alt="jQuery performance improvement result (in mobile applications only)" src="../../../images/js_perform_result_chaining.png" /></p>
<table border="1">
<caption>Table: jQuery performance improvement result</caption>
<tbody>
}
$contents_list.append(list);</pre>
<p class="figure">Figure: jQuery performance improvement result (in mobile applications only)</p>
-
<p style="text-align:center;"><img alt="jQuery performance improvement result (in mobile applications only)" src="../../../images/js_perform_result_jquery_dom.png" /></p>
+
<p align="center"><img alt="jQuery performance improvement result (in mobile applications only)" src="../../../images/js_perform_result_jquery_dom.png" /></p>
<table border="1">
<caption>Table: jQuery performance improvement result</caption>
<tbody>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
new_array_list.push(array_list[i])
}</pre>
<p class="figure">Figure: JavaScript performance improvement result (in mobile applications only)</p>
-
<p style="text-align:center;"><img alt="JavaScript performance improvement result (in mobile applications only)" src="../../../images/js_perform_result_debug.png" /></p>
+
<p align="center"><img alt="JavaScript performance improvement result (in mobile applications only)" src="../../../images/js_perform_result_debug.png" /></p>
<table border="1">
<caption>Table: JavaScript performance improvement result</caption>
<tbody>
new_array_list.push(array_list[i]);
}</pre>
<p class="figure">Figure: JavaScript performance improvement result (in mobile applications only)</p>
-
<p style="text-align:center;"><img alt="JavaScript performance improvement result (in mobile applications only)" src="../../../images/js_perform_result_loop.png" /></p>
+
<p align="center"><img alt="JavaScript performance improvement result (in mobile applications only)" src="../../../images/js_perform_result_loop.png" /></p>
<table class="note">
<tbody>
<tr>
new_array_list.push(array_list[i]);
}</pre>
<p class="figure">Figure: JavaScript performance improvement result (in mobile applications only)</p>
-
<p style="text-align:center;"><img alt="JavaScript performance improvement result (in mobile applications only)" src="../../../images/js_perform_result_array.png" /></p>
+
<p align="center"><img alt="JavaScript performance improvement result (in mobile applications only)" src="../../../images/js_perform_result_array.png" /></p>
<table border="1">
<caption>Table: JavaScript performance improvement result</caption>
<tbody>
}</pre>
<p class="figure">Figure: JavaScript performance improvement result (in mobile applications only)</p>
-
<p style="text-align:center;"><img alt="JavaScript performance improvement result (in mobile applications only)" src="../../../images/js_perform_result_literal.png" /></p>
+
<p align="center"><img alt="JavaScript performance improvement result (in mobile applications only)" src="../../../images/js_perform_result_literal.png" /></p>
<table border="1">
<caption>Table: JavaScript performance improvement result</caption>
<tbody>
style = contents_list.getAttribute('style');
}</pre>
<p class="figure">Figure: JavaScript performance improvement result (in mobile applications only)</p>
-
<p style="text-align:center;"><img alt="JavaScript performance improvement result (in mobile applications only)" src="../../../images/js_perform_result_js_dom.png" /></p>
+
<p align="center"><img alt="JavaScript performance improvement result (in mobile applications only)" src="../../../images/js_perform_result_js_dom.png" /></p>
<table border="1">
<caption>Table: JavaScript performance improvement result</caption>
<tbody>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<p>The following example uses a UI thread to apply a color filter effect on an image and to display the time taken to apply the filter. Since all the calculations are performed in a single UI thread using the <span style="font-family: Courier New,Courier,monospace">colorFilter()</span> method, the execution time is high (16218 milliseconds).</p>
<p class="figure">Figure: Color filter application using UI thread (in mobile applications only)</p>
-<p
style="text-align:center;"><img alt="Color filter application using UI thread (in mobile applications only)" src="../../../images/color_filter_app_ui_thread.png" /></p>
+<p
align="center"><img alt="Color filter application using UI thread (in mobile applications only)" src="../../../images/color_filter_app_ui_thread.png" /></p>
<pre class="prettyprint">function colorFilterStart()
{
};
</pre>
-<p>You can test the application performance using the <a href="../../../../../org.tizen.devtools/html/web_tools/remote_inspector_w.htm">Remote Inspector</a>. In the <a href="../../../../../org.tizen.devtools/html/web_tools/remote_inspector_w.htm#time">Timeline panel</a>, the event of performing all the calculations in a single UI thread creates a delay of 16218 milliseconds.</p>
+<p>You can test the application performance using the <a href="../../../../../org.tizen.devtools/html/web_tools/web_inspector_w.htm">Web Inspector</a>. In the <a href="../../../../../org.tizen.devtools/html/web_tools/web_inspector_w.htm#time">Timeline panel</a>, the event of performing all the calculations in a single UI thread creates a delay of 16218 milliseconds.</p>
<p class="figure">Figure: UI thread application event performance</p>
-<p
style="text-align:center;"><img alt="UI thread application event performance" src="../../../images/uithreadapp_event_inspector.png" /></p>
+<p
align="center"><img alt="UI thread application event performance" src="../../../images/uithreadapp_event_inspector.png" /></p>
<p class="figure">Figure: UI thread application memory performance</p>
-<p
style="text-align:center;"><img alt="UI thread application memory performance" src="../../../images/uithreadapp_memory_inspector.png" /></p>
+<p
align="center"><img alt="UI thread application memory performance" src="../../../images/uithreadapp_memory_inspector.png" /></p>
<table class="note">
<tbody>
<th class="note">Note</th>
</tr>
<tr>
- <td class="note">Since launching the Remote Inspector takes up a lot of CPU resources, a lot of additional delays are recorded in the Timeline panel. If the Remote Inspector is not used, the delay is approximately 6000 milliseconds.</td>
+ <td class="note">Since launching the Web Inspector takes up a lot of CPU resources, a lot of additional delays are recorded in the Timeline panel. If the Web Inspector is not used, the delay is approximately 6000 milliseconds.</td>
</tr>
</tbody>
</table>
<p>The following example uses 4 Web workers to apply a color filter effect on an image by dividing the image into 4 horizontal areas and working on each area simultaneously. The time taken by the application to apply the filter is also displayed on the screen. Since all the calculations are performed by 4 Web workers simultaneously, the execution time is significantly lower (2254 milliseconds).</p>
<p class="figure">Figure: Color filter application using multi-thread Web workers (in mobile applications only)</p>
-<p
style="text-align:center;"><img alt="Color filter application using multi-thread Web workers (in mobile applications only)" src="../../../images/color_filter_app_multi_thread.png" /></p>
+<p
align="center"><img alt="Color filter application using multi-thread Web workers (in mobile applications only)" src="../../../images/color_filter_app_multi_thread.png" /></p>
<pre class="prettyprint">function colorFilterStart()
{
<p>By using 4 Web workers in the application, the application performance improves 7 times compared to using a UI thread in the same application.</p>
<p class="figure">Figure: Multi-thread application event performance</p>
-<p
style="text-align:center;"><img alt="Multi-thread application event performance" src="../../../images/multithreadapp_event_inspector.png" /></p>
+<p
align="center"><img alt="Multi-thread application event performance" src="../../../images/multithreadapp_event_inspector.png" /></p>
<p class="figure">Figure: Multi-thread application memory performance</p>
-<p
style="text-align:center;"><img alt="Multi-thread application memory performance" src="../../../images/multithreadapp_memory_inspector.png" /></p>
+<p
align="center"><img alt="Multi-thread application memory performance" src="../../../images/multithreadapp_memory_inspector.png" /></p>
<p>The following table shows the response speed and memory performance based on the number of Web worker threads used to run the application in a Tizen quad-core processor device.</p>
<table>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
</ul>
<p class="figure">Figure: Simple request workflow</p>
-<p
style="text-align:center;"><img alt="Simple request workflow" src="../../../images/cors_simple.png" /></p>
+<p
align="center"><img alt="Simple request workflow" src="../../../images/cors_simple.png" /></p>
<h2 name="preflight" id="preflight">Preflight Request</h2>
<p class="figure">Figure: Preflight request workflow</p>
-<p
style="text-align:center;"><img alt="Preflight request workflow" src="../../../images/cors_preflight.png" /></p>
+<p
align="center"><img alt="Preflight request workflow" src="../../../images/cors_preflight.png" /></p>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
</div>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
</div>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
</div>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
</div>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
</div>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
</div>
<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
</div>
<div id="container"><div id="contents"><div class="content">
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<p>The browser, based on the version defined in the <span style="font-family: Courier New,Courier,monospace;"><!DOCTYPE></span> element and DTD (Document Type Definition), decides how to handle the HTML before interpreting it. Therefore, the <span style="font-family: Courier New,Courier,monospace;"><!DOCTYPE></span> element must be declared at the beginning of an HTML document.</p>
-<pre class="prettyprint">/* HTML5 */
+<pre class="prettyprint"><!--HTML5-->
<!DOCTYPE html>
-/* Prior to HTML5 */
+<!--Prior to HTML5-->
<!DOCTYPE html PUBLIC "{HTML Version Information}" "{DTD (Document Type Definition) file link defined by Rule in HTML DOM}">
</pre>
<p>The following figure illustrates this problem in mobile applications by applying a font color to a black background.</p>
<p class="figure">Figure: Expected and actual result of applying a font color (in mobile applications only)</p>
-<p
style="text-align:center;"><img alt="Expected and actual result of applying a font color (in mobile applications only)" src="../../../images/css_result.png" /></p>
+<p
align="center"><img alt="Expected and actual result of applying a font color (in mobile applications only)" src="../../../images/css_result.png" /></p>
<h3>Basic CSS Rules</h3>
<ul>
<li>When more than 1 overlapping styles are applied to the same element, only the last style is visible:
-<pre class="prettyprint">p {color: red}
+<pre class="prettyprint lang-html">p {color: red}
p {color: blue}
-/* Blue color is applied */
+<!--Blue color is applied-->
</pre></li>
<li>The style applied in the parent node at the DOM tree is inherited. For more information, see <a href="http://www.w3.org/TR/CSS21/cascade.html#inheritance" target="_blank">W3C inheritance documentation</a>.
</li>
<li>Element = 1</li>
</ul>
-<pre class="prettyprint"><body>
-<p id="target" class="target">Hello World</p>
+<pre class="prettyprint lang-htm"><body>
+ <p id="target" class="target">Hello World</p>
</body>
<style>
p#target {color: red} /* Specificity: 101 */
p.target {color: blue} /* Specificity: 11 */
p {color: tomato} /* Specificity: 1 */
- /* Red color is applied */
-</style></pre>
+</style>
+<!--Red color is applied--></pre>
</li>
<li>When the <span style="font-family: Courier New,Courier,monospace;">!important</span> attribute is used, it has the highest priority:
-<pre class="prettyprint"><body>
-<p id="target" class="target">Hello World</p>
+<pre class="prettyprint lang-xml"><body>
+ <p id="target" class="target">Hello World</p>
</body>
<style>
p#target {color: red}
p.target {color: blue}
p {color: tomato}
- /* Black color is applied */
-</style></pre>
+</style>
+<!--Black color is applied--></pre>
</li>
</ul>
<li><span style="font-family: Courier New,Courier,monospace;">style</span> attribute in a HTML element</li>
</ol>
-<pre class="prettyprint lang-js"><!DOCTYPE html>
+<pre class="prettyprint"><!DOCTYPE html>
<html>
<head>
- /* Link in head */
+ <!--Link in head-->
<link rel="stylesheet" href="css/style.css"/>
- /* Style tag in head */
+ <!--Style tag in head-->
<style>
p {color: tomato}
</style>
- /* @import in CSS area */
+ <!--@import in CSS area-->
<style>
@import url("css/style.css");
</style>
</head>
<body>
- /* Style attribute in HTML element */
+ <!--Style attribute in HTML element-->
<p style="color: red">Hello World</p>
</body>
</html>
</tbody>
</table>
<p class="figure">Figure: Using the <span style="font-family: Courier New,Courier,monospace;">@import</span> attribute</p>
-<p
style="text-align:center;"><img alt="Using the @import attribute" src="../../../images/using_import_attribute.png" /></p>
+<p
align="center"><img alt="Using the @import attribute" src="../../../images/using_import_attribute.png" /></p>
<p>The markup in the corresponding files is as follows:</p>
<ul>
p: after {content: " : linked in head"}
</pre>
<p class="figure">Figure: Result of linking the <span style="font-family: Courier New,Courier,monospace;">@import</span> attribute</p>
-<p
style="text-align:center;"><img alt="Result of linking the @import attribute" src="../../../images/import_linked_in_head.png" /></p></li>
+<p
align="center"><img alt="Result of linking the @import attribute" src="../../../images/import_linked_in_head.png" /></p></li>
<li>In the <span style="font-family: Courier New,Courier,monospace;">priorities1.css</span> file:
<pre class="prettyprint">p: after {content: " : Using @import in CSS area"}
</pre>
<p class="figure">Figure: Result of using the <span style="font-family: Courier New,Courier,monospace;">@import</span> attribute in the CSS area</p>
-<p
style="text-align:center;"><img alt="Result of using the @import attribute in the CSS area" src="../../../images/import_css_area.png" /></p></li>
+<p
align="center"><img alt="Result of using the @import attribute in the CSS area" src="../../../images/import_css_area.png" /></p></li>
</ul>
<h2 id="js" name="js">JavaScript Behavior</h2>
<p>The following example shows the use of a simple event:</p>
-<pre class="prettyprint lang-js">/* HTML */
+<pre class="prettyprint lang-js"><!--HTML-->
<body onload="touchEventHandler()">
/* JavaScript */
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a href="#key" class="opensection">Key Concepts</a></li>
- <li><a href="#ui" class="opensection">UI Scalability</a></li>
- <li><a href="#create" class="opensection">Creating Applications Supporting Multiple Screens</a></li>
- <li><a href="#resolution" class="opensection">Image Resolution Optimization</a></li>
+ <li><a href="#key">Key Concepts</a></li>
+ <li><a href="#ui">UI Scalability</a></li>
+ <li><a href="#create">Creating Applications Supporting Multiple Screens</a></li>
+ <li><a href="#resolution">Image Resolution Optimization</a></li>
</ul>
</div></div>
</div>
</ul>
<p></p>
<h2 id="ui" name="ui">UI Scalability</h2>
- <p>With UI scalability, you can support multiple screen resolutions in a single Tizen Web application. Tizen automatically converts and translates the size and position values that are defined in the application's logical resolution to the physical resolution at runtime. The Tizen Advanced UI (TAU) uses the <a href="#viewport">viewport meta tag</a> to fit the Web page into the device screen, and the <span style="font-family: Courier New,Courier,monospace">rem</span> unit to determine the size of the Tizen Web UI widgets.</p>
+ <p>With UI scalability, you can support multiple screen resolutions in a single Tizen Web application. Tizen automatically converts and translates the size and position values that are defined in the application's logical resolution to the physical resolution at runtime. The Tizen Advanced UI (TAU) uses the <a href="#viewport">viewport meta tag</a> to fit the Web page into the device screen, and the <span style="font-family: Courier New,Courier,monospace">rem</span> unit to determine the size of the Tizen Web UI components.</p>
<h3 id="set" name="set">Setting the Viewport</h3>
<p>Tizen devices support a variety of screen resolutions and dots per inch (DPI) values. If the viewport meta tag is not defined, TAU uses the default viewport width and scale factor. This ensures that Web content layout varies between different screen resolutions.</p>
- <p>In the following example, the viewport width is set to <span style="font-family: Courier New,Courier,monospace">device-width</span>, which is determined by the width of the Tizen device. The <span style="font-family: Courier New,Courier,monospace">device-width</span> value is retrieved to set similar virtual DPI values and to display widgets with similar physical sizes across all devices. (TAU uses the example value by default, if no other viewport value is defined.)</p>
+ <p>In the following example, the viewport width is set to <span style="font-family: Courier New,Courier,monospace">device-width</span>, which is determined by the width of the Tizen device. The <span style="font-family: Courier New,Courier,monospace">device-width</span> value is retrieved to set similar virtual DPI values and to display UI components with similar physical sizes across all devices. (TAU uses the example value by default, if no other viewport value is defined.)</p>
<pre class="prettyprint"><meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"></pre>
<p>If the viewport width is set to <span style="font-family: Courier New,Courier,monospace">device-width</span>, the width and scale factor values are calculated by the Web browser. The following table shows different layout sizes and scale factors of the Tizen Web site (<span style="font-family: Courier New,Courier,monospace">http://tizen.org</span>) on different devices with the viewport width set to <span style="font-family: Courier New,Courier,monospace">device-width</span>.</p>
<li>Creating screen resolution-independent UI</li>
</ul>
<h3 id="configure" name="configure">Configuring the Viewport</h3>
- <p>To use UI scalability in your application, set the <span style="font-family: Courier New,Courier,monospace">viewport</span> meta tag while <a href="../../../../../org.tizen.gettingstarted/html/process/app_dev_process_w.htm">creating a Web application project</a> in IDE. To configure the viewport in the Tizen Web applications, add the <span style="font-family: Courier New,Courier,monospace">viewport</span> meta tag in the <span style="font-family: Courier New,Courier,monospace"><head></span> section of the <span style="font-family: Courier New,Courier,monospace">index.html</span> file:</p>
+ <p>To use UI scalability in your application, set the <span style="font-family: Courier New,Courier,monospace">viewport</span> meta tag while <a href="../../../../../org.tizen.gettingstarted/html/web/process/app_dev_process_w.htm">creating a Web application project</a> in IDE. To configure the viewport in the Tizen Web applications, add the <span style="font-family: Courier New,Courier,monospace">viewport</span> meta tag in the <span style="font-family: Courier New,Courier,monospace"><head></span> section of the <span style="font-family: Courier New,Courier,monospace">index.html</span> file:</p>
<pre class="prettyprint"><meta name="viewport"
content="width=device-width, initial-scale=1.0,
minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"></pre>
<pre class="prettyprint"><link media="only screen and (min-resolution: 320dpi)"
href="high-quality-images.css" type= "text/css" rel="stylesheet"></pre>
<p>In the CSS file:</p>
- <pre class="prettyprint">@media screen and (max-resolution: 159dpi)
+ <pre class="prettyprint lang-html">@media screen and (max-resolution: 159dpi)
{
- /* Set styles */
+ <!--Set styles-->
}
@media screen and (min-resolution: 160dpi and max-resolution: 239dpi)
{
- /* Set styles */
+ <!--Set styles-->
}
@media screen and (min-resolution: 240dpi and max-resolution: 319dpi)
{
- /* Set styles */
+ <!--Set styles-->
}
@media screen and (min-resolution: 320dpi)
{
- /* Set styles */
+ <!--Set styles-->
}
</pre>
<p>You can also set different layout and resources for the portrait and landscape views in the CSS file:</p>
- <pre class="prettyprint">@media screen and (orientation: portrait)
+ <pre class="prettyprint lang-html">@media screen and (orientation: portrait)
{
- /* Set styles */
+ <!--Set styles-->
}
@media screen and (orientation: landscape)
{
- /* Set styles */
+ <!--Set styles-->
}
</pre>
<h3 id="independent" name="independent">Creating Screen Resolution-independent UI</h3>
</ul>
<h3 id="photos" name="photos">Photos</h3>
<p>An image can be added to an application using the HTML <span style="font-family: Courier New,Courier,monospace">img</span> tag, or CSS <span style="font-family: Courier New,Courier,monospace">background</span> property as shown in the following example:</p>
- <pre class="prettyprint">/* HTML */
+ <pre class="prettyprint"><!--HTML-->
<img src="images/sample.jpg" alt="sample image" />
-/* CSS */
+<!--CSS-->
.photo
{
background: url(../images/sample.jpg) 0 0 no-repeat;
</pre>
<p class="figure">Figure: Enlarging a low-resolution image</p>
-<p
style="text-align:center;"><img alt="Enlarging a low-resolution image" src="../../../images/enlarge_low_res_image.png" /></p>
+<p
align="center"><img alt="Enlarging a low-resolution image" src="../../../images/enlarge_low_res_image.png" /></p>
<h3 id="icons" name="icons">Icons</h3>
<p>Icons generally have a fixed size. Size icon images as 2 times bigger than their original size. Using the CSS3 <span style="font-family: Courier New,Courier,monospace">background-size</span> property, you can add an image with the size of, for example, 40 x 40 px, compressed as 20 x 20 px.</p>
<pre class="prettyprint">.prev_icon, .next_icon
<p>When multiple icons are used on a page, all the image files are called separately. This slows down the loading speed and causes a large number of network roundtrips, as illustrated in the figure below.</p>
<p class="figure">Figure: Network speed when calling each image separately</p>
-<p
style="text-align:center;"><img alt="Calling each of image separately" src="../../../images/calling_img_sep.png"/></p>
+<p
align="center"><img alt="Calling each of image separately" src="../../../images/calling_img_sep.png"/></p>
<p>You can use the sprite image technique (grouping multiple images as one and showing the only desired images defined with the <span style="font-family: Courier New,Courier,monospace">background-position</span> property) to noticeably reduce the page loading speed without any loss in quality of the image, as the following example shows.
</p>
<pre class="prettyprint">.prev_icon, .next_icon
{
- background-size: 20px auto; /* Full HD Display */
+ background-size: 20px auto; <!--Full HD Display-->
background-image: url(../images/page_navi_arrow.png);
}
}
</pre>
<p class="figure">Figure: Network speed when using sprite images</p>
-<p
style="text-align:center;"><img alt="Network speed when using sprite image" src="../../../images/network_speed_sprite.png" /></p>
+<p
align="center"><img alt="Network speed when using sprite image" src="../../../images/network_speed_sprite.png" /></p>
<h3 id="animated" name="animated">Animated Images</h3>
<p>Animated images can be created in various formats and with many tools, such as GIF, JavaScript, Canvas, and SVG.</p>
<p>To create a simple and repetitive animation effect as below as effectively as possible, use GIF images, JavaScript, or the CSS3 <span style="font-family: Courier New,Courier,monospace;">animation</span> attribute.</p>
<p class="figure">Figure: JAVA mascot character in GIF (source: <a href="http://lea.verou.me" target="_blank">http://lea.verou.me</a>)</p>
- <p
style="text-align:center;"><img alt="JAVA mascot character in GIF" src="../../../images/mascot.gif"/></p><br/>
+ <p
align="center"><img alt="JAVA mascot character in GIF" src="../../../images/mascot.gif"/></p><br/>
- <p>Below, the network capacity usage and timeline using the following animation types are compared using the <a href="../../../../../org.tizen.devtools/html/web_tools/remote_inspector_w.htm">Remote Inspector</a>:</p>
+ <p>Below, the network capacity usage and timeline using the following animation types are compared using the <a href="../../../../../org.tizen.devtools/html/web_tools/web_inspector_w.htm">Web Inspector</a>:</p>
<ul>
<li><a href="#gif">GIF animation</a></li>
<li><a href="#js">JavaScript animation</a></li>
</ul>
<p class="figure">Figure: Events for a GIF image</p>
- <p
style="text-align:center;"><img alt="Events" src="../../../images/events.png"/></p><br/>
+ <p
align="center"><img alt="Events" src="../../../images/events.png"/></p><br/>
<p class="figure">Figure: Memory usage of a GIF image</p>
- <p
style="text-align:center;"><img alt="Memory" src="../../../images/memory.png"/></p><br/>
+ <p
align="center"><img alt="Memory" src="../../../images/memory.png"/></p><br/>
<p class="figure">Figure: Network capacity usage of a GIF image</p>
- <p
style="text-align:center;"><img alt="Network" src="../../../images/network.png"/></p><br/>
+ <p
align="center"><img alt="Network" src="../../../images/network.png"/></p><br/>
<p>GIF animation can be created in various resolutions without quality loss, when you use the option introduced in <a href="#photos">Photos</a>. This, however, increases memory occupancy.</p>
Memory: Increases in proportion to time, from the initial size 90 KB.</li><li>
Network: Used until the animation is stopped.</li></ul>
<p class="figure">Figure: Events for a JavaScript animation</p>
- <p
style="text-align:center;"><img alt="Events" src="../../../images/events2.png"/></p><br/>
+ <p
align="center"><img alt="Events" src="../../../images/events2.png"/></p><br/>
<p class="figure">Figure: Memory usage of a JavaScript animation</p>
- <p
style="text-align:center;"><img alt="Memory" src="../../../images/memory2.png"/></p><br/>
+ <p
align="center"><img alt="Memory" src="../../../images/memory2.png"/></p><br/>
<p class="figure">Figure: Network capacity usage of a JavaScript animation</p>
- <p
style="text-align:center;"><img alt="Network" src="../../../images/network2.png"/></p><br/>
+ <p
align="center"><img alt="Network" src="../../../images/network2.png"/></p><br/>
<p>The following example shows how JavaScript animation can be implemented:</p>
<pre class="prettyprint"><script>
var obj = document.querySelector(".animated img"), flag = 0;
Network: 9 ~ 21 ms</li></ul>
<p class="figure">Figure: Events for a CSS3 animation</p>
- <p
style="text-align:center;"><img alt="Events" src="../../../images/events3.png"/></p><br/>
+ <p
align="center"><img alt="Events" src="../../../images/events3.png"/></p><br/>
<p class="figure">Figure: Memory usage of a CSS3 animation</p>
- <p
style="text-align:center;"><img alt="Memory" src="../../../images/memory3.png"/></p><br/>
+ <p
align="center"><img alt="Memory" src="../../../images/memory3.png"/></p><br/>
<p class="figure">Figure: Network capacity usage of a CSS3 animation</p>
- <p
style="text-align:center;"><img alt="Network" src="../../../images/network3.png"/></p><br/>
+ <p
align="center"><img alt="Network" src="../../../images/network3.png"/></p><br/>
<p>The following example shows how CSS3 animation can be implemented:</p>
<pre class="prettyprint"><style>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<p>The layout of the Web application is maintained in Webkit as a DOM tree. The CSS style is applied to the DOM tree and produces the render tree that contains the rendering information for the real screen. The user sees the result of painting the render tree. The following figure shows the overall rendering flow that happens in the Webkit layout engine.</p>
<p class="figure">Figure: Webkit rendering flow</p>
-
<p style="text-align: center;"><img alt="Webkit rendering flow" src="../../../images/minimize_doc_flow.png" /></p>
+
<p align="center"><img alt="Webkit rendering flow" src="../../../images/minimize_doc_flow.png" /></p>
<p>You can improve performance by designing your application to avoid unnecessary rendering. Minimizing the chances of DOM tree changes is a key to optimizing Web application performance, because usually the rendering needs to be done whenever the DOM tree is changed (this situation is called "document reflow" - Webkit needs to recalculate the position of elements in the document after a DOM change).</p>
</ul>
</li>
<li>Keep only the first page elements in the <span style="font-family: Courier New,Courier,monospace">index.html</span> file.
- <p>Take advantage of a useful technique called deferring loading. The UI widget creation starts at the DOMContentLoad time, and at this time all the DOM elements in the first page (<span style="font-family: Courier New,Courier,monospace">index.html</span>) are constructed. Of course, images and other resources are not yet loaded at this stage.</p>
+ <p>Take advantage of a useful technique called deferring loading. The UI component creation starts at the DOMContentLoad time, and at this time all the DOM elements in the first page (<span style="font-family: Courier New,Courier,monospace">index.html</span>) are constructed. Of course, images and other resources are not yet loaded at this stage.</p>
<p>Often the first page can contain unnecessary elements, and consequently slow down the DOM construction. To avoid the problem, construct the first page to contain only the necessary elements to show the first scene, and put the rest of the pages in another HTML file. Similarly, if you do not need some JavaScript functionality on the first page, load the related JavaScript files only after the first page is loaded.</p></li>
</ul>
<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
</div>
<div id="container"><div id="contents"><div class="content">
</head>
<body onload="prettyPrint()" style="overflow: auto;">
- <div id="navigation">
+ <div id="toc-navigation">
<div id="profile">
<p><img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<p class="figure">Figure: 320x320 calculator</p>
<p><span style="font-family: Courier New,Courier,monospace;">number_pad {width: 100%; height: 70%;}</span></p>
-<p
style="text-align:center;"><img alt="320x320 calculator" src="../../../images/layout_calculator.png"/></p>
+<p
align="center"><img alt="320x320 calculator" src="../../../images/layout_calculator.png"/></p>
<p>An application with this relative layout is auto-fitted when it runs on an unexpected device, such as the device with a 360x480 resolution shown in the following figure. Even though this adjusted layout may not be as good as the original, it is good enough, since it shows a usable application UI.</p>
<p class="figure">Figure: 360x480 calculator with a relative layout</p>
- <p
style="text-align:center;"><img alt="360x480 calculator with a relative layout" src="../../../images/layout_calculator_relative.png"/></p>
+ <p
align="center"><img alt="360x480 calculator with a relative layout" src="../../../images/layout_calculator_relative.png"/></p>
<p>The following figure shows what happens if you use an absolute 320x320 layout. The presentation is definitely ugly (with an empty white space at the bottom) and usability reduced, although the calculation logic itself still works.</p>
<p class="figure">Figure: 360x480 calculator with an absolute 320x320 layout</p>
<p><span style="font-family: Courier New,Courier,monospace;">number_pad {width: 320px; height: 224px;}</span></p>
- <p
style="text-align:center;"><img alt="360x480 calculator with an absolute 320x320 layout" src="../../../images/layout_calculator_absolute.png"/></p>
+ <p
align="center"><img alt="360x480 calculator with an absolute 320x320 layout" src="../../../images/layout_calculator_absolute.png"/></p>
<h3 id="header_footer" name="header_footer">Header and Footer Position</h3>
<p>While the content layout itself becomes the application UI layout on a Web page, a typical wearable application layout consists of a header area, content area, and footer area. With this trend, many wearable Web applications are designed by separating the 3 areas explicitly.</p>
<p class="figure">Figure: Typical wearable Web application layout</p>
-
<p style="text-align:center;"><img alt="Typical wearable Web application layout" src="../../../images/layout_app.png"/></p>
+
<p align="center"><img alt="Typical wearable Web application layout" src="../../../images/layout_app.png"/></p>
<p>Not setting the place of the header and footer areas clearly can easily cause problems for your layout. In case of the header, the side-effect is relatively small. However, a wrongly defined footer area can be quite visible and lead to poor usability. The following figure shows the original layout of a pedometer application that consists of a header, content, and footer, with a Stop button set in the footer area. </p>
<p class="figure">Figure: 320x320 sample Web application</p>
-
<p style="text-align:center;"><img alt="320x320 sample Web application" src="../../../images/layout_sample.png"/></p>
+
<p align="center"><img alt="320x320 sample Web application" src="../../../images/layout_sample.png"/></p>
<p>In this case, if the position of the footer is not defined explicitly or if the position and bottom properties do not have proper values, an ugly layout can be displayed on an unexpected device, such as the 360x480 screen shown in the following figure. </p>
<p class="figure">Figure: Layout on 360x480</p>
-
<p style="text-align:center;"><img alt="Layout on 360x480" src="../../../images/layout_sample_ugly.png"/></p>
+
<p align="center"><img alt="Layout on 360x480" src="../../../images/layout_sample_ugly.png"/></p>
<p>To make the layout correct, define the position property as fixed and set the bottom property explicitly as 0 px:</p>
<p>The following figure shows the same Web application running on the unexpected device after the footer properties are defined properly. With the correct values, the Web application is usable even on a new target, not planned during the development phase. Note that if a <a href="#relative">relative layout</a> is also applied to the content area, the result is an even better layout and further improved usability.</p>
<p class="figure">Figure: Usable layout on 360x480</p>
-
<p style="text-align:center;"><img alt="Usable layout on 360x480" src="../../../images/layout_sample_ok.png"/></p>
+
<p align="center"><img alt="Usable layout on 360x480" src="../../../images/layout_sample_ok.png"/></p>
<h3 id="flexible" name="flexible">Flexible Media</h3>
<p class="figure">Figure: Flexible media on 320x320 and 360x480</p>
<p><span style="font-family: Courier New,Courier,monospace;">.video iframe {width: 100%; height: auto;}</span></p>
-<p
style="text-align:center;"><img alt="Flexible media on 320x320 and 360x480" src="../../../images/layout_flexible_media.png"/></p>
+<p
align="center"><img alt="Flexible media on 320x320 and 360x480" src="../../../images/layout_flexible_media.png"/></p>
<p>The following figure shows an example of wrong usage, where usability decreases as the video element is simply scaled up based on the aspect ratio change. If you set the video element size using a fixed size like this, you get no benefit from the increased resolution, and the layout on the whole screen becomes inharmonious, decreasing usability.</p>
<p class="figure">Figure: Fixed size media element</p>
<p><span style="font-family: Courier New,Courier,monospace;"> .video iframe {width: 320px; height: 240px;} </span></p>
-<p
style="text-align:center;"><img alt="Fixed size media element" src="../../../images/layout_fixed_media.png"/></p>
+<p
align="center"><img alt="Fixed size media element" src="../../../images/layout_fixed_media.png"/></p>
<h3 id="single_example" name="single_example">Single Layout Example</h3>
<p>The code snippet shows that the content size is set to be same as the viewport size. Each box is filled with a different color and placed so that it fills a quarter of the content area. Because each box size is defined with the width and height of 100%, the relative size of each box element remains the same even if the viewport size changes.</p>
<pre class="prettyprint">
-/* Default, used for all */
+<!--Default, used for all-->
* {box-sizing: border-box;}
body, div, h1 {margin: 0px; padding: 0px;}
html, body {width: 100%; height: 100%; overflow-x: hidden;}
<p>The following figure shows a final view when the 320 px is set as a target device in the HTML file. As defined in the CSS file, the content area fills the whole screen, 320x320 pixels, and the 4 box elements equally divide the area.</p>
<p class="figure">Figure: Original layout on a target device</p>
-
<p style="text-align:center;"><img alt="Original layout on a target device" src="../../../images/layout_original.png"/></p>
+
<p align="center"><img alt="Original layout on a target device" src="../../../images/layout_original.png"/></p>
<p>The following figure shows that the relative layout and scaling are correctly applied even when the same application is run on a mobile device with the aspect ratio of 16:9.</p>
<p class="figure">Figure: Scaled layout on a 16:9 mobile device</p>
-
<p style="text-align:center;"><img alt="Scaled layout on a 16:9 mobile device" src="../../../images/layout_original_scaled.png"/></p>
+
<p align="center"><img alt="Scaled layout on a 16:9 mobile device" src="../../../images/layout_original_scaled.png"/></p>
<p>The following code snippet shows an example where the background color is replaced with an image while the layout is exactly same as in the 4 box example. The following figures show how the layout including media elements (such as images) functions exactly like the basic box layout.</p>
<pre class="prettyprint">
-/* Default, used for all */
+<!--Default, used for all-->
* {box-sizing: border-box;}
body, div, h1 {margin: 0px; padding: 0px;}
html, body {width: 100%; height: 100%; overflow-x: hidden;}
<p class="figure">Figure: Image-based layout on a target device</p>
-
<p style="text-align:center;"><img alt="Image-based layout on a target device" src="../../../images/layout_image.png"/></p>
+
<p align="center"><img alt="Image-based layout on a target device" src="../../../images/layout_image.png"/></p>
<p class="figure">Figure: Image-based scaled layout on a 16:9 mobile device</p>
- <p style="text-align:center;"><img alt="Image-based scaled layout on a 16:9 mobile device" src="../../../images/layout_image_scaled.png"/></p>
+<p align="center"><img alt="Image-based scaled layout on a 16:9 mobile device" src="../../../images/layout_image_scaled.png"/></p>
<h2 id="multiple" name="multiple">Multiple Layouts for Multiple Devices</h2>
<p>In many cases, the desired end result for your application can be achieved using scaling and a relative layout within a <a href="#single">single layout</a>. However, this approach does not always provide the best quality for the end user. </p>
<p>You can support the best possible layout and usability with some additional development efforts. For instance, you can create an application which, on a tablet, shows the main information (clock face) and also delivers more meaningful information (calendar), while on a watch device the same application only displays the main information (clock face). This kind of end result, as shown in the following figure, cannot be achieved by only scaling up the whole layout of the watch device.</p>
<p class="figure">Figure: Application for a watch and tablet</p>
-
<p style="text-align:center;"><img alt="Application for a watch and tablet" src="../../../images/multiple_layout_example.png"/></p>
+
<p align="center"><img alt="Application for a watch and tablet" src="../../../images/multiple_layout_example.png"/></p>
-<p>CSS3 Media Queries already support the majority of techniques needed to provide category-based layouts. To support the optimal layout using CSS techniques and design applications with multiple layouts, you must consider the following issues:</p>
+<p>W3C CSS3 Media Queries already support the majority of techniques needed to provide category-based layouts. To support the optimal layout using CSS techniques and design applications with multiple layouts, you must consider the following issues:</p>
<ul>
<li><a href="#viewport2">Viewport setting</a></li>
<li><a href="#category">Category classification</a></li>
- <li><a href="#display">Classification for display modes (landscape and portrait)</a></li>
+ <li><a href="#display">Classification for display modes</a></li>
</ul>
-
+
+
+<p>Since the <strong>2.3.1</strong> version, Tizen also supports a special media query feature to provide device shape-based layouts. If you want to create an application for both square-shaped and circular-shaped devices, you can easily <a href="#migration">migrate your application to support both shapes</a>.</p>
+ <p class="figure">Figure: Application for a square and circular device</p>
+ <p align="center"><img alt="Application for a square and circular device" src="../../../images/circular_support.png"/></p>
+
<h3 id="viewport2" name="viewport2">Viewport Setting for Multiple Layouts</h3>
<p>The difference between multiple and single layouts is that, in the multiple layouts, the content width of the <span style="font-family: Courier New,Courier,monospace">viewport</span> meta tag is set to <span style="font-family: Courier New,Courier,monospace">"device-width"</span>. This sets the layout viewport width to the ideal viewport width and tells the Web engine that the application adapts to the device width. In short, the <span style="font-family: Courier New,Courier,monospace">"device-width"</span> setting is needed to create an adaptive and responsive Web application. </p>
<meta name="viewport" content="width=device-width, user-scalable=no">
</pre>
-
<h3 id="category" name="category">Category Classification</h3>
<p>When creating multiple layouts, you must first configure the layout categories. In other words, a classifying category is needed to fit the layout on the current executable environment. Media queries are supported in CSS3 to give Web application information to the executable environment.</p>
-<h4>Media Queries</h4>
+<h4>W3C Media Queries</h4>
<p>Media queries consist of a media type and expressions of media features. </p>
<p>The media types indicate the media on which the current Web application is running. They are defined in HTML4. The following media types are supported:</p>
</tr>
</tbody>
</table>
-
+
+<h4>Tizen Specialized Media Query</h4>
+<p>Tizen supports a special media query feature for a circular device shape. The following table lists the supported media features.</p>
+
+<table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">This feature is supported since <strong>2.3.1</strong>.</td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+<caption>Table: Tizen specialized media feature</caption>
+ <tbody>
+ <tr>
+ <th>Feature</th>
+ <th>Value</th>
+ <th>Min/Max</th>
+ <th>Description</th>
+ </tr>
+
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace;">-tizen-geometric-shape</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">"rectangle"</span> | <span style="font-family: Courier New,Courier,monospace;">"circle"</span></td>
+ <td>No</td>
+ <td>Device shape</td>
+ </tr>
+
+ </tbody>
+ </table>
+
+<p>You can combine this media query feature with the W3C type in your code. The final view shows the layout inside <span style="font-family: Courier New,Courier,monospace;">{...}</span> to the end user:</p>
+<pre class="prettyprint">
+@media all and (-tizen-geometric-shape: circle) {...}
+</pre>
+
+
<h3 id="display" name="display">Classification for Display Modes</h3>
-<p>You can configure the device landscape and portrait mode using the <span style="font-family: Courier New,Courier,monospace;">device-aspect-ratio</span> in Media Queries. This approach is already commonly used in creating mobile Web applications. The following example shows how the <span style="font-family: Courier New,Courier,monospace;">max-device-aspect-ratio</span> feature is used.</p>
+<p>The display mode can be classified as portrait or landscape for a rectangle-shaped device, or circular for a circular device.</p>
+
+<h4>Portrait and Landscape</h4>
+
+<p>You can configure the device landscape and portrait mode using the <span style="font-family: Courier New,Courier,monospace;">device-aspect-ratio</span> attribute in media queries. This approach is already commonly used in creating mobile Web applications. The following example shows how the <span style="font-family: Courier New,Courier,monospace;">max-device-aspect-ratio</span> feature is used.</p>
<p>If you use the <span style="font-family: Courier New,Courier,monospace;">orientation:portrait/landscape</span> feature, the layout can change unexpectedly when the virtual keypad is displayed. To avoid the problem, use the <span style="font-family: Courier New,Courier,monospace;">device-aspect-ratio</span> to configure the portrait and landscape mode.</p>
-<pre class="prettyprint">
+<pre class="prettyprint lang-html">
@media screen and (max-width: 320px) and (max-device-aspect-ratio: 1/1)
{
- // For portrait mode
+ <!--For portrait mode-->
}
@media screen and (max-width: 640px) and (min-device-aspect-ratio: 11/10)
{
- // For landscape mode
+ <!--For landscape mode-->
}
</pre>
-
+<h4>Circular Device</h4>
+
+<p>You can configure the device circular mode using the <span style="font-family: Courier New,Courier,monospace;">-tizen-geometric-shape</span> attribute in the Tizen environment. The following example shows how to use the <span style="font-family: Courier New,Courier,monospace;">-tizen-geometric-shape</span> feature.</p>
+
+<table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">This feature is supported since <strong>2.3.1</strong>.</td>
+ </tr>
+ </tbody>
+</table>
+
+
+<pre class="prettyprint lang-html">
+@media all and (-tizen-geometric-shape: circle)
+{
+ <!--For a circular device-->
+}
+</pre>
+
+<h3 id="migration" name="migration">Application Migration to a Circular Device</h3>
+
+<p>This section illustrates an example for how you can migrate a basic application from a rectangular device (such as Gear 2 or Gear S) to a circular device. Use this example as the best practice to improve your layout.</p>
+
+<p>The example uses the following HTML and CSS code for the sample application and its layout.</p>
+
+<pre class="prettyprint">
+<!--HTML code-->
+<section id="main">
+ <header>HEADER</header>
+ <article id="content">
+ lt;ul>
+ <li>List Item 1</li>
+ <li>List Item 2</li>
+ <li>List Item 3</li>
+ <li>List Item 4</li>
+ <li>List Item 5</li>
+ <li>List Item 6</li>
+ <li>List Item 7</li>
+ <li>List Item 8</li>
+ <li>List Item 9</li>
+ <li>List Item 10</li>
+ </ul>
+ </article>
+ <footer>FOOTER</footer>
+</section>
+
+<!--CSS code-->
+html, body
+{
+ height: 100%;
+ width: 100%;
+ padding: 0;
+ margin: 0;
+ font-size: 24px;
+ overflow: hidden;
+}
+
+section
+{
+ width: 100%;
+ height: 100%;
+ overflow: auto;
+ padding: 70px 0;
+}
+
+header, footer
+{
+ width: 100%;
+ height: 70px;
+ min-height: 70px;
+ line-height: 70px;
+ font-size: 30px;
+ text-align: center;
+ position: fixed;
+}
+
+header
+{
+ top: 0;
+}
+
+footer
+{
+ bottom: 0;
+}
+
+article ul li
+{
+ border-top: 1px solid rgba(52, 52, 52, 1);
+ padding: 15px 20px;
+ color: rgba(209, 209, 209, 1);
+ font-size: 40px;
+}
+
+article ul li:first
+{
+ border-top: 0 none;
+}</pre>
+
+<p>To migrate the application, use the following steps:</p>
+
+ <ol>
+ <li>Use a relative layout.
+
+ <p>To achieve a responsive layout for different devices, implement a relative layout. Simply set the <span style="font-family: Courier New,Courier,monospace;">width: 100%</span> attribute to the layout elements in the CSS code:</p>
+<pre class="prettyprint">
+section
+{
+ width: 100%;
+ height: 100%;
+ ...
+}
+
+header, footer
+{
+ width: 100%;
+ ...
+} </pre>
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">The <strong>relative layout</strong> concept is described in more detail in <a href="#relative">Relative Layout</a>.</td>
+ </tr>
+ </tbody>
+</table>
+</li>
+ <li>Set extra spaces both at the top and bottom.
+
+ <p>During the migration, you can see how a certain portion of the rectangle view is covered over by the circular view, especially the header and the footer. To make them fully and consistently visible in the circular view, provide a "padding" space at the top and bottom of the page. In the following example migrating to a circular gear device from a rectangular Gear S, extra 77 px padding is used:</p>
+<pre class="prettyprint">
+@media all and (-tizen-geometric-shape: circle)
+{
+ section {padding: 77px 0;}
+}
+</pre>
+
+ <p class="figure">Figure: Top and bottom padding</p>
+ <p align="center"><img alt="Top and bottom padding" src="../../../images/migrate_padding.png"/></p>
+</li>
+ <li>Set the header and footer position.
+
+<p>After setting the top and bottom padding, set the header and footer position for scrolling in the circular view.</p>
+<p>For a rectangular device with a lengthwise screen, especially Gear S, the best option is to make only the content area scrollable.</p>
+
+<p class="figure">Figure: Scrolling with a rectangular screen</p>
+<p align="center"><img alt="Scrolling with a rectangular screen" src="../../../images/migrate_scrollable_rect.png"/></p>
+<p>In a circular screen, it is better to make the whole page scrollable, including the top and bottom space.</p>
+<p class="figure">Figure: Scrolling with a circular screen</p>
+<p align="center"><img alt="Scrolling with a circular screen" src="../../../images/migrate_scrollable_circle.png"/></p>
+
+<p>To implement the header and footer position, use the CSS <span style="font-family: Courier New,Courier,monospace;">position</span> attribute:</p>
+<pre class="prettyprint">
+<!--Rectangular device-->
+header, footer
+{
+ position: fixed;
+}
+
+<!--Circular device-->
+@media all and (-tizen-geometric-shape: circle)
+{
+ header, footer
+ {
+ position: static;
+ }
+}
+</pre>
+
+</li>
+ <li>Move the display to the initial position.
+
+<p>To provide a better user experience, show the entire display at the beginning, including the "top padding" space. A few seconds after the application launch, move the display back to its initial position, where the header is placed on the top without any space between itself and the edge of the screen. When the display moves like this, the users can perceive the existence of the top space.</p>
+
+<p class="figure">Figure: Moving to the initial position</p>
+<p align="center"><img alt="Moving to the initial position" src="../../../images/migrate_move_to_top.png"/></p>
+
+<p>The scroll move requires several lines of JavaScript code. In the following sample, the few (N) seconds is set to 1500 ms, but you can change the value as needed.</p>
+<pre class="prettyprint">
+(function initScrollPosition()
+{
+ var SCROLL_DELAY_TIME = 1500,
+ page = document.getElementById("main"),
+ scrollPosition = window.parseInt(window.getComputedStyle(page)["padding-top"]),
+ initScrollTimeoutId = null,
+ mql = window.matchMedia("(-tizen-geometric-shape: circle)");;
+
+ /* The effect is applied to a circular device only, so use mediaquery */
+ if (mql.matches)
+ {
+ page.addEventListener("scroll", function clearInitScrollCallback()
+ {
+ window.clearTimeout(initScrollTimeoutId);
+ page.removeEventListener("scroll", clearInitScrollCallback, false);
+ }, false);
+
+ initScrollTimeoutId = window.setTimeout(function()
+ {
+ page.scrollTop = scrollPosition;
+ }, SCROLL_DELAY_TIME);
+ }
+}());
+</pre>
+
+</li>
+ <li>Set extra attributes for a better view.
+
+<p>Extra attributes are not mandatory in the migration process, but they can be helpful for a better application view.</p>
+<p>Sometimes changing the layout of the basic elements is not enough to achieve a user-friendly view, and changes in other elements' layout are needed too. For example, consider setting the <span style="font-family: Courier New,Courier,monospace;">text-align: center</span> attribute for the header and list items in the circular view (this attribute is already defined in the above circular screenshots). If the list is aligned to left in a circular view, the list items may not be all visible when placed out of the middle space.</p>
+
+<pre class="prettyprint">
+<!--Common style for header and footer text-->
+header, footer
+{
+ text-align: center;
+}
+
+<!--In a circular screen, list item has a center position-->
+@media all and (-tizen-geometric-shape: circle)
+{
+ article ul li
+ {
+ text-align: center;
+ line-height: 60px;
+ }
+}
+</pre>
+</li>
+ </ol>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a class="opensection" href="../../../../../org.tizen.tutorials/html/web/w3c/useful/useful_tutorials_w.htm">Useful Practices for W3C/HTML5 Features Tutorials</a></li>
+ <li><a href="../../../../../org.tizen.tutorials/html/web/w3c/useful/useful_tutorials_w.htm">Useful Practices for W3C/HTML5 Features Tutorials</a></li>
</ul>
</div></div>
</div>
<topic href="html/web/tizen/application/package_w.htm" label="Package"></topic>
<topic href="html/web/tizen/application/data_w.htm" label="Data Control"></topic>
</topic>
+ <topic href="html/web/tizen/communication/comm_guide_w.htm" label="Communication">
+ <topic href="html/web/tizen/communication/bluetooth_w.htm" label="Bluetooth"></topic>
+ <topic href="html/web/tizen/communication/nfc_w.htm" label="NFC"></topic>
+ <topic href="html/web/tizen/communication/push_w.htm" label="Push"></topic>
+ <topic href="html/web/tizen/communication/secure_element_w.htm" label="Secure Element"></topic>
+ <topic href="html/web/tizen/communication/messaging_w.htm" label="Messaging"></topic>
+ </topic>
<topic href="html/web/tizen/content/content_guide_w.htm" label="Content">
<topic href="html/web/tizen/content/content_w.htm" label="Content"></topic>
<topic href="html/web/tizen/content/download_w.htm" label="Download"></topic>
<topic href="html/web/tizen/content/exif_w.htm" label="Exif"></topic>
</topic>
<topic href="html/web/tizen/input_output/io_guide_w.htm" label="Input/Output">
+ <topic href="html/web/tizen/input_output/archive_w.htm" label="Archive"></topic>
<topic href="html/web/tizen/input_output/filesystem_w.htm" label="Filesystem"></topic>
<topic href="html/web/tizen/input_output/message_port_w.htm" label="Message Port"></topic>
- <topic href="html/web/tizen/input_output/archive_w.htm" label="Archive"></topic>
</topic>
<topic href="html/web/tizen/multimedia/multimedia_guide_w.htm" label="Multimedia">
<topic href="html/web/tizen/multimedia/media_controller_w.htm" label="Media Controller"></topic>
<topic href="html/web/tizen/ui/badge_w.htm" label="Badge"></topic>
<topic href="html/web/tizen/ui/noti_w.htm" label="Notification"></topic>
</topic>
- <topic href="html/web/tizen/communication/comm_guide_w.htm" label="Communication">
- <topic href="html/web/tizen/communication/bluetooth_w.htm" label="Bluetooth"></topic>
- <topic href="html/web/tizen/communication/messaging_w.htm" label="Messaging"></topic>
- <topic href="html/web/tizen/communication/nfc_w.htm" label="NFC"></topic>
- <topic href="html/web/tizen/communication/push_w.htm" label="Push"></topic>
- <topic href="html/web/tizen/communication/secure_element_w.htm" label="Secure Element"></topic>
- </topic>
<topic href="html/web/tizen/social/social_guide_w.htm" label="Social">
<topic href="html/web/tizen/social/account_w.htm" label="Account"></topic>
<topic href="html/web/tizen/social/bookmark_w.htm" label="Bookmark"></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>
</topic>
- </topic>
+ </topic>
</topic>
<topic href="html/native/guides_n.htm" label="Native Application">
<topic href="html/native/app/app_guide_n.htm" label="Application Framework">
<topic href="html/native/app/application_n.htm" label="Application"></topic>
+ <topic href="html/native/app/appgroup_n.htm" label="Application Group"></topic>
<topic href="html/native/app/app_manager_n.htm" label="Application Manager"></topic>
<topic href="html/native/app/badge_n.htm" label="Badge"></topic>
<topic href="html/native/app/bundle_n.htm" label="Bundle"></topic>
<topic href="html/native/app/notification_n.htm" label="Notification"></topic>
<topic href="html/native/app/package_n.htm" label="Package Manager"></topic>
<topic href="html/native/app/service_app_n.htm" label="Service Application"></topic>
- <topic href="html/native/app/shortcut_n.htm" label="Shortcut"></topic>
+ <topic href="html/native/app/widget_n.htm" label="Widget"></topic>
+ <topic href="html/native/app/shortcut_n.htm" label="Shortcut"></topic>
+ <topic href="html/native/app/watch_n.htm" label="Watch Application"></topic>
</topic>
<topic href="html/native/base/base_guide_n.htm" label="Base">
<topic href="html/native/base/i18n_n.htm" label="i18n"></topic>
</topic>
- <topic href="html/native/content/content_guide_n.htm" label="Content">
- <topic href="html/native/content/download_n.htm" label="Download"></topic>
+ <topic href="html/native/content/content_guide_n.htm" label="Content">
<topic href="html/native/content/media_content_n.htm" label="Media Content"></topic>
- <topic href="html/native/content/mime_type_n.htm" label="MIME Type"></topic>
+ <topic href="html/native/content/mime_type_n.htm" label="MIME Type"></topic>
+ <topic href="html/native/content/download_n.htm" label="Download"></topic>
</topic>
<topic href="html/native/context/context_guide_n.htm" label="Context">
<topic href="html/native/context/activity_recognition_n.htm" label="Activity Recognition"></topic>
- <topic href="html/native/context/gesture_recognition_n.htm" label="Gesture Recognition"></topic>
+ <topic href="html/native/context/gesture_recognition_n.htm" label="Gesture Recognition"></topic>
+ <topic href="html/native/context/trigger_n.htm" label="Contextual Trigger"></topic>
+ <topic href="html/native/context/history_n.htm" label="Contextual History"></topic>
</topic>
<topic href="html/native/graphics/graphics_guide_n.htm" label="Graphics">
<topic href="html/native/graphics/opengles_n.htm" label="OpenGL ES"></topic>
<topic href="html/native/graphics/tbm_n.htm" label="TBM Surface"></topic>
- <topic href="html/native/graphics/cairo_n.htm" label="Cairo Integration"></topic>
+ <topic href="html/native/graphics/cairo_n.htm" label="Cairo"></topic>
+ </topic>
+ <topic href="html/native/location/location_guide_n.htm" label="Location">
+ <topic href="html/native/location/location_n.htm" label="Location"></topic>
+ <topic href="html/native/location/geofence_n.htm" label="Geofence"></topic>
+ <topic href="html/native/location/maps_n.htm" label="Maps Service"></topic>
</topic>
- <topic href="html/native/location/location_guide_n.htm" label="Location"></topic>
<topic href="html/native/messaging/messaging_guide_n.htm" label="Messaging">
<topic href="html/native/messaging/messages_n.htm" label="Messages"></topic>
- <topic href="html/native/messaging/email_n.htm" label="Email"></topic>
- <topic href="html/native/messaging/push_n.htm" label="Push"></topic>
+ <topic href="html/native/messaging/push_n.htm" label="Push"></topic>
+ <topic href="html/native/messaging/email_n.htm" label="Email"></topic>
</topic>
<topic href="html/native/multimedia/multimedia_guide_n.htm" label="Multimedia">
<topic href="html/native/multimedia/audio_io_n.htm" label="Audio I/O"></topic>
<topic href="html/native/multimedia/camera_n.htm" label="Camera"></topic>
<topic href="html/native/multimedia/image_util_n.htm" label="Image Util"></topic>
<topic href="html/native/multimedia/media_codecs_n.htm" label="Media Codec"></topic>
+ <topic href="html/native/multimedia/media_controller_n.htm" label="Media Controller"></topic>
<topic href="html/native/multimedia/media_tools_n.htm" label="Media Tool"></topic>
+ <topic href="html/native/multimedia/metadata_editor_n.htm" label="Metadata Editor"></topic>
<topic href="html/native/multimedia/metadata_extractor_n.htm" label="Metadata Extractor"></topic>
<topic href="html/native/multimedia/player_n.htm" label="Player"></topic>
<topic href="html/native/multimedia/radio_n.htm" label="Radio"></topic>
<topic href="html/native/multimedia/recorder_n.htm" label="Recorder"></topic>
+ <topic href="html/native/multimedia/thumbnail_util_n.htm" label="Thumbnail Util"></topic>
<topic href="html/native/multimedia/tone_player_n.htm" label="Tone Player"></topic>
- <topic href="html/native/multimedia/video_util_n.htm" label="Video Util"></topic>
<topic href="html/native/multimedia/wav_player_n.htm" label="WAV Player"></topic>
<topic href="html/native/multimedia/sound_manager_n.htm" label="Sound Manager"></topic>
+ <topic href="html/native/multimedia/screen_mirroring_n.htm" label="Screen Mirroring Sink"></topic>
+ <topic href="html/native/multimedia/video_util_n.htm" label="Video Util"></topic>
</topic>
<topic href="html/native/network/network_guide_n.htm" label="Network">
<topic href="html/native/network/connection_n.htm" label="Connection"></topic>
<topic href="html/native/network/bluetooth_n.htm" label="Bluetooth"></topic>
<topic href="html/native/network/nfc_n.htm" label="NFC"></topic>
+ <topic href="html/native/network/smartcard_n.htm" label="SmartCard"></topic>
<topic href="html/native/network/wifi_n.htm" label="Wi-Fi"></topic>
<topic href="html/native/network/wifi_direct_n.htm" label="Wi-Fi Direct"></topic>
</topic>
+ <topic href="html/native/oauth2/oauth2_guide_n.htm" label="OAuth2"></topic>
<topic href="html/native/security/security_guide_n.htm" label="Security">
<topic href="html/native/security/key_manager_n.htm" label="Key Manager"></topic>
<topic href="html/native/security/privilege_n.htm" label="Privilege Info"></topic>
</topic>
<topic href="html/native/social/social_guide_n.htm" label="Social">
+ <topic href="html/native/social/phonenumber_util_n.htm" label="Phonenumber-utils"></topic>
<topic href="html/native/social/account_manager_n.htm" label="Account Manager"></topic>
<topic href="html/native/social/calendar_n.htm" label="Calendar"></topic>
<topic href="html/native/social/contact_n.htm" label="Contacts"></topic>
- </topic>
- <topic href="html/native/sync/sync_guide_n.htm" label="Sync"></topic>
+ </topic>
<topic href="html/native/system/system_guide_n.htm" label="System">
<topic href="html/native/system/device_n.htm" label="Device"></topic>
<topic href="html/native/system/dlog_n.htm" label="dlog"></topic>
<topic href="html/native/system/storage_n.htm" label="Storage"></topic>
</topic>
<topic href="html/native/telephony/telephony_guide_n.htm" label="Telephony"></topic>
- <topic href="html/native/ui/ui_guide_n.htm" label="UI">
+ <topic href="html/native/ui/ui_guide_n.htm" label="UI Framework">
<topic href="html/native/ui/efl_n.htm" label="EFL"></topic>
<topic href="html/native/ui/eina_n.htm" label="Eina">
<topic href="html/native/ui/data_types_n.htm" label="Data Types"></topic>
<topic href="html/native/ui/event_types_n.htm" label="Event Types"></topic>
<topic href="html/native/ui/animations_effects_n.htm" label="Animation and Effect Types"></topic>
</topic>
- <topic href="html/native/ui/ui_control_n.htm" label="UI Control">
- <topic href="html/native/ui/elementary_n.htm" label="Elementary Widgets">
- <topic href="html/native/ui/containers_n.htm" label="Container Widgets"></topic>
- <topic href="html/native/ui/ui_widgets_n.htm" label="UI Widgets"></topic>
+ <topic href="html/native/ui/ui_component_n.htm" label="UI Components">
+ <topic href="html/native/ui/ui_component_mn.htm" label="Mobile Native">
+ <topic href="html/native/ui/elementary_mn.htm" label="Elementary">
+ <topic href="html/native/ui/containers_mn.htm" label="Containers"></topic>
+ <topic href="html/native/ui/components_mn.htm" label="Components"></topic>
+ <topic href="html/native/ui/styles_mn.htm" label="UI Component Styles"></topic>
+ </topic>
</topic>
- <topic href="html/native/ui/widget_preferences_n.htm" label="Widget Preferences"></topic>
+ <topic href="html/native/ui/ui_component_wn.htm" label="Wearable Native">
+ <topic href="html/native/ui/elementary_wn.htm" label="Elementary">
+ <topic href="html/native/ui/containers_wn.htm" label="Containers"></topic>
+ <topic href="html/native/ui/components_wn.htm" label="Components"></topic>
+ <topic href="html/native/ui/styles_wn.htm" label="UI Component Styles"></topic>
+ </topic>
+ <topic href="html/native/ui/circle_components_wn.htm" label="Circle Components"></topic>
+ </topic>
+ <topic href="html/native/ui/preferences_n.htm" label="UI Component Preferences"></topic>
</topic>
<topic href="html/native/ui/efl_extension_n.htm" label="Efl Extension"></topic>
<topic href="html/native/ui/font_setting_n.htm" label="Font Setting"></topic>
<topic href="html/native/ui/efl_util_n.htm" label="EFL UTIL"></topic>
- <topic href="html/native/ui/multiple_screens_n.htm" label="Multiple Screen Support"></topic>
+ <topic href="html/native/ui/multiple_screens_n.htm" label="Multiple Screen Support"></topic>
+ <topic href="html/native/ui/scalability_n.htm" label="Scalability Support"></topic>
+ <topic href="html/native/ui/eom_n.htm" label="EOM"></topic>
</topic>
<topic href="html/native/uix/uix_guide_n.htm" label="UIX">
<topic href="html/native/uix/tts_n.htm" label="TTS"></topic>
<topic href="html/native/uix/stt_n.htm" label="STT"></topic>
</topic>
<topic href="html/native/web/web_guide_n.htm" label="Web"></topic>
+ <topic href="html/native/sync/sync_guide_n.htm" label="Sync"></topic>
<topic href="html/native/porting/porting_n.htm" label="Porting">
<topic href="html/native/porting/api_comparison_n.htm" label="API Comparison"></topic>
</topic>
Bundle-ManifestVersion: 1
Bundle-Name: Tizen Tutorials
Bundle-SymbolicName: org.tizen.tutorials;singleton=true
-Bundle-Version: 2.3.1
+Bundle-Version: 2.4.0
Bundle-Vendor: The Linux Foundation
<body onload="prettyPrint()">
<h1><a name="Creating2" id="Creating2">About This Content</a></h1>
- <p>Tizen 2.3.0</p>
+ <p>Tizen 2.4.0</p>
<h1>License</h1>
<p>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>
color: #ffffff;
}
-#navigation {width: 20%; position: fixed; right: 17px; top: 0; bottom: 51px; /* overflow: auto; *//* min-width: 200px; *//* background: white; */z-index: 100;padding-top: 10px;/* padding-bottom: 88px; */margin-bottom: 89px;}
#toc-navigation {width: 20%; position: fixed; right: 17px; top: 0; bottom: 51px; /* overflow: auto; *//* min-width: 200px; *//* background: white; */z-index: 100;padding-top: 10px;/* padding-bottom: 88px; */margin-bottom: 89px;}
#toc {padding: 0px 20px 5px 20px; /* border: 2px solid #567a9c; */ border-radius: 15px;position: absolute;top: 78px;bottom: 9px;overflow: auto;/* margin-bottom: 5px; */padding-bottom: 5px;border-bottom: 3px transparent solid;margin-left: 5px;}
#main {width: 75%; height: 90%;}
#container {width:100%;}
#container #contents {padding:0px 0 20px; overflow: auto;position: fixed;top: 0;bottom: 0;margin-bottom: 64px;right: 200px;left: 20px;}
body.no-toc #container #contents {right: 0;padding-right:30px;}
-body.no-toc #navigation {width: auto;}
body.no-toc #toc-navigation {width: auto;}
body.no-toc .top {right: 19px; /* float:none; */ width: 28px;}
body.no-toc #profile {float: right;right: -32px;}
ul.devicespecifications li div.devicespec-tit .items-tit-h3 { /*float:left;*/ margin:0 0 0 14px; padding:0; line-height: 22px; font-size: 14pt; color: #1C1C1C; font-style:normal; font-weight: bold;}
ul.devicespecifications li div.devicespec-tit .items-tit-h4 { /*float:left;*/ margin:0 0 0 14px; padding:0; line-height: 22px; font-size: 12pt; color: #1C1C1C; font-style:normal; font-weight: bold;}
- ul.devicespecifications li div.devicespec-tit span {position: absolute; top: 0; right:0;background:#416cbb; display:block; height:22px; margin-right:0; border-left: solid 1px #7a9bd4; }
- ul.devicespecifications li div.devicespec-tit span a.bt-arr {display:block; width: 55px; height:15px; margin-left:0; padding-top:5px; padding-left: 14px; text-align:left; background: url('../images/ico_arr_hidden.gif') 46px 9px no-repeat;}
- ul.devicespecifications li div.devicespec-tit span a.bt-arr em {display:inline-block; height: 14px; line-height:11px; font-size:11px; color:#fff; font-style:normal; margin-right: 8px;}
- ul.devicespecifications li div.devicespec-tit span * {vertical-align:middle;}
+ ul.devicespecifications li div.devicespec-tit > span {position: absolute; top: 0; right:0;background:#416cbb; display:block; height:22px; margin-right:0; border-left: solid 1px #7a9bd4; }
+ ul.devicespecifications li div.devicespec-tit > span a.bt-arr {display:block; width: 55px; height:15px; margin-left:0; padding-top:5px; padding-left: 14px; text-align:left; background: url('../images/ico_arr_hidden.gif') 46px 9px no-repeat;}
+ ul.devicespecifications li div.devicespec-tit > span a.bt-arr em {display:inline-block; height: 14px; line-height:11px; font-size:11px; color:#fff; font-style:normal; margin-right: 8px;}
+ ul.devicespecifications li div.devicespec-tit > span * {vertical-align:middle;}
ul.devicespecifications li div.devicespec-con ul.con-list { width:100%; }
ul.devicespecifications li div.devicespec-con ul.con-list li {line-height: 18px; margin:0; padding:0 0 0 7px; background: url("../images/ico_bullet_2_7.gif") 0 8px no-repeat; }
<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
</div>
<div id="container"><div id="contents"><div class="content">
<li><a href="web/tizen/application/data_tutorial_w.htm">Data Control</a></li>
</ul>
</li>
+ <li><a href="web/tizen/communication/comm_tutorials_w.htm">Communication</a>
+ <ul>
+ <li><a href="web/tizen/communication/bluetooth_tutorial_w.htm">Bluetooth</a>
+ <ul>
+ <li><a href="web/tizen/communication/task_bluetoothchat_w.htm">Task: Bluetooth Chat</a></li>
+ </ul>
+ </li>
+ <li><a href="web/tizen/communication/nfc_tutorial_w.htm">NFC</a>
+ <ul>
+ <li><a href="web/tizen/communication/task_contactsexchanger_w.htm">Task: Contacts Exchanger</a></li>
+ </ul>
+ </li>
+ <li><a href="web/tizen/communication/push_tutorial_w.htm">Push</a></li>
+ <li><a href="web/tizen/communication/secure_element_tutorial_w.htm">Secure Element</a></li>
+ <li><a href="web/tizen/communication/messaging_tutorial_w.htm">Messaging</a>
+ <ul>
+ <li><a href="web/tizen/communication/task_chatter_w.htm">Task: Chatter</a></li>
+ </ul>
+ </li>
+ </ul>
+ </li>
<li><a href="web/tizen/content/content_tutorials_w.htm">Content</a>
<ul>
<li><a href="web/tizen/content/content_tutorial_w.htm">Content</a>
</li>
<li><a href="web/tizen/input_output/io_tutorials_w.htm">Input/Output</a>
<ul>
+ <li><a href="web/tizen/input_output/archive_tutorial_w.htm">Archive</a></li>
<li><a href="web/tizen/input_output/filesystem_tutorial_w.htm">Filesystem</a>
<ul>
<li><a href="web/tizen/input_output/task_filemanager_w.htm">Task: File Manager</a></li>
</ul>
</li>
<li><a href="web/tizen/input_output/message_port_tutorial_w.htm">Message Port</a></li>
- <li><a href="web/tizen/input_output/archive_tutorial_w.htm">Archive</a></li>
</ul>
</li>
<li><a href="web/tizen/multimedia/multimedia_tutorials_w.htm">Multimedia</a>
<ul>
<li><a href="web/tizen/system/ham_tutorial_w.htm">Human Activity Monitor</a></li>
<li><a href="web/tizen/system/power_tutorial_w.htm">Power</a></li>
- <li><a href="web/tizen/system/sensor_tutorial_w.htm">Sensor</a></li>
+ <li><a href="web/tizen/system/sensor_tutorial_w.htm">Sensor</a>
+ <ul>
+ <li><a href="web/tizen/system/task_sensorball_w.htm">Task: Sensor Ball</a></li>
+ </ul>
+ </li>
<li><a href="web/tizen/system/system_info_tutorial_w.htm">System Information</a>
<ul>
<li><a href="web/tizen/system/task_systeminfo_w.htm">Task: System Information</a></li>
<li><a href="web/tizen/ui/noti_tutorial_w.htm">Notification</a></li>
</ul>
</li>
- <li><a href="web/tizen/communication/comm_tutorials_w.htm">Communication</a>
- <ul>
- <li><a href="web/tizen/communication/bluetooth_tutorial_w.htm">Bluetooth</a>
- <ul>
- <li><a href="web/tizen/communication/task_bluetoothchat_w.htm">Task: Bluetooth Chat</a></li>
- </ul>
- </li>
- <li><a href="web/tizen/communication/messaging_tutorial_w.htm">Messaging</a>
- <ul>
- <li><a href="web/tizen/communication/task_chatter_w.htm">Task: Chatter</a></li>
- </ul>
- </li>
- <li><a href="web/tizen/communication/nfc_tutorial_w.htm">NFC</a>
- <ul>
- <li><a href="web/tizen/communication/task_contactsexchanger_w.htm">Task: Contacts Exchanger</a></li>
- </ul>
- </li>
- <li><a href="web/tizen/communication/push_tutorial_w.htm">Push</a></li>
- <li><a href="web/tizen/communication/secure_element_tutorial_w.htm">Secure Element</a></li>
- </ul>
- </li>
<li><a href="web/tizen/social/social_tutorials_w.htm">Social</a>
<ul>
<li><a href="web/tizen/social/account_tutorial_w.htm">Account</a></li>
<li><a href="web/w3c/device/device_orientation_tutorial_w.htm">DeviceOrientation Event Specification</a>
<ul>
<li><a href="web/w3c/device/task_compass_w.htm">Task: Compass</a></li>
- <li><a href="web/w3c/device/task_sensorball_w.htm">Task: Sensor Ball</a></li>
</ul>
</li>
<li><a href="web/w3c/device/touch_tutorial_w.htm">Touch Events version 1</a>
<ul>
<li><a href="web/w3c/graphics/canvas_tutorial_w.htm">HTML5 Canvas</a>
<ul>
- <li><a href="web/w3c/graphics/task_clockwidget_w.htm">Task: Clock Widget</a></li>
+ <li><a href="web/w3c/graphics/task_basicwatch_w.htm">Task: Basic Watch</a></li>
</ul>
</li>
<li><a href="web/w3c/graphics/svg_tutorial_w.htm">HTML5 SVG</a></li>
</li>
</ul>
</li>
+ <li><a href="web/w3c/watchface/developing_watch_app.htm">Watch Application</a></li>
</ul>
</li>
</ul>
<li><a href="native/app_framework/app_framework_tutorials_n.htm">Application Framework</a>
<ul>
<li><a href="native/app_framework/application_tutorial_n.htm">Application</a></li>
+ <li><a href="native/app_framework/appgroup_tutorial_n.htm">Application Group</a></li>
<li><a href="native/app_framework/app_manager_tutorial_n.htm">Application Manager</a></li>
<li><a href="native/app_framework/badge_tutorial_n.htm">Badge</a></li>
<li><a href="native/app_framework/bundle_tutorial_n.htm">Bundle</a></li>
<li><a href="native/app_framework/notification_tutorial_n.htm">Notification</a></li>
<li><a href="native/app_framework/package_tutorial_n.htm">Package Manager</a></li>
<li><a href="native/app_framework/service_app_tutorial_n.htm">Service Application</a></li>
+ <li><a href="native/app_framework/widget_tutorial_n.htm">Widget</a></li>
<li><a href="native/app_framework/shortcut_tutorial_n.htm">Shortcut</a></li>
+ <li><a href="native/app_framework/watch_tutorial_n.htm">Watch Application</a></li>
</ul>
</li>
<li><a href="native/base/base_tutorials_n.htm">Base</a>
<li><a href="native/content/content_tutorials_n.htm">Content</a>
<ul>
- <li><a href="native/content/download_tutorial_n.htm">Download</a></li>
<li><a href="native/content/media_content_tutorial_n.htm">Media Content</a></li>
<li><a href="native/content/mime_type_tutorial_n.htm">MIME Type</a></li>
+ <li><a href="native/content/download_tutorial_n.htm">Download</a></li>
</ul>
</li>
<li><a href="native/context/context_tutorials_n.htm">Context</a>
<ul>
<li><a href="native/context/activity_tutorial_n.htm">Activity Recognition</a></li>
<li><a href="native/context/gesture_tutorial_n.htm">Gesture Recognition</a></li>
+ <li><a href="native/context/history_tutorial_n.htm">Contextual History</a></li>
+ <li><a href="native/context/trigger_tutorial_n.htm">Contextual Trigger</a></li>
</ul>
</li>
<li><a href="native/graphics/graphics_tutorials_n.htm">Graphics</a>
<ul>
<li><a href="native/graphics/opengl_tutorial_n.htm">OpenGL ES</a></li>
<li><a href="native/graphics/tbm_tutorial_n.htm">TBM Surface</a></li>
- <li><a href="native/graphics/cairo_tutorial_n.htm">Cairo Integration</a></li>
- <li><a href="native/graphics/widget_tutorial_n.htm">Graphic Widget</a></li>
-
+ <li><a href="native/graphics/cairo_tutorial_n.htm">Cairo</a></li>
+ <li><a href="native/graphics/graphic_comp_tutorial_n.htm">Graphic UI Component</a></li>
</ul>
</li>
- <li><a href="native/location/location_tutorials_n.htm">Location</a></li>
+ <li><a href="native/location/location_tutorials_n.htm">Location</a>
<ul>
<li><a href="native/location/location_tutorial_n.htm">Location</a></li>
<li><a href="native/location/geofence_tutorial_n.htm">Geofence</a></li>
<li><a href="native/location/maps_tutorial_n.htm">Maps Service</a></li>
- </ul>
+ </ul>
+ </li>
<li><a href="native/messaging/messaging_tutorials_n.htm">Messaging</a>
<ul>
<li><a href="native/messaging/sms_mms_tutorial_n.htm">Messages</a></li>
- <li><a href="native/messaging/email_tutorial_n.htm">Email</a></li>
<li><a href="native/messaging/push_tutorial_n.htm">Push</a></li>
+ <li><a href="native/messaging/email_tutorial_n.htm">Email</a></li>
</ul>
</li>
<li><a href="native/multimedia/multimedia_tutorials_n.htm">Multimedia</a>
<li><a href="native/multimedia/camera_tutorial_n.htm">Camera</a></li>
<li><a href="native/multimedia/image_util_tutorial_n.htm">Image Util</a></li>
<li><a href="native/multimedia/media_codec_tutorial_n.htm">Media Codec</a></li>
+ <li><a href="native/multimedia/media_controller_tutorial_n.htm">Media Controller</a></li>
<li><a href="native/multimedia/media_tools_tutorial_n.htm">Media Tool</a></li>
+ <li><a href="native/multimedia/metadata_editor_tutorial_n.htm">Metadata Editor</a></li>
<li><a href="native/multimedia/metadata_extractor_tutorial_n.htm">Metadata Extractor</a></li>
<li><a href="native/multimedia/player_tutorial_n.htm">Player</a></li>
<li><a href="native/multimedia/radio_tutorial_n.htm">Radio</a></li>
<li><a href="native/multimedia/recorder_tutorial_n.htm">Recorder</a></li>
+ <li><a href="native/multimedia/thumbnail_util_tutorial_n.htm">Thumbnail Util</a></li>
<li><a href="native/multimedia/tone_player_tutorial_n.htm">Tone Player</a></li>
- <li><a href="native/multimedia/video_util_tutorial_n.htm">Video Util</a></li>
<li><a href="native/multimedia/wav_player_tutorial_n.htm">WAV Player</a></li>
<li><a href="native/multimedia/sound_manager_tutorial_n.htm">Sound Manager</a></li>
- </ul>
+ <li><a href="native/multimedia/screen_mirroring_tutorial_n.htm">Screen Mirroring Sink</a></li>
+ <li><a href="native/multimedia/video_util_tutorial_n.htm">Video Util</a></li>
+ </ul>
</li>
<li><a href="native/network/network_tutorials_n.htm">Network</a>
<ul>
<li><a href="native/network/connection_tutorial_n.htm">Connection</a></li>
<li><a href="native/network/bluetooth_tutorial_n.htm">Bluetooth</a></li>
- <li><a href="native/network/nfc_tutorial_n.htm">NFC</a></li>
+ <li><a href="native/network/nfc_tutorial_n.htm">NFC</a></li>
+ <li><a href="native/network/smartcard_tutorial_n.htm">SmartCard</a></li>
<li><a href="native/network/wifi_tutorial_n.htm">Wi-Fi</a></li>
<li><a href="native/network/wifi_direct_tutorial_n.htm">Wi-Fi Direct</a></li>
</ul>
</li>
-
+ <li><a href="native/oauth2/oauth2_tutorials_n.htm">OAuth2</a></li>
<li><a href="native/security/security_tutorials_n.htm">Security</a>
<ul>
<li><a href="native/security/key_tutorial_n.htm">Key Manager</a></li>
</li>
<li><a href="native/social/social_tutorials_n.htm">Social</a>
<ul>
+ <li><a href="native/social/phonenumber_util_tutorial_n.htm">Phonenumber-utils</a></li>
<li><a href="native/social/account_tutorial_n.htm">Account Manager</a></li>
<li><a href="native/social/calendar_tutorial_n.htm">Calendar</a></li>
<li><a href="native/social/contact_tutorial_n.htm">Contacts</a></li>
</ul>
- </li>
- <li><a href="native/sync/sync_tutorials_n.htm">Sync</a>
- <ul>
- <li><a href="native/sync/sync_adapter_tutorial_n.htm">Sync Adapter</a></li>
- <li><a href="native/sync/sync_manager_tutorial_n.htm">Sync Manager</a></li>
- </ul>
- </li>
+ </li>
<li><a href="native/system/system_tutorials_n.htm">System</a>
<ul>
<li><a href="native/system/device_tutorial_n.htm">Device</a></li>
</ul>
</li>
<li><a href="native/telephony/telephony_tutorials_n.htm">Telephony</a></li>
- <li><a href="native/ui/ui_tutorials_n.htm">UI</a>
+ <li><a href="native/ui/ui_tutorials_n.htm">UI Framework</a>
<ul>
<li><a href="native/ui/efl_tutorial_n.htm">EFL</a></li>
<li><a href="native/ui/evas_tutorial_n.htm">Evas</a></li>
<li><a href="native/ui/multipoint_touch_tutorial_n.htm">Multi-point Touch</a></li>
</ul>
</li>
- <li><a href="native/ui/ui_control_tutorials_n.htm">UI Control</a>
+ <li><a href="native/ui/ui_component_tutorials_n.htm">UI Components</a>
<ul>
- <li><a href="native/ui/basic_tutorial_n.htm">Basic</a></li>
- <li><a href="native/ui/form_tutorial_n.htm">Form</a></li>
- <li><a href="native/ui/naviframe_tutorial_n.htm">Naviframe</a></li>
- <li><a href="native/ui/genlist_tutorial_n.htm">Genlist</a></li>
- <li><a href="native/ui/menu_tutorial_n.htm">Menu</a></li>
- <li><a href="native/ui/panes_tutorial_n.htm">Panes</a></li>
- <li><a href="native/ui/ui_layout_tutorial_n.htm">UI Layout</a></li>
+ <li><a href="native/ui/ui_component_tutorials_mn.htm">Mobile Native</a>
+ <ul>
+ <li><a href="native/ui/basic_tutorial_mn.htm">Basic</a></li>
+ <li><a href="native/ui/form_tutorial_mn.htm">Form</a></li>
+ <li><a href="native/ui/naviframe_tutorial_mn.htm">Naviframe</a></li>
+ <li><a href="native/ui/genlist_tutorial_mn.htm">Genlist</a></li>
+ <li><a href="native/ui/menu_tutorial_mn.htm">Menu</a></li>
+ <li><a href="native/ui/panes_tutorial_mn.htm">Panes</a></li>
+ <li><a href="native/ui/ui_layout_tutorial_mn.htm">UI Layout</a></li>
+ </ul>
+ </li>
+ <li><a href="native/ui/ui_component_tutorials_wn.htm">Wearable Native</a>
+ <ul>
+ <li><a href="native/ui/button_tutorial_wn.htm">Button</a></li>
+ <li><a href="native/ui/datetime_tutorial_wn.htm">Datetime</a></li>
+ <li><a href="native/ui/genlist_tutorial_wn.htm">Genlist</a></li>
+ <li><a href="native/ui/popup_tutorial_wn.htm">Popup</a></li>
+ <li><a href="native/ui/circle_components_tutorial_wn.htm">Circle Components</a></li>
+ </ul>
+ </li>
</ul>
</li>
<li><a href="native/ui/efl_extension_tutorial_n.htm">Efl Extension</a></li>
<li><a href="native/ui/efl_util_tutorial_n.htm">EFL UTIL</a></li>
<li><a href="native/ui/efl_optimization_tutorial_n.htm">EFL Optimization</a></li>
+ <li><a href="native/ui/eom_tutorial_n.htm">EOM</a></li>
</ul>
</li>
<li><a href="native/uix/uix_tutorials_n.htm">UIX</a>
</ul>
</li>
<li><a href="native/web/web_tutorials_n.htm">Web</a></li>
+ <li><a href="native/sync/sync_tutorials_n.htm">Sync</a>
+ <ul>
+ <li><a href="native/sync/sync_adapter_tutorial_n.htm">Sync Adapter</a></li>
+ <li><a href="native/sync/sync_manager_tutorial_n.htm">Sync Manager</a></li>
+ </ul>
+ </li>
</ul>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.guides/html/native/app/app_guide_n.htm">Application Framework Guides</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APPLICATION__FRAMEWORK.html">Application Framework API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APPLICATION__FRAMEWORK.html">Application Framework API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__APPLICATION__FRAMEWORK.html">Application Framework API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<h1>Application Framework: Controlling Your Application</h1>
-<p>The application framework tutorials demonstrate how to use the following features in creating Tizen mobile native applications:</p>
+<p>The application framework tutorials demonstrate how to use the following features in creating Tizen native applications:</p>
<ul>
<li><a href="application_tutorial_n.htm">Application: Using Alarms, Preferences, AppControl, and Other Fundamentals</a> <p>Demonstrates how you can manage application fundamentals, such as application settings and localized strings.</p></li>
+ <li><a href="appgroup_tutorial_n.htm">Application Group: Managing Groups</a> <p>Demonstrates how you can define the application launch mode and manage your applications in a group.</p></li>
<li><a href="app_manager_tutorial_n.htm">Application Manager: Getting Information about Applications</a> <p>Demonstrates how you can get information about applications.</p></li>
<li><a href="badge_tutorial_n.htm">Badge: Displaying the Notification (Badge) Count on the Home Screen</a> <p>Demonstrates how you can create and modify badges.</p></li>
<li><a href="bundle_tutorial_n.htm">Bundle: Using the String-based Dictionary ADT</a> <p>Demonstrates how you can create and manage a key-value dictionary.</p></li>
<li><a href="message_port_tutorial_n.htm">Message Port: Passing Messages Between Applications</a> <p>Demonstrates how you can send and receive messages through message ports.</p></li>
<li><a href="notification_tutorial_n.htm">Notification: Notifying the User of Application Events</a> <p>Demonstrates how you can display notifications on the application screen.</p></li>
<li><a href="package_tutorial_n.htm">Package Manager: Installing and Uninstalling Applications</a> <p>Demonstrates how you can manage and retrieve package information.</p></li>
- <li><a href="service_app_tutorial_n.htm">Service Application: Creating Background Applications</a> <p>Demonstrates how you can create and manage native service applications.</p></li>
- <li><a href="shortcut_tutorial_n.htm">Shortcut: Adding a Shortcut to Home</a> <p>Demonstrates how you can create and modify shortcuts and Dynamic Boxes on the Home screen.</p></li>
+ <li><a href="service_app_tutorial_n.htm">Service Application: Creating Background Applications</a> <p>Demonstrates how you can create and manage native service applications.</p></li>
+ <li><a href="widget_tutorial_n.htm">Widget: Creating Widget Applications</a> <p>Demonstrates how you can create and manage widget applications.</p></li>
+ </ul>
+<p>The following tutorials apply in <span style="color: red">mobile applications only</span>:</p>
+ <ul>
+ <li><a href="shortcut_tutorial_n.htm">Shortcut: Adding a Shortcut to Home</a> <p>Demonstrates how you can create and modify shortcuts on the home screen.</p></li>
</ul>
+<p>The following tutorials apply in <span style="color: red">wearable applications only</span>:</p>
+ <ul>
+ <li><a href="watch_tutorial_n.htm">Watch Application: Creating a Watch Application</a> <p>Demonstrates how you can create a watch application, set the time, and use the ambient mode.</p></li>
+ </ul>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a class="opensection" href="#manage_context">Managing the Application Context</a></li>
+ <li><a href="#manage_context">Managing the Application Context</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.guides/html/native/app/app_manager_n.htm">Application Manager Guide</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APPLICATION__MANAGER__MODULE.html">Application Manager API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APPLICATION__MANAGER__MODULE.html">Application Manager API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__APPLICATION__MANAGER__MODULE.html">Application Manager API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Application Manager: Getting Information about Applications</h1>
-<div class="cont"><div class="static-cont">
+
<p>This tutorial demonstrates how you can get information about applications.</p>
<h2>Warm-up</h2>
<p>Become familiar with the Application Manager API basics by learning about:</p>
<ul>
- <li><a
class="opensection" href="#manage_context">Managing the Application Context</a> <p>Retrieve the application context and operate on it.</p></li>
+ <li><a href="#manage_context">Managing the Application Context</a> <p>Retrieve the application context and operate on it.</p></li>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
- <!-- Folds -->
- <ul class="devicespecifications">
-
-
- <li>
- <div class="devicespec-tit">
- <h2 id="manage_context" name="manage_context" class="items-tit-h2">Managing the Application Context</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="manage_context" name="manage_context">Managing the Application Context</h2>
+
<p>To get the running application context and its details, and to operate on the context:</p>
<ol>
-<li><p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APPLICATION__MANAGER__MODULE.html">Application Manager</a> API, include the <span style="font-family: Courier New,Courier,monospace;"><app_manager.h></span> header file in your application:</p>
+<li><p>To use the functions and data types of the Application Manager API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APPLICATION__MANAGER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__APPLICATION__MANAGER__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace;"><app_manager.h></span> header file in your application:</p>
<pre class="prettyprint">
#include <app_manager.h>
</pre></li>
<p>This example gets for the context of the Clock application. If the function returns <span style="font-family: Courier New,Courier,monospace">APP_MANAGER_ERROR_NONE</span>, it has executed correctly and the <span style="font-family: Courier New,Courier,monospace">app_context</span> variable now contains the handle to the clock context. To prevent memory leaks, release <span style="font-family: Courier New,Courier,monospace">app_context</span> with the <span style="font-family: Courier New,Courier,monospace">app_context_destroy()</span> function after the work is finished.</p></li>
<li>Operate on the context:
-<ul class="ul">
+<ul>
<li>Get the application ID and application process ID from the context:
<pre class="prettyprint">
</pre> </li>
</ol>
- </div>
- </li>
- </ul>
-</div>
-</div>
-
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
--- /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>Application Group: Managing Groups</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+ <div id="profile">
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+ </div>
+ <div id="toc_border"><div id="toc">
+ <p class="toc-title">Content</p>
+ <ul class="toc">
+ <li><a href="#mode">Controlling the Launch Mode</a></li>
+ </ul>
+ <p class="toc-title">Related Info</p>
+ <ul class="toc">
+ <li><a href="../../../../org.tizen.guides/html/native/app/appgroup_n.htm">Application Group Guide</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APP__GROUP__MODULE.html">Application Group API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__APP__GROUP__MODULE.html">Application Group API for Wearable Native</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+ <h1>Application Group: Managing Groups</h1>
+
+
+<p>This tutorial demonstrates how you can define the application launch mode and manage your applications in a group.</p>
+
+<h2>Warm-up</h2>
+<p>Become familiar with the Application Group API basics by learning about:</p>
+ <ul>
+ <li><a href="#mode">Controlling the Launch Mode</a>
+ <p>Set the launch mode when calling for an application through an app control.</p></li>
+ </ul>
+
+
+ <h2 id="mode" name="mode">Controlling the Launch Mode</h2>
+
+<p>In this use case, the caller application has a <strong>Launch</strong> button. When it is clicked, an app control is used to launch a sub application within the same group.</p>
+
+<p>To control the launch mode:</p>
+<ol>
+<li>Create the UI with the <strong>Launch</strong> button:
+<pre class="prettyprint">
+static void create_base_gui(appdata_s *ad)
+{
+ Evas_Object *bigbox, *bx, *bt;
+
+ ad->win = elm_win_util_standard_add(PACKAGE, PACKAGE);
+ elm_win_autodel_set(ad->win, EINA_TRUE);
+
+ evas_object_smart_callback_add(ad->win, "delete,request", win_delete_request_cb, NULL);
+ eext_object_event_callback_add(ad->win, EEXT_CALLBACK_BACK, win_back_cb, ad);
+
+ bigbox = elm_box_add(ad->win);
+ evas_object_size_hint_weight_set(bigbox, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+ elm_win_resize_object_add(ad->win, bigbox);
+ evas_object_show(bigbox);
+
+ bx = elm_box_add(ad->win);
+ elm_box_pack_end(bigbox, bx);
+ evas_object_show(bx);
+
+ bt = elm_label_add(ad->win);
+ elm_object_text_set(bt, "AGT3");
+ elm_box_pack_end(bx, bt);
+ evas_object_show(bt);
+
+ bt = elm_button_add(ad->win);
+ elm_object_text_set(bt, "Launch");
+ elm_box_pack_end(bx, bt);
+ evas_object_show(bt);
+ evas_object_smart_callback_add(bt, "clicked", button_click_cb, NULL);
+
+ evas_object_show(ad->win);
+}</pre></li>
+
+<li>When the button is clicked, use an app control to launch the sub application.
+<p>Define the launch mode for the application to be called using the <span style="font-family: Courier New,Courier,monospace">app_control_set_launch_mode()</span> function. The second parameter defines the launch mode with the <span style="font-family: Courier New,Courier,monospace">app_control_launch_mode_e</span> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APP__GROUP__MODULEXX.html#XX">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__APP__GROUP__MODULEXX.html#XX">wearable</a> applications).</p>
+<pre class="prettyprint">
+static void button_click_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ app_control_h h;
+
+ app_control_create(&h);
+ app_control_set_operation(h, "http://tizen.org/appcontrol/operation/view");
+ app_control_set_mime(h, "application/pdf");
+ app_control_set_launch_mode(h, APP_CONTROL_LAUNCH_MODE_GROUP);
+ app_control_send_launch_request(h, NULL, NULL);
+
+ app_control_destroy(h);
+}
+
+static void app_control(app_control_h app_control, void *data)
+{
+ // Handle the launch request
+}
+</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>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
<li>Application fundamentals
<ul class="toc">
- <li><a class="opensection" href="#fundamentals">Handling the Application Fundamentals</a></li>
+ <li><a href="#fundamentals">Handling the Application Fundamentals</a></li>
</ul>
</li>
<li>App control
<ul class="toc">
- <li><a class="opensection" href="#use">Running Applications Using Extra Data</a></li>
+ <li><a href="#use">Running Applications Using Extra Data</a></li>
</ul>
</li>
<li>Alarm
<ul class="toc">
- <li><a href="#init" class="opensection">Initializing Alarms</a></li>
- <li><a href="#scenario_1" class="opensection">Setting an Alarm after Specific Time</a></li>
- <li><a href="#scenario_2" class="opensection">Setting an Alarm on a Specific Date</a></li>
- <li><a href="#scenario_3" class="opensection">Setting a Recurring Alarm at a Specific Time of the Day</a></li>
- <li><a href="#scenario_4" class="opensection">Listing All Scheduled Alarms and Canceling an Alarm</a></li>
+ <li><a href="#init">Initializing Alarms</a></li>
+ <li><a href="#scenario_1">Setting an Alarm after Specific Time</a></li>
+ <li><a href="#scenario_2">Setting an Alarm on a Specific Date</a></li>
+ <li><a href="#scenario_3">Setting a Recurring Alarm at a Specific Time of the Day</a></li>
+ <li><a href="#scenario_4">Listing All Scheduled Alarms and Canceling an Alarm</a></li>
</ul>
</li>
<li>Application preferences
<ul class="toc">
- <li><a class="opensection" href="#manage_pref">Managing Application Preferences</a></li>
+ <li><a href="#manage_pref">Managing Application Preferences</a></li>
</ul>
</li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.guides/html/native/app/application_n.htm">Application Guide</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APPLICATION__MODULE.html">Application API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APPLICATION__MODULE.html">Application API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__APPLICATION__MODULE.html">Application API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Application: Using Alarms, Preferences, AppControl, and Other Fundamentals</h1>
-<div class="cont"><div class="static-cont">
+
<p>This tutorial demonstrates how you can manage application fundamentals, such as application settings and service applications.</p>
<ul>
<li>Application fundamentals
<ul>
- <li><a
class="opensection" href="#fundamentals">Handling the Application Fundamentals</a> <p>Define the application entry point and life-cycle callbacks.</p></li>
+ <li><a href="#fundamentals">Handling the Application Fundamentals</a> <p>Define the application entry point and life-cycle callbacks.</p></li>
</ul>
</li>
<li>App control
<ul>
- <li><a
class="opensection" href="#use">Running Applications Using Extra Data</a> <p>Run a specific application control with preconfigured parameters.</p></li>
+ <li><a href="#use">Running Applications Using Extra Data</a> <p>Run a specific application control with preconfigured parameters.</p></li>
</ul>
</li>
<li>Alarm
<ul>
- <li><a class="opensection" href="#init">Initializing Alarms</a>
+ <li><a href="#init">Initializing Alarms</a>
<p>Initialize the alarm for use.</p></li>
- <li><a class="opensection" href="#scenario_1">Setting an Alarm after Specific Time</a>
+ <li><a href="#scenario_1">Setting an Alarm after Specific Time</a>
<p>Set single alarms at specific times.</p></li>
- <li><a class="opensection" href="#scenario_2">Setting an Alarm on a Specific Date</a>
+ <li><a href="#scenario_2">Setting an Alarm on a Specific Date</a>
<p>Set an alarm on a specific date.</p></li>
- <li><a class="opensection" href="#scenario_3">Setting a Recurring Alarm at a Specific Time of the Day</a>
+ <li><a href="#scenario_3">Setting a Recurring Alarm at a Specific Time of the Day</a>
<p>Set a recurring alarm for a period of time at a specific time.</p></li>
- <li><a class="opensection" href="#scenario_4">Listing All Scheduled Alarms and Canceling an Alarm</a>
+ <li><a href="#scenario_4">Listing All Scheduled Alarms and Canceling an Alarm</a>
<p>List all alarms and cancel them.</p></li>
</ul>
</li>
<li>Application preferences
<ul>
- <li><a
class="opensection" href="#manage_pref">Managing Application Preferences</a><p>Manage application preferences.</p></li>
+ <li><a href="#manage_pref">Managing Application Preferences</a><p>Manage application preferences.</p></li>
</ul>
</li>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
- <!-- Folds -->
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="fundamentals" name="fundamentals" class="items-tit-h2">Handling the Application Fundamentals</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="fundamentals" name="fundamentals">Handling the Application Fundamentals</h2>
+
<p>Appcore is the framework all Tizen applications are based on. It is simple and only handles interactions between applications and the operating system.</p>
<p>An application starts with the <span style="font-family: Courier New,Courier,monospace;">main()</span> function. It initializes the appcore and starts it.</p>
<p>The code below is the minimal application using appcore. It only builds and runs.</p>
int
main(int argc, char *argv[])
{
- // Create and ui_app_lifecycle_callback_s object and initialize its contents to 0
+ // Create a ui_app_lifecycle_callback_s object and initialize its contents to 0
ui_app_lifecycle_callback_s event_callback = {0,};
// Run the application
<p>Appcore is based on callbacks. There are two classes of callbacks: those about the application's life-cycle and those about the system.</p>
<p>The application's life-cycle callbacks are:</p>
-<ul class="ul">
+<ul>
<li><span style="font-family: Courier New,Courier,monospace;">create</span>: first initialization, comes after <span style="font-family: Courier New,Courier,monospace;">app_main()</span> has been called and initializes UI.</li>
<li><span style="font-family: Courier New,Courier,monospace;">control</span>: triggered when the application is started to do something. It can be called several times during the lifespan of an application, it shows the screen for the action requested. It requires specific information given to the callback.</li>
<li><span style="font-family: Courier New,Courier,monospace;">terminate</span>: saves work, releases resources, and exits.</li>
</ul>
<p>Then, system-related callbacks:</p>
-<ul class="ul">
+<ul>
<li><span style="font-family: Courier New,Courier,monospace;">low_memory</span>: the system is running low on memory, saves work, and releases resources; if this is not enough are freed, some applications will be killed.</li>
<li><span style="font-family: Courier New,Courier,monospace;">low_battery</span>: the system is running low on battery (less than 5%), saves work and avoids battery-draining workloads.</li>
<li><span style="font-family: Courier New,Courier,monospace;">device_orientation</span>: the screen orientation changed between vertical and horizontal, orientation information is given to the callback.</li>
<p>The <span style="font-family: Courier New,Courier,monospace;">app_control_h</span> type is opaque and information can only be extracted from it through functions from the SDK.</p>
<p>The most interesting ones are:</p>
-<ul class="ul">
+<ul>
<li><span style="font-family: Courier New,Courier,monospace;">app_control_get_operation()</span>: retrieves a string describing which operation the application was started for.</li>
<li><span style="font-family: Courier New,Courier,monospace;">app_control_get_mime()</span>: retrieves the MIME type of the data (e.g. image/jpg).</li>
<li><span style="font-family: Courier New,Courier,monospace;">app_control_get_app_extra_data()</span>: gets the string value associated with the given key.</li>
<li><span style="font-family: Courier New,Courier,monospace;">app_control_get_app_extra_data_array()</span>: gets the string array associated with the given key (first check with <span style="font-family: Courier New,Courier,monospace;">app_control_is_extra_data_array()</span> whether the data associated with a key is an array).</li>
</ul>
<p>If other functions are needed, check the <span style="font-family: Courier New,Courier,monospace;">app.h</span> header.</p>
- </div>
- </li>
-
-<li>
- <div class="devicespec-tit">
- <h2 id="use" name="use" class="items-tit-h2">Running Applications Using Extra Data</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
-<p>To run a specified <span style="font-family: Courier New,Courier,monospace">app_control</span> with some preconfigured parameters:</p>
+ <h2 id="use" name="use">Running Applications Using Extra Data</h2>
+<p>To run a specified <span style="font-family: Courier New,Courier,monospace">app_control</span> with some preconfigured parameters:</p>
<ol>
-<li><p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APP__CONTROL__MODULE.html">AppControl</a> API, include the <span style="font-family: Courier New,Courier,monospace"><app.h></span> header file in your application:</p>
+<li><p>To use the functions and data types of the App Control API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APP__CONTROL__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__APP__CONTROL__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><app.h></span> header file in your application:</p>
<pre class="prettyprint">
#include <app.h>
</pre></li>
</li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="init" name="init" class="items-tit-h2">Initializing Alarms</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+<h2 id="init" name="init">Initializing Alarms</h2>
+
<p>To initialize the alarm:</p>
-<ol><li>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__ALARM__MODULE.html">Alarm</a> API, include the <span style="font-family: Courier New,Courier,monospace"><app.h></span> header file in your application:
+<ol><li>To use the functions and data types of the Alarm API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__ALARM__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__ALARM__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><app.h></span> header file in your application:
<pre class="prettyprint">
#include <app.h>
</pre></li>
<li>The <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/alarm.get</span> and <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/alarm.set</span> privileges are required for the Alarm API.
</li></ol>
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="scenario_1" name="scenario_1" class="items-tit-h2">Setting an Alarm after Specific Time</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+<h2 id="scenario_1" name="scenario_1">Setting an Alarm after Specific Time</h2>
+
<p>To set an alarm after a specific time:</p>
<ol>
<li>
-<p><b>Implement the AlarmRegister application</b></p>
+<p><strong>Implement the AlarmRegister application</strong></p>
<p>AlarmRegister requires the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/alarm.set</span> privilege.</p>
-<ol><li>
+<ol type="a"><li>
<p>To identify which application to alarm, the Alarm API needs <span style="font-family: Courier New,Courier,monospace">app_control_h</span>.</p>
<p>Obtain <span style="font-family: Courier New,Courier,monospace">app_control_h</span> of a specific app by calling <span style="font-family: Courier New,Courier,monospace">app_control_set_app_id(app_control_h app_control, const char *app_id);</span>. You can get AlarmTarget <span style="font-family: Courier New,Courier,monospace">app_id</span> from the <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> file. </p>
<li>
<p>To schedule an alarm after a delay, the function requires 4 parameters:</p>
- <ul class="ul">
+ <ul>
<li>[in] <span style="font-family: Courier New,Courier,monospace">app_control</span>: The destination <span style="font-family: Courier New,Courier,monospace">app_control</span> to perform the specific work when the alarm is triggered</li>
<li>[in] <span style="font-family: Courier New,Courier,monospace">delay</span>: The amount of time before the first execution (in seconds) </li>
<li>[in] <span style="font-family: Courier New,Courier,monospace">period</span>: The amount of time before a subsequent alarm (in seconds). If set to 0, there is only 1 execution.</li>
</li></ol></li>
<li>
-<p><b>Implement the AlarmTarget application</b></p>
+<p><strong>Implement the AlarmTarget application</strong></p>
<p>A scheduled alarm calls AlarmTarget' <span style="font-family: Courier New,Courier,monospace">app_control_cb</span> callback when the alarm expires.</p>
<pre class="prettyprint">
</pre>
</li>
</ol>
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="scenario_2" name="scenario_2" class="items-tit-h2">Setting an Alarm on a Specific Date</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+<h2 id="scenario_2" name="scenario_2">Setting an Alarm on a Specific Date</h2>
<p>To schedule an alarm on a specific date, the function requires 4 parameters:</p>
-<ul class="ul">
+<ul>
<li>[in] <span style="font-family: Courier New,Courier,monospace">app_control</span>: The destination <span style="font-family: Courier New,Courier,monospace">app_control</span> to perform the specific work when the alarm is triggered </li>
<li>[in] <span style="font-family: Courier New,Courier,monospace">date</span>: The first active alarm time </li>
<li>[in] <span style="font-family: Courier New,Courier,monospace">period</span>: The amount of time before a subsequent alarm (in seconds). If set to 0, there is only 1 execution. </li>
date.tm_sec+=4;
ret = alarm_schedule_at_date(app, &date, 0, &alarm_id);
</pre>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="scenario_3" name="scenario_3" class="items-tit-h2">Setting a Recurring Alarm at a Specific Time of the Day</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+<h2 id="scenario_3" name="scenario_3">Setting a Recurring Alarm at a Specific Time of the Day</h2>
+
<p>To schedule an alarm on a specific time of the day with a recurrence, use the <span style="font-family: Courier New,Courier,monospace">alarm_schedule_with_recurrence_week_flag()</span> function, which requires 4 parameters:</p>
-<ul class="ul">
+<ul>
<li>[in] <span style="font-family: Courier New,Courier,monospace">app_control</span>: The destination <span style="font-family: Courier New,Courier,monospace">app_control</span> that performs the specific work when the alarm is triggered.</li>
<li>[in] <span style="font-family: Courier New,Courier,monospace">date</span>: The date on which the alarm is triggered for the first time.</li>
- <li>[in] <span style="font-family: Courier New,Courier,monospace">week_flag</span>: The day of the week on which the alarm recurs. The value is defined with the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__ALARM__MODULE.html#gaa2b3960fe55c63cb3f6739758bd172ee">enum alarm_week_flag_e</a> enumerator, and can be a combination of days, for example <span style="font-family: Courier New,Courier,monospace">ALARM_WEEK_FLAG_TUESDAY | ALARM_WEEK_FLAG_FRIDAY</span>. The value can also be a binary, such as <span style="font-family: Courier New,Courier,monospace">1<<3 | 1<<6</span>.</li>
+ <li>[in] <span style="font-family: Courier New,Courier,monospace">week_flag</span>: The day of the week on which the alarm recurs. The value is defined with the <span style="font-family: Courier New,Courier,monospace">enum alarm_week_flag_e</span> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__ALARM__MODULE.html#gaa2b3960fe55c63cb3f6739758bd172ee">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__ALARM__MODULE.html#gaa2b3960fe55c63cb3f6739758bd172ee">wearable</a> applications), and can be a combination of days, for example <span style="font-family: Courier New,Courier,monospace">ALARM_WEEK_FLAG_TUESDAY | ALARM_WEEK_FLAG_FRIDAY</span>. The value can also be a binary, such as <span style="font-family: Courier New,Courier,monospace">1<<3 | 1<<6</span>.</li>
<li>[out] <span style="font-family: Courier New,Courier,monospace">alarm_id</span>: The unique ID that identifies the alarm.</li>
</ul>
dlog_print(DLOG_INFO, TAG, "Schedule on date: %s ", ctime(&time_current));
ret = alarm_schedule_with_recurrence_week_flag(app_control, &date, ALARM_WEEK_FLAG_TUESDAY | ALARM_WEEK_FLAG_FRIDAY, &alarm_id);
</pre>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="scenario_4" name="scenario_4" class="items-tit-h2">Listing All Scheduled Alarms and Canceling an Alarm</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+<h2 id="scenario_4" name="scenario_4">Listing All Scheduled Alarms and Canceling an Alarm</h2>
+
<p>To list all scheduled alarms, use the following function:</p>
<pre class="prettyprint">
int alarm_foreach_registered_alarm(alarm_registered_alarm_cb callback, void* user_data)
</pre>
<p>To list a scheduled alarm, the function requires 2 parameters:</p>
-<ul class="ul">
+<ul>
<li>[in] <span style="font-family: Courier New,Courier,monospace">callback</span>: The callback function to invoke.</li>
<li>[in] <span style="font-family: Courier New,Courier,monospace">user_data</span>: The user data to be passed to the callback.</li>
</ul>
int alarm_cancel(int alarm_id)
</pre>
<p>To cancel a scheduled alarm, the function requires 1 parameter:</p>
-<ul class="ul">
+<ul>
<li>[in] <span style="font-family: Courier New,Courier,monospace">alarm_id</span>: The alarm ID that is cancelled.</li>
</ul>
}
</pre>
- </div>
- </li>
-
-
-
-
- <li>
- <div class="devicespec-tit">
- <h2 id="manage_pref" name="manage_pref" class="items-tit-h2">Managing Application Preferences</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="manage_pref" name="manage_pref">Managing Application Preferences</h2>
<p>To manage preferences:</p>
<ol><li>
-<p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__PREFERENCE__MODULE.html">Preference</a> API, include the <span style="font-family: Courier New,Courier,monospace"><app.h></span> header file in your application:</p>
+<p>To use the functions and data types of the Preference API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__PREFERENCE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__PREFERENCE__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><app.h></span> header file in your application:</p>
<pre class="prettyprint">
#include <app.h>
</pre></li>
<li>Store and retrieve simple type variables.
<p>To store a variable, you must create a key-value pair. Use the following functions to create a key-value pair for a specific simple type:</p>
-<ul class="ul"><li><span style="font-family: Courier New,Courier,monospace">preference_set_int (const char *key, int value)</span></li>
+<ul><li><span style="font-family: Courier New,Courier,monospace">preference_set_int (const char *key, int value)</span></li>
<li><span style="font-family: Courier New,Courier,monospace">preference_set_double (const char *key, double value)</span></li>
<li><span style="font-family: Courier New,Courier,monospace">preference_set_boolean (const char *key, bool value)</span></li></ul>
<p>Before storing or retrieving a variable, check whether it exists using:</p>
-<ul class="ul"><li><span style="font-family: Courier New,Courier,monospace">preference_is_existing (const char *key, bool *existing)</span></li></ul>
+<ul><li><span style="font-family: Courier New,Courier,monospace">preference_is_existing (const char *key, bool *existing)</span></li></ul>
<p>Use the following functions to retrieve a stored variable of a given simple type:</p>
-<ul class="ul"><li><span style="font-family: Courier New,Courier,monospace">preference_get_int (const char *key, int *value)</span></li>
+<ul><li><span style="font-family: Courier New,Courier,monospace">preference_get_int (const char *key, int *value)</span></li>
<li><span style="font-family: Courier New,Courier,monospace">preference_get_double (const char *key, double *value)</span></li>
<li><span style="font-family: Courier New,Courier,monospace">preference_get_boolean (const char *key, bool *value)</span></li></ul>
<li>Store and retrieve string variables.
<p>Use the following functions to store and retrieve string variables:</p>
-<ul class="ul">
+<ul>
<li><span style="font-family: Courier New,Courier,monospace">preference_set_string (const char *key, const char *value)</span></li>
<li><span style="font-family: Courier New,Courier,monospace">preference_get_string (const char *key, char **value)</span></li>
</ul>
<pre class="prettyprint">preference_remove(const char *key)
preference_remove_all(void)</pre></li></ol>
- </div>
- </li>
-
- </ul>
-</div>
-</div>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a class="opensection" href="#init">Initialize the Badge Functionality</a></li>
- <li><a class="opensection" href="#create">Creating a Badge</a></li>
- <li><a class="opensection" href="#manage">Managing the Badge</a></li>
- <li><a class="opensection" href="#remove">Removing the Badge</a></li>
+ <li><a href="#init">Initialize the Badge Functionality</a></li>
+ <li><a href="#create">Creating a Badge</a></li>
+ <li><a href="#manage">Managing the Badge</a></li>
+ <li><a href="#remove">Removing the Badge</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.guides/html/native/app/badge_n.htm">Badge Guide</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__BADGE__MODULE.html">Badge API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__BADGE__MODULE.html">Badge API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__BADGE__MODULE.html">Badge API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Badge: Displaying the Notification (Badge) Count on the Home Screen</h1>
- <div class="cont"><div class="static-cont">
+
<p>This tutorial demonstrates how you can create, manage, and remove a badge for an application. A badge is an image displayed on the application icon, which informs the user about notifications and events.</p>
</li>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
+ <h2 id="init" name="init">Initializing the Badge Functionality</h2>
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="init" name="init" class="items-tit-h2">Initializing the Badge Functionality</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
<p>To initialize badges:</p>
<ol>
-<li><p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__BADGE__MODULE.html">Badge</a> API, include the <span style="font-family: Courier New,Courier,monospace"><badge.h></span> header file in your application:</p>
+<li><p>To use the functions and data types of the Badge API (in <a href="../../../../org.tizen.native.mobile.apireference/group__BADGE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__BADGE__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><badge.h></span> header file in your application:</p>
<pre class="prettyprint">
#include <stdio.h>
#include <stdlib.h>
#define TEST_PKG "org.tizen.badgeapp"</pre>
<p>To determine if a Badge API function has been correctly executed, check its return value. If the value is different from <span style="font-family: Courier New,Courier,monospace">BADGE_ERROR_NONE</span>, an error has occurred.</p></li></ol>
- </div>
- </li>
-<li>
- <div class="devicespec-tit">
- <h2 id="create" name="create" class="items-tit-h2">Creating a Badge</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="create" name="create">Creating a Badge</h2>
+
<p>To create a badge for an application, call the <span style="font-family: Courier New,Courier,monospace">badge_new()</span> function:</p>
<pre class="prettyprint">badge_new(const char *writable_app_id)</pre>
{
// Error handling
}</pre>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="manage" name="manage" class="items-tit-h2">Managing the Badge</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
-
+ <h2 id="manage" name="manage">Managing the Badge</h2>
<p>To manage the badge:</p>
<p>To get the count attribute, call the <span style="font-family: Courier New,Courier,monospace">badge_get_count()</span> function:</p>
<pre class="prettyprint">badge_get_count(const char *app_id, unsigned int *count)</pre>
<p>The function takes the following parameters:</p>
-<ul class="ul">
+<ul>
<li><span style="font-family: Courier New,Courier,monospace">[in] app_id</span>: The name of the application that gets the count of the badge.</li>
<li><span style="font-family: Courier New,Courier,monospace">[out] count</span>: The value of the count attribute.</li>
</ul>
<p>To set the count attribute, call the <span style="font-family: Courier New,Courier,monospace">badge_set_count()</span> function:</p>
<pre class="prettyprint">badge_set_count(const char *app_id, unsigned int count)</pre>
<p>The function takes the following parameters:</p>
-<ul class="ul">
+<ul>
<li><span style="font-family: Courier New,Courier,monospace">[in] app_id</span>: The name of the application that sets the count of the badge.</li>
<li><span style="font-family: Courier New,Courier,monospace">[in] count</span>: The new value for the count attribute.</li>
</ul>
<p>To get the display attribute, call the <span style="font-family: Courier New,Courier,monospace">badge_get_display()</span> function:</p>
<pre class="prettyprint">badge_get_display(const char *app_id, unsigned int *is_display)</pre>
<p>The function takes the following parameters:</p>
-<ul class="ul">
+<ul>
<li><span style="font-family: Courier New,Courier,monospace">[in] app_id</span>: The name of the application that gets the display flag of the badge.</li>
<li><span style="font-family: Courier New,Courier,monospace">[out] is_display</span>: The value of the display attribute (1 = badge is visible, 0 = badge is hidden).</li>
</ul>
<p>To set the display attribute, call the <span style="font-family: Courier New,Courier,monospace">badge_set_display()</span> function:</p>
<pre class="prettyprint">badge_set_display(const char *app_id, unsigned int is_display)</pre>
<p>The function takes the following parameters:</p>
-<ul class="ul">
+<ul>
<li><span style="font-family: Courier New,Courier,monospace">[in] app_id</span>: The name of the application that gets the display flag of the badge.</li>
<li><span style="font-family: Courier New,Courier,monospace">[in] is_display</span>: The new value for the display attribute (1 = badge is visible, 0 = badge is hidden).</li>
</ul>
}</pre>
</li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="remove" name="remove" class="items-tit-h2">Removing the Badge</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="remove" name="remove">Removing the Badge</h2>
+
<p>To remove the badge from the application, call the <span style="font-family: Courier New,Courier,monospace">badge_remove()</span> function:</p>
<pre class="prettyprint">badge_remove(const char *app_id)</pre>
<p>The function takes the following parameters:</p>
-<ul class="ul">
+<ul>
<li><span style="font-family: Courier New,Courier,monospace">[in] app_id</span>: The ID of the application whose badge to remove.</li>
</ul>
<pre class="prettyprint">ret = badge_remove(TEST_PKG);
{
// Error handling
}</pre>
- </div>
- </li>
- </ul>
-</div>
-</div>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a class="opensection" href="#init">Initializing a Bundle</a></li>
+ <li><a href="#init">Initializing a Bundle</a></li>
<li>Content management
<ul class="toc">
- <li><a class="opensection" href="#add">Adding Content to a Bundle</a></li>
- <li><a class="opensection" href="#manage">Managing and Using the Bundle Content</a></li>
- <li><a class="opensection" href="#iterate">Iterating a Bundle</a></li>
+ <li><a href="#add">Adding Content to a Bundle</a></li>
+ <li><a href="#manage">Managing and Using the Bundle Content</a></li>
+ <li><a href="#iterate">Iterating a Bundle</a></li>
</ul></li>
- <li><a class="opensection" href="#encode">Encoding and Decoding a Bundle</a></li>
- <li><a class="opensection" href="#cleanup">Cleaning up a Bundle</a></li>
+ <li><a href="#encode">Encoding and Decoding a Bundle</a></li>
+ <li><a href="#cleanup">Cleaning up a Bundle</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.guides/html/native/app/bundle_n.htm">Bundle Guide</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CORE__LIB__BUNDLE__MODULE.html">Bundle API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CORE__LIB__BUNDLE__MODULE.html">Bundle API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CORE__LIB__BUNDLE__MODULE.html">Bundle API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Bundle: Using the String-based Dictionary ADT</h1>
- <div class="cont"><div class="static-cont">
+
<p>This tutorial demonstrates how you can access and use bundles, which are key-value dictionaries.</p>
<h2>Warm-up</h2>
<p>Become familiar with the Bundle API basics by learning about:</p>
<ul>
- <li><a class="opensection" href="#init">Initializing a Bundle</a>
+ <li><a href="#init">Initializing a Bundle</a>
<p>Initialize bundle for use.</p></li>
<li>Content management
<ul>
- <li><a class="opensection" href="#add">Adding Content to a Bundle</a>
+ <li><a href="#add">Adding Content to a Bundle</a>
<p>Add content to a valid bundle.</p></li>
- <li><a class="opensection" href="#manage">Managing and Using the Bundle Content</a>
+ <li><a href="#manage">Managing and Using the Bundle Content</a>
<p>Add, delete, and get values of the bundle content.</p></li>
- <li><a class="opensection" href="#iterate">Iterating a Bundle</a>
+ <li><a href="#iterate">Iterating a Bundle</a>
<p>Iterate a bundle.</p></li>
</ul></li>
- <li><a class="opensection" href="#encode">Encoding and Decoding a Bundle</a>
+ <li><a href="#encode">Encoding and Decoding a Bundle</a>
<p>Encode and decode a bundle.</p></li>
- <li><a class="opensection" href="#cleanup">Cleaning up a Bundle</a>
+ <li><a href="#cleanup">Cleaning up a Bundle</a>
<p>Release the bundle after use.</p></li>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="init" name="init" class="items-tit-h2">Initializing a Bundle</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
-<p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CORE__LIB__BUNDLE__MODULE.html">Bundle</a> API, include the <span style="font-family: Courier New,Courier,monospace"><bundle.h></span> header file in your application:</p>
+ <h2 id="init" name="init">Initializing a Bundle</h2>
+
+<p>To use the functions and data types of the Bundle API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CORE__LIB__BUNDLE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CORE__LIB__BUNDLE__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><bundle.h></span> header file in your application:</p>
<pre class="prettyprint">
#include <bundle.h>
</pre>
<pre class="prettyprint">bundle* bund = NULL;
bund = bundle_create();</pre>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="add" name="add" class="items-tit-h2">Adding Content to a Bundle</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="add" name="add">Adding Content to a Bundle</h2>
+
<p>Fill a valid bundle instance with content. The content is in the form of key-value pairs. The key is always a string. The value can be of the following types:</p>
<table>
</table>
<p>Each value type is associated with a function that can operate on it:</p>
-<ul class="ul">
+<ul>
<li><span style="font-family: Courier New,Courier,monospace">bundle_add_str_array(bundle *b, const char *key, const char **str_array, const int len)</span></li>
<li><span style="font-family: Courier New,Courier,monospace">bundle_add_str(bundle *b, const char *key, const char *str)</span></li>
<li><span style="font-family: Courier New,Courier,monospace">bundle_add_byte(bundle *b, const char *key, const void *byte, const size_t size)</span></li>
bundle_add_str_array(bund, "Array", array, array_len);
bundle_add_byte(bund, "Byte", "Byte content", 12);</pre>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="manage" name="manage" class="items-tit-h2">Managing and Using the Bundle Content</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="manage" name="manage">Managing and Using the Bundle Content</h2>
+
<p>You can perform the following operations on a bundle:</p>
-<ul class="ul">
+<ul>
<li>Adding content: <span style="font-family: Courier New,Courier,monospace">bundle_add_str()</span>, <span style="font-family: Courier New,Courier,monospace">bundle_add_str_array()</span>, and <span style="font-family: Courier New,Courier,monospace">bundle_add_byte()</span> </li>
<li>Deleting content: <span style="font-family: Courier New,Courier,monospace">bundle_del()</span></li>
<li>Getting values: <span style="font-family: Courier New,Courier,monospace">bundle_get_str()</span>, <span style="font-family: Courier New,Courier,monospace">bundle_get_str_array()</span>, <span style="font-family: Courier New,Courier,monospace">bundle_get_byte()</span>, <span style="font-family: Courier New,Courier,monospace">bundle_get_count()</span>, and <span style="font-family: Courier New,Courier,monospace">bundle_get_type()</span></li>
}
</pre>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="iterate" name="iterate" class="items-tit-h2">Iterating a Bundle</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="iterate" name="iterate">Iterating a Bundle</h2>
+
<p>The <span style="font-family: Courier New,Courier,monospace">bundle_foreach()</span> function requires a callback function to operate. The callback function must first determine the key-value pairs and then perform the specified operations.</p>
<p>After the <span style="font-family: Courier New,Courier,monospace">bundle_foreach()</span> function, the <span style="font-family: Courier New,Courier,monospace">_bundle_iterator_t()</span> function is invoked for each record in the bundle:</p>
bundle_foreach(b, iterate_bundle_foreach, NULL);
bundle_free(b);
}</pre>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="encode" name="encode" class="items-tit-h2">Encoding and Decoding a Bundle</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="encode" name="encode">Encoding and Decoding a Bundle</h2>
+
<p>To store or send a bundle over a serial connection, encode the bundle to <span style="font-family: Courier New,Courier,monospace">bundle_raw</span> (a typedef of <span style="font-family: Courier New,Courier,monospace">unsigned char</span>). To encode the bundle, call the <span style="font-family: Courier New,Courier,monospace">bundle_encode()</span> function.</p>
<p>To store the bundle, write <span style="font-family: Courier New,Courier,monospace">bundle_raw</span> to a file, for example, and then open it with the <span style="font-family: Courier New,Courier,monospace">bundle_decode()</span> function. The encoded data and created bundle must be released when no longer needed.</p>
bundle_free(b2);
}
</pre>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="cleanup" name="cleanup" class="items-tit-h2">Cleaning up a Bundle</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="cleanup" name="cleanup">Cleaning up a Bundle</h2>
+
<p>When no longer needed, release the bundle by calling the <span style="font-family: Courier New,Courier,monospace">bundle_free()</span> function.</p>
<pre class="prettyprint">bundle_free(bund);</pre>
- </div>
- </li>
- </ul>
-</div>
-</div>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a class="opensection" href="#init">Initializing Data Controls</a></li>
- <li><a class="opensection" href="#map1">Working with Map-type Data Controls</a></li>
- <li><a class="opensection" href="#map2">Working with SQL-type Data Controls</a></li>
+ <li><a href="#init">Initializing Data Controls</a></li>
+ <li><a href="#map1">Working with Map-type Data Controls</a></li>
+ <li><a href="#map2">Working with SQL-type Data Controls</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.guides/html/native/app/data_control_n.htm">Data Control Guide</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__DATA__CONTROL__MODULE.html">Data Control API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__DATA__CONTROL__MODULE.html">Data Control API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__DATA__CONTROL__MODULE.html">Data Control API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Data Control: Exchanging Specific Data Between Applications</h1>
- <div class="cont"><div class="static-cont">
+
<p>This tutorial demonstrates how you can get, set, add, and remove map data, and insert, select, update, and delete SQL data.</p>
<h2 id="warmup" name="warmup">Warm-up</h2>
<p>Become familiar with the Data Control API basics by learning about:</p>
<ul>
- <li><a class="opensection" href="#init">Initializing Data Controls</a>
+ <li><a href="#init">Initializing Data Controls</a>
<p>Initialize data controls for use.</p></li>
- <li><a class="opensection" href="#map1">Working with Map-type Data Controls</a>
+ <li><a href="#map1">Working with Map-type Data Controls</a>
<p>Work with Map-type data controls.</p>
</li>
- <li><a class="opensection" href="#map2">Working with SQL-type Data Controls</a>
+ <li><a href="#map2">Working with SQL-type Data Controls</a>
<p>Work with SQL-type data controls.</p></li>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
+ <h2 id="init" name="init">Initializing Data Controls</h2>
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="init" name="init" class="items-tit-h2">Initializing Data Controls</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
-<p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__DATA__CONTROL__MODULE.html">Data Control</a> API, include the <span style="font-family: Courier New,Courier,monospace"><data_control.h></span> header file in your application:</p>
+<p>To use the functions and data types of the Data Control API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__DATA__CONTROL__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__DATA__CONTROL__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><data_control.h></span> header file in your application:</p>
<pre class="prettyprint">
#include <data_control.h>
<p>To execute this application, the <span style="font-family: Courier New,Courier,monospace"><sqlite3.h></span>, <span style="font-family: Courier New,Courier,monospace"><stdlib.h></span>, <span style="font-family: Courier New,Courier,monospace"><glib.h></span>, and <span style="font-family: Courier New,Courier,monospace"><string.h></span> header files have to be included too.</p>
<p>This data control use cases run 2 applications. Each application plays a different role: one for the consumer, the other for the provider. For the consumer application, the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/datasharing</span> and <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/appmanager.launch</span> privileges must be added. For the provider application, in the IDE, go to <strong>tizen-manifest.xml > Advanced > Data Control > Add (Read, Write SQL and Read, Write Map) access rights</strong>.</p>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="map1" name="map1" class="items-tit-h2">Working with Map-type Data Controls</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="map1" name="map1">Working with Map-type Data Controls</h2>
+
<p>To get, add, remove, and set map-type data using the Data Control API:</p>
<ol>
}
if (map_data->arr_size == 0)
{
- if(!g_hash_table_remove(map_repository_test, key))
+ if (!g_hash_table_remove(map_repository_test, key))
{
dlog_print(DLOG_ERROR, LOG_TAG,
"remove value fail -%s", key);
map_callback.set_cb = set_value_request_cb;
int result = data_control_provider_map_register_cb(&map_callback);
- if(result != DATA_CONTROL_ERROR_NONE)
+ if (result != DATA_CONTROL_ERROR_NONE)
{
dlog_print(DLOG_ERROR, LOG_TAG,
"data_control_provider_map_register_cb failed with error: %d", result);
</li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="map2" name="map2" class="items-tit-h2">Working with SQL-type Data Controls</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="map2" name="map2">Working with SQL-type Data Controls</h2>
+
<p>To insert, select, update, and delete SQL-type data using the Data Control API:</p>
<ol>
</pre>
</li>
</ol>
- </div>
- </li>
- </ul>
-</div>
-</div>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a class="opensection" href="#init">Initializing Message Port Communication</a></li>
- <li><a class="opensection" href="#uni">Using Uni-directional Message Port Communication</a></li>
- <li><a class="opensection" href="#bi">Using Bi-directional Message Port Communication</a></li>
- <li><a class="opensection" href="#trusted">Using Trusted Message Port Communication</a></li>
+ <li><a href="#init">Initializing Message Port Communication</a></li>
+ <li><a href="#uni">Using Uni-directional Message Port Communication</a></li>
+ <li><a href="#bi">Using Bi-directional Message Port Communication</a></li>
+ <li><a href="#trusted">Using Trusted Message Port Communication</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.guides/html/native/app/message_port_n.htm">Message Port Guide</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MESSAGE__PORT__MODULE.html">Message Port API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MESSAGE__PORT__MODULE.html">Message Port API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MESSAGE__PORT__MODULE.html">Message Port API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Message Port: Passing Messages Between Applications</h1>
- <div class="cont"><div class="static-cont">
<p>This tutorial demonstrates how you can register, unregister, and check the message port, and send messages through the message port.</p>
<h2>Warm-up</h2>
<p>Become familiar with the Message Port API basics by learning about:</p>
<ul>
- <li><a class="opensection" href="#init">Initializing Message Port Communication</a>
+ <li><a href="#init">Initializing Message Port Communication</a>
<p>Initialize the message port communication for use.</p></li>
- <li><a class="opensection" href="#uni">Using Uni-directional Message Port Communication</a>
+ <li><a href="#uni">Using Uni-directional Message Port Communication</a>
<p>Send and receive messages using uni-directional message port communication between Tizen native applications.</p>
</li>
- <li><a class="opensection" href="#bi">Using Bi-directional Message Port Communication</a>
+ <li><a href="#bi">Using Bi-directional Message Port Communication</a>
<p>Send and receive messages using bi-directional message port communication between Tizen native applications.</p>
</li>
- <li><a class="opensection" href="#trusted">Using Trusted Message Port Communication</a>
+ <li><a href="#trusted">Using Trusted Message Port Communication</a>
<p>Send and receive messages using trusted message port communication between Tizen native applications.</p>
</li>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
- <ul class="devicespecifications">
-
- <li>
- <div class="devicespec-tit">
- <h2 id="init" name="init" class="items-tit-h2">Initializing Message Port Communication</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="init" name="init">Initializing Message Port Communication</h2>
<p>To initialize message port communication:</p>
<ol>
<li>
-<p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MESSAGE__PORT__MODULE.html">Message Port</a> API, include the <span style="font-family: Courier New,Courier,monospace"><message_port.h></span> header file in your application:</p>
+<p>To use the functions and data types of the Message Port API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MESSAGE__PORT__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MESSAGE__PORT__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><message_port.h></span> header file in your application:</p>
<pre class="prettyprint">
#include <message_port.h>
</pre></li>
<p>To use trusted message port communication, create an author certificate, register the certificate to the IDE, and grant permissions by the application certificate in the manifest editor.</p></li></ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="uni" name="uni" class="items-tit-h2">Using Uni-directional Message Port Communication</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="uni" name="uni">Using Uni-directional Message Port Communication</h2>
+
<p>To send a message from Application 1 to Application 2 using the Message Port API:</p>
<p class="figure">Figure: Uni-directional message port communication</p>
- <p
style="text-align:center;"><img alt="Uni-directional message port communication" src="../../images/message_port_uni-directional_communication.png" /></p>
+ <p
align="center"><img alt="Uni-directional message port communication" src="../../images/message_port_uni-directional_communication.png" /></p>
<ol>
</pre>
<p>The function requires 2 parameters:</p>
-<ul class="ul">
+<ul>
<li>[in] <span style="font-family: Courier New,Courier,monospace">local_port</span>: The name of the local message port</li>
<li>[in] <span style="font-family: Courier New,Courier,monospace">callback</span>: The callback function to be called when a message is received</li>
<li>Return: A local message port ID on success, otherwise a negative error value</li>
</pre>
<p>The function requires 3 parameters:</p>
-<ul class="ul">
+<ul>
<li>[in] <span style="font-family: Courier New,Courier,monospace">remote_app_id</span>: The name of the local message port</li>
<li>[in] <span style="font-family: Courier New,Courier,monospace">remote_port</span>: The name of the remote message port</li>
<li>[out] <span style="font-family: Courier New,Courier,monospace">exist</span>: <span style="font-family: Courier New,Courier,monospace">true</span> if the message port of the remote application exists, otherwise <span style="font-family: Courier New,Courier,monospace">false</span></li>
<pre class="prettyprint">int message_port_send_message(const char* remote_app_id, const char* remote_port, bundle* message) </pre>
<p>The function requires 3 parameters:</p>
-<ul class="ul">
+<ul>
<li>[in] <span style="font-family: Courier New,Courier,monospace">remote_app_id</span>: The name of the local message port</li>
<li>[in] <span style="font-family: Courier New,Courier,monospace">remote_port</span>: The name of the remote message port</li>
<li>[in] <span style="font-family: Courier New,Courier,monospace">message</span>: The message to be passed to the remote application, the recommended message size is under 4KB</li>
}
</pre>
</li></ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="bi" name="bi" class="items-tit-h2">Using Bi-directional Message Port Communication</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="bi" name="bi">Using Bi-directional Message Port Communication</h2>
+
<p>To send a message from Application 1 to Application 2, and from Application 2 to Application 1:</p>
<p class="figure">Figure: Bi-directional message port communication</p>
- <p
style="text-align:center;"><img alt="Bi-directional message port communication" src="../../images/message_port_bi-directional_communication.png" /></p>
+ <p
align="center"><img alt="Bi-directional message port communication" src="../../images/message_port_bi-directional_communication.png" /></p>
<ol>
<li>
<p>To get a response from the receiver, local port information has to be sent to the receiver when the message was delivered. To do this, call the <span style="font-family: Courier New,Courier,monospace">message_port_send_message_with_local_port()</span> function.</p>
<p>The function requires 4 parameters:</p>
-<ul class="ul">
+<ul>
<li>[in] <span style="font-family: Courier New,Courier,monospace">remote_app_id</span>: The name of the local message port</li>
<li>[in] <span style="font-family: Courier New,Courier,monospace">remote_port</span>: The name of the remote message port</li>
<li>[in] <span style="font-family: Courier New,Courier,monospace">message</span>: The message to be passed to the remote application, the recommended message size is under 4KB</li>
</pre>
</li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="trusted" name="trusted" class="items-tit-h2">Using Trusted Message Port Communication</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="trusted" name="trusted">Using Trusted Message Port Communication</h2>
+
<p>To use the trusted message port communication:</p>
<p class="figure">Figure: Trusted uni-directional message port communication</p>
- <p
style="text-align:center;"><img alt="Trusted uni-directional message port communication" src="../../images/message_port_trusted_uni-directional_comm.png" /></p>
+ <p
align="center"><img alt="Trusted uni-directional message port communication" src="../../images/message_port_trusted_uni-directional_comm.png" /></p>
<p>Create the author certificate, register the created certificate to the IDE, and give permissions by the application certificate in the manifest editor.</p>
<p>The usage is similar to the normal Message Port API implementation. However, you must use trusted functions instead of normal functions.</p>
-<ul class="ul">
+<ul>
<li>Use the <span style="font-family: Courier New,Courier,monospace">message_port_check_trusted_remote_port()</span> function instead of the <span style="font-family: Courier New,Courier,monospace">message_port_check_remote_port()</span> function.</li>
<li>Use the <span style="font-family: Courier New,Courier,monospace">message_port_send_trusted_message()</span> function instead of the <span style="font-family: Courier New,Courier,monospace">message_port_send_message()</span> function.</li>
<li>Use the <span style="font-family: Courier New,Courier,monospace">message_port_register_trusted_local_port()</span> function instead of the <span style="font-family: Courier New,Courier,monospace">message_port_register_local_port()</span> function.</li>
</ul>
- </div>
- </li>
- </ul>
-</div>
-</div>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
<li>Set-up
<ul class="toc">
- <li><a class="opensection" href="#init">Initializing Notifications</a></li>
- <li><a class="opensection" href="#create">Creating a Notification</a></li>
- <li><a class="opensection" href="#set">Setting Notification Attributes</a></li>
+ <li><a href="#init">Initializing Notifications</a></li>
+ <li><a href="#create">Creating a Notification</a></li>
+ <li><a href="#set">Setting Notification Attributes</a></li>
</ul>
</li>
<li>Management
<ul class="toc">
- <li><a class="opensection" href="#post">Posting a Notification</a></li>
- <li><a class="opensection" href="#update">Updating Notification Content</a></li>
- <li><a class="opensection" href="#delete">Deleting a Notification</a></li>
+ <li><a href="#post">Posting a Notification</a></li>
+ <li><a href="#update">Updating Notification Content</a></li>
+ <li><a href="#delete">Deleting a Notification</a></li>
</ul>
</li>
- <li><a class="opensection" href="#status">Displaying the Notification Status</a></li>
- <li><a class="opensection" href="#bar">Displaying the Progress Bar</a></li>
+ <li><a href="#bar">Displaying the Progress Bar</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.guides/html/native/app/notification_n.htm">Notification Guide</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__NOTIFICATION__MODULE.html">Notification API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__NOTIFICATION__MODULE.html">Notification API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__NOTIFICATION__MODULE.html">Notification API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Notification: Notifying the User of Application Events</h1>
- <div class="cont"><div class="static-cont">
<p>This tutorial demonstrates how you can display notifications in your application.</p>
</li>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="init" name="init" class="items-tit-h2">Initializing Notifications</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="init" name="init">Initializing Notifications</h2>
+
<p>To initialize notifications:</p>
-<ol><li>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__NOTIFICATION__MODULE.html">Notification</a> API, include the <span style="font-family: Courier New,Courier,monospace"><notification.h></span> header file in your application:
+<ol><li>To use the functions and data types of the Notification API (in <a href="../../../../org.tizen.native.mobile.apireference/group__NOTIFICATION__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__NOTIFICATION__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><notification.h></span> header file in your application:
<pre class="prettyprint">
#include <notification.h></pre></li>
-<li>To follow this tutorial, place an image file i.e. in yours application shared resource directory. The following variables are used in the tutorial code:
+<li>To follow this tutorial, place an image file in, for example, your application's shared resource directory. The following variables are used in the tutorial code:
<pre class="prettyprint">static notification_h notification = NULL;
char *image_path[BUFLEN];
char * shared_path = app_get_shared_resource_path();
-snprintf(image_path, BUFLEN, "%stutorial_native_api_application.png", shared_path);
+snprintf(image_path, BUFLEN, "%stutorial_native_api_application.png", shared_path);
free(shared_path);</pre></li></ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="create" name="create" class="items-tit-h2">Creating a Notification</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="create" name="create">Creating a Notification</h2>
+
<p>To create a notification:</p>
<p>Initialize a notification handle by calling the <span style="font-family: Courier New,Courier,monospace">notification_create()</span> function:</p>
<pre class="prettyprint">notification_h notification_create(notification_type_e type)</pre>
<p>The function takes the following parameters:</p>
-<ul class="ul">
+<ul>
<li>[in] <span style="font-family: Courier New,Courier,monospace">type</span>: Notification type.</li>
</ul>
<p>The possible values for the <span style="font-family: Courier New,Courier,monospace">type</span> parameter are:</p>
-<ul class="ul">
+<ul>
<li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_TYPE_NOTI</span>: Create a regular notification.</li>
<li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_TYPE_ONGOING</span>: Create an ongoing notification.</li>
</ul>
{
// Notification was initialized successfully
}</pre>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="set" name="set" class="items-tit-h2">Setting Notification Attributes</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="set" name="set">Setting Notification Attributes</h2>
+
<p>You can set the following attributes for a notification:</p>
-<ul class="ul">
+<ul>
<li><a href="#text">Notification text</a></li>
<li><a href="#timestamp">Timestamp</a></li>
<li><a href="#image">Image</a></li>
<pre class="prettyprint">notification_set_text (notification_h noti, notification_text_type_e type, const char *text, const char *key, int args_type, ...)</pre>
<p>The function takes the following parameters:</p>
-<ul class="ul">
+<ul>
<li><span style="font-family: Courier New,Courier,monospace">[in] noti</span>: Notification handle.</li>
<li><span style="font-family: Courier New,Courier,monospace">[in] type</span>: Notification text type.</li>
<li><span style="font-family: Courier New,Courier,monospace">[in] text</span>: Text to display in the notification view.</li>
</ul>
<p>The possible values for the <span style="font-family: Courier New,Courier,monospace">type</span> parameter are:</p>
-<ul class="ul">
+<ul>
<li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_TEXT_TYPE_TITLE</span></li>
<li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_TEXT_TYPE_CONTENT</span></li>
<li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_TEXT_TYPE_CONTENT_FOR_DISPLAY_OPTION_IS_OFF</span></li>
</ul>
<p>The <span style="font-family: Courier New,Courier,monospace">notification_set_text()</span> function sets the title and content string. If the text is formatted data (only d, f, and s are supported), set the type-value pair:</p>
-<ul class="ul">
+<ul>
<li>If d, the type is <span style="font-family: Courier New,Courier,monospace">NOTIFICATION_VARIABLE_TYPE_INT</span> and the value is an integer.</li>
<li>If f, the type is <span style="font-family: Courier New,Courier,monospace">NOTIFICATION_VARIABLE_TYPE_DOUBLE</span> and the value is a double.</li>
<li>If s, the type is <span style="font-family: Courier New,Courier,monospace">NOTIFICATION_VARIABLE_TYPE_STRING</span> and the value is a string.</li>
<pre class="prettyprint">notification_set_time_to_text (notification_h noti, notification_text_type_e type, time_t time)</pre>
<p>The function takes the following parameters:</p>
-<ul class="ul">
+<ul>
<li><span style="font-family: Courier New,Courier,monospace">[in] noti</span>: Notification handle.</li>
<li><span style="font-family: Courier New,Courier,monospace">[in] type</span>: Notification text type. For information about the possible values, see <a href="#text">Setting the Notification Text</a>.</li>
<li><span style="font-family: Courier New,Courier,monospace">[in] time_t</span>: Timestamp to display in the notification text.</li>
<pre class="prettyprint">notification_set_image (notification_h noti, notification_image_type_e type, const char *image_path)</pre>
<p>The function takes the following parameters:</p>
-<ul class="ul">
+<ul>
<li><span style="font-family: Courier New,Courier,monospace">[in] noti</span>: Notification handle.</li>
<li><span style="font-family: Courier New,Courier,monospace">[in] type</span>: Notification image type.</li>
<li><span style="font-family: Courier New,Courier,monospace">[in] image_path</span>: Absolute path and file name of the image file.</li>
</ul>
<p>The possible values for the <span style="font-family: Courier New,Courier,monospace">type</span> parameter are:</p>
-<ul class="ul">
+<ul>
<li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_IMAGE_TYPE_ICON</span></li>
<li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_IMAGE_TYPE_ICON_FOR_INDICATOR</span></li>
<li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_IMAGE_TYPE_ICON_FOR_LOCK</span></li>
<pre class="prettyprint">notification_set_display_applist (notification_h noti, int applist)</pre>
<p>The function takes the following parameters:</p>
-<ul class="ul">
+<ul>
<li><span style="font-family: Courier New,Courier,monospace">[in] noti</span>: Notification handle.</li>
<li><span style="font-family: Courier New,Courier,monospace">[in] applist</span>: Notification display option. You can set multiple options with the "|" pipe operation.</li>
</ul>
<p>The possible values for the <span style="font-family: Courier New,Courier,monospace">applist</span> parameter are:</p>
-<ul class="ul">
+<ul>
<li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_DISPLAY_APP_NOTIFICATION_TRAY</span></li>
<li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_DISPLAY_APP_TICKER</span></li>
<li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_DISPLAY_APP_LOCK</span></li>
<p>To set the LED options for a notification, use the <span style="font-family: Courier New,Courier,monospace">notification_set_led()</span> and <span style="font-family: Courier New,Courier,monospace">notification_set_led_time_period()</span> functions:</p>
<pre class="prettyprint">notification_set_led (notification_h noti, notification_led_op_e operation, int led_argb)</pre>
<p>The function takes the following parameters:</p>
-<ul class="ul">
+<ul>
<li><span style="font-family: Courier New,Courier,monospace">[in] noti</span>: Notification handle.</li>
<li><span style="font-family: Courier New,Courier,monospace">[in] operation</span>: LED notification operation.</li>
<li><span style="font-family: Courier New,Courier,monospace">[in] led_argb</span>: Notification LED color.</li>
</ul>
<p>The possible values for the <span style="font-family: Courier New,Courier,monospace">operation</span> parameter are:</p>
-<ul class="ul">
+<ul>
<li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_LED_OP_ON</span></li>
<li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_LED_OP_ON_CUSTOM_COLOR</span></li>
</ul>
<pre class="prettyprint">notification_set_led_time_period (notification_h noti, int on_ms, int off_ms)</pre>
<p>The function takes the following parameters:</p>
-<ul class="ul">
+<ul>
<li><span style="font-family: Courier New,Courier,monospace">[in] noti</span>: Notification handle.</li>
<li><span style="font-family: Courier New,Courier,monospace">[in] on_ms</span>: Time for turning on the LED.</li>
<li><span style="font-family: Courier New,Courier,monospace">[in] off_ms</span>: Time for turning off the LED.</li>
<pre class="prettyprint">notification_set_property (notification_h noti, int flags)</pre>
<p>The function takes the following parameters:</p>
-<ul class="ul">
+<ul>
<li><span style="font-family: Courier New,Courier,monospace">[in] noti</span>: Notification handle.</li>
<li><span style="font-family: Courier New,Courier,monospace">[in] flags</span>: Notification property. You can set multiple properties with the "|" pipe operation.</li>
</ul>
<p>The possible values for the <span style="font-family: Courier New,Courier,monospace">flags</span> parameter are:</p>
-<ul class="ul">
+<ul>
<li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_PROP_DISPLAY_ONLY_SIMMODE</span></li>
<li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_PROP_DISABLE_APP_LAUNCH</span></li>
<li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_PROP_DISABLE_AUTO_DELETE</span></li>
{
// Error handling
}</pre>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="post" name="post" class="items-tit-h2">Posting a Notification</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="post" name="post">Posting a Notification</h2>
+
<p>To post a notification to the database, use the <span style="font-family: Courier New,Courier,monospace">notification_post()</span> function:</p>
<pre class="prettyprint">notification_post (notification_h noti)</pre>
<p>The function takes the following parameters:</p>
-<ul class="ul">
+<ul>
<li><span style="font-family: Courier New,Courier,monospace">[in] noti</span>: Notification handle.</li>
</ul>
{
// Error handling
}</pre>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="update" name="update" class="items-tit-h2">Updating Notification Content</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="update" name="update">Updating Notification Content</h2>
+
<p>To update the content of a notification, use the <span style="font-family: Courier New,Courier,monospace">notification_update()</span> function:</p>
<pre class="prettyprint">notification_update (notification_h noti)</pre>
<p>The function takes the following parameters:</p>
-<ul class="ul">
+<ul>
<li><span style="font-family: Courier New,Courier,monospace">[in] noti</span>: Notification handle.</li>
</ul>
{
// Error handling
}</pre>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="delete" name="delete" class="items-tit-h2">Deleting a Notification</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="delete" name="delete">Deleting a Notification</h2>
+
<p>To delete a notification:</p>
<ol><li>To delete a notification from the database, use the <span style="font-family: Courier New,Courier,monospace">notification_delete()</span> function:
<pre class="prettyprint">notification_delete(notification_h noti)</pre>
<p>The function takes the following parameters:</p>
-<ul class="ul">
+<ul>
<li><span style="font-family: Courier New,Courier,monospace">[in] noti</span>: Notification handle.</li>
</ul>
<pre class="prettyprint">notification_free (notification_h noti)</pre>
<p>The function takes the following parameters:</p>
-<ul class="ul">
+<ul>
<li><span style="font-family: Courier New,Courier,monospace">[in] noti</span>: Notification handle.</li>
</ul>
// Error handling
}</pre></li></ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="bar" name="bar" class="items-tit-h2">Displaying the Progress Bar</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="bar" name="bar">Displaying the Progress Bar</h2>
<p>To display the progress bar:</p>
-<ol><li><p>Notification with progress bar, is created with <span style="font-family: Courier New,Courier,monospace">NOTIFICATION_TYPE_ONGOING</span> parameter. Then progress may be updated like in following example:</p>
+<ol><li><p>Use the <span style="font-family: Courier New,Courier,monospace">NOTIFICATION_TYPE_ONGOING</span> parameter to create a notification with a progress bar. The following example illustrates how the progress data is updated.</p>
<p>To set the initial progress:</p>
<pre class="prettyprint">
notification_h notification = NULL;
-// Create notification
+// Create a notification
notification = notification_create(NOTIFICATION_TYPE_ONGOING);
-PRINT_MSG("notification_create %s", (notification != NULL) ? "succeed" : "failed");
+PRINT_MSG("notification_create %s", (notification != NULL) ? "succeed" : "failed");
-// Set parameters
-int ret = notification_set_text(notification, NOTIFICATION_TEXT_TYPE_TITLE, "text", NULL, NOTIFICATION_VARIABLE_TYPE_NONE);
-PRINT_MSG("notification_set_text %s", (ret == 0) ? "succeed" : "failed");
+// Set the parameters
+int ret = notification_set_text(notification, NOTIFICATION_TEXT_TYPE_TITLE, "text", NULL, NOTIFICATION_VARIABLE_TYPE_NONE);
+PRINT_MSG("notification_set_text %s", (ret == 0) ? "succeed" : "failed");
ret = notification_set_progress(notification, 0);
-PRINT_MSG("notification_set_progress %s", (ret == 0) ? "succeed" : "failed");
+PRINT_MSG("notification_set_progress %s", (ret == 0) ? "succeed" : "failed");
-ret = notification_set_tag(notification, "noti_tag");
-PRINT_MSG("notification_set_tag %s", (ret == 0) ? "succeed" : "failed");
+ret = notification_set_tag(notification, "noti_tag");
+PRINT_MSG("notification_set_tag %s", (ret == 0) ? "succeed" : "failed");
-// Send notification
+// Send the notification
ret = notification_post(notification);
-PRINT_MSG("notification_post %s", (ret == 0) ? "succeed" : "failed");
+PRINT_MSG("notification_post %s", (ret == 0) ? "succeed" : "failed");
-// Change status of notification
+// Change the status of the notification
ecore_timer_add(1, timeout_func, NULL);
</pre></li>
<pre class="prettyprint">
static Eina_Bool timeout_func(void *data)
{
- static int i = 0;
- double progress = 0;
- i++;
- notification_h notification = notification_load_by_tag("noti_tag");
- notification_set_progress(notification, ((double) i / 10.0));
- notification_get_progress(notification, &progress);
- notification_update(notification);
-
- dlog_print(DLOG_INFO, "NOTIFICATION", "Progress: %f\n", progress);
-
- if (10 == i)
- {
- dlog_print(DLOG_INFO, "NOTIFICATION", "End of awaiting!n");
- notification_delete(notification);
- return ECORE_CALLBACK_DONE;
- }
-
- return ECORE_CALLBACK_PASS_ON;
+ static int i = 0;
+ double progress = 0;
+ i++;
+ notification_h notification = notification_load_by_tag("noti_tag");
+ notification_set_progress(notification, ((double) i / 10.0));
+ notification_get_progress(notification, &progress);
+ notification_update(notification);
+
+ dlog_print(DLOG_INFO, "NOTIFICATION", "Progress: %f\n", progress);
+
+ if (10 == i)
+ {
+ dlog_print(DLOG_INFO, "NOTIFICATION", "End of awaiting!n");
+ notification_delete(notification);
+
+ return ECORE_CALLBACK_DONE;
+ }
+
+ return ECORE_CALLBACK_PASS_ON;
}
+
</pre></li></ol>
<p class="figure">Figure: Progress bar</p>
- <p style="text-align:center;"><img alt="Progress bar" src="../../images/notification_bar_sd.png" /></p>
- </div>
- </li>
- </ul>
-</div>
-</div>
+ <p align="center"><img alt="Progress bar" src="../../images/notification_bar_sd.png" /></p>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a class="opensection" href="#retrieve">Retrieving All Package Information of Installed Packages</a></li>
- <li><a class="opensection" href="#info">Getting Specific Package Information</a></li>
- <li><a class="opensection" href="#listen">Listening to Package Events</a></li>
+ <li><a href="#retrieve">Retrieving All Package Information of Installed Packages</a></li>
+ <li><a href="#info">Getting Specific Package Information</a></li>
+ <li><a href="#listen">Listening to Package Events</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.guides/html/native/app/package_n.htm">Package Guide</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__PACKAGE__MANAGER__MODULE.html">Package Manager API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__PACKAGE__MANAGER__MODULE.html">Package Manager API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__PACKAGE__MANAGER__MODULE.html">Package Manager API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Package Manager: Installing and Uninstalling Applications</h1>
- <div class="cont"><div class="static-cont">
+
<p>This tutorial demonstrates how you can retrieve package information and manage packages.</p>
<h2 id="warmup" name="warmup">Warm-up</h2>
<p>Become familiar with the Package Manager API basics by learning about:</p>
<ul>
- <li><a class="opensection" href="#retrieve">Retrieving All Package Information of Installed Packages</a>
+ <li><a href="#retrieve">Retrieving All Package Information of Installed Packages</a>
<p>Retrieve all package information of installed packages.</p></li>
- <li><a class="opensection" href="#info">Getting Specific Package Information</a>
+ <li><a href="#info">Getting Specific Package Information</a>
<p>Get specific package information.</p></li>
- <li><a class="opensection" href="#listen">Listening to Package Events</a>
+ <li><a href="#listen">Listening to Package Events</a>
<p>Listen package events, such as installing, uninstalling, and updating.</p></li>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
-
- <ul class="devicespecifications">
+<h2 id="retrieve" name="retrieve">Retrieving All Package Information of Installed Packages</h2>
- <li>
- <div class="devicespec-tit">
- <h2 id="retrieve" name="retrieve" class="items-tit-h2">Retrieving All Package Information of Installed Packages</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
<p>To retrieve all package information of installed packages:</p>
<ol>
-<li><p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__PACKAGE__MANAGER__MODULE.html">Package Manager</a> API:</p>
-<ol><li>Include the <span style="font-family: Courier New,Courier,monospace"><package_manager.h></span> header file in your application:
+<li><p>To use the functions and data types of the Package Manager API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__PACKAGE__MANAGER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__PACKAGE__MANAGER__MODULE.html">wearable</a> applications):</p>
+<ol type="a"><li>Include the <span style="font-family: Courier New,Courier,monospace"><package_manager.h></span> header file in your application:
<pre class="prettyprint">
#include <package_manager.h>
</pre></li>
</pre>
<p>The function takes the following parameters:</p>
-<ul class="ul">
+<ul>
<li>[in] <span style="font-family: Courier New,Courier,monospace">callback</span>: Callback function to be invoked</li>
<li>[in] <span style="font-family: Courier New,Courier,monospace">user_data</span>: User data to be passed to the callback function </li>
<li>[out] 0 on success, otherwise a negative error value</li>
dlog_print(DLOG_ERROR, TAG, "foreach_package_info error : %d", ret);
}
</pre></li></ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="info" name="info" class="items-tit-h2">Getting Specific Package Information</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="info" name="info">Getting Specific Package Information</h2>
+
<p>To get specific package information:</p>
<ol>
-<li><p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__PACKAGE__MANAGER__MODULE.html">Package Manager</a> API:</p>
-<ol><li>Include the <span style="font-family: Courier New,Courier,monospace"><package_manager.h></span> header file in your application:
+<li><p>To use the functions and data types of the Package Manager API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__PACKAGE__MANAGER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__PACKAGE__MANAGER__MODULE.html">wearable</a> applications):</p>
+<ol type="a"><li>Include the <span style="font-family: Courier New,Courier,monospace"><package_manager.h></span> header file in your application:
<pre class="prettyprint">
#include <package_manager.h>
</pre></li>
</pre>
<p>The function takes the following parameters:</p>
-<ul class="ul">
+<ul>
<li>[in] <span style="font-family: Courier New,Courier,monospace">package_id</span>: ID of the package</li>
<li>[in] <span style="font-family: Courier New,Courier,monospace">package_info</span>: Package information for the given package ID</li>
<li>[out] 0 on success, otherwise a negative error value</li>
</ul></li></ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="listen" name="listen" class="items-tit-h2">Listening to Package Events</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="listen" name="listen">Listening to Package Events</h2>
+
<p>To detect package events, such as installation, uninstallation, and updates:</p>
<ol>
-<li><p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__PACKAGE__MANAGER__MODULE.html">Package Manager</a> API:</p>
-<ol><li>Include the <span style="font-family: Courier New,Courier,monospace"><package_manager.h></span> header file in your application:
+<li><p>To use the functions and data types of the Package Manager API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__PACKAGE__MANAGER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__PACKAGE__MANAGER__MODULE.html">wearable</a> applications):</p>
+<ol type="a"><li>Include the <span style="font-family: Courier New,Courier,monospace"><package_manager.h></span> header file in your application:
<pre class="prettyprint">
#include <package_manager.h>
</pre></li>
package_manager_create(&manager);</pre>
<p>The function takes the following parameters:</p>
-<ul class="ul">
+<ul>
<li>[in] <span style="font-family: Courier New,Courier,monospace">manager</span>: Package manager handle that is newly created on success </li>
<li>[out] 0 on success, otherwise a negative error value</li>
</ul>
<pre class="prettyprint">package_manager_set_event_status(manager, PACKAGE_MANAGER_STATUS_TYPE_ALL);</pre>
<p>The function takes the following parameters:</p>
-<ul class="ul">
+<ul>
<li>[in] <span style="font-family: Courier New,Courier,monospace">manager</span>: Package manager handle</li>
<li>[in] <span style="font-family: Courier New,Courier,monospace">status_type</span>: Status of the package</li>
<li>[out] 0 on success, otherwise a negative error value</li>
</pre>
<p>The function takes the following parameters:</p>
-<ul class="ul">
+<ul>
<li>[in] <span style="font-family: Courier New,Courier,monospace">manager</span>: Package manager handle</li>
<li>[in] <span style="font-family: Courier New,Courier,monospace">callback</span>: Callback function to be registered</li>
<li>[in] <span style="font-family: Courier New,Courier,monospace">user_data</span>: User data to be passed to the callback function</li>
</li>
</ol>
- </div>
- </li>
-
- </ul>
-</div>
-</div>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a class="opensection" href="#callback">Listening to Events</a></li>
+ <li><a href="#callback">Listening to Events</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.guides/html/native/app/service_app_n.htm">Service Application Guide</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SERVICE__APP__MODULE.html">Service Application API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SERVICE__APP__MODULE.html">Service Application API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SERVICE__APP__MODULE.html">Service Application API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Service Application: Creating Background Applications</h1>
-<div class="cont"><div class="static-cont">
<p>This tutorial demonstrates how you can manage service applications.</p>
<p>Become familiar with the Service Application API basics by learning about:</p>
<ul>
- <li><a
class="opensection" href="#callback">Listening to Events</a> <p>Register and set callbacks for application state change events and system events.</p></li>
+ <li><a href="#callback">Listening to Events</a> <p>Register and set callbacks for application state change events and system events.</p></li>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
- <!-- Folds -->
- <ul class="devicespecifications">
-<li>
- <div class="devicespec-tit">
- <h2 id="callback" name="callback" class="items-tit-h2">Listening to Events</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+<h2 id="callback" name="callback">Listening to Events</h2>
+
<p>To listen to events:</p>
<ol>
-<li><p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SERVICE__APP__MODULE.html">Service Application</a> API, include the <span style="font-family: Courier New,Courier,monospace"><service_app.h></span> header file in your application:</p>
+<li><p>To use the functions and data types of the Service Application API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SERVICE__APP__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SERVICE__APP__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><service_app.h></span> header file in your application:</p>
<pre class="prettyprint">
#include <service_app.h>
</pre></li>
<p>Add callbacks for application state change events:</p>
-<ul class="ul">
+<ul>
<li>
<p>Add a callback for initializing the service application. This callback is called when the application is launched.</p>
<p>Add callbacks for system events:</p>
-<ul class="ul">
+<ul>
<li>
<p>Add the low memory callback for handling the low memory event. This callback is called when the device is low on memory.</p>
</pre>
</li>
</ol>
- </div>
- </li>
- </ul>
-</div>
-</div>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a class="opensection" href="#add">Adding a Shortcut</a></li>
+ <li><a href="#add">Adding a Shortcut</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.guides/html/native/app/shortcut_n.htm">Shortcut Guide</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__SHORTCUT__MODULE.html">Shortcut API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__SHORTCUT__MODULE.html">Shortcut API for Mobile Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Shortcut: Adding a Shortcut to Home</h1>
- <div class="cont"><div class="static-cont">
+
-<p>This tutorial demonstrates how you can add shortcuts on the Home screen, and track when shortcuts are added to the Home screen.</p>
+<p>This tutorial demonstrates how you can add shortcuts on the home screen, and track when shortcuts are added to the home screen.</p>
+ <table class="note">
+<tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">This feature is supported in mobile applications only.</td>
+ </tr>
+ </tbody>
+ </table>
+
<h2>Warm-up</h2>
<p>Become familiar with the Shortcut API basics by learning about:</p>
<ul>
- <li><a class="opensection" href="#add">Adding a Shortcut</a>
- <p>Add a shortcut to the Home screen.</p></li>
+ <li><a href="#add">Adding a Shortcut</a>
+ <p>Add a shortcut to the home screen.</p></li>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
+ <h2 id="add" name="add">Adding a Shortcut</h2>
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="add" name="add" class="items-tit-h2">Adding a Shortcut</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
-<p>To add a shortcut to the Home screen from your application:</p>
+<p>To add a shortcut to the home screen from your application:</p>
<ol>
#include <shortcut_manager.h>
</pre>
</li>
-<li><p>Add a shortcut, using the <span style="font-family: Courier New,Courier,monospace">shortcut_add_to_home()</span> function:</p>
+<li><p>To add a shortcut, use the <span style="font-family: Courier New,Courier,monospace">shortcut_add_to_home()</span> function:</p>
<pre class="prettyprint">shortcut_add_to_home("Music Player", LAUNCH_BY_PACKAGE, NULL, "/path/to/icon", 1, result_cb, NULL);</pre>
-<p>To add a shortcut, you have to know the package name and set an icon for the application. The icon parameter may be set to <span style="font-family: Courier New,Courier,monospace">NULL</span>, for adding a default icon for the application.</p></li>
+<p>To add a shortcut, you have to know the package name and set an icon for the application. The icon parameter can be set to <span style="font-family: Courier New,Courier,monospace">NULL</span> (as above) to add a default icon for the application.</p></li>
-<li><p>Track possible errors by a callback function:</p>
+<li><p>To track possible errors, define a callback function:</p>
<pre class="prettyprint">static int result_cb(int ret, void *data)
{
if (ret < 0)
}
}
</pre></li></ol>
- </div>
- </li>
- </ul>
-</div>
-</div>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
--- /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>Watch Application: Creating a Watch Application</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+ <div id="profile">
+ <p><img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+ </div>
+ <div id="toc_border"><div id="toc">
+ <p class="toc-title">Content</p>
+ <ul class="toc">
+ <li><a href="#init">Initializing the Watch Application</a></li>
+ <li><a href="#lifecycle">Managing Life-cycle Callbacks</a></li>
+ <li><a href="#systemrelated">Managing System-related Callbacks</a></li>
+ <li><a href="#timehandle">Drawing the Watch UI</a></li>
+ <li><a href="#current">Getting the Current Time</a></li>
+ <li><a href="#ambient">Using the Ambient Mode</a></li>
+ </ul>
+ <p class="toc-title">Related Info</p>
+ <ul class="toc">
+ <li><a href="../../../../org.tizen.guides/html/native/app/watch_n.htm">Watch Application Guide</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__WATCH__APP__MODULE.html">Watch Application API for Wearable Native</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+ <h1>Watch Application: Creating a Watch Application</h1>
+
+
+<p>This tutorial demonstrates how you can create a watch application, set the time, and use the ambient mode.</p>
+
+<table class="note">
+<tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">This feature is supported in wearable applications only.</td>
+ </tr>
+ </tbody>
+ </table>
+
+<h2>Warm-up</h2>
+<p>Become familiar with the Watch Application API basics by learning about:</p>
+ <ul>
+ <li><a href="#init">Initializing the Watch Application</a>
+ <p>Initialize a watch application for use.</p></li>
+ <li><a href="#lifecycle">Managing Life-cycle Callbacks</a>
+ <p>Set the necessary callbacks for application life-cycle management.</p></li>
+ <li><a href="#systemrelated">Managing System-related Callbacks</a>
+ <p>Manage the callbacks that monitor system status changes.</p></li>
+ <li><a href="#timehandle">Drawing the Watch UI</a>
+ <p>Manage the time handle and retrieve the window object for the watch UI.</p></li>
+ <li><a href="#current">Getting the Current Time</a>
+ <p>Get the current time or time zone.</p></li>
+ <li><a href="#ambient">Using the Ambient Mode</a>
+ <p>Use the ambient mode to show limited information on the screen.</p></li>
+ </ul>
+
+
+ <h2 id="init" name="init">Initializing the Watch Application</h2>
+
+<p>To initialize the watch application:</p>
+<ol>
+<li>To use the functions and data types of the <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__WATCH__APP__MODULE.html">Watch Application</a> API, include the <span style="font-family: Courier New,Courier,monospace"><watch_app.h></span> header file in your application:
+<pre class="prettyprint">
+#include <watch_app.h>
+</pre>
+</li>
+<li>To use the <span style="font-family: Courier New,Courier,monospace"> watch_app_ambient_tick_cb()</span> callback in the ambient mode, declare the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/alarm.set</span> privilege in the manifest file.
+</li>
+</ol>
+
+<h2 id="lifecycle" name="lifecycle">Managing Life-cycle Callbacks</h2>
+
+<p>To manage the life-cycle callbacks:</p>
+<ol>
+<li><p>Register the necessary callbacks:</p>
+<ul>
+<li>The <span style="font-family: Courier New,Courier,monospace">create</span> callback is called before the application main loop starts. In this callback, you can initialize the application resources, such as create windows and data structures.
+<pre class="prettyprint">
+bool app_create(int width, int height, void* user_data)
+{
+ // Hook to take necessary actions before the main event loop starts
+ // This usually means initializing the UI and application data
+
+ return true;
+}
+</pre>
+</li>
+<li>The <span style="font-family: Courier New,Courier,monospace">app_control</span> callback is called when another application sends a launch request to the application.
+<pre class="prettyprint">
+void app_control(app_control_h app_control, void* user_data)
+{
+ // Handle the launch request, show the user the task requested through the "app_control" parameter
+}
+</pre>
+</li>
+<li>The <span style="font-family: Courier New,Courier,monospace">pause</span> callback is called when the application is completely obscured by another application and becomes invisible.
+<pre class="prettyprint">
+void app_pause(void* user_data)
+{
+ // Take necessary actions when application becomes invisible
+ // Release the resources needed to draw the normal watch
+}
+</pre>
+</li>
+<li>The <span style="font-family: Courier New,Courier,monospace">resume</span> callback is called when the application becomes visible.
+<pre class="prettyprint">void app_resume(void* user_data)
+{
+ // Take the necessary actions when application becomes visible
+ // Acquire the resources needed to draw the normal watch
+}
+</pre>
+</li>
+<li>The <span style="font-family: Courier New,Courier,monospace">terminate</span> callback is called when the application main loop exits.
+<pre class="prettyprint">void app_terminate(void* user_data)
+{
+ // Release all resources
+}
+</pre>
+</li>
+<li>The <span style="font-family: Courier New,Courier,monospace">time_tick</span> callback is called at least once per second. The watch applications can get the current time from the <span style="font-family: Courier New,Courier,monospace">watch_time</span> time handle to draw a normal watch.
+<pre class="prettyprint">
+void app_time_tick(watch_time_h watch_time, void* user_data)
+{
+ // Called at least once per second
+ // Draw a normal watch with the hour, minute, and second
+}
+</pre>
+</li>
+</ul>
+</li>
+<li>Set the event callbacks in the <span style="font-family: Courier New,Courier,monospace">watch_app_lifecycle_callback_s</span> structure, and pass the structure to the <span style="font-family: Courier New,Courier,monospace">watch_app_main()</span> function that starts the watch application event loop:
+<pre class="prettyprint">
+int main(int argc, char* argv[])
+{
+ appdata ad = {0,};
+ watch_app_lifecycle_callback_s callback = {0,};
+
+ callback.create = app_create;
+ callback.app_control = app_control;
+ callback.terminate = app_terminate;
+ callback.pause = app_pause;
+ callback.resume = app_resume;
+ callback.time_tick = app_time_tick;
+ // Ambient mode callbacks
+
+ int ret = watch_app_main(argc, argv, &callback, &ad);
+ if (ret != APP_ERROR_NONE)
+ {
+ dlog_print(DLOG_ERROR, LOG_TAG, "watch_app_main() is failed. err = %d", ret);
+ }
+
+ return ret;
+}
+</pre>
+</li>
+</ol>
+
+<h2 id="systemrelated" name="systemrelated">Managing System-related Callbacks</h2>
+
+<p>To manage the callbacks related to system status changes:</p>
+
+<ol>
+<li><p>Define the following callback functions:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">lang_changed</span>: Triggered when the system language changes and the messages are translated.</li>
+<li><span style="font-family: Courier New,Courier,monospace">region_changed</span>: Triggered when the time zone changes.</li>
+<li><span style="font-family: Courier New,Courier,monospace">low_memory</span>: Triggered when the system is running low on memory. Use the callback to save the current work and release resources; if this is not enough, the platform frees resources automatically and can even kill some applications.</li>
+<li><span style="font-family: Courier New,Courier,monospace">low_battery</span>: Triggered when the system is running low on battery (less than 5%). Use the callback to save the current work and avoid battery-draining workloads.</li>
+<li><span style="font-family: Courier New,Courier,monospace">device_orientation</span>: Triggered when the screen orientation changes between vertical and horizontal. The orientation information is given to the callback.</li>
+</ul>
+
+<pre class="prettyprint">
+void lang_changed(app_event_info_h event_info, void* user_data)
+{
+ // Take the necessary actions when the language setting changes
+}
+
+void region_changed(app_event_info_h event_info, void* user_data)
+{
+ // Take the necessary actions when the region setting changes
+}
+
+void low_battery(app_event_info_h event_info, void* user_data)
+{
+ // Take the necessary actions when the system is running low on battery
+ watch_app_exit();
+}
+
+void low_memory(app_event_info_h event_info, void* user_data)
+{
+ // Take the necessary actions when the system is running low on memory
+ watch_app_exit();
+}
+</pre></li>
+<li><p>Register the callback functions:</p>
+<pre class="prettyprint">
+bool app_create(void *user_date)
+{
+ // Register callbacks for each system event
+ if (watch_app_add_event_handler(&handler, APP_EVENT_LANGUAGE_CHANGED, lang_changed, NULL) != APP_ERROR_NONE)
+ {
+ dlog_print(DLOG_ERROR, LOG_TAG, "watch_app_add_event_handler() is failed");
+ }
+
+ if (watch_app_add_event_handler(&handler, APP_EVENT_REGION_FORMAT_CHANGED, region_changed, NULL) != APP_ERROR_NONE)
+ {
+ dlog_print(DLOG_ERROR, LOG_TAG, "watch_app_add_event_handler() is failed");
+ }
+
+ if (watch_app_add_event_handler(&handler, APP_EVENT_LOW_BATTERY, low_battery, NULL) != APP_ERROR_NONE)
+ {
+ dlog_print(DLOG_ERROR, LOG_TAG, "watch_app_add_event_handler() is failed");
+ }
+
+ if (watch_app_add_event_handler(&handler, APP_EVENT_LOW_MEMORY,low_ memory, NULL) != APP_ERROR_NONE)
+ {
+ dlog_print(DLOG_ERROR, LOG_TAG, "watch_app_add_event_handler() is failed");
+ }
+
+ if (watch_app_add_event_handler(&handler, APP_EVENT_DEVICE_ORIENTATION_CHANGED, device_orientation, NULL) != APP_ERROR_NONE)
+ {
+ dlog_print(DLOG_ERROR, LOG_TAG, "watch_app_add_event_handler() is failed");
+ }
+
+ return true;
+}
+</pre></li>
+</ol>
+
+<h2 id="timehandle" name="timehandle">Drawing the Watch UI</h2>
+<p>To draw the watch UI, you need the current time handle and the window object of the idle screen:</p>
+
+<ol>
+<li>Get the window object with the <span style="font-family: Courier New,Courier,monospace">watch_app_get_elm_win()</span> function:
+<pre class="prettyprint">
+#include <watch_app_efl.h>
+
+typedef struct
+{
+ Evas *evas;
+ Evas_Object *win;
+ Evas_Object *conform;
+ Evas_Object *label;
+}
+appdata;
+
+static void __create_base_gui(appdata *ad, int width, int height)
+{
+ int ret;
+ watch_time_h watch_time = NULL;
+ ret = watch_app_get_elm_win(&ad->win);
+
+ if (ret != APP_ERROR_NONE)
+ {
+ dlog_print(DLOG_ERROR, LOG_TAG, "failed to get window. err = %d", ret);
+ return;
+ }
+ evas_object_resize(ad->win, width, height);
+ ad->conform = elm_conformant_add(ad->win);
+ evas_object_size_hint_weight_set(ad->conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+ elm_win_resize_object_add(ad->win, ad->conform);
+ evas_object_show(ad->conform);
+ ad->label = elm_label_add(ad->conform);
+ evas_object_resize(ad->label, width, height / 3);
+ evas_object_move(ad->label, 0, height / 3);
+ evas_object_show(ad->label);
+</pre>
+</li>
+<li>Get the time handle for the current time with the <span style="font-family: Courier New,Courier,monospace">watch_time_get_current_time()</span> function:
+
+<pre class="prettyprint">
+ ret = watch_time_get_current_time(&watch_time);
+ if (ret != APP_ERROR_NONE)
+ dlog_print(DLOG_ERROR, LOG_TAG, "failed to get current time. err = %d", ret);
+ __update_watch(ad, watch_time);
+}
+
+
+bool app_create(void *user_date)
+{
+ // Define system callbacks
+
+ appdata *ad = data;
+ __create_base_gui(ad, width, height);
+
+ return true;
+}
+</pre>
+</li>
+<li>When you no longer need the <span style="font-family: Courier New,Courier,monospace">watch_time_h</span> time handle, release it with the <span style="font-family: Courier New,Courier,monospace">watch_time_delete()</span> function.
+</li>
+</ol>
+
+<h2 id="current" name="current">Getting the Current Time</h2>
+
+<p>You can get the current local time in various formats using the Watch Application methods and the time handle. When retrieving the current local time, the time handle parameter cannot be <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+
+<p>For example, you can use the <span style="font-family: Courier New,Courier,monospace">int watch_time_get_minute()</span> method to retrieve the current minute value.</p>
+<pre class="prettyprint">
+static void __update_watch(appdata *ad, watch_time_h watch_time)
+{
+ watch_text[TEXT_BUF_SIZE];
+ int hour24, minute, second;
+
+ if (watch_time == NULL)
+ return;
+
+ watch_time_get_hour24(watch_time, &hour24);
+ watch_time_get_minute(watch_time, &minute);
+ watch_time_get_second(watch_time, &second);
+ snprintf(watch_text, TEXT_BUF_SIZE,
+ "<align=center>Hello Watch<br/>%02d:%02d:%02d</align>",
+ hour24, minute, second);
+ elm_object_text_set(ad->label, watch_text);
+}
+
+static void __create_base_gui(appdata *ad, int width, int height)
+{
+ // Get the window object and time handle
+
+ __update_watch(ad, watch_time);
+}
+</pre>
+
+<p>You can also get the UTC time and time zone, if needed, using the <span style="font-family: Courier New,Courier,monospace">watch_time_get_utc_time()</span>, <span style="font-family: Courier New,Courier,monospace">watch_time_get_utc_timestamp()</span>, and <span style="font-family: Courier New,Courier,monospace">watch_time_get_time_zone()</span> functions.</p>
+
+<h2 id="ambient" name="ambient">Using the Ambient Mode</h2>
+
+<p>To use the ambient mode:</p>
+<ol>
+<li>Define the ambient mode callbacks.
+<ul><li><p>The <span style="font-family: Courier New,Courier,monospace">watch_app_ambient_changed_cb()</span> callback is triggered when the ambient mode is enabled or disabled in the device. You can use the callback to initialize your ambient mode UI.</p></li>
+<li><p>The <span style="font-family: Courier New,Courier,monospace">watch_app_ambient_tick_cb()</span> callback is triggered every minute while the device is in the ambient mode. You can use the callback to update the time on your watch application in the ambient mode. In this callback, do not perform time-consuming task and always update the UI as fast as possible. The platform can put the device to sleep shortly after the ambient tick expires.</p></li></ul>
+<pre class="prettyprint">
+void app_ambient_tick(watch_time_h watch_time, void* user_data)
+{
+ appdata *ad = user_data;
+ __update_watch(ad, watch_time);
+}
+
+void app_ambient_changed(bool ambient_mode, void* user_data)
+{
+ if (ambient_mode)
+ {
+ // Prepare to enter the ambient mode
+ }
+ else
+ {
+ // Prepare to exit the ambient mode
+ }
+}
+
+</pre>
+</li>
+<li>Register the ambient mode callbacks:
+<pre class="prettyprint">
+int main(int argc, char* argv[])
+{
+ appdata ad = {0,};
+ watch_app_lifecycle_callback_s callback = {0,};
+
+ // Other life-cycle callbacks
+
+ callback.ambient_tick = app_ambient_tick;
+ callback.ambient_changed = app_ambient_changed;
+
+ int ret = watch_app_main(argc, argv, &callback, &ad);
+ if (ret != APP_ERROR_NONE)
+ {
+ dlog_print(DLOG_ERROR, LOG_TAG, "watch_app_main() is failed. err = %d", ret);
+ }
+ return ret;
+}
+</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>Widget: Creating Widget Applications</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+ <div id="profile">
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+ </div>
+ <div id="toc_border"><div id="toc">
+ <p class="toc-title">Content</p>
+ <ul class="toc">
+ <li><a href="#init">Initializing the Widget Application</a></li>
+ <li><a href="#create">Creating the Widget Application</a></li>
+ <li><a href="#life-cycle">Managing Widget Object Life-cycle Callbacks</a></li>
+ <li><a href="#get_window">Drawing the Widget UI</a></li>
+ <li><a href="#get_instance">Managing the Widget Instance</a></li>
+ </ul>
+ <p class="toc-title">Related Info</p>
+ <ul class="toc">
+ <li><a href="../../../../org.tizen.guides/html/native/app/widget_n.htm">Widget Guide</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__WIDGET__MODULE.html">Widget API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__WIDGET__MODULE.html">Widget API for Wearable Native</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+ <h1>Widget: Creating Widget Applications</h1>
+
+
+<p>This tutorial demonstrates how you can create a widget application.</p>
+
+
+<h2>Warm-up</h2>
+<p>Become familiar with the Watch Application API basics by learning about:</p>
+ <ul>
+ <li><a href="#init">Initializing the Widget Application</a>
+ <p>Initialize a widget application for use.</p></li>
+ <li><a href="#create">Creating the Widget Application</a>
+ <p>Create a widget application, and define and register the system callbacks.</p></li>
+ <li><a href="#life-cycle">Managing Widget Object Life-cycle Callbacks</a>
+ <p>Define and register the life-cycle callbacks.</p></li>
+ <li><a href="#get_window">Drawing the Widget UI</a>
+ <p>Create a UI object of the widget on the home screen.</p></li>
+ <li><a href="#get_instance">Managing the Widget Instance</a>
+ <p>Get the widget instance and the instance ID.</p></li>
+ </ul>
+
+
+ <h2 id="init" name="init">Initializing the Widget Application</h2>
+
+<p>To initialize the widget application:</p>
+<ol>
+<li>To use the functions and data types of the Widget API (in <a href="../../../../org.tizen.native.mobile.apireference/group__WIDGET__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__WIDGET__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><widget_app.h></span> header file in your application:
+<pre class="prettyprint">
+#include <widget_app.h>
+</pre></li>
+<li>Edit the widget application settings in the <a href="../../../../org.tizen.devtools/html/native_tools/manifest_text_editor_n.htm#widget_app">manifest</a> file.</li>
+</ol>
+
+ <h2 id="create">Creating the Widget Application</h2>
+
+<p>To create the widget application:</p>
+<ol>
+<li>
+<p>Start and initialize the application with the <span style="font-family: Courier New,Courier,monospace">main()</span> function.</p>
+<p>Set up the <span style="font-family: Courier New,Courier,monospace">widget_app_lifecycle_callback_s</span> structure variable for the widget instance life-cycle callbacks, define the life-cycle functions for the widget application itself (<span style="font-family: Courier New,Courier,monospace">widget_app_create()</span> for initialization and <span style="font-family: Courier New,Courier,monospace">widget_app_terminate()</span> for termination), and call the <span style="font-family: Courier New,Courier,monospace">widget_app_main()</span> to start the application event loop.</p>
+<pre class="prettyprint">
+int
+main(int argc, char *argv[])
+{
+ widget_app_lifecycle_callback_s ops = {0,};
+ int ret;
+
+ ops.create = widget_app_create;
+ ops.terminate = widget_app_terminate;
+
+ ret = widget_app_main(argc, argv, &ops, NULL);
+ if (ret != WIDGET_ERROR_NONE)
+ {
+ dlog_print(DLOG_ERROR, LOG_TAG, "widget_app_main() failed. err = %d", ret);
+ }
+
+ return ret;
+}
+</pre>
+</li>
+<li>Use the <span style="font-family: Courier New,Courier,monospace">widget_app_create()</span> function to initialize any resources that can be shared among widget instances. This function is called before the main event loop starts.
+<pre class="prettyprint">
+widget_class_h widget_app_create (void *user_data)
+{
+ // Hook to take necessary actions before main event loop starts
+ widget_instance_lifecycle_callback_s obj_callback = {0,};
+ app_event_handler_h handlers[5] = {NULL, };
+
+ // Register the callback functions for the widget object life-cycle
+</pre>
+</li>
+
+<li>Register the callback functions for the system events.
+<p>At the end of the <span style="font-family: Courier New,Courier,monospace">widget_app_create()</span> function, remember to create a widget instance class and return a handle for it, so that the handle can be used for making widget instances.</p>
+<pre class="prettyprint">
+ // Register the callback functions for system events
+ widget_app_add_event_handler(&handlers[APP_EVENT_LOW_BATTERY], APP_EVENT_LOW_BATTERY,
+ widget_app_low_battery, NULL);
+ widget_app_add_event_handler(&handlers[APP_EVENT_LOW_MEMORY], APP_EVENT_LOW_MEMORY,
+ widget_app_low_memory, NULL);
+ widget_app_add_event_handler(&handlers[APP_EVENT_LANGUAGE_CHANGED], APP_EVENT_LANGUAGE_CHANGED,
+ widget_app_lang_changed, NULL);
+ widget_app_add_event_handler(&handlers[APP_EVENT_REGION_FORMAT_CHANGED],
+ APP_EVENT_REGION_FORMAT_CHANGED, widget_app_region_changed, NULL);
+
+ return widget_app_class_create(obj_callback);
+}
+</pre>
+<p>When the system-related callback are no longer needed, remove them with the <span style="font-family: Courier New,Courier,monospace">widget_app_remove_event_handler()</span> function.</p>
+</li>
+
+<li>Define the callback functions for the system events:
+<pre class="prettyprint">
+void widget_app_lang_changed(app_event_info_h event_info, void* user_data)
+{
+ // Take actions when language setting changes and messages must be translated
+ char *locale = NULL;
+ app_event_get_language(event_info, &locale);
+ elm_language_set(locale);
+ free(locale);
+}
+
+void widget_app_region_changed(app_event_info_h event_info, void* user_data)
+{
+ // Take actions when the time zone changes
+}
+
+void widget_app_low_battery(app_event_info_h event_info, void* user_data)
+{
+ // Take actions when system is running low on battery (less than 5%)
+ // Save the work and avoid battery-intensive processes
+ widget_app_exit();
+}
+
+void widget_app_low_memory(app_event_info_h event_info, void* user_data)
+{
+ // Take actions when system is running on low memory
+ // Save the work and release resources; if necessary, some apps can be killed
+ widget_app_exit();
+}
+</pre>
+</li>
+
+<li>When you no longer need the widget application, release the resources and terminate the application:
+<pre class="prettyprint">
+static void
+widget_app_terminate(void *user_data)
+{
+ // Release all resources
+}
+</pre>
+</li>
+</ol>
+
+<h2 id="life-cycle">Managing Widget Object Life-cycle Callbacks</h2>
+<p>To manage the widget object life-cycle:</p>
+<ol>
+<li>Define the widget object life-cycle callbacks:
+<ul>
+<li>This callback is triggered when the widget instance is created.
+<p>Initialize resources for this widget instance and <a href="#get_window">draw the UI</a>. If bundle content is not NULL, restore the previous status.</p>
+<pre class="prettyprint">
+int widget_instance_create(widget_context_h context, bundle *content, int w, int h)
+{
+ widget_instance_data_s *wid = (widget_instance_data_s*) malloc(sizeof(widget_instance_data_s));
+ int ret;
+
+ if (content != NULL)
+ {
+ // Recover the previous status with the bundle object
+ }
+
+ // Create the UI
+
+ return WIDGET_ERROR_NONE;
+}
+</pre>
+</li>
+
+<li>This callback is triggered when the widget instance is destroyed.
+<p>Release all widget resources. If the <span style="font-family: Courier New,Courier,monospace">reason</span> for the termination is not <span style="font-family: Courier New,Courier,monospace">WIDGET_APP_DESTROY_TYPE_DEFAULT</span>, store the current status with the incoming bundle.</p>
+<pre class="prettyprint">
+int widget_instance_destroy(widget_context_h context, widget_app_destroy_type_e reason, bundle *content)
+{
+ if (reason != WIDGET_APP_DESTROY_TYPE_DEFAULT)
+ {
+ // Save the current status at the bundle object
+ }
+
+ return WIDGET_ERROR_NONE;
+}
+</pre>
+
+</li>
+
+<li>This callback is triggered when the widget instance is paused.
+<p>Take the necessary actions since the widget instance becomes invisible. The framework can destroy a paused widget instance.</p>
+<pre class="prettyprint">
+int widget_instance_pause(widget_context_h context)
+{
+ return WIDGET_ERROR_NONE;
+}
+</pre>
+</li>
+<li>This callback is triggered when the widget instance is resumed.
+<p>Take the necessary actions since the widget instance becomes visible.</p>
+<pre class="prettyprint">
+int widget_instance_resume(widget_context_h context)
+{
+ return WIDGET_ERROR_NONE;
+}
+</pre>
+</li>
+<li>This callback is triggered before the widget instance is resized.
+<p>Take the necessary actions to accommodate the new size.</p>
+<pre class="prettyprint">
+int widget_instance_resize(widget_context_h context, int w, int h)
+{
+ return WIDGET_ERROR_NONE;
+}
+</pre>
+</li>
+<li>This callback is triggered when a widget update event is received.
+<p>Take the necessary actions for the widget update. If the <span style="font-family: Courier New,Courier,monospace">force</span> parameter is <span style="font-family: Courier New,Courier,monospace">true</span>, the widget can be updated even in the pause state.</p>
+<pre class="prettyprint">
+int widget_instance_update(widget_context_h context, bundle *content, int force)
+{
+ return WIDGET_ERROR_NONE;
+}
+</pre>
+</li>
+</ul>
+</li>
+
+<li>Register the callbacks in the <span style="font-family: Courier New,Courier,monospace">widget_instance_lifecycle_callback_s</span> structure during the widget application initialization:
+<pre class="prettyprint">
+widget_class_h widget_app_create (void *user_data)
+{
+ widget_instance_lifecycle_callback_s obj_callback = {0,};
+ // Register the callback functions
+ obj_callback.create = widget_instance_create;
+ obj_callback.destroy = widget_instance_destroy;
+ obj_callback.pause = widget_instance_pause;
+ obj_callback.resume = widget_instance_resume;
+ obj_callback.resize = widget_instance_resize;
+ obj_callback.update = widget_instance_update;
+
+ // Register system-related callbacks
+
+ return widget_app_class_create(obj_callback);
+}
+</pre>
+</li>
+</ol>
+
+<h2 id="get_window">Drawing the Widget UI</h2>
+
+<p>To draw the widget UI, you must get a window object with the <span style="font-family: Courier New,Courier,monospace">widget_app_get_elm_win()</span> function and create the UI on the home screen:</p>
+<pre class="prettyprint">
+#include <widget_app_efl.h>
+
+typedef struct widget_instance_data
+{
+ Evas_Object *win;
+ Evas_Object *conform;
+ Evas_Object *label;
+}
+widget_instance_data_s;
+
+static int
+widget_instance_create(widget_context_h context, bundle *content,
+int w, int h)
+{
+ widget_instance_data_s *wid = (widget_instance_data_s*) malloc(sizeof(widget_instance_data_s));
+
+ int ret;
+ if (content != NULL)
+ {
+ // Recover the previous status with the bundle object
+ }
+
+ // Window
+ ret = widget_app_get_elm_win(context, &wid->win);
+ if (ret != WIDGET_ERROR_NONE)
+ {
+ dlog_print(DLOG_ERROR, LOG_TAG, "failed to get window. err = %d", ret);
+
+ return WIDGET_ERROR_FAULT;
+ }
+
+ evas_object_resize(wid->win, w, h);
+
+ // Conformant
+ wid->conform = elm_conformant_add(wid->win);
+ evas_object_size_hint_weight_set(wid->conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+ elm_win_resize_object_add(wid->win, wid->conform);
+ evas_object_show(wid->conform);
+
+ // Label
+ wid->label = elm_label_add(wid->conform);
+ evas_object_resize(wid->label, w, h / 3);
+ evas_object_move(wid->label, 0, h / 3);
+ evas_object_show(wid->label);
+ elm_object_text_set(wid->label, "Hello widget");
+
+ // Show the window after the base GUI is set up
+ evas_object_show(wid->win);
+
+ widget_app_context_set_tag(context, wid);
+
+ return WIDGET_ERROR_NONE;
+}
+</pre>
+
+<h2 id="get_instance">Managing the Widget Instance</h2>
+
+<p>To manage the widget instance:</p>
+<ol>
+<li>You can set a customized widget instance with the <span style="font-family: Courier New,Courier,monospace">widget_app_context_set_tag()</span> function when the instance is created. To update or destroy the customized widget, get the instance with the <span style="font-family: Courier New,Courier,monospace">widget_app_context_get_tag()</span> function.
+<pre class="prettyprint">
+typedef struct
+{
+ int val1;
+} user_defined_s;
+
+
+int widget_instance_create(widget_context_h context, bundle *content, int w, int h)
+{
+ user_defined_s *uds = (user_defined_s*)malloc(sizeof(user_defined_s));
+ uds->val1 = 0;
+ widget_app_context_set_tag(context, uds);
+}
+
+int widget_instance_destroy(widget_context_h context, widget_destroy_type_e reason, bundle *content)
+{
+ user_defined_s *uds = NULL;
+ widget_app_context_get_tag(context, (void**)&uds);
+ free(uds);
+}
+
+int widget_instance_update(widget_context_h context, bundle *content, int force)
+{
+ user_defined_s *uds = NULL;
+ widget_app_context_get_tag(context, (void**)&uds);
+ uds->val1 = 1;
+}
+</pre>
+</li>
+
+<li>Get the widget instance ID:
+<pre class="prettyprint">
+int widget_instance_update(widget_context_h context, bundle *content, int force)
+{
+ const char *inst_id = NULL;
+ inst_id = widget_app_get_id(context);
+}
+</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>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.guides/html/native/base/base_guide_n.htm">Base Guides</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__FRAMEWORK.html">Base API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__FRAMEWORK.html">Base API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__FRAMEWORK.html">Base API for Wearable Native</a></li>
</ul>
</div></div>
<div id="container"><div id="contents"><div class="content">
<h1>Base: Using Fundamental Libraries</h1>
-<p>The base tutorials demonstrate how to use the following features in creating Tizen mobile native applications:</p>
+<p>The base tutorials demonstrate how to use the following features in creating Tizen native applications:</p>
<ul>
<li><a href="sqlite_tutorial_n.htm">Sqlite: Managing the SQL Database</a> <p>Demonstrates how you can access SQLite and OpenSSL, and encrypt and store application data.</p></li>
<li><a href="i18n_tutorial_n.htm">i18n: Managing Characters, Numbers, and Locales</a><p>Demonstrates how you can manage numbers, date, time and locale information.</p></li>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a class="opensection" href="#characters">Managing Characters and Strings</a></li>
- <li><a class="opensection" href="#dates">Managing Dates and Calendar</a></li>
- <li><a class="opensection" href="#locales">Managing Locales</a></li>
- <li><a class="opensection" href="#numbers">Managing Numbers</a></li>
+ <li><a href="#characters">Managing Characters and Strings</a></li>
+ <li><a href="#dates">Managing Dates and Calendar</a></li>
+ <li><a href="#locales">Managing Locales</a></li>
+ <li><a href="#numbers">Managing Numbers</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.guides/html/native/base/i18n_n.htm">i18n Guide</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__MODULE.html">i18n API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__MODULE.html">i18n API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__MODULE.html">i18n API for Wearable Native</a></li>
</ul>
</div></div>
<div id="container"><div id="contents"><div class="content">
<h1>i18n: Managing Characters, Numbers, and Locales</h1>
-<div class="cont"><div class="static-cont">
+
<p>This tutorial demonstrates how you can manage numbers, date, time and locale information.</p>
<h2>Warm-up</h2>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
- <!-- Folds -->
- <ul class="devicespecifications">
+<h2 id="characters" name="characters">Managing Characters and Strings</h2>
- <li>
- <div class="devicespec-tit">
- <h2 id="characters" name="characters" class="items-tit-h2">Managing Characters and Strings</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
<table class="note">
<tbody>
</tr>
<tr>
<td class="note">
- <ul class="ul"><li>All source and destination buffers must be different.</li>
- <li>To use the localization-related features of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__MODULE.html">i18n</a> API, include the <span style="font-family: Courier New,Courier,monospace"><utils_i18n.h></span> header file in your application:
+ <ul><li>All source and destination buffers must be different.</li>
+ <li>To use the localization-related features of the i18n API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><utils_i18n.h></span> header file in your application:
<pre class="prettyprint">
#include <utils_i18n.h>
</pre></li></ul></td>
int32_t result = i18n_ustring_compare(s1, s2);
</pre></li></ol>
-<p>For a more complex, locale-sensitive comparison, use the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UCOLLATOR__MODULE.html">Ucollator</a> API:</p>
+<p>For a more complex, locale-sensitive comparison, use the Ucollator API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UCOLLATOR__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__UCOLLATOR__MODULE.html">wearable</a> applications):</p>
<ol>
<li>Create a Ucollator using the <span style="font-family: Courier New,Courier,monospace">i18n_ucollator_create()</span> function. <p>Specify the locale as the first argument and a handle to the created Ucollator as the second argument.</p>
<pre class="prettyprint">
i18n_ucollator_create(I18N_ULOCALE_US, &coll);
</pre></li>
<li>Set the Ucollator strength. <p>The strength influences how strings are compared. There are a few available strength levels:</p>
-<ul class="ul">
+<ul>
<li>Primary differences, such as different base letters ("a" vs "b")</li>
<li>Secondary differences, such as different accented forms of the same base letter ("a" vs "ä")</li>
<li>Tertiary differences, such as case differences ("a" vs "A")</li>
<h3 id="strings" name="strings">Converting Strings to Ustrings</h3>
<p>To convert strings to Ustrings:</p>
-<ul
class="ul"><li><p>To convert a byte string to a Unicode string (Ustring), use the <span style="font-family: Courier New,Courier,monospace">i18n_ustring_copy_ua()</span> function.</p>
+<ul><li><p>To convert a byte string to a Unicode string (Ustring), use the <span style="font-family: Courier New,Courier,monospace">i18n_ustring_copy_ua()</span> function.</p>
<pre class="prettyprint">
const char *src = "Tizen";
i18n_uchar dest[64];
<h3 id="ustrings" name="ustrings">Converting Ustrings to Strings</h3>
<p>To convert Ustrings to strings:</p>
-<ul class="ul">
+<ul>
<li><p>To convert a Ustring to a byte string, use the <span style="font-family: Courier New,Courier,monospace">i18n_ustring_copy_au()</span> function.</p>
<pre class="prettyprint">
i18n_uchar src[64];
<p>To normalize a Ustring:</p>
<ol>
<li>Get a Unormalizer instance.
-<p>To get a Unormalizer instance, use the <span style="font-family: Courier New,Courier,monospace">i18n_unormalization_get_instance()</span> function of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UNORMALIZATION__MODULE.html">Unormalization</a> API. The first argument is <span style="font-family: Courier New,Courier,monospace">NULL</span> to use the built-in normalizer, then specify the name of the normalizer (<span style="font-family: Courier New,Courier,monospace">nfc</span> or <span style="font-family: Courier New,Courier,monospace">nfkc</span>), normalization mode (compose or decompose), and a handle to get a normalizer.</p>
+<p>To get a Unormalizer instance, use the <span style="font-family: Courier New,Courier,monospace">i18n_unormalization_get_instance()</span> function of the Unormalization API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UNORMALIZATION__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__UNORMALIZATION__MODULE.html">wearable</a> applications). The first argument is <span style="font-family: Courier New,Courier,monospace">NULL</span> to use the built-in normalizer, then specify the name of the normalizer (<span style="font-family: Courier New,Courier,monospace">nfc</span> or <span style="font-family: Courier New,Courier,monospace">nfkc</span>), normalization mode (compose or decompose), and a handle to get a normalizer.</p>
<pre class="prettyprint">
i18n_unormalizer_h normalizer;
i18n_unormalization_get_instance(NULL, "nfc", I18N_UNORMALIZATION_DECOMPOSE, &normalizer);
<p>To search a substring in a Ustring:</p>
<ol>
<li>Create a search iterator.
-<p>To create a search iterator, use the <span style="font-family: Courier New,Courier,monospace">i18n_usearch_create()</span> function of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__USEARCH__MODULE.html">Usearch</a> API. To create the iterator, specify the searched pattern, the length of the searched pattern (-1 if the string is zero-terminated), the Ustring where the pattern is searched, the length of this Ustring, a locale associated with the text language, an optional break iterator structure, and a handle to created search iterator.</p>
+<p>To create a search iterator, use the <span style="font-family: Courier New,Courier,monospace">i18n_usearch_create()</span> function of the Usearch API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__USEARCH__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__USEARCH__MODULE.html">wearable</a> applications). To create the iterator, specify the searched pattern, the length of the searched pattern (-1 if the string is zero-terminated), the Ustring where the pattern is searched, the length of this Ustring, a locale associated with the text language, an optional break iterator structure, and a handle to created search iterator.</p>
<pre class="prettyprint">
i18n_uchar text[64];
i18n_ustring_copy_ua(text, "TIZEN");
i18n_ustring_to_upper(dest, 64, src, -1, I18N_ULOCALE_US, &error_code);
</pre></li></ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="dates" name="dates" class="items-tit-h2">Managing Dates and Calendar</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+<h2 id="dates" name="dates">Managing Dates and Calendar</h2>
+
<p>To create and use the Ucalendar:</p>
<ol>
-<li><p>To use the date and calendar-related features of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UCALENDAR__MODULE.html">Ucalendar</a>, <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UDATE__MODULE.html">Udate</a>, and <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UDATEPG__MODULE.html">Udatepg</a> API, include the <span style="font-family: Courier New,Courier,monospace"><utils_i18n.h></span> header file in your application:</p>
+<li><p>To use the date and calendar-related features of the Ucalendar (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UCALENDAR__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__UCALENDAR__MODULE.html">wearable</a> applications), Udate (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UDATE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__UDATE__MODULE.html">wearable</a> applications), and Udatepg (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UDATEPG__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__UDATEPG__MODULE.html">wearable</a> applications) APIs, include the <span style="font-family: Courier New,Courier,monospace"><utils_i18n.h></span> header file in your application:</p>
<pre class="prettyprint">
#include <utils_i18n.h>
</pre>
-<ul class="ul">
+<ul>
<li>The Ucalendar API is used for converting between an <span style="font-family: Courier New,Courier,monospace">i18n_udate</span> object and a set of integer fields, such as <span style="font-family: Courier New,Courier,monospace">I18N_UCALENDAR_YEAR</span>, <span style="font-family: Courier New,Courier,monospace">I18N_UCALENDAR_MONTH</span>, <span style="font-family: Courier New,Courier,monospace">I18N_UCALENDAR_DAY</span>, and <span style="font-family: Courier New,Courier,monospace">I18N_UCALENDAR_HOUR</span>.</li>
<li>The Udate API consists of functions that convert dates and times from their internal representations to a textual form and back again in a language-independent manner.</li>
<li>The Udatepg API provides flexible generation of date format patterns, such as "yy-MM-dd".</li>
i18n_udate_destroy(date_format);
</pre></li>
</ol>
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="locales" name="locales" class="items-tit-h2">Managing Locales</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+<h2 id="locales" name="locales">Managing Locales</h2>
+
<p>To manage the features of a specific geographical, political, or cultural region:</p>
<ol>
-<li><p>To use the locale-related features of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__ULOCALE__MODULE.html">Ulocale</a> API, include the <span style="font-family: Courier New,Courier,monospace"><utils_i18n.h></span> header file in your application:</p>
+<li><p>To use the locale-related features of the Ulocale API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__ULOCALE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__ULOCALE__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><utils_i18n.h></span> header file in your application:</p>
<pre class="prettyprint">
#include <utils_i18n.h>
</pre></li>
<li>To manage locale information:
-<ul class="ul">
+<ul>
<li>To get the language associated with a locale, use the <span style="font-family: Courier New,Courier,monospace">i18n_ulocale_get_language()</span> function. Provide the locale symbol (such as "en_US" or "ko_KR" - the supported locales are defined in the API as <span style="font-family: Courier New,Courier,monospace">I18N_ULOCALE_*</span>), a buffer to the language code, the size of the buffer, and a variable to store the actual length of the language code.
<pre class="prettyprint">
char language[64];
<pre class="prettyprint">
i18n_ulocale_set_default(I18N_ULOCALE_KOREA);</pre></li></ul></li>
</ol>
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="numbers" name="numbers" class="items-tit-h2">Managing Numbers</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
- <p>To format and parse numbers for a locale:</p>
+
+<h2 id="numbers" name="numbers">Managing Numbers</h2>
+
+<p>To format and parse numbers for a locale:</p>
<ol>
-<li><p>To use the number-related features of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UNUMBER__MODULE.html">Unumber</a> API, include the <span style="font-family: Courier New,Courier,monospace"><utils_i18n.h></span> header file in your application:</p>
+<li><p>To use the number-related features of the Unumber API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UNUMBER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__UNUMBER__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><utils_i18n.h></span> header file in your application:</p>
<pre class="prettyprint">
#include <utils_i18n.h>
</pre></li>
<p>When you finish using the number format, destroy it with the <span style="font-family: Courier New,Courier,monospace">i18n_unumber_destroy()</span> function.</p>
<pre class="prettyprint">i18n_unumber_destroy(num_format);</pre></li>
</ol>
- </div>
- </li>
- </ul>
-</div>
-</div>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a class="opensection" href="#init">Initializing the Database</a></li>
- <li><a class="opensection" href="#store">Storing Encrypted Data</a></li>
+ <li><a href="#init">Initializing the Database</a></li>
+ <li><a href="#store">Storing Encrypted Data</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.guides/html/native/base/base_guide_n.htm">Base Guides</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__SQLITE__FRAMEWORK.html">Sqlite API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__SQLITE__FRAMEWORK.html">Sqlite API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__SQLITE__FRAMEWORK.html">Sqlite API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Sqlite: Managing the SQL Database</h1>
- <div class="cont"><div class="static-cont">
+
-<p>This tutorial demonstrates how you can use the open source modules, whose functions provide access to SQLite and OpenSSL and demonstrate how to encrypt and store application data. The open source modules supported by Tizen are located within the <a href="../../../../org.tizen.gettingstarted/html/details/tizen_apis.htm#layout">native API layout</a>.</p>
+<p>This tutorial demonstrates how you can use the open source modules, whose functions provide access to SQLite and OpenSSL and demonstrate how to encrypt and store application data. The open source modules supported by Tizen are located within the API layout (for <a href="../../../../org.tizen.gettingstarted/html/native/details/tizen_apis_n.htm#layout">mobile</a> and <a href="../../../../org.tizen.gettingstarted/html/native/details/tizen_apis_n.htm#layout_w">wearable</a> applications).</p>
<h2>Warm-up</h2>
<p>Become familiar with the basics of the Sqlite API by learning about:</p>
<ul>
- <li><a class="opensection" href="#init">Initializing the Database</a>
+ <li><a href="#init">Initializing the Database</a>
<p>Initialize the database for use.</p></li>
- <li><a class="opensection" href="#store">Storing Encrypted Data</a>
+ <li><a href="#store">Storing Encrypted Data</a>
<p>Store AES encrypted data in the SQL database.</p></li>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
-
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="init" name="init" class="items-tit-h2">Initializing the Database</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="init" name="init">Initializing the Database</h2>
+
<p>Initialize external open source libraries:</p>
<ol><li><p>To operate on an SQL database provided by SQLite:</p>
-<ol>
+<ol type="a">
<li>Configure the database interface <span style="font-family: Courier New,Courier,monospace">sqlite3_config</span> (<span style="font-family: Courier New,Courier,monospace">SQLITE_CONFIG_URI, 1</span>). It allows setting the path to the database using URI.</li>
<li>Initialize the interface with the <span style="font-family: Courier New,Courier,monospace">sqlite3_initialize()</span> function.</li>
- <li>Open database. If it is not configured in other way, <span style="font-family: Courier New,Courier,monospace">sqlite3_open("file:/opt/usr/media/Documents/test.db", &db)</span> creates a new database file, if the URI points to non-existing one. The handle to the database is stored in a database variable.</li>
+ <li>Open database. If it is not configured in other way, <span style="font-family: Courier New,Courier,monospace">sqlite3_open("/opt/usr/media/Documents/test.db", &db)</span> creates a new database file, if the URI points to non-existing one. The handle to the database is stored in a database variable.</li>
<li>Create a table, this step is described later.</li>
</ol></li>
<li><p>To operate with OpenSSL AES, salt and initial vectors are needed. Those are auxiliary variables, which are used to generate a cryptographic key:</p>
-<ul class="ul">
+<ul>
<li><span style="font-family: Courier New,Courier,monospace">RAND_bytes()</span> generates a random chain of bytes.</li>
<li>An additional character is appended after the last character of a chain to point the end of the salt[8]=0x00 variable.</li>
<li><span style="font-family: Courier New,Courier,monospace">PrepareToSQL()</span> removes some of the SQL special characters from the chain to make it possible to insert it to the database.</li>
</ul></li>
<li><p>Include the required headers:</p>
-<ul class="ul">
+<ul>
<li><span style="font-family: Courier New,Courier,monospace">#include <stdio.h></span></li>
<li><span style="font-family: Courier New,Courier,monospace">#include <string.h></span></li>
<li><span style="font-family: Courier New,Courier,monospace">#include <time.h></span></li>
</pre>
<pre class="prettyprint">
-
sqlite3_shutdown();
sqlite3_config(SQLITE_CONFIG_URI, 1);
<pre class="prettyprint">
void PrepareToSQL(unsigned char* msg)
{
- int i=0;
- while(msg[i]!=0x00)
+ int i = 0;
+ while (msg[i]!=0x00)
{
if (msg[i]=='\'')msg[i]='a';
if (msg[i]=='\"')msg[i]='b';
}
}
</pre>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="store" name="store" class="items-tit-h2">Storing Encrypted Data</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="store" name="store">Storing Encrypted Data</h2>
+
<p>This scenario shows how to:</p>
-<ul class="ul">
+<ul>
<li>Encrypt a message with OpenSSL</li>
<li>Prepare it to store in the database with Base64</li>
<li>Store in the SQLite database</li>
<ol>
<li>Store a short message.
<p>OpenSSL AES_Encrypt allows encrypting up to 16 characters at once. Adding a short message (length<=16 characters) is divided in 2 steps:</p>
- <ol>
+ <ol type="a">
<li>Encrypt plain text <span style="font-family: Courier New,Courier,monospace">EncryptMsg()</span>.</li>
<li>Execute database insertion <span style="font-family: Courier New,Courier,monospace">InsertRecord()</span>.</li>
</ol>
</li>
<li>Encrypt.
- <ol>
+ <ol type="a">
<li>Generate a string for key generation from password and salt using <span style="font-family: Courier New,Courier,monospace">PKCS5_PBKDF2_HMAC_SHA1()</span>. Also, an initial vector can be used in different hash functions. In this case, only the first byte of the initial vector is used as an iteration variable for a hash algorithm.</li>
<li>Generate the encryption key using the <span style="font-family: Courier New,Courier,monospace">AES_set_encrypt_key()</span> function. A key len defines the AES key length. Check the actual recommended length and encoding type before use. This tutorial uses AES 256, which is defined in the initialization section.</li>
<li>Encrypt the data.</li>
static int InsertRecord(unsigned char *msg, int encrypted,
int part, int len)
{
- char sqlbuff[BUFLEN];
- char *ErrMsg;
+ char sqlbuff[BUFLEN];
+ char *ErrMsg;
snprintf(sqlbuff, BUFLEN, "INSERT INTO EncryptedData
VALUES(\'%s\', %d, \'%s\', \'%s\', %d, NULL);",
msg, encrypted, salt, iv, part);
<p>The callback function is similar to the function used to list records. There is an action added for the <span style="font-family: Courier New,Courier,monospace">argv[ i ] && i==0</span> case. It means that if a column is not empty and the column is DATA, you must perform further actions. From an SQL query, we know that the DATA content is encrypted.</p>
<p>To decrypt the message:</p>
-<ul class="ul">
+<ul>
<li>Data is decoded from Base64</li>
<li>Delimiting character is added</li>
<li><span style="font-family: Courier New,Courier,monospace">DecryptMsg()</span> is called for decryption</li>
</li>
<li>Clean up.
-<p>The SQLite library has to be closed properly when not needed anymore:</p>
+<p>The SQLite library has to be closed properly when no longer needed:</p>
<pre class="prettyprint">
base64_cleanup();
sqlite3_close(db);
</pre>
</li>
</ol>
- </div>
- </li>
- </ul>
-</div>
-</div>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.guides/html/native/content/content_guide_n.htm">Content Guides</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTENT__FRAMEWORK.html">Content API</a></li>
-
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTENT__FRAMEWORK.html">Content API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__CONTENT__FRAMEWORK.html">Content API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Content: Getting and Handling Media Content</h1>
- <p>The content tutorials demonstrate how to use the following features in creating Tizen mobile native applications:</p>
+ <p>The content tutorials demonstrate how to use the following features in creating Tizen native applications:</p>
<ul>
- <li><a href="download_tutorial_n.htm">Download: Downloading Content from the Internet</a> <p>Demonstrates how you can download content asynchronously from a given URL into the device storage.</p></li>
<li><a href="media_content_tutorial_n.htm">Media Content: Using Album, Bookmark, Playlist, and Other Media Content</a>
<p>Demonstrates how you can manage media content.</p></li>
<li><a href="mime_type_tutorial_n.htm">MIME Type: Mapping MIME Types to and from File Extensions</a> <p>Demonstrates how you can map MIME types to file extensions.</p></li>
</ul>
+ <p>The following tutorials apply in <span style="color: red">mobile applications only</span>:</p>
+ <ul>
+ <li><a href="download_tutorial_n.htm">Download: Downloading Content from the Internet</a> <p>Demonstrates how you can download content asynchronously from a given URL into the device storage.</p></li>
+ </ul>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a class="opensection" href="#download">Download Content from a URL</a></li>
+ <li><a href="#download">Download Content from a URL</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.guides/html/native/content/download_n.htm">Download Guide</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__WEB__DOWNLOAD__MODULE.html">Download API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__WEB__DOWNLOAD__MODULE.html">Download API for Mobile Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Download: Downloading Content from the Internet</h1>
- <div class="cont"><div class="static-cont">
+
<p>This tutorial demonstrates how you can download content asynchronously from a given URL into the device storage.</p>
+ <table class="note">
+<tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">This feature is supported in mobile applications only.</td>
+ </tr>
+ </tbody>
+ </table>
+
<h2>Warm-up</h2>
<p>Become familiar with the Download API basics by learning about:</p>
<ul>
- <li><a class="opensection" href="#download">Downloading Content from a URL</a>
+ <li><a href="#download">Downloading Content from a URL</a>
<p>Receive a download ID, configure a download URL and destination, and launch a download process.</p></li>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
-
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="download" name="download" class="items-tit-h2">Downloading Content from a URL</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
-
+ <h2 id="download" name="download">Downloading Content from a URL</h2>
<p>To download content:</p>
<ol><li><p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__WEB__DOWNLOAD__MODULE.html">Download</a> API, include the <span style="font-family: Courier New,Courier,monospace"><download.h></span> header file in your application:</p>
</pre></li>
<li>Set the download options:
-<ul class="ul"><li>Auto download
+<ul><li>Auto download
<p>To set an automatic download, call the <span style="font-family: Courier New,Courier,monospace;">download_set_auto_download()</span> function passing the download handle and setting the second parameter to <span style="font-family: Courier New,Courier,monospace;">true</span>.</p>
<p>This operation changes the download manager state so that it continues downloading even after the client process is terminated. Set the notification download option when using this feature, to allow the user to receive the download result when the client process is not alive. </p>
<li>Notifications
<p>To set notifications with a service action, use the <span style="font-family: Courier New,Courier,monospace;">download_set_notification_type()</span> function. The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__WEB__DOWNLOAD__MODULE.html#gab2ec29afc07197987eb2b88614fac67f">download_notification_type_e</a> enumeration defines the available download network types. The default value is <span style="font-family: Courier New,Courier,monospace;">DOWNLOAD_NOTIFICATION_TYPE_NONE</span>, if the client does not set any values.</p>
<p>If the client wants to change the title or description of the notification item, use the <span style="font-family: Courier New,Courier,monospace;">download_set_notification_title()</span> or <span style="font-family: Courier New,Courier,monospace;">download_set_notification_description()</span> function. If the client wants to change the action when the notification item is clicked, use the <span style="font-family: Courier New,Courier,monospace;">download_set_notification_service_handle()</span> function. If the service action is not set, the default operation is the following:</p>
-<ul class="ul">
+<ul>
<li>When clicking a completed notification message, the proper application for playing the downloaded content is launched. If there is no proper application, an error message is shown at the status tray.</li>
<li>When clicking a failed notification message, the client application requesting the download is launched.</li>
</ul>
<li>Monitor the download progress.
<p>Use the progress callback to monitor the download progress. The following example prints the number of bytes received and the total size of the file being downloaded. Since you do not know the file size at the beginning, use 0.</p>
-<ol><li>Create the download:
+<ol type="a"><li>Create the download:
<pre class="prettyprint">
unsigned long long content_size = 0;
download_unset_state_changed_cb(download_id);
error = download_destroy(download_id);
</pre></li></ol>
- </div>
- </li>
- </ul>
-</div>
-</div>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
<li>Media content
<ul class="toc">
- <li><a class="opensection" href="#initialize_media_content">Initializing Media Content</a></li>
- <li><a class="opensection" href="#folder_list">Getting the Folder List</a></li>
- <li><a class="opensection" href="#item_list">Getting the Item List</a></li>
- <li><a class="opensection" href="#destroy">Destroying the Handle</a></li>
- <li><a class="opensection" href="#update">Receiving Update Notifications</a></li>
+ <li><a href="#initialize_media_content">Initializing Media Content</a></li>
+ <li><a href="#folder_list">Getting the Folder List</a></li>
+ <li><a href="#item_list">Getting the Item List</a></li>
+ <li><a href="#destroy">Destroying the Handle</a></li>
+ <li><a href="#update">Receiving Update Notifications</a></li>
</ul>
</li>
<li>Album
<ul class="toc">
- <li><a class="opensection" href="#init_album">Initializing the Album Module</a></li>
- <li><a class="opensection" href="#findingall">Finding All Albums</a></li>
- <li><a class="opensection" href="#findingalbums">Finding Albums Using a Filter</a></li>
- <li><a class="opensection" href="#findinginfo">Retrieving Album Content Information</a></li>
+ <li><a href="#init_album">Initializing the Album Module</a></li>
+ <li><a href="#findingall">Finding All Albums</a></li>
+ <li><a href="#findingalbums">Finding Albums Using a Filter</a></li>
+ <li><a href="#findinginfo">Retrieving Album Content Information</a></li>
</ul>
</li>
<li>Bookmark
<ul class="toc">
- <li><a class="opensection" href="#init_bookmark">Initializing Bookmarks</a></li>
- <li><a class="opensection" href="#inserting">Inserting a Bookmark</a></li>
- <li><a class="opensection" href="#finding">Finding Bookmarks</a></li>
- <li><a class="opensection" href="#reading">Reading Bookmark Information</a></li>
- <li><a class="opensection" href="#removing">Removing a Bookmark</a></li>
+ <li><a href="#init_bookmark">Initializing Bookmarks</a></li>
+ <li><a href="#inserting">Inserting a Bookmark</a></li>
+ <li><a href="#finding">Finding Bookmarks</a></li>
+ <li><a href="#reading">Reading Bookmark Information</a></li>
+ <li><a href="#removing">Removing a Bookmark</a></li>
</ul>
</li>
<li>Filter
<ul class="toc">
- <li><a class="opensection" href="#init_filter">Initializing a Filter</a></li>
- <li><a class="opensection" href="#filter">Setting up a Filter</a></li>
- <li><a class="opensection" href="#media">Using Filters to Find Media Items</a></li>
+ <li><a href="#init_filter">Initializing a Filter</a></li>
+ <li><a href="#filter">Setting up a Filter</a></li>
+ <li><a href="#media">Using Filters to Find Media Items</a></li>
</ul>
</li>
<li>Folder
<ul class="toc">
- <li><a class="opensection" href="#init_media_folder">Initializing Media Folders</a></li>
- <li><a class="opensection" href="#find">Finding All Media Folders</a></li>
- <li><a class="opensection" href="#filter_folder">Finding Folders Using a Filter</a></li>
- <li><a class="opensection" href="#folder_content">Finding Folder Content</a></li>
+ <li><a href="#init_media_folder">Initializing Media Folders</a></li>
+ <li><a href="#find">Finding All Media Folders</a></li>
+ <li><a href="#filter_folder">Finding Folders Using a Filter</a></li>
+ <li><a href="#folder_content">Finding Folder Content</a></li>
</ul>
</li>
<li>Media information
<ul class="toc">
- <li><a class="opensection" href="#initialize_media_info">Initializing Media Information</a></li>
- <li><a class="opensection" href="#info">Using Media Information</a></li>
- <li><a class="opensection" href="#insert">Inserting Media in the Database</a></li>
- <li><a class="opensection" href="#scan">Inserting Media in a Folder</a></li>
+ <li><a href="#initialize_media_info">Initializing Media Information</a></li>
+ <li><a href="#info">Using Media Information</a></li>
+ <li><a href="#insert">Inserting Media in the Database</a></li>
+ <li><a href="#scan">Inserting Media in a Folder</a></li>
</ul>
</li>
<li>Playlist
<ul class="toc">
- <li><a class="opensection" href="#init_playlist">Initializing a Playlist</a></li>
- <li><a class="opensection" href="#manage">Managing Playlists</a></li>
+ <li><a href="#init_playlist">Initializing a Playlist</a></li>
+ <li><a href="#manage">Managing Playlists</a></li>
</ul>
</li>
<li>Tag
<ul class="toc">
- <li><a class="opensection" href="#initialize_tag">Initializing Media Tags</a></li>
- <li><a class="opensection" href="#tag_list">Getting the Tag List</a></li>
- </ul>
- </li>
- <li>Storage
- <ul class="toc">
- <li><a class="opensection" href="#initialize_storage">Initializing Storage</a></li>
- <li><a class="opensection" href="#storage_list">Getting the Storage List</a></li>
+ <li><a href="#initialize_tag">Initializing Media Tags</a></li>
+ <li><a href="#tag_list">Getting the Tag List</a></li>
</ul>
</li>
+ <li>Storage
+ <ul class="toc">
+ <li><a href="#initialize_storage">Initializing the Storage</a></li>
+ <li><a href="#storage_list">Getting the Storage List</a></li>
+ </ul>
+ </li>
<li>Advanced media content
<ul class="toc">
- <li><a class="opensection" href="#find_groups">Finding Media Item Groups</a></li>
- <li><a class="opensection" href="#filter_groups">Finding Media Item Groups Using a Filter</a></li>
+ <li><a href="#find_groups">Finding Media Item Groups</a></li>
+ <li><a href="#filter_groups">Finding Media Item Groups Using a Filter</a></li>
</ul>
</li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.guides/html/native/content/media_content_n.htm">Media Content Guide</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CONTENT__MODULE.html">Media Content API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CONTENT__MODULE.html">Media Content API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__CONTENT__MODULE.html">Media Content API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Media Content: Using Album, Bookmark, Playlist, and Other Media Content</h1>
- <div class="cont"><div class="static-cont">
+
<p>This tutorial demonstrates how you can manage media content.</p>
<ul>
<li>Media content
<ul>
- <li><a class="opensection" href="#initialize_media_content">Initializing Media Content</a>
+ <li><a href="#initialize_media_content">Initializing Media Content</a>
<p>Initialize the database for use.</p></li>
- <li><a class="opensection" href="#folder_list">Getting the Folder List</a>
+ <li><a href="#folder_list">Getting the Folder List</a>
<p>Get a folder list.</p></li>
- <li><a class="opensection" href="#item_list">Getting the Item List</a>
+ <li><a href="#item_list">Getting the Item List</a>
<p>Get an item list.</p></li>
- <li><a class="opensection" href="#destroy">Destroying the Handle</a>
+ <li><a href="#destroy">Destroying the Handle</a>
<p>Destroy a handle.</p></li>
- <li><a class="opensection" href="#update">Receiving Update Notifications</a>
+ <li><a href="#update">Receiving Update Notifications</a>
<p>Set an update notification callback.</p></li>
</ul>
</li>
<li>Album
<ul>
- <li><a class="opensection" href="#init_album">Initializing the Album Module</a>
+ <li><a href="#init_album">Initializing the Album Module</a>
<p>Initialize media albums for use.</p></li>
- <li><a class="opensection" href="#findingall">Finding All Albums</a>
+ <li><a href="#findingall">Finding All Albums</a>
<p>Find information about albums available in the system.</p></li>
- <li><a class="opensection" href="#findingalbums">Finding Albums Using a Filter</a>
+ <li><a href="#findingalbums">Finding Albums Using a Filter</a>
<p>Find albums that satisfy a specific condition.</p></li>
- <li><a class="opensection" href="#findinginfo">Retrieving Album Content Information</a>
+ <li><a href="#findinginfo">Retrieving Album Content Information</a>
<p>Retrieve information about the media items in an album.</p></li>
</ul>
</li>
<li>Bookmark
<ul>
- <li><a class="opensection" href="#init_bookmark">Initializing Bookmarks</a>
+ <li><a href="#init_bookmark">Initializing Bookmarks</a>
<p>Initialize bookmarks for use.</p></li>
- <li><a class="opensection" href="#inserting">Inserting a Bookmark</a>
+ <li><a href="#inserting">Inserting a Bookmark</a>
<p>Set a bookmark for a video file.</p></li>
- <li><a class="opensection" href="#finding">Finding Bookmarks</a>
+ <li><a href="#finding">Finding Bookmarks</a>
<p>Find bookmarks using a filter.</p></li>
- <li><a class="opensection" href="#reading">Reading Bookmark Information</a>
+ <li><a href="#reading">Reading Bookmark Information</a>
<p>Read the details of a given bookmark.</p></li>
- <li><a class="opensection" href="#removing">Removing a Bookmark</a>
+ <li><a href="#removing">Removing a Bookmark</a>
<p>Remove a bookmark from a video file.</p></li>
</ul>
</li>
<li>Filter
<ul>
- <li><a class="opensection" href="#init_filter">Initializing a Filter</a>
+ <li><a href="#init_filter">Initializing a Filter</a>
<p>Initialize filter for use.</p></li>
- <li><a class="opensection" href="#filter">Setting up a Filter</a>
+ <li><a href="#filter">Setting up a Filter</a>
<p>Create a filter and set its properties.</p></li>
- <li><a class="opensection" href="#media">Using Filters to Find Media Items</a>
+ <li><a href="#media">Using Filters to Find Media Items</a>
<p>Use a filter to find media items.</p></li>
</ul>
</li>
<li>Folder
<ul>
- <li><a class="opensection" href="#init_media_folder">Initializing Media Folders</a>
+ <li><a href="#init_media_folder">Initializing Media Folders</a>
<p>Initialize media folders for use.</p></li>
- <li><a class="opensection" href="#find">Finding All Media Folders</a>
+ <li><a href="#find">Finding All Media Folders</a>
<p>List all available media folders.</p></li>
- <li><a class="opensection" href="#filter_folder">Finding Folders Using a Filter</a>
+ <li><a href="#filter_folder">Finding Folders Using a Filter</a>
<p>Find folders satisfying a given condition, and sort the results.</p></li>
- <li><a class="opensection" href="#folder_content">Finding Folder Content</a>
+ <li><a href="#folder_content">Finding Folder Content</a>
<p>List folder content and get information about media items in the folders.</p></li>
</ul>
</li>
<li>Media information
<ul>
- <li><a class="opensection" href="#initialize_media_info">Initializing Media Information</a>
+ <li><a href="#initialize_media_info">Initializing Media Information</a>
<p>Initialize media information for use.</p></li>
- <li><a class="opensection" href="#info">Using Media Information</a>
+ <li><a href="#info">Using Media Information</a>
<p>Use media information.</p></li>
- <li><a class="opensection" href="#insert">Inserting Media in the Database</a>
+ <li><a href="#insert">Inserting Media in the Database</a>
<p>Add media information in the media database.</p></li>
- <li><a class="opensection" href="#scan">Inserting Media in a Folder</a>
+ <li><a href="#scan">Inserting Media in a Folder</a>
<p>Add media information in a folder.</p></li>
</ul>
</li>
<li>Playlist
<ul>
- <li><a class="opensection" href="#init_playlist">Initializing a Playlist</a>
+ <li><a href="#init_playlist">Initializing a Playlist</a>
<p>Initialize playlists for use. </p></li>
- <li><a class="opensection" href="#manage">Managing Playlists</a>
+ <li><a href="#manage">Managing Playlists</a>
<p>Add playlists to the database, search them, and retrieve information about them.</p></li>
</ul>
</li>
<li>Tag
<ul>
- <li><a class="opensection" href="#initialize_tag">Initializing Media Tags</a>
+ <li><a href="#initialize_tag">Initializing Media Tags</a>
<p>Initialize media tags for use.</p></li>
- <li><a class="opensection" href="#tag_list">Getting the Tag List</a>
+ <li><a href="#tag_list">Getting the Tag List</a>
<p>Get information about media tags.</p></li>
</ul>
</li>
- <li>Storage
- <li><a class="opensection" href="#initialize_storage">Initializing Storage</a>
-
<p>Initialize storage information for use.</p></li>
- <li><a class="opensection" href="#storage_list">Getting the Storage List</a>
-
<p>Get information about the storage.</p></li>
- </ul>
- </li>
+ <li>Storage
+ <ul>
+ <li><a href="#initialize_storage">Initializing the Storage</a>
+ <p>Initialize storage information for use.</p></li>
+ <li><a href="#storage_list">Getting the Storage List</a>
+ <p>Get information about the storage.</p></li>
+ </ul>
+ </li>
</ul>
<h2>Follow-up</h2>
<p>Once we have learned the basics of the Media Content API, we can now move on to more advanced tasks, including:</p>
-<ul class="ul">
+<ul>
<li>Advanced media content
<ul>
- <li><a class="opensection" href="#find_groups">Finding Media Item Groups</a>
+ <li><a href="#find_groups">Finding Media Item Groups</a>
<p>Find all available media items grouped by their MIME type.</p></li>
- <li><a class="opensection" href="#filter_groups">Finding Media Item Groups Using a Filter</a>
+ <li><a href="#filter_groups">Finding Media Item Groups Using a Filter</a>
<p>Find grouped media items filtered by name.</p>
</li>
</ul>
</li>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
-
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="initialize_media_content" name="initialize_media_content" class="items-tit-h2">Initializing Media Content</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="initialize_media_content" name="initialize_media_content">Initializing Media Content</h2>
+
<p>To use the media database:</p>
<ol>
-<li><p>Functions in this module use an SQLite database to save the metadata of the media files on your device, along with the tags and bookmarks that the user sets. To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CONTENT__MODULE.html">Media Content</a> API, include the <span style="font-family: Courier New,Courier,monospace"><media_content.h></span> header file in your application:</p>
+<li><p>Functions in this module use an SQLite database to save the metadata of the media files on your device, along with the tags and bookmarks that the user sets. To use the functions and data types of the Media Content API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CONTENT__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__CONTENT__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><media_content.h></span> header file in your application:</p>
<pre class="prettyprint">
#include <media_content.h>
#include <glib.h>
</pre>
</li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="folder_list" name="folder_list" class="items-tit-h2">Getting the Folder List</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="folder_list" name="folder_list">Getting the Folder List</h2>
+
<p>To retrieve a list of folders where the media files are stored, register a callback function for each API to manage an individual item in the callback function:</p>
<ol>
}
</pre></li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="item_list" name="item_list" class="items-tit-h2">Getting the Item List</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="item_list" name="item_list">Getting the Item List</h2>
+
<p>To retrieve the item list, use a foreach function with a previously defined callback:</p>
<ol>
ret = media_info_foreach_media_from_db(filter, gallery_media_item_cb, &all_item_list);
</pre></li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="destroy" name="destroy" class="items-tit-h2">Destroying the Handle</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="destroy" name="destroy">Destroying the Handle</h2>
+
<p>To destroy the handle received from each function (to release resources):</p>
<pre class="prettyprint">
// Destroy handle of the filter
media_filter_destroy(filter);
</pre>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="update" name="update" class="items-tit-h2">Receiving Update Notifications</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="update" name="update">Receiving Update Notifications</h2>
+
<p>To get notifications of database changes, register a callback. You can only set 1 notification callback at this stage of the process:</p>
<ol>
</pre></li>
</ol>
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="init_album" name="init_album" class="items-tit-h2">Initializing the Album Module</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
-<p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTENT__MEDIA__ALBUM__MODULE.html">Media Album</a> API, include the <span style="font-family: Courier New,Courier,monospace"><media_content.h></span> header file in your application:</p>
+ <h2 id="init_album" name="init_album">Initializing the Album Module</h2>
+
+<p>To use the functions and data types of the Media Album API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTENT__MEDIA__ALBUM__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__CONTENT__MEDIA__ALBUM__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><media_content.h></span> header file in your application:</p>
<pre class="prettyprint">
#include <media_content.h>
</pre>
<p>When the module is no longer needed, close the connection:</p>
<pre class="prettyprint">media_content_disconnect();</pre>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="findingall" name="findingall" class="items-tit-h2">Finding All Albums</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="findingall" name="findingall">Finding All Albums</h2>
+
<p>To find all albums in the system and access information about the album content:</p>
<ol><li>Find all albums.
<p>Call the <span style="font-family: Courier New,Courier,monospace">media_album_get_album_count_from_db()</span> and <span style="font-family: Courier New,Courier,monospace">media_album_foreach_album_from_db()</span> functions to receive information about albums. Set the first parameter to <span style="font-family: Courier New,Courier,monospace">NULL</span> to retrieve all albums and perform no filtering.</p>
</tbody>
</table> </li></ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="findingalbums" name="findingalbums" class="items-tit-h2">Finding Albums Using a Filter</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="findingalbums" name="findingalbums">Finding Albums Using a Filter</h2>
+
<p>Use a filter to find the albums that meet a certain criteria. If an album does not meet the conditions, it is not in the results.</p>
<p>Before searching for the albums, create the filter, and set its conditions and sort order:</p>
media_album_foreach_album_from_db(filter, media_album_list_cb, NULL);
media_filter_destroy(filter);</pre>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="findinginfo" name="findinginfo" class="items-tit-h2">Retrieving Album Content Information</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="findinginfo" name="findinginfo">Retrieving Album Content Information</h2>
+
<p>To access information about the media items in a given album:</p>
<ol><li>Request album content.
-<ol><li><p>Before you can read the album content information, acquire the album ID. If you have the album handle (<span style="font-family: Courier New,Courier,monospace">media_album_h</span>), you can call the <span style="font-family: Courier New,Courier,monospace">media_album_get_album_id()</span> function:</p>
+<ol
type="a"><li><p>Before you can read the album content information, acquire the album ID. If you have the album handle (<span style="font-family: Courier New,Courier,monospace">media_album_h</span>), you can call the <span style="font-family: Courier New,Courier,monospace">media_album_get_album_id()</span> function:</p>
<pre class="prettyprint">int id = -1;
</tr>
</tbody>
</table></li></ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="init_bookmark" name="init_bookmark" class="items-tit-h2">Initializing Bookmarks</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="init_bookmark" name="init_bookmark">Initializing Bookmarks</h2>
<p>To initialize the bookmark feature:</p>
<ol><li>
-<p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTENT__MEDIA__BOOKMARK__MODULE.html">Media Bookmark</a> API, include the <span style="font-family: Courier New,Courier,monospace"><media_content.h></span> header file in your application:</p>
+<p>To use the functions and data types of the Media Bookmark API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTENT__MEDIA__BOOKMARK__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__CONTENT__MEDIA__BOOKMARK__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><media_content.h></span> header file in your application:</p>
<pre class="prettyprint">
#include <media_content.h>
</pre></li>
<pre class="prettyprint">media_content_disconnect();</pre></li></ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="inserting" name="inserting" class="items-tit-h2">Inserting a Bookmark</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="inserting" name="inserting">Inserting a Bookmark</h2>
+
<p>To set a bookmark for a video file at a given timestamp, use the <span style="font-family: Courier New,Courier,monospace">media_bookmark_insert_to_db()</span> function:</p>
<pre class="prettyprint">char* thumbnail_path = "path/to/image/file";
media_bookmark_insert_to_db(media_id, 210, thumbnail_path);</pre>
<p>The parameters are the media ID of the video file, the moment (time in seconds from the beginning) in the video to bookmark, and the image used as a thumbnail for the bookmark. You can use the same thumbnail for more than 1 bookmark.</p>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="finding" name="finding" class="items-tit-h2">Finding Bookmarks</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="finding" name="finding">Finding Bookmarks</h2>
+
<p>To find a media item's bookmarks and filter the results:</p>
<h3>Finding All Bookmarks</h3>
<pre class="prettyprint">media_filter_destroy(filter);</pre></li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="reading" name="reading" class="items-tit-h2">Reading Bookmark Information</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="reading" name="reading">Reading Bookmark Information</h2>
+
<p>To read the bookmark information within a callback after finding the bookmark:</p>
<pre class="prettyprint">bool get_bookmarks_cb(media_bookmark_h bookmark, void* user_data)
{
char *thumb = NULL;
- if(bookmark != NULL)
+ if (bookmark != NULL)
{
media_bookmark_get_thumbnail_path(bookmark, &thumb);
dlog_print(DLOG_DEBUG, LOG_TAG, "Thumbnail path: %s\n", thumb);
}</pre>
<p>The above callback prints the thumbnail path and marked time for each found bookmark.</p>
<p>Free the thumbnail path after use.</p>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="removing" name="removing" class="items-tit-h2">Removing a Bookmark</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="removing" name="removing">Removing a Bookmark</h2>
+
<p>To remove a bookmark:</p>
<ol><li><p>Acquire the bookmark ID:</p>
<li><p>Delete the bookmark:</p>
<pre class="prettyprint">media_bookmark_delete_from_db(bookmark_id);</pre></li></ol>
- </div>
- </li>
-<li>
- <div class="devicespec-tit">
- <h2 id="init_filter" name="init_filter" class="items-tit-h2">Initializing a Filter</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
-<p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTENT__MEDIA__FILTER__MODULE.html">Media Filter</a> API, include the <span style="font-family: Courier New,Courier,monospace"><media_content.h></span> header file in your application:</p>
+
+ <h2 id="init_filter" name="init_filter">Initializing a Filter</h2>
+
+<p>To use the functions and data types of the Media Filter API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTENT__MEDIA__FILTER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__CONTENT__MEDIA__FILTER__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><media_content.h></span> header file in your application:</p>
<pre class="prettyprint">
#include <media_content.h>
</pre>
<p>When the service is no longer needed, close the connection:</p>
<pre class="prettyprint">media_content_disconnect();</pre>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="filter" name="filter" class="items-tit-h2">Setting up a Filter</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="filter" name="filter">Setting up a Filter</h2>
+
<p>To create a filter and set its properties: offset, condition, and sorting order.</p>
<ol>
ret = media_filter_set_condition(filter, buf, MEDIA_CONTENT_COLLATE_NOCASE);</pre>
<p>The function parameters are:</p>
-<ul class="ul"><li>Filter handle</li>
+<ul><li>Filter handle</li>
<li>Condition string used for filtering the search results
-<p>Queries made with the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTENT__FRAMEWORK.html">Content</a> API are passed to a SQL database. A part of each query is a <span style="font-family: Courier New,Courier,monospace">WHERE</span> clause that determines which properties correspond to certain conditions. The condition string defines the <span style="font-family: Courier New,Courier,monospace">WHERE</span> clause and must match the following pattern:</p>
+<p>Queries made with the Content API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTENT__FRAMEWORK.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__CONTENT__FRAMEWORK.html">wearable</a> applications) are passed to a SQL database. A part of each query is a <span style="font-family: Courier New,Courier,monospace">WHERE</span> clause that determines which properties correspond to certain conditions. The condition string defines the <span style="font-family: Courier New,Courier,monospace">WHERE</span> clause and must match the following pattern:</p>
<pre class="prettyprint"><property> <relation> <value>
// If the relation is =, >, >=, <, or <=, the following is also valid
<p>Condition properties are defined by a series of <span style="font-family: Courier New,Courier,monospace">#define</span> directives. Each Content submodule contains definitions for properties used in the submodule.</p></li>
<li>Collation type determining how the strings are compared
-<p>The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CONTENT__MODULE.html#ga31a20f732fe262e81f112416bfefe13c">media_content_collation_e</a> enumerator defines the available collation types.</p></li></ul>
+<p>The <span style="font-family: Courier New,Courier,monospace">media_content_collation_e</span> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CONTENT__MODULE.html#ga31a20f732fe262e81f112416bfefe13c">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__CONTENT__MODULE.html#ga31a20f732fe262e81f112416bfefe13c">wearable</a> applications) defines the available collation types.</p></li></ul>
<p>To read the condition of an existing filter, use the <span style="font-family: Courier New,Courier,monospace">media_filter_get_condition()</span> function:</p>
<pre class="prettyprint">media_filter_set_order(filter, MEDIA_CONTENT_ORDER_ASC, MEDIA_ARTIST, MEDIA_CONTENT_COLLATE_DEFAULT);</pre>
-<p>The second and fourth parameters determine the order and collation types, and the available types are defined in the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CONTENT__MODULE.html#gaa4e5eece5a509c7414afb96e7a2c3fa2">media_content_order_e</a> and <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CONTENT__MODULE.html#ga31a20f732fe262e81f112416bfefe13c">media_content_collation_e</a> enumerators.</p>
+<p>The second and fourth parameters determine the order and collation types, and the available types are defined in the enumerators <span style="font-family: Courier New,Courier,monospace">media_content_order_e</span> (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CONTENT__MODULE.html#gaa4e5eece5a509c7414afb96e7a2c3fa2">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__CONTENT__MODULE.html#gaa4e5eece5a509c7414afb96e7a2c3fa2">wearable</a> applications) and <span style="font-family: Courier New,Courier,monospace">media_content_collation_e</span> (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CONTENT__MODULE.html#ga31a20f732fe262e81f112416bfefe13c">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__CONTENT__MODULE.html#ga31a20f732fe262e81f112416bfefe13c">wearable</a> applications).</p>
<p>To read the order settings of a filter, use the <span style="font-family: Courier New,Courier,monospace">media_filter_get_order()</span> function:</p>
media_filter_get_offset(filter, &check_offset, &check_count);</pre>
</li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="media" name="media" class="items-tit-h2">Using Filters to Find Media Items</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="media" name="media">Using Filters to Find Media Items</h2>
+
<p>To use a filter to find media items:</p>
<p>The filter construction depends on what kind of a query it is used for. The condition string contains different properties (columns), depending on the submodule.</p>
<p>The following example finds media items with the following conditions:</p>
-<ul class="ul"><li>The artist is 'Tizen'</li>
+<ul><li>The artist is 'Tizen'</li>
<li>The search for the artist is case-insensitive</li>
<li>The results are ordered by the artist, ascending, and case-sensitive</li>
<li>At most 5 results are provided, starting from the first result</li></ul>
media_info_foreach_media_from_db(filter, media_cb, NULL);
media_filter_destroy(filter);</pre>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="init_media_folder" name="init_media_folder" class="items-tit-h2">Initializing Media Folders</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
-<p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTENT__MEDIA__FOLDER__MODULE.html">Media Folder</a> API, include the <span style="font-family: Courier New,Courier,monospace"><media_content.h></span> header file in your application:</p>
+
+ <h2 id="init_media_folder" name="init_media_folder">Initializing Media Folders</h2>
+
+<p>To use the functions and data types of the Media Folder API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTENT__MEDIA__FOLDER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__CONTENT__MEDIA__FOLDER__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><media_content.h></span> header file in your application:</p>
<pre class="prettyprint">
#include <media_content.h>
</pre>
<pre class="prettyprint">media_content_disconnect();</pre>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="find" name="find" class="items-tit-h2">Finding All Media Folders</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="find" name="find">Finding All Media Folders</h2>
+
<p>To list all available media folders and their content:</p>
<ol>
<p>Once you have the folder handle (<span style="font-family: Courier New,Courier,monospace">media_folder_h</span>), you can read the folder information:</p>
-<ul
class="ul"><li><p>Use the <span style="font-family: Courier New,Courier,monospace">media_folder_get_folder_id()</span>, <span style="font-family: Courier New,Courier,monospace">media_folder_get_name()</span>, and <span style="font-family: Courier New,Courier,monospace">media_folder_get_path()</span> functions to read the folder ID, name, and path:</p>
+<ul><li><p>Use the <span style="font-family: Courier New,Courier,monospace">media_folder_get_folder_id()</span>, <span style="font-family: Courier New,Courier,monospace">media_folder_get_name()</span>, and <span style="font-family: Courier New,Courier,monospace">media_folder_get_path()</span> functions to read the folder ID, name, and path:</p>
<pre class="prettyprint"> char *folder_id = NULL;
char *name = NULL;
</li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="filter_folder" name="filter_folder" class="items-tit-h2">Finding Folders Using a Filter</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="filter_folder" name="filter_folder">Finding Folders Using a Filter</h2>
+
<p>Use filters to choose which folders are found by the <span style="font-family: Courier New,Courier,monospace">media_folder_foreach_folder_from_db()</span> function. For example, find folders which meet certain conditions, such as a name containing a given substring. Other modifications of the results, such as sorting, are also possible.</p>
<ol>
<p>Set the condition with the <span style="font-family: Courier New,Courier,monospace">media_filter_set_condition()</span> function.</p>
<p>The condition is the string used as the argument to the WHERE clause in the SQL query. The general format is "<property> <relation> <value>", such as "FOLDER_NAME = 'Downloads'".</p>
-<ul class="ul"><li>Condition for the 'Downloads' folder name:
+<ul><li>Condition for the 'Downloads' folder name:
<pre class="prettyprint">#define BUFLEN 200
char buf[BUFLEN] = { '\0' };
media_filter_destroy(filter);</pre>
</li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="folder_content" name="folder_content" class="items-tit-h2">Finding Folder Content</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="folder_content" name="folder_content">Finding Folder Content</h2>
+
<p>To list folder content and get information about media items in the folders:</p>
<ol>
}</pre>
</li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="initialize_media_info" name="initialize_media_info" class="items-tit-h2">Initializing Media Information</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="initialize_media_info" name="initialize_media_info">Initializing Media Information</h2>
+
<p>To use the media database:</p>
<ol>
-<li><p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTENT__MEDIA__INFO__MODULE.html">Media Information</a> API, include the <span style="font-family: Courier New,Courier,monospace"><media_content.h></span> header file in your application:</p>
+<li><p>To use the functions and data types of the Media Information API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTENT__MEDIA__INFO__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__CONTENT__MEDIA__INFO__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><media_content.h></span> header file in your application:</p>
<pre class="prettyprint">
#include <media_content.h>
</pre>
<pre class="prettyprint">media_content_disconnect();</pre>
</li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="info" name="info" class="items-tit-h2">Using Media Information</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="info" name="info">Using Media Information</h2>
<p>To retrieve media information:</p>
filter = NULL;
</pre></li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="insert" name="insert" class="items-tit-h2">Inserting Media in the Database</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="insert" name="insert">Inserting Media in the Database</h2>
+
<p>To insert media in the database:</p>
<ol><li><p>To use newly created media files, first insert them into the database. You need the <span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/content.write</span> privilege to use the needed APIs.</p>
<li><p>To add information in the database:</p>
-<ul
class="ul"><li><p>You can use the <span style="font-family: Courier New,Courier,monospace;">media_info_insert_to_db()</span> function:</p>
+<ul><li><p>You can use the <span style="font-family: Courier New,Courier,monospace;">media_info_insert_to_db()</span> function:</p>
<pre class="prettyprint">int ret = MEDIA_CONTENT_ERROR_NONE;
char *path = "/opt/usr/media/Images/Default.jpg";
media_info_h media_item = NULL;
<li><p>After using the <span style="font-family: Courier New,Courier,monospace;">media_info_insert_to_db()</span> function, destroy the received <span style="font-family: Courier New,Courier,monospace;">media_info_h</span> with using the <span style="font-family: Courier New,Courier,monospace;">media_info_destroy()</span> function.</p></li></ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="scan" name="scan" class="items-tit-h2">Inserting Media in a Folder</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
-
+ <h2 id="scan" name="scan">Inserting Media in a Folder</h2>
<p>To insert media in a folder:</p>
}
</pre></li>
</ol>
- </div>
- </li>
-
-<li>
- <div class="devicespec-tit">
- <h2 id="init_playlist" name="init_playlist" class="items-tit-h2">Initializing a Playlist</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="init_playlist" name="init_playlist">Initializing a Playlist</h2>
+
<p>To use the playlists:</p>
-<ol><li><p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTENT__MEDIA__PLAYLIST__MODULE.html">Media Playlist</a> API, include the <span style="font-family: Courier New,Courier,monospace"><media_content.h></span> header file in your application:</p>
+<ol><li><p>To use the functions and data types of the Media Playlist API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTENT__MEDIA__PLAYLIST__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__CONTENT__MEDIA__PLAYLIST__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><media_content.h></span> header file in your application:</p>
<pre class="prettyprint">
#include <media_content.h>
</pre>
media_content_disconnect();
</pre>
</li></ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="manage" name="manage" class="items-tit-h2">Managing Playlists</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="manage" name="manage">Managing Playlists</h2>
+
<p>To create and insert a playlist to the database, perform a search on existing records and handle the found items:</p>
<ol><li>Insert a record to the database.
-<ol><li><p>To operate on the database, it has to contain records. Add a new playlist to the database using the <span style="font-family: Courier New,Courier,monospace;">media_playlist_insert_to_db()</span> function. It returns a handle to the newly created record.</p>
+<ol
type="a"><li><p>To operate on the database, it has to contain records. Add a new playlist to the database using the <span style="font-family: Courier New,Courier,monospace;">media_playlist_insert_to_db()</span> function. It returns a handle to the newly created record.</p>
<pre class="prettyprint">media_playlist_h playlist = NULL;
filter_h audio_filter = NULL;
GList *media_id_list = NULL; // This requires glib.h inclusion
<li>Handle the found records.
-<ol><li><p>When a record is found, a callback function is invoked. A handle to the record is passed as a playlist function parameter.</p>
+<ol
type="a"><li><p>When a record is found, a callback function is invoked. A handle to the record is passed as a playlist function parameter.</p>
<pre class="prettyprint">static bool playlist_list_cb(media_playlist_h playlist, void* user_data)
{
char *name = NULL;
}</pre></li>
<li><p>The callback function operates on the records the same way as before. To get the media info, use the following functions:</p>
-<ul class="ul"><li><span style="font-family: Courier New,Courier,monospace;">media_info_get_audio()</span></li>
+<ul><li><span style="font-family: Courier New,Courier,monospace;">media_info_get_audio()</span></li>
<li><span style="font-family: Courier New,Courier,monospace;">media_info_get_media_id()</span></li>
<li><span style="font-family: Courier New,Courier,monospace;">media_info_get_size()</span></li></ul>
media_filter_destroy(audio_filter);
media_content_disconnect();</pre></li></ol>
- </div>
- </li>
-<li>
- <div class="devicespec-tit">
- <h2 id="initialize_tag" name="initialize_tag" class="items-tit-h2">Initializing Media Tags</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
-<p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTENT__MEDIA__TAG__MODULE.html">Media Tag</a> API, include the <span style="font-family: Courier New,Courier,monospace"><media_content.h></span> header file in your application:</p>
+
+ <h2 id="initialize_tag" name="initialize_tag">Initializing Media Tags</h2>
+
+<p>To use the functions and data types of the Media Tag API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTENT__MEDIA__TAG__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__CONTENT__MEDIA__TAG__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><media_content.h></span> header file in your application:</p>
<pre class="prettyprint">
#include <media_content.h>
</pre>
<pre class="prettyprint">media_content_disconnect();</pre>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="tag_list" name="tag_list" class="items-tit-h2">Getting the Tag List</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="tag_list" name="tag_list">Getting the Tag List</h2>
+
<p>To get the tag list:</p>
<ol>
}
</pre></li>
</ol>
- </div>
- </li>
-<li>
- <div class="devicespec-tit">
- <h2 id="initialize_storage" name="initialize_storage" class="items-tit-h2">Initializing Storage</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
-<p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTENT__MEDIA__STORAGE__MODULE.html">Storage</a> API, include the <span style="font-family: Courier New,Courier,monospace"><media_content.h></span> header file in your application:</p>
+<h2 id="initialize_storage" name="initialize_storage">Initializing the Storage</h2>
+
+<p>To initialize the storage for use:</p>
+
+<ol><li><p>To use the functions and data types of the Media Storage API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTENT__MEDIA__STORAGE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__CONTENT__MEDIA__STORAGE__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><media_content.h></span> header file in your application:</p>
<pre class="prettyprint">
#include <media_content.h>
-</pre>
+</pre></li>
-<p>Before retrieving tag information, open a connection to the Content Service by calling the <span style="font-family: Courier New,Courier,monospace">media_content_connect()</span> function:</p>
-
+<li><p>Before retrieving storage information, open a connection to the Content Service by calling the <span style="font-family: Courier New,Courier,monospace">media_content_connect()</span> function:</p>
+
<pre class="prettyprint">media_content_connect();</pre>
-<p>Close the connection when the service is no longer needed:</p>
+<p>When the service is no longer needed, close the connection:</p>
<pre class="prettyprint">media_content_disconnect();</pre>
+</li></ol>
+
+
+<h2 id="storage_list" name="storage_list">Getting the Storage List</h2>
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="storage_list" name="storage_list" class="items-tit-h2">Getting the Storage List</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
<p>To get the storage list:</p>
<ol>
}
</pre></li>
<li>After getting the storage information which is already set, you can use the information for advanced search.
-<p>Get the storage information :</p>
+<p>Get the storage information:</p>
<pre class="prettyprint">
char *id = NULL;
char *name = NULL;
GList *storage_list = NULL; // Include glib.h
media_storage_h storage = NULL;
-ret = media_storage_foreach_storage_from_db(NULL, storage_cb, &storage_list);
+ret = media_storage_foreach_storage_from_db(NULL, storage_cb, &storage_list);
if (ret != MEDIA_CONTENT_ERROR_NONE)
{
dlog_print(DLOG_ERROR, LOG_TAG, "media_storage_foreach_storage_from_db failed: %d", ret);
{
int i;
- for (i = 0; i < g_list_length(storage_list); i++)
+ for (i = 0; i < g_list_length(storage_list); i++)
{
storage = (media_storage_h)g_list_nth_data(storage_list, i);
media_storage_get_id(new_storage, &id);
free(storage);
}
}
-
</pre></li>
</ol>
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="find_groups" name="find_groups" class="items-tit-h2">Finding Media Item Groups</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="find_groups" name="find_groups">Finding Media Item Groups</h2>
+
<p>To find groups of media items and items in a given group:</p>
<ol>
<li>Search for groups.
<p>A group is a collection of media items which have the same value of a given property. For example, if the property is the artist, there are as many groups as there are artists, and each group consists of items by the same artist. The possible groups are determined by the <span style="font-family: Courier New,Courier,monospace;">media_group_e</span> values, such as <span style="font-family: Courier New,Courier,monospace;">MEDIA_CONTENT_GROUP_ARTIST</span> and <span style="font-family: Courier New,Courier,monospace;">MEDIA_CONTENT_GROUP_MIME_TYPE</span>.</p>
-<ol><li>
+<ol type="a"><li>
<p>Find the number of MIME type-related groups:</p>
<pre class="prettyprint">
</pre></li></ol></li>
<li>Receive group data.
-<ol><li>
+<ol type="a"><li>
<p>Define the callback for receiving the group data. If the callback returns <span style="font-family: Courier New,Courier,monospace;">true</span>, the iteration over the found groups continues. If the return value is <span style="font-family: Courier New,Courier,monospace;">false</span>, the iteration is stopped.</p>
<p>Each time the callback is called for a group, the group name is passed as the <span style="font-family: Courier New,Courier,monospace;">name</span> argument. In this case, names are set to various found MIME types, such as <span style="font-family: Courier New,Courier,monospace;">image/png</span> and <span style="font-family: Courier New,Courier,monospace;">audio/mpeg</span>.</p>
</pre></li></ol></li></ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="filter_groups" name="filter_groups" class="items-tit-h2">Finding Media Item Groups Using a Filter</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="filter_groups" name="filter_groups">Finding Media Item Groups Using a Filter</h2>
<p>To find groups containing only items matching the given criteria:</p>
media_group_foreach_group_from_db(filter, group, group_cb, (void *) group);
</pre></li></ol>
-
- </div>
- </li>
-
- </ul>
-</div>
-</div>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a class="opensection" href="#get_file_ext">Getting the MIME Type for a File Extension</a></li>
- <li><a class="opensection" href="#get_mime">Getting Extensions for a MIME Type</a></li>
+ <li><a href="#get_file_ext">Getting the MIME Type for a File Extension</a></li>
+ <li><a href="#get_mime">Getting Extensions for a MIME Type</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.guides/html/native/content/mime_type_n.htm">MIME Type Guide</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTENT__MIME__TYPE__MODULE.html">MIME Type API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTENT__MIME__TYPE__MODULE.html">MIME Type API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__CONTENT__MIME__TYPE__MODULE.html">MIME Type API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>MIME Type: Mapping MIME Types to and from File Extensions</h1>
- <div class="cont"><div class="static-cont">
+
<p>This tutorial demonstrates how you can map MIME types to file extensions and vice versa.</p>
<h2>Warm-up</h2>
<p>Become familiar with the MIME Type API basics by learning about:</p>
<ul>
- <li><a class="opensection" href="#get_file_ext">Getting the MIME Type for a File Extension</a>
+ <li><a href="#get_file_ext">Getting the MIME Type for a File Extension</a>
<p>Get a MIME type when an extension is known.</p></li>
- <li><a class="opensection" href="#get_mime">Getting Extensions for a MIME Type</a>
+ <li><a href="#get_mime">Getting Extensions for a MIME Type</a>
<p>Get extensions mapped to certain MIME types.</p></li>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
-
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="get_file_ext" name="get_file_ext" class="items-tit-h2">Getting the MIME Type for a File Extension</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="get_file_ext" name="get_file_ext">Getting the MIME Type for a File Extension</h2>
+
<p>To get the MIME types of all files in a directory when the extensions are known:</p>
<ol>
- <li><p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTENT__MIME__TYPE__MODULE.html">MIME Type</a> API, include the <span style="font-family: Courier New,Courier,monospace"><mime_type.h></span> header file in your application:</p>
+ <li><p>To use the functions and data types of the MIME Type API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTENT__MIME__TYPE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__CONTENT__MIME__TYPE__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><mime_type.h></span> header file in your application:</p>
<pre class="prettyprint">
#include <mime_type.h>
</pre>
closedir(dir);
}
</pre></li></ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="get_mime" name="get_mime" class="items-tit-h2">Getting Extensions for a MIME Type</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="get_mime" name="get_mime">Getting Extensions for a MIME Type</h2>
+
<p>To get a list of extensions associated, for example, with an image or jpeg MIME type:</p>
<ol>
- <li><p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTENT__MIME__TYPE__MODULE.html">MIME Type</a> API, include the <span style="font-family: Courier New,Courier,monospace"><mime_type.h></span> header file in your application:</p>
+ <li><p>To use the functions and data types of the MIME Type API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTENT__MIME__TYPE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__CONTENT__MIME__TYPE__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><mime_type.h></span> header file in your application:</p>
<pre class="prettyprint">
#include <mime_type.h>
</pre>
free(extension[i]);
free(extension);
</pre></li></ol>
- </div>
- </li>
- </ul>
-</div>
-</div>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a href="#activity" class="opensection">Detecting Activities</a></li>
+ <li><a href="#activity">Detecting Activities</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.guides/html/native/context/activity_recognition_n.htm">Activity Recognition Guide</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTEXT__ACTIVITY__MODULE.html">Activity Recognition API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTEXT__ACTIVITY__MODULE.html">Activity Recognition API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__CONTEXT__ACTIVITY__MODULE.html">Activity Recognition API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Activity Recognition: Detecting Device Activities</h1>
-<div class="cont"><div class="static-cont">
+
<p>This tutorial demonstrates how you can manage and monitor various system information and attached devices.</p>
</li>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
- <!-- Folds -->
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="activity" name="activity" class="items-tit-h2">Detecting Activities</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+<h2 id="activity" name="activity">Detecting Activities</h2>
<p>To set and unset callback functions for the activity monitor and retrieve details from the received activity data:</p>
-<ol><li><p>To use the activity recognition-related features of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTEXT__ACTIVITY__MODULE.html">Activity Recognition</a> API, include the <span style="font-family: Courier New,Courier,monospace;"><activity_recognition.h></span> header file in your application:</p>
+<ol><li><p>To use the activity recognition-related features of the Activity Recognition API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTEXT__ACTIVITY__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__CONTEXT__ACTIVITY__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace;"><activity_recognition.h></span> header file in your application:</p>
<pre class="prettyprint">
#include <activity_recognition.h>
</pre></li>
<li>To subscribe to notifications about specific activity state changes, invoke the <span style="font-family: Courier New,Courier,monospace;">activity_start_recognition()</span> function to register a callback function.
<p>When specific activity data is received, the <span style="font-family: Courier New,Courier,monospace;">example_activity_callback</span> callback is invoked.</p>
-<p>The following example starts the activity monitor to receive notifications when the <span style="font-family: Courier New,Courier,monospace;">ACTIVITY_WALK</span> activity is detected. Any of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTEXT__ACTIVITY__MODULE.html#gae17e97a1a51a9d5d5d8330f29f4a895d">activity_type_e</a> enumerators can be used in place of the <span style="font-family: Courier New,Courier,monospace;">ACTIVITY_WALK</span> value.</p>
+<p>The following example starts the activity monitor to receive notifications when the <span style="font-family: Courier New,Courier,monospace;">ACTIVITY_WALK</span> activity is detected. Any of the <span style="font-family: Courier New,Courier,monospace;">activity_type_e</span> enumerators (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTEXT__ACTIVITY__MODULE.html#gae17e97a1a51a9d5d5d8330f29f4a895d">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__CONTEXT__ACTIVITY__MODULE.html#gae17e97a1a51a9d5d5d8330f29f4a895d">wearable</a> applications) can be used in place of the <span style="font-family: Courier New,Courier,monospace;">ACTIVITY_WALK</span> value.</p>
<pre class="prettyprint">
activity_start_recognition(handle, ACTIVITY_WALK, example_activity_callback, NULL);
</pre>
if (result != ACTIVITY_ERROR_NONE)
{
- /* Error handling */
+ // Error handling
}
}</pre></li>
<li>When activity monitoring is no longer used, unset the callback function and destroy the handle:
<pre class="prettyprint">activity_stop_recognition(handle);
activity_release(handle);</pre></li></ol>
- </div>
- </li></ul>
-</div></div>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
if (event == GESTURE_EVENT_DETECTED)
{
- /* Handle the event */
+ // Handle the event
}
}
}</pre>
<p>To retrieve all rules:</p>
<ol>
<li>
-<p>Retrieve all the enabled rules registered by the application and disable them. The following example shows how to query the application%#39;s own rule IDs, disable the enabled rules, and remove all the rules.</p>
+<p>Retrieve all the enabled rules registered by the application and disable them. The following example shows how to query the application's own rule IDs, disable the enabled rules, and remove all the rules.</p>
<p>Only the owner application can enable, disable, remove, and retrieve the rules.</p>
<pre class="prettyprint">
int* enabled_rule_ids;
<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>Cairo Integration: Linking Cairo and Evas</title>
+ <title>Cairo: Linking Cairo and Evas</title>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/><br/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/><br/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a href="#rectangle" class="opensection">Creating a Rectangle with a Black Border</a></li>
- <li><a href="#graph" class="opensection">Displaying a Temperature Graph</a></li>
+ <li><a href="#graph">Drawing a Polygon Using a Cairo Image</a></li>
+ <li><a href="#vector">Displaying Animated Geometrical Figures Using Cairo Evas_GL</a></li>
+
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a href="../../../../org.tizen.guides/html/native/graphics/cairo_n.htm">Cairo Integration Guide</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__CAIRO__FRAMEWORK.html">Cairo API</a></li>
+ <li><a href="../../../../org.tizen.guides/html/native/graphics/cairo_n.htm">Cairo Guide</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__CAIRO__FRAMEWORK.html">Cairo API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__CAIRO__FRAMEWORK.html">Cairo API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
-<h1>Cairo Integration: Linking Cairo and Evas</h1>
-<div class="cont"><div class="static-cont">
+<h1>Cairo: Linking Cairo and Evas</h1>
+
-<p>This tutorial demonstrates how you can implement applications linking Cairo to Evas.</p>
+<p>This tutorial demonstrates how you can use 2 different backends of <a href="http://cairographics.org" target="_blank">Cairo</a> and link to Evas.</p>
<h2>Warm-up</h2>
<p>Become familiar with the Cairo API basics by learning about:</p>
<ul>
-<li><a href="#rectangle">Creating a Rectangle with a Black Border</a>
-<p>Create a PNG file containing a rectangle with a black border.</p></li>
+<li><a href="#graph">Drawing a Polygon Using a Cairo Image</a>
+<p>Draw a polygon and rectangle using the Cairo image backend with the <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> image.</p></li>
-<li><a href="#graph">Displaying a Temperature Graph</a>
-<p>Link Cairo to Evas and display a temperature graph on the screen.</p></li>
+<li><a href="#vector">Displaying Animated Geometrical Figures Using Cairo Evas_GL</a>
+<p>Draw various figures using the Cairo evas-gl backend with the Evas_GL surface.</p></li>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
- <!-- Folds -->
- <ul class="devicespecifications">
-
- <li>
- <div class="devicespec-tit">
- <h2 id="rectangle" name="rectangle" class="items-tit-h2">Creating a Rectangle with a Black Border</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
- </div>
- <div class="devicespec-con">
-<p>To be built with gcc -o cairo-ex1 cairo-ex1.c <span style="font-family: Courier New,Courier,monospace">pkg-config cairo --cflags --libs</span>. Launching the example creates a .png file containing a rectangle with a black border.</p>
-
- <p class="figure">Figure: An Example of Cairo</p>
- <p style="text-align:center;"><img alt="An Example of Cairo" src="../../images/cairo-ex1.png" /></p>
-
-<p>The following example shows how to run a simple application with Cairo and to create a file on the disk.</p>
-<p>To include the Cairo headers, use the following code.</p>
-<pre class="prettyprint">#include <cairo.h>
-#include <app.h>
-</pre>
-
-<p> The main function contains all the code. </p>
-<pre class="prettyprint">int main (int argc, char *argv[])
-{
- appdata_s *ad = {0,};
- int ret = 0;
-
- ui_app_lifecycle_callback_s event_callback = {0,};
- app_event_handler_h handlers[5] = {NULL,};
+<h2 id="graph" name="graph">Drawing a Polygon Using a Cairo Image</h2>
- event_callback.create = app_create;
- event_callback.terminate = app_terminate;
- event_callback.pause = app_pause;
- event_callback.resume = app_resume;
- event_callback.app_control = app_control;
+<p>This use case shows how to link Cairo to Evas and how to draw a polygon and rectangle on the screen using the Cairo API. First create a basic application that provides a basic UI application skeleton and already makes available the window object that can contain the Cairo drawing.</p>
- ui_app_add_event_handler(&handlers[APP_EVENT_LOW_BATTERY], APP_EVENT_LOW_BATTERY, ui_app_low_battery, &ad);
- ui_app_add_event_handler(&handlers[APP_EVENT_LOW_MEMORY], APP_EVENT_LOW_MEMORY, ui_app_low_memory, &ad);
- ui_app_add_event_handler(&handlers[APP_EVENT_DEVICE_ORIENTATION_CHANGED], APP_EVENT_DEVICE_ORIENTATION_CHANGED, ui_app_orient_changed, &ad);
- ui_app_add_event_handler(&handlers[APP_EVENT_LANGUAGE_CHANGED], APP_EVENT_LANGUAGE_CHANGED, ui_app_lang_changed, &ad);
- ui_app_add_event_handler(&handlers[APP_EVENT_REGION_FORMAT_CHANGED], APP_EVENT_REGION_FORMAT_CHANGED, ui_app_region_changed, &ad);
- ui_app_remove_event_handler(handlers[APP_EVENT_LOW_MEMORY]);
+<ol><li>
+Build the environment.
- ret = ui_app_main(argc, argv, &event_callback, &ad);
+<p>Include the <span style="font-family: Courier New,Courier,monospace"><cairo.h></span> and <span style="font-family: Courier New,Courier,monospace"><math.h></span> headers in the sample application:</p>
- return ret;
-}
-</pre>
+<pre class="prettyprint">
+#include <cairo.h>
+#include <math.h>
+</pre></li>
-<p>To create a Cairo surface with a fixed size and to define the pixels format to ARGB32, use the following code. The color format is the same as the ARGB8888 of EFL.</p>
-<pre class="prettyprint">surface = cairo_image_surface_create (CAIRO_FORMAT_ARGB32, 240, 80);
-</pre>
+<li>Create the <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> image and link to Cairo.
-<p> To create a Cairo context with surface as a parameter, use the following code. This Cairo object is used for all painting operations.</p>
-<pre class="prettyprint">cairo = cairo_create (surface);
-</pre>
-<p> Cairo has many APIs for painting: APIs for example for changing the size of the pen, choosing the colors, or creating different forms such as circles, rectangles, paths and curves. The following example shows how to create a black rectangle.</p>
-<pre class="prettyprint">cairo_rectangle(cairo, 10, 10, 220, 60);
-cairo_stroke(cairo);
-</pre>
-<p>To render the surface on an image on a disk, use the following code.</p>
-<pre class="prettyprint">cairo_surface_write_to_png (surface, "cairo-ex1.png");
-</pre>
-<p>To free all resources, use the following code.</p>
-<pre class="prettyprint">cairo_destroy (cairo);
-cairo_surface_destroy (surface);
-</pre>
+<p>Define the <span style="font-family: Courier New,Courier,monospace">appdata</span> structure that contains the pointers to the objects to be manipulated:</p>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="graph" name="graph" class="items-tit-h2">Displaying a Temperature Graph</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
- </div>
- <div class="devicespec-con">
-<p>The graph example shows how to link Cairo to evas and how to display a temperature graph on the screen.</p>
-<p>To include the headers, use the following code.</p>
-<pre class="prettyprint">#include <Elementary.h>
-#include <cairo.h>
-#include <app.h>
-</pre>
-<p>To create an application data structure that contains all the pointers to objects to be manipulated, use the following code.</p>
-<pre class="prettyprint">typedef struct appdata
+<pre class="prettyprint">
+typedef struct appdata
{
- // All graphical objects here are pointers to the value of the type Evas_Object
- Evas_Object *win;
- Evas_Object *conformant;
- Evas_Object *image;
- cairo_t *cairo;
+ Evas_Object *win;
+ Evas_Object *img;
+
cairo_surface_t *surface;
- unsigned char *pixels;
+ cairo_t *cairo;
} appdata_s;
-</pre>
-<p> The main functions add only one callback to the Appcore. The callback is called when the application is created.</p>
-<pre class="prettyprint">static bool
-app_create(void *data)
+</pre></li>
+<li>Create the <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> window and image.
+
+<p>To display the Cairo drawing on the screen, create the <span style="font-family: Courier New,Courier,monospace">Evas_object</span> window and <span style="font-family: Courier New,Courier,monospace">Evas_object</span> image:</p>
+
+<pre class="prettyprint">
+ad->win = elm_win_util_standard_add(PACKAGE, PACKAGE);
+evas_object_show(ad->win);
+ad->img = evas_object_image_filled_add(evas_object_evas_get(ad->win));
+evas_object_show(ad->img);
+</pre></li>
+
+<li>Create Cairo.
+<p>To create the Cairo surface, you need the window size to set the Cairo surface. You can get the window size using the <span style="font-family: Courier New,Courier,monospace">evas_object_geometry_get()</span> function, after the <span style="font-family: Courier New,Courier,monospace">evas_object_show()</span> function is called:</p>
+
+<pre class="prettyprint">
+evas_object_geometry_get(ad->win, NULL, NULL, &ad->width, &ad->height);
+ad->surface = cairo_image_surface_create(CAIRO_FORMAT_ARGB32, ad->width, ad->height);
+ad->cairo = cairo_create(ad->surface);
+</pre></li>
+
+<li>Draw a polygon and rectangle with Cairo.
+<p>To draw the vector image itself:</p>
+
+<ol type="a">
+<li>To draw Cairo with some specific vector positions, use the window size that you got before. You can compare the window width and height and get the smaller length to set the square side.
+
+<pre class="prettyprint">
+void cairo_drawing(void *data)
{
appdata_s *ad = data;
- create_gui(ad);
+ int d = 0;
+ if (ad->width < ad->height)
+ d = ad->width;
+ else
+ d = ad->height;
+</pre></li>
+
+<li>To set the background as white color, set the color as white and paint the Cairo:
+<pre class="prettyprint">
+ // Clear background as white
+ cairo_set_source_rgba(ad->cairo, 1, 1, 1, 1);
+ cairo_paint(ad->cairo);
+</pre></li>
+
+<li>Draw the polygon and rectangle:
+
+<pre class="prettyprint">
+ cairo_translate(ad->cairo, 0.1 * d, 0.1 * d);
+ cairo_set_line_width(ad->cairo,2);
+ cairo_set_source_rgba(ad->cairo, 0.0, 0.0, 1.0, 1.0);
+
+ cairo_move_to(ad->cairo, 0.2 * d , 0.2 * d);
+ cairo_line_to(ad->cairo, 0.4 * d, 0.3 * d);
+ cairo_rel_line_to(ad->cairo, 0.2 * d, -0.1 * d);
+ cairo_arc(ad->cairo, 0.4 * d, 0.4 * d, 0.2* d * sqrt(2), -0.25 * M_PI, 0.25 * M_PI);
+ cairo_rel_curve_to(ad->cairo,-0.2* d, -0.1 * d, -0.2* d, 0.1 * d, -0.4 * d, 0);
+ cairo_close_path(ad->cairo);
+ cairo_fill(ad->cairo);
+
+ cairo_rectangle(ad->cairo, 0, 0, 0.8 * d, 0.8 * d);
+ cairo_stroke(ad->cairo);
+</pre></li>
+
+
+<li>You need to use the <span style="font-family: Courier New,Courier,monospace">cairo_surface_flush()</span> function to ensure that any pending drawing is performed for the surface:
+
- return true;
+<pre class="prettyprint">
+ cairo_surface_flush(ad->surface);
+</pre></li>
+
+<li>Update the <span style="font-family: Courier New,Courier,monospace">Evas_object</span> image on the screen:
+
+<pre class="prettyprint">
+ // Display Cairo drawing on screen
+ unsigned char * imageData = cairo_image_surface_get_data(cairo_get_target(ad->cairo));
+ evas_object_image_data_set(ad->img, imageData);
+ evas_object_image_data_update_add(ad->img, 0, 0, ad->width, ad->height);
}
+</pre></li>
+
+<li>The delete callback is triggered when the Window is destroyed from the main loop.
+
-int
-main(int argc, char *argv[])
+<pre class="prettyprint">
+static void win_delete_request_cb(void *data, Evas_Object *obj, void *event_info)
{
- appdata_s *ad = {0,};
- int ret = 0;
+ appdata_s *ad = data;
+ cairo_surface_destroy(ad->surface);
+ cairo_destroy(ad->cairo);
+ ui_app_exit();
+}
+</pre></li>
+</ol></li></ol>
- ui_app_lifecycle_callback_s event_callback = {0,};
- app_event_handler_h handlers[5] = {NULL,};
+<p class="figure">Figure: Polygon and rectangle</p>
+<p align="center"><img alt="Polygon and rectangle" src="../../images/cairo_basic.png" /></p>
- event_callback.create = app_create;
- event_callback.terminate = app_terminate;
- event_callback.pause = app_pause;
- event_callback.resume = app_resume;
- event_callback.app_control = app_control;
- ui_app_add_event_handler(&handlers[APP_EVENT_LOW_BATTERY], APP_EVENT_LOW_BATTERY, ui_app_low_battery, &ad);
- ui_app_add_event_handler(&handlers[APP_EVENT_LOW_MEMORY], APP_EVENT_LOW_MEMORY, ui_app_low_memory, &ad);
- ui_app_add_event_handler(&handlers[APP_EVENT_DEVICE_ORIENTATION_CHANGED], APP_EVENT_DEVICE_ORIENTATION_CHANGED, ui_app_orient_changed, &ad);
- ui_app_add_event_handler(&handlers[APP_EVENT_LANGUAGE_CHANGED], APP_EVENT_LANGUAGE_CHANGED, ui_app_lang_changed, &ad);
- ui_app_add_event_handler(&handlers[APP_EVENT_REGION_FORMAT_CHANGED], APP_EVENT_REGION_FORMAT_CHANGED, ui_app_region_changed, &ad);
- ui_app_remove_event_handler(handlers[APP_EVENT_LOW_MEMORY]);
- ret = ui_app_main(argc, argv, &event_callback, &ad);
+<h2 id="vector" name="vector">Displaying Animated Geometrical Figures Using Cairo Evas_GL</h2>
- return ret;
-}
-</pre>
-<p>To create a window and a conformant container, use the <span style="font-family: Courier New,Courier,monospace">create_gui</span> function.</p>
-<pre class="prettyprint">static void
-create_gui(appdata_s *ad)
+<p>The following use case shows how you can draw vector graphics using the Cairo evas-gl backend. The Cairo evas-gl backend is similar to Cairo gl backend, since it can provide an implementation of possibly hardware-accelerated Cairo rendering by targeting the OpenGL® ES API.</p>
+<p>First create a basic application that provides a basic UI application skeleton and already makes available the window object that can contain the Cairo drawing.</p>
+
+<p>To display and animate vector graphics with Cairo and the Evas_GL surface:</p>
+
+
+
+<ol><li>Build the environment:
+<ul>
+<li>Include the following header files to use the Cairo evas-gl backend on the Evas_GL surface:
+<pre class="prettyprint">
+#include <cairo.h>
+#include <Evas_GL.h>
+#include <cairo-evas-gl.h>
+#include <math.h>
+</pre></li>
+<li>Define the <span style="font-family: Courier New,Courier,monospace">appdata</span> structure that contains the pointers to objects to be manipulated:
+
+<pre class="prettyprint">
+typedef struct appdata
{
- int i;
- int max_temp;
- int min_temp;
- int x, y;
- double det, a, b;
- int row_stride;
+ Evas_Object *win;
+ Evas_Object *img;
- // Create the window
- ad->win = elm_win_util_standard_add(PACKAGE, PACKAGE);
- elm_win_conformant_set(ad->win, EINA_TRUE);
+ cairo_surface_t *surface;
+ cairo_t *cairo;
+ cairo_device_t *cairo_device;
+
+ Evas_GL *evas_gl;
+ Evas_GL_Config *evas_gl_config;
+ Evas_GL_Surface *evas_gl_surface;
+ Evas_GL_Context *evas_gl_context;
+} appdata_s;
+</pre></li></ul></li>
+
+<li>Initialize Cairo and Evas_GL for Cairo evas-gl drawing.
+<p>Initialize the variables related to the Evas_GL within the <span style="font-family: Courier New,Courier,monospace">appdata</span> structure, and create the Evas_GL object using the <span style="font-family: Courier New,Courier,monospace">Evas_object</span> image created before.</p>
+
+<ul>
+<li>By default, Cairo evas-gl backend uses an Evas_GL context and API set. Before creating the <span style="font-family: Courier New,Courier,monospace">Evas_object</span> window for Cairo evas-gl drawing, the GL Rendering Engine is set because Evas_GL runs with Evas_GL Render Engine:
+
+<pre class="prettyprint">
+elm_config_accel_preference_set("opengl");
+</pre></li>
+
+<li>The <span style="font-family: Courier New,Courier,monospace">cairo_drawing</span> callback function can be registered by the following <span style="font-family: Courier New,Courier,monospace">Evas_object</span> image function:
+
+<pre class="prettyprint">
+evas_object_image_pixels_get_callback_set(ad->img, cairo_drawing, NULL);
+</pre></li>
+<li>For using hardware-accelerated Cairo rendering, set <span style="font-family: Courier New,Courier,monospace">CAIRO_GL_COMPOSITOR</span> to MSAA compositor:
+
+<pre class="prettyprint">
+setenv("CAIRO_GL_COMPOSITOR", "msaa", 1);
+</pre></li>
+
+<li>To prevent unnecessary context switching in the Cairo evas-gl backend:
+<pre class="prettyprint">
+cairo_gl_device_set_thread_aware(ad->cairo_device, 0);
+</pre></li></ul>
+
+<pre class="prettyprint">
+static void init_cairo_evasgl_drawing(appdata_s *ad)
+{
+ // Create window
+ elm_config_accel_preference_set("opengl");
+ ad->win = elm_win_util_standard_add(PACKAGE, PACKAGE);
+ elm_win_autodel_set(ad->win, EINA_TRUE);
if (elm_win_wm_rotation_supported_get(ad->win))
{
- int rots[4] = { 0, 90, 180, 270 };
+ int rots[4] = {0, 90, 180, 270};
elm_win_wm_rotation_available_rotations_set(ad->win, (const int *)(&rots), 4);
}
evas_object_smart_callback_add(ad->win, "delete,request", win_delete_request_cb, NULL);
-
- ad->conformant = elm_conformant_add(ad->win);
- evas_object_size_hint_weight_set(ad->conformant, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
- elm_win_resize_object_add(ad->win, ad->conformant);
- evas_object_resize(ad->win, 480, 300);
+ eext_object_event_callback_add(ad->win, EEXT_CALLBACK_BACK, win_back_cb, ad);
+ evas_object_event_callback_add(ad->win, EVAS_CALLBACK_RESIZE, win_resize_cb, ad);
evas_object_show(ad->win);
- evas_object_show(ad->conformant);
-</pre>
-<p>The following example shows how to create an evas_object image. We set it to enable alpha. The color format matches with the one we use in Cairo and we set it to ARGB8888; in other words, Red, Green, Blue and Alpha are coded on 8bits each. Set the size of the image, and set the fill settings to the same as the image size.</p>
-<pre class="prettyprint"> // Create an evas_object_image which contains the Cairo content
- ad->image = evas_object_image_add(evas_object_evas_get(ad->win));
- evas_object_image_alpha_set(ad->image, EINA_TRUE);
- evas_object_image_colorspace_set(ad->image, EVAS_COLORSPACE_ARGB8888);
- evas_object_image_size_set(ad->image, WIDTH, HEIGHT);
- evas_object_image_fill_set(ad->image, 0, 0, WIDTH, HEIGHT);
- evas_object_show(ad->image);
-</pre>
-<p>To create the Cairo surface, the pixels must be allocated, as they are the link between Cairo and evas. For that we need to know the whole size of the image by setting the row stride value.</p>
-<pre class="prettyprint"> row_stride = cairo_format_stride_for_width(CAIRO_FORMAT_ARGB32, WIDTH);
- // Create the pixels
- ad->pixels = (unsigned char *) calloc(sizeof(unsigned char) * row_stride * HEIGHT, 1);
- // Create the cairo surface
- ad->surface = cairo_image_surface_create_for_data(ad->pixels, CAIRO_FORMAT_ARGB32,
- WIDTH, HEIGHT, row_stride);
-
- // Create the cairo context
- ad->cairo = cairo_create (ad->surface);
-</pre>
-<p>Set evas to use the pixels created as pixels of the image with the following code.</p>
-<pre class="prettyprint"> // Set the pixels created as image's pixels
- evas_object_image_data_set(ad->image, ad->pixels);
-</pre>
-<p> In the following example, paint the axis of the graph with a 2px black pen. Set Cairo to move the pen at the position 10,10 and create a line between this point and the position 10, HEIGHT. This creates a vertical black line. Continue the line from the current point and to the position WIDTH, HEIGHT. This is the horizontal black line.</p>
-<pre class="prettyprint"> cairo_set_source_rgb(ad->cairo, 0.0, 0.0, 0.0);
- cairo_set_line_width(ad->cairo, 2);
- cairo_move_to(ad->cairo, 10, 10);
- cairo_line_to(ad->cairo, 10, HEIGHT);
- cairo_stroke(ad->cairo);
-</pre>
-<p> The data to be graphed is an array of 12 values in °C (Celsius degrees). Each value represents the mean temperature value of a month. The graph is linear on the X axis, because the index in the array represents the month. For the Y axis, transform the float value into the pixel position. To create a full scale graph, the minimum values are displayed at the lower position, and the maximum values at the upper position. To show the minimum and maximum values, iterate the data.</p>
-<pre class="prettyprint"> max_temp = INT_MIN;
- min_temp = INT_MAX;
- for (i = 0; i < NB_TEMPS; i++)
- {
- max_temp = MAX(temperatures[i], max_temp);
- min_temp = MIN(temperatures[i], min_temp);
- }
-</pre>
-<p>To resolve the two linear equations with two variables, use the following code.</p>
-<pre class="prettyprint"> det = - (min_temp * 1 - max_temp * 1);
- a = (1 * 0 - 1 * HEIGHT) / det;
- b = (HEIGHT * max_temp - 0 * min_temp) / det;
+ // Add image object; a filled one by default
+ evas_object_geometry_get(ad->win, NULL, NULL, &ad->width, &ad->height);
+ ad->img = evas_object_image_filled_add(evas_object_evas_get(ad->win));
+ evas_object_show(ad->img);
+
+ // Create evasgl and init
+ Evas_Native_Surface ns;
+ ad->evas_gl = evas_gl_new(evas_object_evas_get(ad->img));
+ ad->evas_gl_config = evas_gl_config_new();
+ ad->evas_gl_config->color_format = EVAS_GL_RGBA_8888;
+
+ // Create a surface and context
+ ad->evas_gl_surface = evas_gl_surface_create(ad->evas_gl, ad->evas_gl_config, ad->width, ad->height);
+ ad->evas_gl_context = evas_gl_context_create(ad->evas_gl, NULL);
+
+ evas_gl_native_surface_get(ad->evas_gl, ad->evas_gl_surface, &ns);
+ evas_object_image_native_surface_set(ad->img, &ns);
+
+ // Register Cairo drawing callback
+ evas_object_image_pixels_get_callback_set(ad->img, (Evas_Object_Image_Pixels_Get_Cb)cairo_drawing, ad);
+
+ // Create cairo and cairo device with evasgl
+ // Use the MSAA compositor if available
+ setenv("CAIRO_GL_COMPOSITOR", "msaa", 1);
+ ad->cairo_device = (cairo_device_t *)cairo_evas_gl_device_create (ad->evas_gl, ad->evas_gl_context);
+ cairo_gl_device_set_thread_aware(ad->cairo_device, 0);
+ ad->surface = (cairo_surface_t *)cairo_gl_surface_create_for_evas_gl(ad->cairo_device, ad->evas_gl_surface, ad->evas_gl_config, ad->width, ad->height);
+ ad->cairo = cairo_create(ad->surface);
+
+ // Register animation callback to update the output according to refresh rate
+ ecore_animator_frametime_set(0.016);
+ ecore_animator_add(_animate_cb, (void *)ad->img);
+}
</pre>
-<p>To create a red grid, use the coefficient calculated previously. Five horizontal lines are painted, in every 10°C degrees, from -10°C to +40°C. Paint the 0°C with a 4px thick pen and the other lines with a 1px. For the vertical lines, the space between the lines is the width of the graph divided by 12 months.</p>
-<pre class="prettyprint"> // Select the red color to paint the grid
- cairo_set_source_rgba(ad->cairo, 1.0, 0.0, 0.0, 0.5);
- // Paint horizontal lines in red, with a thicker line for 0°C
- for (i = -10; i <= 40; i += 5)
+</li>
+
+<li>Draw geometrical figures in the <span style="font-family: Courier New,Courier,monospace">cairo_drawing()</span> callback function.
+<p>The following code snippet shows how to draw some geometrical figures such as a triangle, rectangle, and circle with various styles and random positions by using the Cairo APIs.</p>
+<pre class="prettyprint">
+void cairo_drawing(void *data)
+{
+ appdata_s *ad = data;
+
+ int i;
+ double r, g, b, a;
+
+ int Renderloop = 50;
+
+ // Clear background as white
+ cairo_set_source_rgba(ad->cairo, 1, 1, 1, 1);
+ cairo_paint(ad->cairo);
+
+ cairo_set_operator(ad->cairo, CAIRO_OPERATOR_OVER);
+
+ for (i = 0; i < Renderloop; i++)
{
- // For the 0°C line, set a thicker pen
- if (i == 0)
- cairo_set_line_width(ad->cairo, 4);
- else
- cairo_set_line_width(ad->cairo, 1);
- // Calculate the y position
- y = (int)(a * i + b);
- cairo_move_to(ad->cairo, 10, y);
- cairo_line_to(ad->cairo, WIDTH, y);
+ // Random color
+ r = drand48();
+ g = drand48();
+ b = drand48();
+ a = drand48();
+ cairo_set_source_rgba(ad->cairo, r, g, b, a);
+
+ // Random position
+ float x = drand48() * ad->width;
+ float y = drand48() * ad->height;
+ float side = drand48() * 300;
+
+ // Random style
+ int shape = drand48() * 3;
+ float width = drand48() * 50 + 1;
+ int line_cap = drand48() * 3;
+
+ cairo_line_cap_t line_cap_style = CAIRO_LINE_CAP_BUTT;
+ if (line_cap == 1)
+ line_cap_style = CAIRO_LINE_CAP_ROUND;
+ else if (line_cap == 2)
+ line_cap_style = CAIRO_LINE_CAP_SQUARE;
+
+ int line_join = drand48() * 3;
+ cairo_line_join_t line_join_style = CAIRO_LINE_JOIN_MITER;
+ if (line_join == 1)
+ line_join_style = CAIRO_LINE_JOIN_ROUND;
+ else if (line_join == 2)
+ line_join_style = CAIRO_LINE_JOIN_BEVEL;
+
+ double dash[] = {0.0, 0.0};
+ dash[0] = drand48() * 50;
+ dash[1] = drand48() * 50;
+
+ cairo_set_dash(ad->cairo, dash, 2, 0);
+ cairo_set_line_width(ad->cairo, width);
+ cairo_set_line_join(ad->cairo, line_join_style);
+ cairo_set_line_cap(ad->cairo, line_cap_style);
+
+ if (shape == 0)
+ {
+ // Draw square
+ cairo_rectangle(ad->cairo, x, y, side, side);
+ cairo_fill(ad->cairo);
+ }
+ else if (shape == 1)
+ {
+ // Draw circle
+ cairo_arc(ad->cairo, x, y, side/2, 0.0, 2.0 * M_PI);
+ cairo_stroke(ad->cairo);
+ }
+ else
+ {
+ // Draw triangle
+ cairo_move_to(ad->cairo, x, y);
+ cairo_line_to(ad->cairo, x + side, y);
+ cairo_line_to(ad->cairo, x, y + side);
+ cairo_close_path(ad->cairo);
cairo_stroke(ad->cairo);
+ }
}
- // Paint the 11 verticals lines (the first one is already painted as the black y axis)
- for (i = 1; i < 12; i++)
+
+ cairo_surface_flush(ad->surface);
+}
+</pre></li>
+
+<li>Resize the callback.
+<p>In the following code snippet, when resizing occurs, Evas GL surface is recreated and reconnected to the <span style="font-family: Courier New,Courier,monospace">Evas_object</span> image.</p>
+<pre class="prettyprint">
+static void win_resize_cb(void *data, Evas *e , Evas_Object *obj , void *event_info)
+{
+ appdata_s *ad = data;
+
+ if (ad->evas_gl_surface)
{
- x = (int)(i * (WIDTH / NB_TEMPS) + 10);
- cairo_move_to(ad->cairo, x, HEIGHT);
- cairo_line_to(ad->cairo, x, 10);
+ cairo_surface_destroy(ad->surface);
+ cairo_destroy(ad->cairo);
+ cairo_device_destroy(ad->cairo_device);
+ evas_gl_surface_destroy(ad->evas_gl, ad->evas_gl_surface);
+ ad->evas_gl_surface = NULL;
}
- cairo_stroke(ad->cairo);
-</pre>
-<p>Paint the graph line with a green color. As for the horizontal lines, use the same coefficient to find the correspondence between the temperature in °C and the value in pixels on the graph. Once the conversion is done, graph the line with the <span style="font-family: Courier New,Courier,monospace">cairo_line_to</span> API.</p>
-<pre class="prettyprint"> // Set a green value for temperature graph
- cairo_set_source_rgba(ad->cairo, 0.5, 0.8, 0.3, 0.8);
- cairo_set_line_width(ad->cairo, 10);
- // Iterate the array to get the temperature values of each month
- for (i = 0; i < NB_TEMPS; i++)
+
+ evas_object_geometry_get(obj, NULL, NULL, &ad->width, &ad->height);
+ evas_object_image_size_set(ad->img, &ad->width, &ad->height);
+ evas_object_resize(ad->img, &ad->width, &ad->height);
+ evas_object_show(ad->img);
+
+
+ if (!ad->evas_gl_surface)
{
- // x coordinate is easily calculated, because it is a multiple of the graph_size divided by the number of points
- x = (int)(i * (WIDTH / NB_TEMPS) + 10);
- // use the themp_to_pix function to set the y coordinate corresponding to the temp value
- y = (int)(a * temperatures[i] + b);
+ Evas_Native_Surface ns;
+
+ ad->evas_gl_surface = evas_gl_surface_create(ad->evasgl, ad->evas_gl_config, &ad->width, &ad->height);
+ evas_gl_native_surface_get(ad->evasgl, ad->evas_gl_surface, &ns);
+ evas_object_image_native_surface_set(ad->img, &ns);
+ evas_object_image_pixels_dirty_set(ad->img, EINA_TRUE);
- cairo_line_to (ad->cairo, x, y);
+ ad->cairo_device = (cairo_device_t *)cairo_evas_gl_device_create(ad->evas_gl, ad->evas_gl_context);
+ cairo_gl_device_set_thread_aware(ad->cairo_device, 0);
+ ad->surface = (cairo_surface_t *)cairo_gl_surface_create_for_evas_gl(ad->cairo_device, ad->evas_gl_surface, ad->evas_gl_config, ad->width, ad->height);
+ ad->cairo = cairo_create (ad->surface);
}
- cairo_stroke(ad->cairo);
+}
</pre>
-<p>Update the evas object image on the screen by calling</p>
-<pre class="prettyprint"> evas_object_image_data_update_add(ad->image, 0, 0, WIDTH, HEIGHT);
-}</pre>
+</li>
-<p>The picture below shows the application.</p>
+<li>To use the animator callback for a default update refresh rate, you can add an animator.
+<p>To update the <span style="font-family: Courier New,Courier,monospace">Evas_object</span> image which is connected to Evas_GL, use the <span style="font-family: Courier New,Courier,monospace">evas_object_image_pixels_dirty_set()</span> function. This updates the <span style="font-family: Courier New,Courier,monospace">Evas_object</span> image whenever Evas renders.</p>
- <p class="figure">Figure: cairo-graph</p>
- <p style="text-align:center;"><img alt="cairo-graph" src="../../images/graph_app.png" /></p>
+<pre class="prettyprint">
+static Eina_Bool _animate_cb(void *data)
+{
+ Evas_Object *obj = (Evas_Object *)data;
+ evas_object_image_pixels_dirty_set(obj, EINA_TRUE);
- </div>
- </li>
-
-
-
- </ul>
-</div>
-</div>
+ return EINA_TRUE;
+}
+</pre>
+</li>
+
+<li>The delete callback is triggered when the Window is destroyed from the main loop.
+<pre class="prettyprint">
+static void win_delete_request_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ appdata_s *ad = data;
+ cairo_surface_destroy(ad->surface);
+ cairo_destroy(ad->cairo);
+ cairo_device_destroy(ad->cairo_device);
+ evas_gl_surface_destroy(ad->evas_gl, ad->evas_gl_surface);
+ evas_gl_context_destroy(ad->evas_gl, ad->evas_gl_context);
+ evas_gl_config_free(ad->evas_gl_config);
+ evas_gl_free(ad->evas_gl);
+ ui_app_exit();
+}
+</pre>
+</li>
+</ol>
+
+<p class="figure">Figure: Random geometrical figures</p>
+<p align="center"><img alt="Random geometrical figures" src="../../images/cairo_evasgl.png" /></p>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></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>Graphic Widget: Drawing Simple Images Using Evas Objects</title>
+ <title>Graphic UI Component: Drawing Simple Images Using Evas Objects</title>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/><br/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a href="#rectangle" class="opensection">Drawing a Rectangle or Line</a></li>
- <li><a href="#gradation" class="opensection">Implementing Gradation</a></li>
- <li><a href="#resizing" class="opensection">Resizing Images</a></li>
+ <li><a href="#rectangle">Drawing a Rectangle or Line</a></li>
+ <li><a href="#gradation">Implementing Gradation</a></li>
+ <li><a href="#resizing">Resizing Images</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.guides/html/native/graphics/graphics_guide_n.htm">Graphics Guides</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
-<h1>Graphic Widget: Drawing Simple Images Using Evas Objects</h1>
-<div class="cont"><div class="static-cont">
+<h1>Graphic UI Component: Drawing Simple Images Using Evas Objects</h1>
-<p>This tutorial demonstrates how you can draw a rectangle or a line image on the screen using Evas objects available on the EFL widget library.</p>
+
+<p>This tutorial demonstrates how you can draw a rectangle or a line image on the screen using Evas objects available on the EFL UI component library.</p>
<h2>Warm-up</h2>
<p>Become familiar with the Evas API basics by learning about:</p>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
- <!-- Folds -->
- <ul class="devicespecifications">
-
- <li>
- <div class="devicespec-tit">
- <h2 id="rectangle" name="rectangle" class="items-tit-h2">Drawing a Rectangle or Line</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
- </div>
- <div class="devicespec-con">
-<p>The rectangle and line demo is implemented in the <span style="font-family: Courier New,Courier,monospace">rectline.c</span> file. It uses a widget layout class, such as <span style="font-family: Courier New,Courier,monospace">elm_layout</span> and widgets, such as <span style="font-family: Courier New,Courier,monospace">elm_image</span> and <span style="font-family: Courier New,Courier,monospace">evas_object_rect</span>, and <span style="font-family: Courier New,Courier,monospace">evas_object_line</span> for the content inside view.</p>
+<h2 id="rectangle" name="rectangle">Drawing a Rectangle or Line</h2>
+
+<p>The rectangle and line demo is implemented in the <span style="font-family: Courier New,Courier,monospace">rectline.c</span> file. It uses a UI component layout class, such as <span style="font-family: Courier New,Courier,monospace">elm_layout</span> and UI components, such as <span style="font-family: Courier New,Courier,monospace">elm_image</span> and <span style="font-family: Courier New,Courier,monospace">evas_object_rect</span>, and <span style="font-family: Courier New,Courier,monospace">evas_object_line</span> for the content inside view.</p>
<p>The EFL has the following types of non-container objects:</p>
-<ul class="ul">
+<ul>
<li><span style="font-family: Courier New,Courier,monospace">Evas_Object_Rectangle</span></li>
<li><span style="font-family: Courier New,Courier,monospace">Evas_Object_Image</span></li>
<li><span style="font-family: Courier New,Courier,monospace">Evas_Object_Text</span></li>
<p>The following figure illustrates the result.</p>
<p class="figure">Figure: Rectangles and lines</p>
- <p style="text-align:center;"><img alt="Rectangles and lines" src="../../images/demo_rectangle2.png" /></p>
-
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="gradation" name="gradation" class="items-tit-h2">Implementing Gradation</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
- </div>
- <div class="devicespec-con">
-<p>The gradation demo is implemented in the <span style="font-family: Courier New,Courier,monospace">gradation.c</span> file. It uses a widget layout class, such as <span style="font-family: Courier New,Courier,monospace">elm_layout</span> and widgets, such as <span style="font-family: Courier New,Courier,monospace">elm_image</span> and <span style="font-family: Courier New,Courier,monospace">evas_object_rect</span>, and <span style="font-family: Courier New,Courier,monospace">evas_object_line</span> for the content inside view.</p>
+ <p align="center"><img alt="Rectangles and lines" src="../../images/demo_rectangle2.png" /></p>
+
+<h2 id="gradation" name="gradation">Implementing Gradation</h2>
+
+<p>The gradation demo is implemented in the <span style="font-family: Courier New,Courier,monospace">gradation.c</span> file. It uses a UI component layout class, such as <span style="font-family: Courier New,Courier,monospace">elm_layout</span> and UI components, such as <span style="font-family: Courier New,Courier,monospace">elm_image</span> and <span style="font-family: Courier New,Courier,monospace">evas_object_rect</span>, and <span style="font-family: Courier New,Courier,monospace">evas_object_line</span> for the content inside view.</p>
<p>The sample application creates rows of small rectangles that eventually fill the screen, starts a new row when the earlier row gets to the end of the screen, and changes the color of the squares as the number of the rows increases.</p>
<pre class="prettyprint">
static Evas_Object*
<p>The following figure illustrates the result.</p>
<p class="figure">Figure: Gradation</p>
- <p style="text-align:center;"><img alt="Gradation" src="../../images/demo_gradation2.png" /></p>
-
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="resizing" name="resizing" class="items-tit-h2">Resizing Images</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
- </div>
- <div class="devicespec-con">
-<p>The image resizing demo is implemented in the <span style="font-family: Courier New,Courier,monospace">imageresize.c</span> file. It creates image objects with random sizes and coordinates. It uses a widget layout class, such as <span style="font-family: Courier New,Courier,monospace">elm_layout</span> and widgets, such as <span style="font-family: Courier New,Courier,monospace">elm_image</span> and <span style="font-family: Courier New,Courier,monospace">evas_object_rect</span>, and <span style="font-family: Courier New,Courier,monospace">evas_object_line</span> for the content inside view.</p>
+<p align="center"><img alt="Gradation" src="../../images/demo_gradation2.png" /></p>
+
+<h2 id="resizing" name="resizing">Resizing Images</h2>
+
+<p>The image resizing demo is implemented in the <span style="font-family: Courier New,Courier,monospace">imageresize.c</span> file. It creates image objects with random sizes and coordinates. It uses a UI component layout class, such as <span style="font-family: Courier New,Courier,monospace">elm_layout</span> and UI components, such as <span style="font-family: Courier New,Courier,monospace">elm_image</span> and <span style="font-family: Courier New,Courier,monospace">evas_object_rect</span>, and <span style="font-family: Courier New,Courier,monospace">evas_object_line</span> for the content inside view.</p>
<pre class="prettyprint">
static Evas_Object*
create_main_view(appdata_s *ad)
<p>The following figure illustrates the result.</p>
<p class="figure">Figure: Image resizing</p>
- <p style="text-align:center;"><img alt="Image resizing" src="../../images/demo_resizing2.png" /></p>
-
- </div>
- </li>
-
-
- </ul>
-</div>
-</div>
+<p align="center"><img alt="Image resizing" src="../../images/demo_resizing2.png" /></p>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/><br/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a class="opensection" href="../../../../org.tizen.guides/html/native/graphics/graphics_guide_n.htm">Graphics Guides</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UI__FRAMEWORK.html">UI API</a></li>
+ <li><a href="../../../../org.tizen.guides/html/native/graphics/graphics_guide_n.htm">Graphics Guides</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UI__FRAMEWORK.html">UI Framework API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UI__FRAMEWORK.html">UI Framework API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Graphics: Creating and Managing Graphics</h1>
-<p>The graphics tutorials demonstrate how to use the following features in creating Tizen mobile native applications:</p>
+<p>The graphics tutorials demonstrate how to use the following features in creating Tizen native applications:</p>
<ul>
<li><a href="opengl_tutorial_n.htm">OpenGL ES: Using OpenGL ES Graphics</a> <p>Demonstrates how you can use OpenGL ES graphics, OpenGL ES and EvasGL extensions, and implement multi-threaded applications.</p></li>
<li><a href="tbm_tutorial_n.htm">TBM Surface: Providing a Rendering Surface for the Tizen Framework</a> <p>Demonstrates how you can create and manage the Tizen Buffer Manager (TBM) surface.</p></li>
- <li><a href="cairo_tutorial_n.htm">Cairo Integration: Linking Cairo and Evas</a> <p>Demonstrates how you can implement applications linking Cairo to Evas.</p></li>
- <li><a href="widget_tutorial_n.htm">Graphic Widget: Drawing Simple Images Using Evas Objects</a> <p>Demonstrates how you can draw a rectangle or a line image on the screen using Evas objects available on the EFL widget library.</p></li>
+ <li><a href="cairo_tutorial_n.htm">Cairo: Linking Cairo and Evas</a> <p>Demonstrates how you can use Cairo to draw on the image surface and Evas objects to get the image data.</p></li>
+ <li><a href="graphic_comp_tutorial_n.htm">Graphic UI Component: Drawing Simple Images Using Evas Objects</a> <p>Demonstrates how you can draw a rectangle or a line image on the screen using Evas objects available on the EFL UI component library.</p></li>
</ul>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/><br/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li>GLView widget
+ <li>GLView component
<ul class="toc">
- <li><a href="#basic" class="opensection">Creating the Basic Application</a></li>
- <li><a href="#cube" class="opensection">Creating the Cube</a></li>
- <li><a href="#draw" class="opensection">Drawing the Cube with GLView</a></li>
- <li><a href="#render" class="opensection">Rendering the Cube</a></li>
- <li><a href="#animate" class="opensection">Animating the Cube</a></li>
- <li><a href="#widget" class="opensection">Implementing Widget Interaction</a></li>
- <li><a href="#effect" class="opensection">Implementing Effects</a></li>
- <li><a href="#source" class="opensection">Viewing the Entire Cube Source</a></li>
+ <li><a href="#basic">Creating the Basic Application</a></li>
+ <li><a href="#cube">Creating the Cube</a></li>
+ <li><a href="#draw">Drawing the Cube with GLView</a></li>
+ <li><a href="#render">Rendering the Cube</a></li>
+ <li><a href="#animate">Animating the Cube</a></li>
+ <li><a href="#component">Implementing UI Component Interaction</a></li>
+ <li><a href="#effect">Implementing Effects</a></li>
+ <li><a href="#source">Viewing the Entire Cube Source</a></li>
</ul>
</li>
- <li><a class="opensection" href="#multithread">Using OpenGL ES in Multi-threaded Applications</a></li>
- <li><a class="opensection" href="#ext">Using OpenGL ES Extensions</a></li>
- <li><a class="opensection" href="#evas_ext">Using EvasGL Extensions</a></li>
- <li><a class="opensection" href="#direct">Using Direct Rendering</a></li>
- <li><a class="opensection" href="#client">Using Client-side Rotation</a></li>
+ <li><a href="#multithread">Using OpenGL ES in Multi-threaded Applications</a></li>
+ <li><a href="#ext">Using OpenGL ES Extensions</a></li>
+ <li><a href="#evas_ext">Using EvasGL Extensions</a></li>
+ <li><a href="#direct">Using Direct Rendering</a></li>
+ <li><a href="#client">Using Client-side Rotation</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.guides/html/native/graphics/opengles_n.htm">OpenGL ES Guide</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__OPENGL__ES__FRAMEWORK.html">OpenGL ES API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__OPENGL__ES__FRAMEWORK.html">OpenGL ES API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__OPENGL__ES__FRAMEWORK.html">OpenGL ES API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>OpenGL ES: Using OpenGL ES Graphics</h1>
-<div class="cont"><div class="static-cont">
- <p>This tutorial demonstrates how you can handle OpenGL ES graphics with the GLView widget and EvasGL.</p>
+
+ <p>This tutorial demonstrates how you can handle OpenGL ES graphics with the GLView component and EvasGL.</p>
<h2>Warm-up</h2>
<p>Become familiar with the OpenGL ES API basics by learning about:</p>
<ul>
- <li>GLView widget
+ <li>GLView component
<ul>
<li><a href="#basic">Creating the Basic Application</a>
<p>Create a basic application with a multicolored 3D rotating cube using OpenGL ES 2.0 API provided by the GLView library.</p></li>
<p>Render a cube.</p></li>
<li><a href="#animate">Animating the Cube</a>
<p>Create an animation.</p></li>
- <li><a href="#widget">Implementing Widget Interaction</a>
- <p>Create widgets that interact with the rendering.</p></li>
+ <li><a href="#component">Implementing UI Component Interaction</a>
+ <p>Create UI components that interact with the rendering.</p></li>
<li><a href="#effect">Implementing Effects</a>
<p>Create fancy effects for the screen.</p></li>
<li><a href="#source">Viewing the Entire Cube Source</a>
<p>Use client-side rotation when the application is using Direct Rendering.</p></li>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
- <!-- Folds -->
- <ul class="devicespecifications">
-
-
-<li>
- <div class="devicespec-tit">
- <h2 id="basic" name="basic" class="items-tit-h2">Creating the Basic Application</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
- </div>
- <div class="devicespec-con">
-<p>This tutorial demonstrates how to create a multicolored 3D rotating cube using OpenGL ES 2.0 API provided by GLView library. Several concepts are explained, such as the cube geometry, the initialization phase of the model, the adjustment of this very model frame by frame, and the way to design the OpenGL ES rendering loop.</p>
+<h2 id="basic" name="basic">Creating the Basic Application</h2>
+
+<p>This tutorial demonstrates how you can create a multicolored 3D rotating cube using OpenGL ES 2.0 API provided by GLView library. Several concepts are explained, such as the cube geometry, the initialization phase of the model, the adjustment of this very model frame by frame, and the way to design the OpenGL ES rendering loop.</p>
<p>First create a basic application as explained in the Basic application tutorial. This provides a basic UI application skeleton which already makes available the window object that contains the GLView canvas.</p>
<h3>Building the Environment</h3>
<p>Define the application data structure that holds all the objects pertinent for the GLView application:</p>
-<ul class="ul">
+<ul>
<li><span style="font-family: Courier New,Courier,monospace">Evas_Object *win</span>: Application window</li>
<li><span style="font-family: Courier New,Courier,monospace">Evas_Object *conform</span>: Conformant object for indicator</li>
<li><span style="font-family: Courier New,Courier,monospace">Evas_Object *glview</span>: GLView object</li>
<p>There are 2 different methods to call GL functions.</p>
-<ul class="ul"><li>First is to use Elementary GL Helper functions. You have to include <span style="font-family: Courier New,Courier,monospace">Elementary_GL_Helpers.h</span> and define a global variable by using <span style="font-family: Courier New,Courier,monospace">ELEMENTARY_GLVIEW_GLOBAL_DEFINE()</span>. Before calling gl functions, write <span style="font-family: Courier New,Courier,monospace">ELEMENTARY_GLVIEW_GLOBAL_USE()</span>. This tutorial uses this method. The usage is as follows.
+<ul><li>First is to use Elementary GL Helper functions. You have to include <span style="font-family: Courier New,Courier,monospace">Elementary_GL_Helpers.h</span> and define a global variable by using <span style="font-family: Courier New,Courier,monospace">ELEMENTARY_GLVIEW_GLOBAL_DEFINE()</span>. Before calling gl functions, write <span style="font-family: Courier New,Courier,monospace">ELEMENTARY_GLVIEW_GLOBAL_USE()</span>. This tutorial uses this method. The usage is as follows.
<pre class="prettyprint">
#include <Elementary_GL_Helpers.h>
elm_glview_del_func_set(ad->glview, del_gl);
ani = ecore_animator_add(animate_cb, ad->glview);</pre>
-<ul class="ul">
+<ul>
<li>Callback for initialization
<p>The initialization callback is called when the GLView is first created, after a valid OpenGL ES context and surface have been created. This is called from the main loop, just as the 3 other callbacks.</p>
</li>
<li>Callback for resizing
- <p>The resize callback is called whenever the GLView widget is resized. A common action to take here is to reset the viewport.</p>
+ <p>The resize callback is called whenever the GLView component is resized. A common action to take here is to reset the viewport.</p>
</li>
<li>Callback for drawing
<p>The drawing callback is called whenever a new frame has to be drawn. The exact moment when this function is called depends on the policy set when calling.</p>
</ul>
-
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="cube" name="cube" class="items-tit-h2">Creating the Cube</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
- </div>
- <div class="devicespec-con">
+<h2 id="cube" name="cube">Creating the Cube</h2>
+
<p>Creating and the coloring the cube can be separated into two distinct tasks: define the vertices and then add the colors to the faces.</p>
-
<p class="figure">Figure: Cube</p>
- <p
style="text-align:center;"><img alt="Cube" src="../../images/cube.png" /></p>
+ <p class="figure">Figure: Cube</p>
+ <p
align="center"><img alt="Cube" src="../../images/cube.png" /></p>
<p>Declare an array that stores the vertices of the cube in order to make it look like the drawing above.</p>
};
</pre>
-
<p class="figure">Figure: Cube matrix</p>
- <p
style="text-align:center;"><img alt="Cube matrix" src="../../images/cube_matrix.png" /></p>
+ <p class="figure">Figure: Cube matrix</p>
+ <p
align="center"><img alt="Cube matrix" src="../../images/cube_matrix.png" /></p>
<p>Each triangle is defined with three point coordinates, three vertices for each triangle, two triangles per face and six faces, so there are 36 vertices is total.</p>
<p>The next step is to specify a color for each face of the cube. Each color is represented in the RGBA format for the corresponding vertex, where each component is ranged from 0 to 1 where 1 is the maximum value. For example, in 32-byte color space, the RGB color of (16, 147, 237) is translated as (0.0625, 0.57421875, 0.92578125). The A of RGBA stands for the alpha channel, which represents the transparency of the color. All colors defined in this tutorial are opaque to make it simpler, so each alpha value is set to 1.0. In this example, different variants of blue are used for the faces of the cube.</p>
};
</pre>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="draw" name="draw" class="items-tit-h2">Drawing the Cube with GLView</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
- </div>
- <div class="devicespec-con">
+<h2 id="draw" name="draw">Drawing the Cube with GLView</h2>
+
<h3>Mathematical Functions for Matrices</h3>
<p>After the model is initialized, create functionality to manipulate the scene. OpenGL ES 2.0 provided by GLView requires more preliminary work that the previous version of the library, but gives more power and flexibility, although our example does not take much benefit.</p>
<p>First, declare additional global variables for tasks specific to OpenGL ES 2.0. A program object is needed, an identifier for the vertices buffer and another for the colors. Three variables are also required to ensure the connection with the shader language:</p>
-<ul class="ul">
+<ul>
<li><span style="font-family: Courier New,Courier,monospace">mvpLoc</span> is an identifier for model-view-projection matrix.</li>
<li><span style="font-family: Courier New,Courier,monospace">positionLoc</span> is an identifier for the vertex position.</li>
<li><span style="font-family: Courier New,Courier,monospace">colorLoc</span> is an identifier for the vertex color.</li>
}
</pre>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="render" name="render" class="items-tit-h2">Rendering the Cube</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
- </div>
- <div class="devicespec-con">
+<h2 id="render" name="render">Rendering the Cube</h2>
+
<p>We set the viewport at 0,0 corresponding to the bottom left edge of the window, and the height and width of the GL surface. Clear the depth and the color buffers to the values that were selected during initialization. Then call the <span style="font-family: Courier New,Courier,monospace">glUseProgram()</span> function in order to trigger the shader program.</p>
<pre class="prettyprint">glViewport(0, 0, w, h);
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
<p>You now are the proud owner of a nice cube!</p>
- <p class="figure">Figure: Static cube</p>
- <p style="text-align:center;"><img alt="Static cube" src="../../images/static_cube.png" /></p>
+ <p class="figure">Figure: Static cube</p>
+ <p align="center"><img alt="Static cube" src="../../images/static_cube.png" /></p>
+
+<h2 id="animate" name="animate">Animating the Cube</h2>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="animate" name="animate" class="items-tit-h2">Animating the Cube</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
- </div>
- <div class="devicespec-con">
<p><span style="font-family: Courier New,Courier,monospace">Ecore_Animator</span> is used to create an animation.</p>
<pre class="prettyprint">static Eina_Bool
animate_cb(void *data)
appdata_s *ad = data;
float dx = 0, dy = 0;
- if(ad->mouse_down)
+ if (ad->mouse_down)
{
dx = ev->cur.canvas.x - ev->prev.canvas.x;
dy = ev->cur.canvas.y - ev->prev.canvas.y;
evas_object_event_callback_add(ad->glview, EVAS_CALLBACK_MOUSE_UP, mouse_up_cb, ad);
evas_object_event_callback_add(ad->glview, EVAS_CALLBACK_MOUSE_MOVE, mouse_move_cb, ad);
</pre>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="widget" name="widget" class="items-tit-h2">Implementing Widget Interaction</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
- </div>
- <div class="devicespec-con">
-<p>Consider using widget to control some aspects of the rendering. For example, use some sliders to control the shape of the cube. Declare 3 sliders to play with the scaling coordinates of the cube.</p>
+
+<h2 id="component" name="component">Implementing UI Component Interaction</h2>
+
+<p>Consider using UI component to control some aspects of the rendering. For example, use some sliders to control the shape of the cube. Declare 3 sliders to play with the scaling coordinates of the cube.</p>
<pre class="prettyprint">typedef struct appdata
{
Evas_Object *slx;
customMutlMatrix(ad->mvp, ad->view, ad->model);
</pre>
-<p>Consider also using a colorpicker to change the background. To achieve this, add a colorselector widget:</p>
+<p>Consider also using a colorpicker to change the background. To achieve this, add a colorselector component:</p>
<pre class="prettyprint">typedef struct appdata
{
Evas_Object *cs;
}
</pre>
-<p>Build the widget with a default palette and add it to the GUI:</p>
+<p>Build the UI component with a default palette and add it to the GUI:</p>
<pre class="prettyprint">ad->cs = elm_colorselector_add(ad->inner_box);
elm_colorselector_mode_set(ad->cs, ELM_COLORSELECTOR_BOTH);
elm_colorselector_palette_name_set(ad->cs, "default");
</pre>
<p>When rendering the cube, retrieve the currently selected color to define the color buffer. The colors from the colorselector vary from 0 to 255, which needs to be converted to the color format of OpenGL ES.</p>
-<p>Build the widget with a default palette and add it to the GUI:</p>
+<p>Build the UI component with a default palette and add it to the GUI:</p>
<pre class="prettyprint">int r, g, b, a;
elm_colorselector_color_get(ad->cs, &r, &g, &b, &a);
glClearColor(r/255.0, g/255.0, b/255.0, a/255.0);
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
</pre>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="effect" name="effect" class="items-tit-h2">Implementing Effects</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
- </div>
- <div class="devicespec-con">
+<h2 id="effect" name="effect">Implementing Effects</h2>
+
<p>Create a button that resets the scene by putting the background color to black and makes the cube bounce back to its original scale. First add the button to the application data object:</p>
<pre class="prettyprint">typedef struct appdata
}
</pre>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="source" name="source" class="items-tit-h2">Viewing the Entire Cube Source</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
- </div>
- <div class="devicespec-con">
+<h2 id="source" name="source">Viewing the Entire Cube Source</h2>
+
<p>The following code snippet contains the full code of the cube example. The details are explained in the other use cases.</p>
-<pre class="prettyprint">/*
- * Copyright (c) 2014 Samsung Electronics Co., Ltd All Rights Reserved
- *
- */
+<pre class="prettyprint">// Copyright (c) 2014 Samsung Electronics Co., Ltd All Rights Reserved
#include <app.h>
#include <Elementary.h>
typedef struct appdata
{
- // Elm_Widgets
+ // Elm_UI components
Evas_Object *win;
Evas_Object *conform;
Evas_Object *glview;
0.52734375f, 0.76171875f, 0.92578125f, 1.0f
};
-/* Vertex Shader Source */
+// Vertex Shader Source
static const char vertex_shader[] =
"precision mediump float;"
"uniform mat4 u_mvpMat;"
" v_color = a_color;"
"}";
-/* Fragment Shader Source */
+// Fragment Shader Source
static const char fragment_shader[] =
"varying lowp vec4 v_color;"
"void main()"
static void win_back_cb(void *data, Evas_Object *obj, void *event_info)
{
appdata_s *ad = data;
- /* Let window go to hidden state. */
+ // Let window go to hidden state
elm_win_lower(ad->win);
}
static void create_base_gui(appdata_s *ad)
{
- /* Window */
+ // Window
elm_config_accel_preference_set("opengl");
ad->win = elm_win_util_standard_add(PACKAGE, PACKAGE);
elm_win_autodel_set(ad->win, EINA_TRUE);
elm_object_content_set(ad->conform, ad->main_box);
- /* Show window after base gui is set up */
+ // Show the window after the base GUI is set up
evas_object_show(ad->win);
}
{
Ecore_Animator *ani;
- /* Create and initialize GLView */
+ // Create and initialize GLView
ad->glview = elm_glview_add(ad->main_box);
ELEMENTARY_GLVIEW_GLOBAL_USE(ad->glview);
evas_object_size_hint_align_set(ad->glview, EVAS_HINT_FILL, EVAS_HINT_FILL);
evas_object_size_hint_weight_set(ad->glview, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
- /* Request a surface with alpha and a depth buffer */
+ // Request a surface with alpha and a depth buffer
elm_glview_mode_set(ad->glview, ELM_GLVIEW_DEPTH);
- /* The resize policy tells GLView what to do with the surface when it
- * resizes. ELM_GLVIEW_RESIZE_POLICY_RECREATE will tell it to
- * destroy the current surface and recreate it to the new size.
- */
+ // The resize policy tells GLView what to do with the surface when it
+ // resizes. ELM_GLVIEW_RESIZE_POLICY_RECREATE will tell it to
+ // destroy the current surface and recreate it to the new size
elm_glview_resize_policy_set(ad->glview, ELM_GLVIEW_RESIZE_POLICY_RECREATE);
- /* The render policy sets how GLView should render GL code.
- * ELM_GLVIEW_RENDER_POLICY_ON_DEMAND will have the GL callback
- * called only when the object is visible.
- * ELM_GLVIEW_RENDER_POLICY_ALWAYS would cause the callback to be
- * called even if the object were hidden.
- */
+ // The render policy sets how GLView should render GL code.
+ // ELM_GLVIEW_RENDER_POLICY_ON_DEMAND will have the GL callback
+ // called only when the object is visible.
+ // ELM_GLVIEW_RENDER_POLICY_ALWAYS would cause the callback to be
+ // called even if the object were hidden.
elm_glview_render_policy_set(ad->glview, ELM_GLVIEW_RENDER_POLICY_ON_DEMAND);
- /* The initialize callback function gets registered here */
+ // The initialize callback function gets registered here
elm_glview_init_func_set(ad->glview, init_gl);
- /* The delete callback function gets registered here */
+ // The delete callback function gets registered here
elm_glview_del_func_set(ad->glview, del_gl);
- /* The resize callback function gets registered here */
+ // The resize callback function gets registered here
elm_glview_resize_func_set(ad->glview, resize_gl);
- /* The render callback function gets registered here */
+ // The render callback function gets registered here
elm_glview_render_func_set(ad->glview, draw_gl);
- /* Add the GLView to the box and show it */
+ // Add the GLView to the box and show it
elm_box_pack_end(ad->main_box, ad->glview);
evas_object_show(ad->glview);
- /* This adds an animator so that the app will regularly
- * trigger updates of the GLView using elm_glview_changed_set().
- *
- * NOTE: If you delete GL, this animator will keep running trying to access
- * GL so this animator needs to be deleted with ecore_animator_del().
- */
+ // This adds an animator so that the app will regularly
+ // trigger updates of the GLView using elm_glview_changed_set()
+ //
+ // NOTE: If you delete GL, this animator will keep running trying to access
+ // GL so this animator needs to be deleted with ecore_animator_del()
ani = ecore_animator_add(animate_cb, ad->glview);
evas_object_data_set(ad->glview, "ani", ani);
evas_object_data_set(ad->glview, "ad", ad);
evas_object_event_callback_add(ad->glview, EVAS_CALLBACK_MOUSE_UP, mouse_up_cb, ad);
evas_object_event_callback_add(ad->glview, EVAS_CALLBACK_MOUSE_MOVE, mouse_move_cb, ad);
- /* Set rotation variables */
+ // Set rotation variables
ad->xangle = 45.0f;
ad->yangle = 45.0f;
ad->zangle = 0.0f;
static bool app_create(void *data)
{
- /* Hook to take necessary actions before main event loop starts
- *Initialize UI resources and application's data
- *If this function returns true, the main loop of application starts
- *If this function returns false, the application is terminated */
+ // Hook to take necessary actions before main event loop starts
+ // Initialize UI resources and application's data
+ // If this function returns true, the main loop of application starts
+ // If this function returns false, the application is terminated
appdata_s *ad = data;
create_base_gui(ad);
static void app_control(app_control_h app_control, void *data)
{
- /* Handle the launch request. */
+ // Handle the launch request
}
static void app_pause(void *data)
{
- /* Take necessary actions when application becomes invisible. */
+ // Take necessary actions when application becomes invisible
}
static void app_resume(void *data)
{
- /* Take necessary actions when application becomes visible. */
+ // Take necessary actions when application becomes visible
}
static void app_terminate(void *data)
{
- /* Release all resources. */
+ // Release all resources
}
int main(int argc, char *argv[])
return ret;
}
</pre>
- </div>
- </li>
+
+<h2 id="multithread" name="multithread">Using OpenGL ES in Multi-threaded Applications</h2>
- <li>
- <div class="devicespec-tit">
- <h2 id="multithread" name="multithread" class="items-tit-h2">Using OpenGL ES in Multi-threaded Applications</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
- </div>
- <div class="devicespec-con">
-
<p>To use OpenGL ES in multi-threaded applications, set up the rendering view and initialize the application:</p>
<ol>
<li>Manage the Elementary GLView:
-<ol>
+<ol type="a">
-<li>Create a single GLView widget covering the whole window using the <span style="font-family: Courier New,Courier,monospace;">app_create()</span> function:
+<li>Create a single GLView component covering the whole window using the <span style="font-family: Courier New,Courier,monospace;">app_create()</span> function:
<pre class="prettyprint">
typedef struct
{
Eina_Lock lck;
- /* RT to main loop */
+ // RT to main loop
Ecore_Pipe *pipe;
- /* Main loop to RT: direct pipe file descriptors */
+ // Main loop to RT: direct pipe file descriptors
int rt_rpipefd, rt_wpipefd;
- /* General OpenGL ES data: program to draw a texture fullscreen */
+ // General OpenGL ES data: program to draw a texture fullscreen
GLuint vtx_shader[1], fgmt_shader[1], program[1], vbo[2];
Evas_GL_Context *main_ctx;
- /* Render thread data */
+ // Render thread data
struct
{
Ecore_Thread *thread;
Eina_Bool ready;
} th;
- /* Pool of Target_Buffer: empty, ready (locked access) */
+ // Pool of Target_Buffer: empty, ready (locked access)
Eina_Inlist *buffers_empty;
Eina_Inlist *buffers_ready;
Target_Buffer *last_buffer;
glShaderSource(ad->fgmt_shader[0], 1, &p, NULL);
glCompileShader(ad->fgmt_shader[0]);
ad->program[0] = glCreateProgram();
- glAttachShader(ad->program[0], ad->vtx_shader[0]);
- glAttachShader(ad->program[0], ad->fgmt_shader[0]);
+ glAttachShader(ad->program[0], ad->vtx_shader[0]);
+ glAttachShader(ad->program[0], ad->fgmt_shader[0]);
</pre>
</li>
</ol>
<ol>
<li>Since most of EFL is not thread-safe, certain operations cannot be executed from another thread and you must use the main loop instead.
<p>Establish a communication channel from the render thread to the main loop:</p>
-<ol>
+<ol type="a">
<li>Create an <span style="font-family: Courier New,Courier,monospace;">ecore_pipe</span> channel.
<p>EFL provides a simple tool to send messages to the main thread using pipes. Ecore Pipe is the abstraction layer around pipe objects, and is the easiest way to send a message from any thread back to the main thread.</p>
<pre class="prettyprint">
<p>Establish a communication channel from the main thread to the render thread:</p>
-<ol>
+<ol type="a">
<li>Create a pipe.
<p>The easiest way to send a simple message in EFL in Tizen is to rely on a POSIX pipe file handle:</p>
<pre class="prettyprint">
evas_gl_make_current(evgl, ad->th.sfc, ad->th.ctx);
while (!ecore_thread_check(ad->th.thread))
{
- /* Prepare new frame */
+ // Prepare new frame
glViewport(0, 0, BUFFER_WIDTH, BUFFER_HEIGHT);
glBindFramebuffer(GL_FRAMEBUFFER, target->fbo);
<li>Handle input events:
<p>With the above setup environment, pass input events from the main thread to any thread.</p>
-<ol>
+<ol type="a">
<li>Add the following code to the <span style="font-family: Courier New,Courier,monospace;">app_create()</span> function to catch mouse up or down events on the GLView object:
<pre class="prettyprint">
evas_object_event_callback_add(glview, EVAS_CALLBACK_MOUSE_DOWN, mouse_down_cb, &ad);
<pre class="prettyprint">
thread_run(void *data, Ecore_Thread *th EINA_UNUSED)
{
- /* Prepare new frame */
+ // Prepare new frame
glViewport(0, 0, BUFFER_WIDTH, BUFFER_HEIGHT);
glBindFramebuffer(GL_FRAMEBUFFER, target->fbo);
evas_gl_make_current(evgl, ad->th.sfc, ad->th.ctx);
thread_draw(App_Data *ad, Evas_GL_API *gl)
{
// Draw function
- GL()glClearColor(ad->th.c1, ad->th.c2, ad->th.c3, ad->th.c4);
- GL()glClear(GL_COLOR_BUFFER_BIT);
+ glClearColor(ad->th.c1, ad->th.c2, ad->th.c3, ad->th.c4);
+ glClear(GL_COLOR_BUFFER_BIT);
}
</pre>
</li>
<p>The above code works in some cases but depending on the GPU and driver, there can be synchronization issues between the 2 threads, as one is drawing and the other is reading from the same object. Remember that most GL commands are asynchronous.</p>
<p>You can synchronize data between threads:</p>
-<ul class="ul">
+<ul>
<li>Using fence sync objects
<p>Use the <span style="font-family: Courier New,Courier,monospace;">fence_sync</span> extension:</p>
<pre class="prettyprint">
</li>
</ol>
-
-
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="ext" name="ext" class="items-tit-h2">Using OpenGL ES Extensions</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+<h2 id="ext" name="ext">Using OpenGL ES Extensions</h2>
<p>EvasGL, offering an abstraction layer above OpenGL ES, provides an easy mechanism to check for support and use OpenGL ES extensions:</p>
</li>
</ol>
- </div>
- </li>
-
+<h2 id="evas_ext" name="evas_ext">Using EvasGL Extensions</h2>
- <li>
- <div class="devicespec-tit">
- <h2 id="evas_ext" name="evas_ext" class="items-tit-h2">Using EvasGL Extensions</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
- </div>
- <div class="devicespec-con">
<p>EvasGL is not only an abstraction layer on top of OpenGL ES, but also on top of EGL and GLX. As such, EvasGL tries to imitate EGL in a platform-independent manner, and exposes the underlying platform extensions when it can.</p>
<p>Image and sync support are the most commonly used EvasGL extensions. Both can be used for multi-thread rendering, but EvasGL images can also be used to share images between contexts.</p>
// fence_sync must be supported
</pre>
-
- </div>
- </li>
-
-
- <li>
- <div class="devicespec-tit">
- <h2 id="direct" name="direct" class="items-tit-h2">Using Direct Rendering</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
- </div>
- <div class="devicespec-con">
+<h2 id="direct" name="direct">Using Direct Rendering</h2>
<p>To enhance rendering performance, the Direct Rendering option is supported.</p>
<h3>GLView</h3>
<pre class="prettyprint">
-Evas_Object *gl;
-gl = elm_glview_add(win);
-
-elm_glview_mode_set(gl, ELM_GLVIEW_DEPTH | ELM_GLVIEW_DIRECT);</pre>
+elm_config_accel_preference_set("opengl:depth24:stencil8:msaa_high");
+Evas_Object *win = elm_win_util_standard_add("sample", "sample");
+
+Evas_Object *glview = elm_glview_add(win);
+elm_glview_mode_set(glview, ELM_GLVIEW_DEPTH_24 | ELM_GLVIEW_STENCIL_8 | ELM_GLVIEW_MULTISAMPLE_HIGH);
+</pre>
<p>In GLView, the <span style="font-family: Courier New,Courier,monospace;">ELM_GLVIEW_DIRECT</span> option is one of GLView mode's enums and the option can be enabled using the <span style="font-family: Courier New,Courier,monospace;">elm_glview_mode_set()</span> function.</p>
+<p>To use the Direct Rendering mode, set the same option values (depth, stencil, and MSAA) to a rendering engine and a GLView object. You can set the option values to a rendering engine using the <span style="font-family: Courier New,Courier,monospace">elm_config_accel_preference_set()</span> function and to a GLView object using the <span style="font-family: Courier New,Courier,monospace">elm_glview_mode_set()</span> function. If the GLView object option values are bigger or higher than the rendering engine's, the Direct Rendering mode is disabled.</p>
+
<h3>EvasGL</h3>
<pre class="prettyprint">
-Evas_GL_Config *cfg;
+elm_config_accel_preference_set("opengl:depth24:stencil8:msaa_high");
+Evas_Object *win = elm_win_util_standard_add("sample", "sample");
+
+Evas_GL_Config *cfg = evas_gl_config_new();
cfg = evas_gl_config_new();
-cfg->options_bits = EVAS_GL_OPTIONS_DIRECT;</pre>
+cfg->color_format = EVAS_GL_RGB_888;
+cfg->depth_bits = EVAS_GL_DEPTH_BIT_24;
+cfg->stencil_bits = EVAS_GL_STENCIL_BIT_8;
+cfg->options_bits = EVAS_GL_OPTIONS_DIRECT;
+cfg->multisample_bits = EVAS_GL_MULTISAMPLE_HIGH;
+</pre>
-<p>In EvasGL, the <span style="font-family: Courier New,Courier,monospace;">EVAS_GL_OPTIONS_DIRECT</span> is one of EvasGL's config options and the option can be enabled by setting the <span style="font-family: Courier New,Courier,monospace;">Evas_GL_Config</span> option.</p>
+<p>In EvasGL, the <span style="font-family: Courier New,Courier,monospace;">EVAS_GL_OPTIONS_DIRECT</span> is one of EvasGL's config options and the option can be enabled by setting the <span style="font-family: Courier New,Courier,monospace;">Evas_GL_Config</span> option. To use the Direct Rendering mode, set the same option values (depth, stencil, and MSAA) to a rendering engine and an <span style="font-family: Courier New,Courier,monospace;">Evas_GL_Config</span> object. You can set the option values to a rendering engine using the <span style="font-family: Courier New,Courier,monospace">elm_config_accel_preference_set()</span> function. If the <span style="font-family: Courier New,Courier,monospace;">Evas_GL_Config</span> object option values are bigger or higher than the rendering engine's, the Direct Rendering mode is disabled.</p>
<table class="note">
<tbody>
<th class="note">Caution</th>
</tr>
<tr>
- <td class="note">In case the GL functions are called outside the render callback function, call <span style="font-family: Courier New,Courier,monospace;">evas_gl_make_current()</span> before the GL function calls. This solution only works if the target surface is not an <span style="font-family: Courier New,Courier,monospace;">Evas_GL_Surface</span> with Direct Rendering enabled.
+ <td class="note">In the render callback function, call only GL functions.
+<p>In case the GL functions are called outside the render callback function, you must call the <span style="font-family: Courier New,Courier,monospace;">evas_gl_make_current()</span> function before the GL function calls. However, this results in a performance degradation due to context switching, and only works if the target surface is not an <span style="font-family: Courier New,Courier,monospace;">Evas_GL_Surface</span> with Direct Rendering enabled.</p>
<p>If the target buffer is an <span style="font-family: Courier New,Courier,monospace;">Evas_GL_Surface</span> with Direct Rendering enabled, all GL functions must be called from the render callback function only. All other operations can break the rendering order and the unexpected rendering will occur.</p></td>
</tr>
</tbody>
</table>
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="client" name="client" class="items-tit-h2">Using Client-side Rotation</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="client" name="client">Using Client-side Rotation</h2>
+
<p>The Client Side Rotation is a special value that indicates to EFL that the application will handle the view rotation when the device is rotated. This is needed only when the application requests Direct Rendering.</p>
if (rotation % 180)
{
- // adjust gl size
+ // Adjust gl size
}
}</pre>
<p>To get the current rotation of the view, in degrees, call the <span style="font-family: Courier New,Courier,monospace;">evas_gl_rotation_get()</span> in order to properly handle the current rotation of the view. It will always return 0 unless the option <span style="font-family: Courier New,Courier,monospace;">EVAS_GL_OPTIONS_CLIENT_SIDE_ROTATION</span> has been set. Indeed, in case of Direct Rendering to the back buffer, the client application is responsible for properly rotating its view. This can generally be done by applying a rotation to a view matrix.</p>
-</div>
- </li>
-
- </ul>
-</div>
-</div>
+
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/><br/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a href="#create" class="opensection">Managing the TBM Surface</a></li>
+ <li><a href="#create">Managing the TBM Surface</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.guides/html/native/graphics/tbm_n.htm">TBM Surface Guide</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UI__TBM__SURFACE__MODULE.html">TBM Surface API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UI__TBM__SURFACE__MODULE.html">TBM Surface API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UI__TBM__SURFACE__MODULE.html">TBM Surface API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>TBM Surface: Providing a Rendering Surface for the Tizen Framework</h1>
-<div class="cont"><div class="static-cont">
+
<p>This tutorial demonstrates how you can create, destroy, map, unmap, and access a surface that is a kind of graphic buffer.</p>
<p>Create and manage the TBM surface.</p></li>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
- <!-- Folds -->
- <ul class="devicespecifications">
-
- <li>
- <div class="devicespec-tit">
- <h2 id="create" name="create" class="items-tit-h2">Managing the TBM Surface</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+<h2 id="create" name="create">Managing the TBM Surface</h2>
+
<p>To create the TBM surface:</p>
<ol>
-<li><p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UI__TBM__SURFACE__MODULE.html">TBM Surface</a> API, include the <span style="font-family: Courier New,Courier,monospace"><tbm_surface.h></span> header file in your application:</p>
+<li><p>To use the functions and data types of the TBM Surface API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UI__TBM__SURFACE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UI__TBM__SURFACE__MODULE.html">wearable</a> applications, include the <span style="font-family: Courier New,Courier,monospace"><tbm_surface.h></span> header file in your application:</p>
<pre class="prettyprint">
#include <tbm_surface.h>
</pre></li>
</li>
</ol>
- </div>
- </li>
-
- </ul>
-</div>
-</div>
-
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
<li><a href="#status">Getting the Geofence Event State</a>
<p>Get the success or failure state of each event.</p></li>
<li><a href="#alerts">Getting Geofence Alerts</a>
- <p>Define the geofence and track state changes.<p></li>
+ <p>Define the geofence and track state changes.</p></li>
<li><a href="#track">Tracking the User for Geofence Alerts</a>
- <p>Track the user location and update the geofence state.<p></li>
+ <p>Track the user location and update the geofence state.</p></li>
<li><a href="#info">Retrieving Geofence Information</a>
<p>Acquire information on geofences.</p></li></ul>
<pre class="prettyprint">
#include <geofence_manager.h>
</pre></li>
-<li><p>Create a geofence manager handle using the <span style="font-family: Courier New,Courier,monospace">geofence_manager_create()</span> function:
+<li><p>Create a geofence manager handle using the <span style="font-family: Courier New,Courier,monospace">geofence_manager_create()</span> function:</p>
<pre class="prettyprint">
geofence_manager_h manager;
geofence_manager_create(&manager);
geofence_manager_add_fence(manager, fence_h, &geofence_id);
</pre></li>
-<li><p>Start the geofence service using the <span style="font-family: Courier New,Courier,monospace">geofence_manager_start()</span> function.
+<li><p>Start the geofence service using the <span style="font-family: Courier New,Courier,monospace">geofence_manager_start()</span> function. </p>
<p>This call is asynchronous and only initiates the process of starting the service. Once the service is started, the registered callbacks are invoked when their corresponding events take place. To know when the service becomes enabled, use the <span style="font-family: Courier New,Courier,monospace">geofence_manager_set_geofence_state_changed_cb()</span> callback.</p>
<pre class="prettyprint">
geofence_manager_start(manager);
geofence_get_radius(fence_h, &radius);
geofence_get_address(fence_h, &address);
</pre></li>
-<li>Retrieve the Wi-Fi or Bluetooth geofence information:</p>
+<li>Retrieve the Wi-Fi or Bluetooth geofence information:
<pre class="prettyprint">
char *bssid;
char *ssid;
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a href="../../../../org.tizen.guides/html/native/location/location_guide_n.htm">Location Guide</a></li>
+ <li><a href="../../../../org.tizen.guides/html/native/location/location_n.htm">Location Guide</a></li>
<li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__LOCATION__FRAMEWORK.html">Location API for Mobile Native</a></li>
<li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__LOCATION__FRAMEWORK.html">Location API for Wearable Native</a></li>
</ul>
<li><p>When the update is received, you can, for example, update the variables that store the current position:</p>
<pre class="prettyprint">
static double user_latitude, user_longitude;
-static void position_updated(double latitude, double longitude, double altitude, time_t timestamp, void *user_data)
+static void position_updated(double latitude, double longitude, double altitude,
+ time_t timestamp, void *user_data)
{
user_latitude = latitude;
user_longitude = longitude;
int cur_azimuth, cur_elevation, cur_prn, cur_snr;
static bool
-capi_gps_status_get_satellites_cb(unsigned int azimuth, unsigned int elevation, unsigned int prn, int snr, bool is_in_use, void *user_data)
+capi_gps_status_get_satellites_cb(unsigned int azimuth, unsigned int elevation, unsigned int prn,
+ int snr, bool is_in_use, void *user_data)
{
cur_azimuth = azimuth;
cur_elevation = elevation;
static int numofactive, numofinview;
static void
-capi_gps_status_satellite_updated_cb(int num_of_active, int num_of_inview, time_t timestamp, void *user_data)
+capi_gps_status_satellite_updated_cb(int num_of_active, int num_of_inview,
+ time_t timestamp, void *user_data)
{
numofinview = num_of_active;
if (num_of_inview > 0)
<li><p>Define the position and velocity callback functions:</p>
<pre class="prettyprint">
-void position_updated(double latitude, double longitude, double altitude, time_t timestamp, void *user_data) {}
-void velocity_updated(double speed, double direction, double climb, time_t timestamp, void *user_data) {}
+void position_updated(double latitude, double longitude, double altitude,
+ time_t timestamp, void *user_data) {}
+void velocity_updated(double speed, double direction, double climb,
+ time_t timestamp, void *user_data) {}
</pre>
<p>Within the function, you can collect obtained data to get the points you have visited, to calculate traveled distance more precisely, or to calculate the average speed or climb.</p></li></ol></li>
<li><p>Use the <span style="font-family: Courier New,Courier,monospace;">location_manager_get_location()</span> function to get all of the above 10 values at once:</p>
<pre class="prettyprint">
-location_manager_get_location(manager, &altitude, &latitude, &longitude, &climb, &direction, &speed, &level, &horizontal, &vertical, &timestamp);
+location_manager_get_location(manager, &altitude, &latitude, &longitude, &climb,
+ &direction, &speed, &level, &horizontal, &vertical, &timestamp);
</pre></li>
<li><p>If the location service is currently unavailable, get the last values recorded by the location manager when the GPS signal was available. To get the information, use the following functions:</p>
<ul>
<li><a href="geofence_tutorial_n.htm">Geofence: Creating and Using Geofences</a>
<p>Demonstrates how you can create and use geofences.</p></li>
- </ul>
- <ul>
- <li><a href="maps_tutorial_n.htm">Maps Service: Geocoding, Searching place, and Routing</a>
- <p>Demonstrates how you can create and use maps service.</p></li>
+ <li><a href="maps_tutorial_n.htm">Maps Service: Using the Map Service</a>
+ <p>Demonstrates how you can use the map service to query geocodes and routes, and search for places.</p></li>
+
</ul>
</script>
</body>
-</html>
+</html>
\ No newline at end of file
<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>Maps: Using Maps API in Tizen Applications</title>
+<title>Maps Service: Using the Map Service</title>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
</div>
<div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a class="opensection" href="#initial">Initializing the Maps Services</a></li>
- <li><a class="opensection" href="#geocode">Using Geocode and Reverse Geocode Services</a></li>
- <li><a class="opensection" href="#search_place">Using Place Search Services</a></li>
- <li><a class="opensection" href="#search_route">Using Routing Service</a></li>
- <li><a class="opensection" href="#cancel">Canceling the Service Request</a></li>
- <li><a class="opensection" href="#address">Recognizing Address information</a></li>
- <li><a class="opensection" href="#place">Recognizing Place information</a></li>
- <li><a class="opensection" href="#route">Recognizing Route information</a></li>
- <li><a class="opensection" href="#preference">Tuning API requests with preferences</a></li>
+ <li><a href="#initial">Initializing the Map Service</a></li>
+ <li><a href="#geocode">Using Geocode and Reverse Geocode Services</a></li>
+ <li><a href="#search_place">Using the Place Search Service</a></li>
+ <li><a href="#search_route">Using the Routing Service</a></li>
+ <li><a href="#cancel">Canceling the Service Request</a></li>
+ <li><a href="#address">Recognizing the Address Information</a></li>
+ <li><a href="#place">Recognizing the Place Information</a></li>
+ <li><a href="#route">Recognizing the Route Information</a></li>
+ <li><a href="#preference">Customizing the Service Requests</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
</div>
-<div id="container">
- <div id="contents">
- <div class="content">
- <h1>Location: Using Maps Services and Information such as geocode, place, and route in Tizen Applications</h1>
- <div class="cont">
- <div class="static-cont">
- <p>The tutorial demonstrates how you can use Maps API in Tizen Applications.</p>
- <p>Two Maps Providers are supported:
- <ul>
- <li><a href="https://developer.here.com">HERE Maps</a> based on <a href="https://developer.here.com/rest-apis">HERE REST API</a></li>
- <li><a href="http://developer.mapquest.com">MapQuest</a> based on <a href="http://open.mapquestapi.com">Open MapQuest API</a></li>
- </ul>
- <p>A user have to get access key of Maps Providers from developer sites</p>
- <p>Note that Maps Service must be used under "Term of Use" of Maps Service Providers.</p>
-
- <h2>Warm-up</h2>
- <p>Become familiar with Location Maps API basics by learning about:</p>
- <ul>
- <li><a class="opensection" href="#initial">Initializing the Maps Service</a>
- <p>Select Maps Provider, check available capabilities, fulfill the
- prerequisites, creates the instance of Maps Service and destroys it
- when no longer needed.</p></li>
-
- <li><a class="opensection" href="#geocode">Using Geocode and Reverse Geocode Services</a>
- <p>Getting the Geocode of a specified place and Reverse Geocode,
- corresponding to the specified geographical coordinates.</p></li>
-
- <li><a class="opensection" href="#search_place">Using Place Search Service</a>
- <p>Searching for places near a specified geographical position or inside
- specified geographical area.</p></li>
-
- <li><a class="opensection" href="#search_route">Using Routing Service</a>
- <p>Querying the route from point A to point B, optionally, passing through
- a number of specified way points.</p></li>
-
- <li><a class="opensection" href="#cancel">Canceling the Service request</a></li>
- </ul>
-
- <h2>Follow-up</h2>
- <p>Once we have learned the basics of the Location Maps API, we can now move on
- to other useful tasks, including:</p>
- <ul>
- <li><a class="opensection" href="#address">Recognizing Address information</a>
- <p>Parsing the information, obtained from Geocode Service.</p></li>
-
- <li><a class="opensection" href="#place">Recognizing Place information</a>
- <p>Parsing the information, obtained from Place Search Service.</p></li>
-
- <li><a class="opensection" href="#route">Recognizing Route information</a>
- <p>Parsing the information, obtained from Routing Service.</p></li>
-
- <li><a class="opensection" href="#preference">Tuning API requests with preferences</a>
- <p>Preparing and sending via API request a set of extra preferences, allowing the
- Maps Provider to generate more accurate result.</p></li>
- </ul>
-
-
- <div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
-
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="initial" name="initial" class="items-tit-h2">Initializing the Maps Service</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
- <p>Using Maps API in maps-aware application requires:</p>
- <ol>
- <li><p>Selecting one of available Maps Providers,</p>
- <li><p>Creating the Maps Service, relying on the selected Maps Provider,</p>
- <li><p>Setting Maps Provider access key and other preferences,</p>
- <li><p>Using Maps Services requests (Geocode, Place Search, Routing),</p>
- <li><p>Destroying Maps Service.</p>
- </ol>
- <p>This Section explains steps 1, 2, 3 and 5. Step 4 is explained in further Sections.</p>
- <br>
- <p>Below demonstrated how to start using the Maps Service and API.</p>
- <ol>
- <li><p>To use the features of Location Maps API, include the
- <span style="font-family: Courier New,Courier,monospace;"> <maps_service.h> </span>
- header file in your application:</p>
- <pre class="prettyprint">#include <maps_service.h></pre>
- </li>
-
- <li><p>Maps Service instance is relying on a particular Maps Provider. In order to get the list of available
- Maps Providers use
- <span style="font-family: Courier New,Courier,monospace;"> maps_service_foreach_provider()</span>:</p>
- <pre class="prettyprint">
+<div id="container"><div id="contents"><div class="content">
+
+<h1>Maps Service: Using the Map Service</h1>
+
+
+<p>This tutorial demonstrates how you can use the map service to query geocodes and routes, and search for places.</p>
+
+<table class="note">
+<tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">This feature is supported in mobile applications only.</td>
+ </tr>
+ </tbody>
+ </table>
+
+
+<h2>Warm-up</h2>
+<p>Become familiar with the Maps Service API basics by learning about:</p>
+<ul>
+ <li><a href="#initial">Initializing the Map Service</a>
+ <p>Select a map provider, check available capabilities, fulfill the prerequisites, create the Maps Service instance, and destroy it when no longer needed.</p></li>
+
+ <li><a href="#geocode">Using Geocode and Reverse Geocode Services</a>
+ <p>Get the geocode of a specified place, and the reverse geocode corresponding to specified geographical coordinates.</p></li>
+
+ <li><a href="#search_place">Using the Place Search Service</a>
+ <p>Search for places near a specified geographical position or inside a specified geographical area.</p></li>
+
+ <li><a href="#search_route">Using the Routing Service</a>
+ <p>Query the route from point A to point B, optionally passing through a number of specified waypoints.</p></li>
+
+ <li><a href="#cancel">Canceling the Service Request</a>
+ <p>Cancel the map service (geocode, routing, or place search) request.</p></li>
+</ul>
+
+<h2>Follow-up</h2>
+<p>Once we have learned the basics of the Maps Service API, we can now move on to more advanced tasks, including:</p>
+<ul>
+ <li><a href="#address">Recognizing the Address Information</a>
+ <p>Parse the information obtained from the reverse geocode service.</p></li>
+
+ <li><a href="#place">Recognizing the Place Information</a>
+ <p>Parse the information obtained from the place search service.</p></li>
+
+ <li><a href="#route">Recognizing the Route Information</a>
+ <p>Parse the information obtained from the routing service.</p></li>
+
+ <li><a href="#preference">Customizing the Service Requests</a>
+ <p>Prepare and send a set of extra preferences through a map service request and allow the map provider to generate a more accurate result.</p></li>
+</ul>
+
+
+
+<h2 id="initial" name="initial">Initializing the Map Service</h2>
+
+<p>To start using the map service:</p>
+<ol>
+<li><p>To use the functions and data types of the Maps Service API, include the <span style="font-family: Courier New,Courier,monospace;"> <maps_service.h> </span> header file in your application:</p>
+<pre class="prettyprint">
+#include <maps_service.h>
+</pre>
+</li>
+
+<li>The Maps Service instance relies on a particular map provider. To get a list of available map providers, use the <span style="font-family: Courier New,Courier,monospace;">maps_service_foreach_provider()</span> function:
+<pre class="prettyprint">
static bool _maps_service_provider_info_cb(char* maps_provider, void* user_data)
{
- /* Handle the Maps Provider name, passed as maps_provider */
- return bool;
+ // Handle the map provider name, passed as maps_provider
+
+ return bool;
}
void get_available_providers()
{
- void *user_data = NULL;
- const int error = maps_service_foreach_provider(
- _maps_service_provider_info_cb, user_data);
-
- if(error == MAPS_ERROR_NONE) {
- /* Chose one of providers from the available_providers vector */
- } else {
- /* Handle error */
- }
-}
- </li>
-
- <li><p>Create an instance of Maps Service using the
- <span style="font-family: Courier New,Courier,monospace;"> maps_service_create()</span> function before you use Maps API.</p>
- <pre class="prettyprint">
+ void *user_data = NULL;
+ const int error = maps_service_foreach_provider(_maps_service_provider_info_cb, user_data);
+
+ if (error == MAPS_ERROR_NONE)
+ {
+ // Select a provider from the available_providers vector
+ }
+ else
+ {
+ // Error handling
+ }
+}
+</pre>
+</li>
+
+<li>Before you use the Maps Service API, create a Maps Service instance using the <span style="font-family: Courier New,Courier,monospace;">maps_service_create()</span> function:
+<pre class="prettyprint">
maps_service_h maps = NULL;
-int error = maps_service_create("Maps Provider", &maps);
- </pre>
- </li>
-
- <li><p>Set the security key, appropriate to selected Maps Provider using
- <span style="font-family: Courier New,Courier,monospace;"> maps_service_set_provider_key()</span>.</p>
- <pre class="prettyprint">
-error = maps_service_set_provider_key(maps, "XXXYYYZZZ");
- </pre>
- </li>
-
- <li><p>Check which services are supported by selected Maps Provider using
- <span style="font-family: Courier New,Courier,monospace;"> maps_service_provider_is_service_supported()</span>.</p>
- <pre class="prettyprint">
+int error = maps_service_create("Maps Provider", &maps);
+</pre>
+</li>
+
+<li>Set the security key appropriate to the selected map provider using the <span style="font-family: Courier New,Courier,monospace;">maps_service_set_provider_key()</span> function:
+<pre class="prettyprint">
+error = maps_service_set_provider_key(maps, "XXXYYYZZZ");
+</pre>
+</li>
+
+<li>Check which services are supported by the selected map provider using the <span style="font-family: Courier New,Courier,monospace;">maps_service_provider_is_service_supported()</span> function:
+<pre class="prettyprint">
bool supported = false;
-/* Check if Routing is available */
-error = maps_service_provider_is_service_supported(maps,
- MAPS_SERVICE_SEARCH_ROUTE, &supported);
-const bool is_routing_supported =
- (error == MAPS_ERROR_NONE) ? supported : false;
-
-/* Check if Routing via specified waypoints is available */
-error = maps_service_provider_is_service_supported(maps,
- MAPS_SERVICE_SEARCH_ROUTE_WAYPOINTS, &supported);
-const bool is_routing_waypoints_supported =
- (error == MAPS_ERROR_NONE) ? supported : false;
- </pre>
- <p>To check other services availability follow the same approach using keys from
- <span style="font-family: Courier New,Courier,monospace;"> maps_service_e</span>:</p>
- <ul>
- <li><p><span style="font-family: Courier New,Courier,monospace;">MAPS_SERVICE_GEOCODE</span></p></li>
- <li><p><span style="font-family: Courier New,Courier,monospace;">MAPS_SERVICE_GEOCODE_INSIDE_AREA</span></p></li>
- <li><p><span style="font-family: Courier New,Courier,monospace;">MAPS_SERVICE_GEOCODE_BY_STRUCTURED_ADDRESS</span></p></li>
- <li><p><span style="font-family: Courier New,Courier,monospace;">MAPS_SERVICE_REVERSE_GEOCODE</span></p></li>
- <li><p><span style="font-family: Courier New,Courier,monospace;">MAPS_SERVICE_SEARCH_PLACE</span></p></li>
- <li><p><span style="font-family: Courier New,Courier,monospace;">MAPS_SERVICE_SEARCH_PLACE_BY_AREA</span></p></li>
- <li><p><span style="font-family: Courier New,Courier,monospace;">MAPS_SERVICE_SEARCH_PLACE_BY_ADDRESS</span></p></li>
- <li><p><span style="font-family: Courier New,Courier,monospace;">MAPS_SERVICE_CANCEL_REQUEST</span></p></li>
- </ul>
- </li>
-
- <li><p>Optionally, check which data features are available for desired services using
- <span style="font-family: Courier New,Courier,monospace;"> maps_service_provider_is_data_supported()</span>.</p>
- <pre class="prettyprint">
-/* Check if route path data is supported */
-error = maps_service_provider_is_data_supported(maps, MAPS_ROUTE_PATH,
- &supported);
-const bool is_route_path_supported =
- (error == MAPS_ERROR_NONE) ? supported : false;
-if(is_route_path_supported) {
- /* Allow route path usage */
+// Check whether routing is available
+error = maps_service_provider_is_service_supported(maps, MAPS_SERVICE_SEARCH_ROUTE, &supported);
+const bool is_routing_supported = (error == MAPS_ERROR_NONE) ? supported : false;
+
+// Check whether routing through specified waypoints is available
+error = maps_service_provider_is_service_supported(maps, MAPS_SERVICE_SEARCH_ROUTE_WAYPOINTS, &supported);
+const bool is_routing_waypoints_supported = (error == MAPS_ERROR_NONE) ? supported : false;
+</pre>
+<p>To check for the availability of other services, follow the same approach using the keys from the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MAPS_SERVICE__MODULE.html#XX">maps_service_e</a> enumerator.</p>
+</li>
+
+<li>Optionally, check which data features are available for the desired services using the <span style="font-family: Courier New,Courier,monospace;">maps_service_provider_is_data_supported()</span> function:
+<pre class="prettyprint">
+// Check whether route path data is supported
+error = maps_service_provider_is_data_supported(maps, MAPS_ROUTE_PATH, &supported);
+const bool is_route_path_supported = (error == MAPS_ERROR_NONE) ? supported : false;
+if (is_route_path_supported)
+{
+ // Use route path
}
-/* Check if maneuver path data is supported */
-error = maps_service_provider_is_data_supported(maps, MAPS_ROUTE_SEGMENTS_PATH,
- &supported);
-const bool is_route_segment_path_supported =
- (error == MAPS_ERROR_NONE) ? supported : false;
-if(is_route_segment_path_supported) {
- /* Allow segment path usage */
+// Check whether segment path data is supported
+error = maps_service_provider_is_data_supported(maps, MAPS_ROUTE_SEGMENTS_PATH, &supported);
+const bool is_route_segment_path_supported = (error == MAPS_ERROR_NONE) ? supported : false;
+if (is_route_segment_path_supported)
+{
+ // Use segment path
}
-/* Check if maneuver sements data is supported */
-error = maps_service_provider_is_data_supported(maps,
- MAPS_ROUTE_SEGMENTS_MANEUVERS, &supported);
-const bool is_route_segment_maneuvers_supported =
- (error == MAPS_ERROR_NONE) ? supported : false;
-if(is_route_segment_maneuvers_supported) {
- /* Allow segment maneuvers usage */
+// Check whether segment maneuver data is supported
+error = maps_service_provider_is_data_supported(maps, MAPS_ROUTE_SEGMENTS_MANEUVERS, &supported);
+const bool is_route_segment_maneuvers_supported = (error == MAPS_ERROR_NONE) ? supported : false;
+if (is_route_segment_maneuvers_supported)
+{
+ // Use segment maneuvers
}
- </pre>
- <p>To check other data features availability follow the same approach using keys from
- <span style="font-family: Courier New,Courier,monospace;"> maps_service_data_e</span>:</p>
- <ul>
- <li><p><span style="font-family: Courier New,Courier,monospace;">MAPS_PLACE_ADDRESS</span></p></li>
- <li><p><span style="font-family: Courier New,Courier,monospace;">MAPS_PLACE_RATING</span></p></li>
- <li><p><span style="font-family: Courier New,Courier,monospace;">MAPS_PLACE_CATEGORIES</span></p></li>
- <li><p><span style="font-family: Courier New,Courier,monospace;">MAPS_PLACE_ATTRIBUTES</span></p></li>
- <li><p><span style="font-family: Courier New,Courier,monospace;">MAPS_PLACE_CONTACTS</span></p></li>
- <li><p><span style="font-family: Courier New,Courier,monospace;">MAPS_PLACE_EDITORIALS</span></p></li>
- <li><p><span style="font-family: Courier New,Courier,monospace;">MAPS_PLACE_REVIEWS</span></p></li>
- <li><p><span style="font-family: Courier New,Courier,monospace;">MAPS_PLACE_IMAGE</span></p></li>
- <li><p><span style="font-family: Courier New,Courier,monospace;">MAPS_PLACE_SUPPLIER</span></p></li>
- <li><p><span style="font-family: Courier New,Courier,monospace;">MAPS_PLACE_RELATED</span></p></li>
- </ul>
- </li>
-
- <li><p>Set general preferences, such as language and distance units using
- <span style="font-family: Courier New,Courier,monospace;"> maps_service_set_preference()</span>.</p>
- <pre class="prettyprint">
-/* Create an instance of a preference set */
+</pre>
+<p>To check the availability of other data features, follow the same approach using the keys from the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MAPS_SERVICE__MODULE.html#XX">maps_service_data_e</a> enumerator.</p>
+</li>
+
+<li><p>Set general preferences, such as language and distance units, using the <span style="font-family: Courier New,Courier,monospace;">maps_service_set_preference()</span> function:</p>
+<pre class="prettyprint">
+// Create a preference set instance
maps_preference_h preference = NULL;
-int error = maps_preference_create(&preference);
-if(error != MAPS_ERROR_NONE) {
- /* Handle error */
+int error = maps_preference_create(&preference);
+if (error != MAPS_ERROR_NONE)
+{
+ // Error handling
}
-/* Set the distance units preference */
+// Set the distance unit preference
error = maps_preference_set_distance_unit(preference, MAPS_DISTANCE_UNIT_M);
-if(error != MAPS_ERROR_NONE) {
- /* Handle error */
+if (error != MAPS_ERROR_NONE)
+{
+ // Error handling
}
-/* Set the language preference */
-error = maps_preference_set_language(preference, "en-US");
-if(error != MAPS_ERROR_NONE) {
- /* Handle error */
+// Set the language preference
+error = maps_preference_set_language(preference, "en-US");
+if (error != MAPS_ERROR_NONE)
+{
+ // Error handling
}
-/* Apply the set of preferences for Maps Service */
+// Apply the set of preferences for the map service
error = maps_service_set_preference(maps, preference);
-if(error != MAPS_ERROR_NONE) {
- /* Handle error */
+if (error != MAPS_ERROR_NONE)
+{
+ // Error handling
}
-/* Destroy the instance of the preference set */
+// Destroy the preference set instance
error = maps_preference_destroy(preference);
-if(error != MAPS_ERROR_NONE) {
- /* Handle error */
-}
- </pre>
- <p>Optionally you can set the maximum amount of search results and default country code
- using <span style="font-family: Courier New,Courier,monospace;">maps_preference_set_max_results() </span>
- and <span style="font-family: Courier New,Courier,monospace;">maps_preference_set_country_code()</span> respectively.</p>
- <p>In order to set Maps Provider specific preferences use
- <span style="font-family: Courier New,Courier,monospace;"> maps_preference_set_property() </span>
- with key-value pairs, defined in the appropriate Maps Provider documentation.</p>
- <p>To get preferences, currently applied in the Maps Provider use following functions:</p>
- <ul>
- <li><p><span style="font-family: Courier New,Courier,monospace;">maps_preference_get_distance_unit()</span></p></li>
- <li><p><span style="font-family: Courier New,Courier,monospace;">maps_preference_get_language()</span></p></li>
- <li><p><span style="font-family: Courier New,Courier,monospace;">maps_preference_get_max_results()</span></p></li>
- <li><p><span style="font-family: Courier New,Courier,monospace;">maps_preference_get_country_code()</span></p></li>
- <li><p><span style="font-family: Courier New,Courier,monospace;">maps_preference_get()</span> and
- <span style="font-family: Courier New,Courier,monospace;"> maps_preference_foreach_property()</span></p></li>
- </ul>
- <p>The former pair of functions retrieve the Maps Provider specific preferences, not defined in the Maps API.</p>
- </li>
- </ol>
-
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="geocode" name="geocode" class="items-tit-h2">Using Geocode and Reverse Geocode Services</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
- <p>To retrieve a geocode of a specified place, or the place information, corresponding to a given
- geographical coordinates, use one of approaches, listed in this Section.</p>
- <p>Note that each API request may be tuned as it is demonstrated in the section <a class="opensection" href="#preference">Tuning API requests with preferences</a>.</p>
- <p>Note that to perform these operations, your application needs the http://tizen.org/privilege/internet privilege.</p>
- <br>
- <p>Usage of Geocode API is demonstrated below.</p>
- <ol>
- <li><p>Request the geocode by free formed address using
- <span style="font-family: Courier New,Courier,monospace;"> maps_service_geocode()</span>.</p>
- <pre class="prettyprint">
-/* Searching for geocode of the
- * Samsung'c campus "Digital City" in Suwon */
-error = maps_service_geocode(maps,
- "Suwon, Digital City",
- preference,
- __maps_service_geocode_cb,
- user_data,
- &request_id);
-
-if(error != MAPS_ERROR_NONE) {
- /* Handle Error */
+if (error != MAPS_ERROR_NONE)
+{
+ // Error handling
+}
+</pre>
+<p>Optionally, you can set the maximum amount of search results and a default country code using the <span style="font-family: Courier New,Courier,monospace;">maps_preference_set_max_results()</span> and <span style="font-family: Courier New,Courier,monospace;">maps_preference_set_country_code()</span> functions respectively.</p>
+<p>To set specific preferences for the map provider, use the <span style="font-family: Courier New,Courier,monospace;">maps_preference_set_property()</span> function with key-value pairs, defined in the appropriate map provider documentation.</p>
+<p>To get the preferences currently applied in the map provider, use the following functions:</p>
+ <ul>
+ <li><span style="font-family: Courier New,Courier,monospace;">maps_preference_get_distance_unit()</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace;">maps_preference_get_language()</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace;">maps_preference_get_max_results()</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace;">maps_preference_get_country_code()</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace;">maps_preference_get()</span> and
+ <span style="font-family: Courier New,Courier,monospace;">maps_preference_foreach_property()</span>
+ <p>These 2 functions retrieve the map provider-specific preferences not defined in the Maps Service API.</p></li>
+ </ul>
+</li>
+</ol>
+
+
+<h2 id="geocode" name="geocode">Using Geocode and Reverse Geocode Services</h2>
+
+<p>To retrieve a geocode of a specified place, or the place information corresponding to given geographic coordinates, use one of the following approaches. The service requests can be <a href="#preference">customized</a>.</p>
+
+<p>To retrieve a geocode:</p>
+<ol>
+<li>Make sure that your application has the <span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/internet</span> privilege.
+</li>
+<li>Request the geocode:
+<ul><li>Use the <span style="font-family: Courier New,Courier,monospace;">maps_service_geocode()</span> function for a request based on a free-formed address:
+<pre class="prettyprint">
+// Search for geocode of the Samsung's campus "Digital City" in Suwon
+error = maps_service_geocode(maps, "Suwon, Digital City", preference,
+ __maps_service_geocode_cb, user_data, &request_id);
+
+if (error != MAPS_ERROR_NONE)
+{
+ // Error handling
}
- </pre>
- </li>
+</pre>
+</li>
- <li><p>Request the geocode inside a specified area using
- <span style="font-family: Courier New,Courier,monospace;"> maps_service_geocode_inside_area()</span>.</p>
- <pre class="prettyprint">
+<li>Use the <span style="font-family: Courier New,Courier,monospace;">maps_service_geocode_inside_area()</span> function for a request inside a specified area:
+<pre class="prettyprint">
maps_area_h bounds = NULL;
-/* Use maps_area_create_rectangle() or maps_area_create_circle()
- * to create a geographical bounds of Geocoding */
-
-/* Searching for geocode of the
- * Samsung's campus Digital City
- * within a specified geographical area */
-error = maps_service_geocode_inside_area(maps,
- "Digital City",
- bounds,
- preference,
- __maps_service_geocode_cb,
- user_data,
- &request_id);
-
-if(error != MAPS_ERROR_NONE) {
- /* Handle Error */
+// Use maps_area_create_rectangle() or maps_area_create_circle() to create geographic bounds for geocoding
+
+// Search for geocode of the Digital City within a specified geographic area
+error = maps_service_geocode_inside_area(maps, "Digital City", bounds, preference,
+ __maps_service_geocode_cb, user_data, &request_id);
+
+if (error != MAPS_ERROR_NONE)
+{
+ // Error handling
}
- </pre>
- </li>
+</pre>
+</li>
- <li><p>Request the geocode for a place, specified as a structured address using
- <span style="font-family: Courier New,Courier,monospace;"> maps_service_geocode_by_structured_address()</span>.</p>
- <pre class="prettyprint">
+<li>Use the <span style="font-family: Courier New,Courier,monospace;">maps_service_geocode_by_structured_address()</span> function for a request for a place, specified as a structured address:
+<pre class="prettyprint">
maps_address_h address = NULL;
-/* Use maps_address_create() to create an instance of an address
- * Than use maps_address_set_xxx to initialize the address
- * with desired values */
-
-/* Searching for a geocode of a place, specified with a structured address */
-error = maps_service_geocode_by_structured_address(maps,
- address,
- preference,
- __maps_service_geocode_cb,
- user_data,
- &request_id);
-
-if(error != MAPS_ERROR_NONE) {
- /* Handle Error */
-}
- </pre>
+// Use maps_address_create() to create an instance of an address
+// Then use maps_address_set_xxx to initialize the address with the desired values
+// Search for a geocode of a place, specified with a structured address
+error = maps_service_geocode_by_structured_address(maps, address, preference, __maps_service_geocode_cb,
+ user_data, &request_id);
- <li><p>The callback
- <span style="font-family: Courier New,Courier,monospace;"> __maps_service_geocode_cb</span> should be implemented as following:</p>
- <pre class="prettyprint">
-static bool __maps_service_geocode_cb(maps_error_e result, int request_id,
- int index, int total, maps_coordinates_h coordinates,
- void* user_data)
+if (error != MAPS_ERROR_NONE)
{
+ // Error handling
+}
+</pre>
+</li></ul></li>
- /* Handle obtained coordinates data */
+<li>Implement the <span style="font-family: Courier New,Courier,monospace;">__maps_service_geocode_cb()</span> callback to receive the service response:
+<pre class="prettyprint">
+static bool __maps_service_geocode_cb(maps_error_e result, int request_id, int index, int total,
+ maps_coordinates_h coordinates, void* user_data)
+{
+ // Handle the obtained coordinate data
- /* Release results */
- maps_coordinates_destroy(coordinates);
- return true;
-}
- </pre>
- </li>
- </ol>
-
- <br>
- <p>Usage of Reverse Geocode API is demonstrated below.</p>
- <ol>
- <li><p>To retrieve a reverse geocode of a specified geographical coordinates, use
- <span style="font-family: Courier New,Courier,monospace;"> maps_service_reverse_geocode()</span>.</p>
- <pre class="prettyprint">
-/* Obtaining the reverse geocode with a specified coordinates */
-error = maps_service_reverse_geocode(maps,
- 37.257865,
- 127.053659,
- preference,
- __maps_service_reverse_geocode_cb,
- user_data,
- &request_id);
-
-if(error != MAPS_ERROR_NONE) {
- /* Handle Error */
+ // Release the results
+ maps_coordinates_destroy(coordinates);
+
+ return true;
}
- </pre>
- </li>
-
- <li><p>The callback
- <span style="font-family: Courier New,Courier,monospace;"> __maps_service_reverse_geocode_cb</span> should be implemented as following:</p>
- <pre class="prettyprint">
-static void __maps_service_reverse_geocode_cb(maps_error_e result,
- int request_id, int index, int total, maps_address_h address,
- void* user_data)
+</pre>
+</li>
+</ol>
+
+
+<p>To retrieve a reverse geocode:</p>
+<ol>
+<li>To retrieve a reverse geocode of specified geographic coordinates, use the <span style="font-family: Courier New,Courier,monospace;">maps_service_reverse_geocode()</span> function:
+<pre class="prettyprint">
+// Obtain the reverse geocode with specified coordinates
+error = maps_service_reverse_geocode(maps, 37.257865, 127.053659, preference,
+ __maps_service_reverse_geocode_cb, user_data, &request_id);
+
+if (error != MAPS_ERROR_NONE)
{
+ // Error handling
+}
+</pre>
+</li>
- /* Handle obtained address */
+<li>Implement the <span style="font-family: Courier New,Courier,monospace;">__maps_service_reverse_geocode_cb()</span> callback to receive the service response:
+<pre class="prettyprint">
+static void __maps_service_reverse_geocode_cb(maps_error_e result, int request_id, int index, int total,
+ maps_address_h address, void* user_data)
+{
+ // Handle the obtained address
- /* Release results */
- maps_address_destroy(address);
+ // Release the results
+ maps_address_destroy(address);
}
- </pre>
- </li>
-
- </ol>
- </div>
- </li>
-
-
- <li>
- <div class="devicespec-tit">
- <h2 id="search_place" name="search_place" class="items-tit-h2">Using Place Search Services</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
- <p>To search for a place accordingly to a diversity of searching parameters, use one of approaches, listed in
- this Section.</p>
- <p>Note that each API request may be tuned as it is demonstrated in the Section <a class="opensection" href="#preference">Tuning API requests with preferences</a>.</p>
- <p>Note that to perform these operations, your application needs the http://tizen.org/privilege/internet privilege.</p>
- <ol>
- <li><p>Search the place within a specified distance around the center coordinates using
- <span style="font-family: Courier New,Courier,monospace;"> maps_service_search_place()</span>.</p>
- <pre class="prettyprint">
+</pre>
+</li>
+
+</ol>
+
+<h2 id="search_place" name="search_place">Using the Place Search Service</h2>
+
+<p>To search for a place with a diversity of searching parameters, use one of the following approaches. The service requests can be <a href="#preference">customized</a>.</p>
+
+<p>To search for a place:</p>
+<ol>
+<li>Make sure that your application has the <span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/internet</span> privilege.
+</li>
+<li>Search for a place:
+<ul><li>Use the <span style="font-family: Courier New,Courier,monospace;">maps_service_search_place()</span> function for a search within a specified distance around the center coordinates:
+<pre class="prettyprint">
maps_coordinates_h position = NULL;
-/* Create coordinates with maps_coordinates_create() */
+// Create the coordinates with maps_coordinates_create()
int distance = 500;
-error = maps_service_search_place(maps,
- position,
- distance,
- filter,
- preference,
- __maps_service_search_place_cb,
- user_data,
- &request_id);
-
-if(error != MAPS_ERROR_NONE) {
- /* Handle Error */
+error = maps_service_search_place(maps, position, distance, filter, preference,
+ __maps_service_search_place_cb, user_data, &request_id);
+
+if (error != MAPS_ERROR_NONE)
+{
+ // Error handling
}
- </pre>
- </li>
+</pre>
+</li>
- <li><p>Search the place within a specified geographical boundary using
- <span style="font-family: Courier New,Courier,monospace;"> maps_service_search_place_by_area()</span>.</p>
- <pre class="prettyprint">
+<li>Use the <span style="font-family: Courier New,Courier,monospace;">maps_service_search_place_by_area()</span> function for a search for a place within a specified geographic boundary:
+<pre class="prettyprint">
maps_area_h boundary = NULL;
-/* Create boundary with one of:
- * - maps_area_create_rectangle()
- * - maps_area_create_circle() */
-
-error = maps_service_search_place_by_area(maps,
- boundary,
- filter,
- preference,
- __maps_service_search_place_cb,
- user_data,
- &request_id);
-
-if(error != MAPS_ERROR_NONE) {
- /* Handle Error */
+// Create the boundary with maps_area_create_rectangle() or maps_area_create_circle()
+
+error = maps_service_search_place_by_area(maps, boundary, filter, preference,
+ __maps_service_search_place_cb, user_data, &request_id);
+
+if (error != MAPS_ERROR_NONE)
+{
+ // Error handling
}
- </pre>
- </li>
+</pre>
+</li>
- <li><p>Search the place by address within a specified geographical boundary using
- <span style="font-family: Courier New,Courier,monospace;"> maps_service_search_place_by_address()</span>.</p>
- <pre class="prettyprint">
+<li>Use the <span style="font-family: Courier New,Courier,monospace;">maps_service_search_place_by_address()</span> function for a search for a place based on an address within a specified geographic boundary:
+<pre class="prettyprint">
maps_area_h boundary = NULL;
-/* Create boundary with one of:
- * - maps_area_create_rectangle()
- * - maps_area_create_circle() */
-
-error = maps_service_search_place_by_address(maps,
- "Digital City",
- boundary,
- filter,
- preference,
- __maps_service_search_place_cb,
- user_data,
- &request_id);
-
-if(error != MAPS_ERROR_NONE) {
- /* Handle Error */
-}
- </pre>
- </li>
+// Create the boundary with maps_area_create_rectangle() or maps_area_create_circle()
+error = maps_service_search_place_by_address(maps, "Digital City", boundary, filter, preference,
+ __maps_service_search_place_cb, user_data, &request_id);
- <li><p>The callback
- <span style="font-family: Courier New,Courier,monospace;"> __maps_service_search_place_cb()</span> should be implemented as following:</p>
- <pre class="prettyprint">
-static bool __maps_service_search_place_cb(maps_error_e error, int request_id,
- int index, int total, maps_place_h place, void* user_data)
+if (error != MAPS_ERROR_NONE)
{
+ // Error handling
+}
+</pre>
+</li></ul></li>
- /* Handle obtained place data */
+<li>Implement the <span style="font-family: Courier New,Courier,monospace;">__maps_service_search_place_cb()</span> callback to receive the service response:
+<pre class="prettyprint">
+static bool __maps_service_search_place_cb(maps_error_e error, int request_id, int index, int total,
+ maps_place_h place, void* user_data)
+{
+ // Handle the obtained place data
+
+ // Release the results
+ maps_place_destroy(place);
- /* Release results */
- maps_place_destroy(place);
- return true;
+ return true;
}
- </pre>
- </li>
- </ol>
- </div>
- </li>
-
-
- <li>
- <div class="devicespec-tit">
- <h2 id="search_route" name="search_route" class="items-tit-h2">Using Using Routing Service</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
- <p>To query a route from point A to point B use one of approaches, listed in this Section.</p>
- <p>Note that each API request may be tuned as it is demonstrated in the Section <a class="opensection" href="#preference">Tuning API requests with preferences</a>.</p>
- <p>Note that to perform these operations, your application needs the http://tizen.org/privilege/internet privilege.</p>
- <ol>
- <li><p>Simply query the route from one geographical coordinates to another using
- <span style="font-family: Courier New,Courier,monospace;"> maps_service_search_route()</span>.</p>
- <pre class="prettyprint">
+</pre>
+</li>
+</ol>
+
+
+<h2 id="search_route" name="search_route">Using the Routing Service</h2>
+
+<p>To query a route from point A to point B, use one of the following approaches. The service requests can be <a href="#preference">customized</a>.</p>
+
+<p>To query a route:</p>
+<ol>
+<li>Make sure that your application has the <span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/internet</span> privilege.
+</li>
+<li>Query the route:
+<ul><li>Use the <span style="font-family: Courier New,Courier,monospace;">maps_service_search_route()</span> function for a route from one set of geographic coordinates to another:
+<pre class="prettyprint">
maps_coordinates_h origin = NULL, destination = NULL;
-/* Create coordinates with maps_coordinates_create() */
-
-error = maps_service_search_route(maps,
- origin,
- destination,
- preference,
- __maps_service_search_route_cb,
- user_data,
- &request_id);
-
-if(error != MAPS_ERROR_NONE) {
- /* Handle Error */
+// Create the coordinates with maps_coordinates_create()
+
+error = maps_service_search_route(maps, origin, destination, preference,
+ __maps_service_search_route_cb, user_data, &request_id);
+
+if (error != MAPS_ERROR_NONE)
+{
+ // Error handling
}
- </pre>
- </li>
+</pre>
+</li>
- <li><p>Query the route passing through a specified set of way points using
- <span style="font-family: Courier New,Courier,monospace;"> maps_service_search_route_waypoints()</span>.</p>
- <pre class="prettyprint">
-/* Specify amount of way points */
+<li>Use the <span style="font-family: Courier New,Courier,monospace;">maps_service_search_route_waypoints()</span> function for a route passing through a specified set of waypoints:
+<pre class="prettyprint">
+// Specify the number of waypoints
const int waypoint_num = 5;
-/* Create array with coordinates of way points */
+// Create an array with the waypoint coordinates
maps_coordinates_h* waypoint_list = NULL;
-error = maps_service_search_route_waypoints(maps,
- waypoint_list,
- waypoint_num,
- preference,
- __maps_service_search_route_cb,
- user_data,
- &request_id);
+error = maps_service_search_route_waypoints(maps, waypoint_list, waypoint_num, preference,
+ __maps_service_search_route_cb, user_data, &request_id);
-if(error != MAPS_ERROR_NONE) {
- /* Handle Error */
+if (error != MAPS_ERROR_NONE)
+{
+ // Error handling
}
- </pre>
- </li>
+</pre>
+</li></ul></li>
- <li><p>The callback
- <span style="font-family: Courier New,Courier,monospace;"> __maps_service_search_route_cb()</span> should be implemented as following:</p>
- <pre class="prettyprint">
-static bool __maps_service_search_route_cb(maps_error_e error, int request_id,
- int index, int total, maps_route_h route, void* user_data)
+<li>Implement the <span style="font-family: Courier New,Courier,monospace;">__maps_service_search_route_cb()</span> callback to receive the service response:
+<pre class="prettyprint">
+static bool __maps_service_search_route_cb(maps_error_e error, int request_id, int index, int total,
+ maps_route_h route, void* user_data)
{
+ // Handle the obtained route data
- /* Handle obtained route data */
+ // Release the results
+ maps_route_destroy(route);
- /* Release results */
- maps_route_destroy(route);
- return true;
+ return true;
}
- </pre>
- </li>
- </ol>
- </div>
- </li>
-
-
- <li>
- <div class="devicespec-tit">
- <h2 id="cancel" name="cancel" class="items-tit-h2">Canceling the Service Request</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
- <p>To cancel a Geocode, Place Search or Routing request use <span style="font-family: Courier New,Courier,monospace;">maps_service_cancel_request()</span>.</p>
- <pre class="prettyprint">
-/* Cancel the request with a specified id */
+</pre>
+</li>
+</ol>
+
+<h2 id="cancel" name="cancel">Canceling the Service Request</h2>
+
+<p>To cancel a geocode, place search, or routing request, use the <span style="font-family: Courier New,Courier,monospace;">maps_service_cancel_request()</span> function:</p>
+<pre class="prettyprint">
+// Cancel the request with a specified ID
error = maps_service_cancel_request(maps, request_id);
-if(error != MAPS_ERROR_NONE) {
- /* Handle Error */
+if (error != MAPS_ERROR_NONE)
+{
+ // Error handling
}
- </pre>
-
- </div>
- </li>
-
-
- <li>
- <div class="devicespec-tit">
- <h2 id="address" name="address" class="items-tit-h2">Recognizing Address information</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
- <p>The Reverse Geocode request is run with <span style="font-family: Courier New,Courier,monospace;">maps_service_reverse_geocode()</span> (see
- section <a class="opensection" href="#geocode">Using Geocode and Reverse Geocode Services</a>).</p>
- <p>The result is retrieved from the Maps Service via <span style="font-family: Courier New,Courier,monospace;">maps_service_reverse_geocode_cb</span>
- callback as a structured address data of the specified place.</p>
- <p>Parse the address information using following functions:</p>
- <pre class="prettyprint">
-/* Obtain building number */
+</pre>
+
+<h2 id="address" name="address">Recognizing the Address Information</h2>
+
+<p>The result of the <a href="#geocode">reverse geocode request</a> (<span style="font-family: Courier New,Courier,monospace;">maps_service_reverse_geocode()</span>) is retrieved from the map service using the <span style="font-family: Courier New,Courier,monospace;">maps_service_reverse_geocode_cb()</span> callback. The result is structured address data of the specified place.</p>
+<p>Parse the address information using the following functions:</p>
+<pre class="prettyprint">
+// Obtain the building number
char *building_number = NULL;
-error = maps_address_get_building_number(address, &building_number);
+error = maps_address_get_building_number(address, &building_number);
-if(error != MAPS_ERROR_NONE) {
- /* Handle Error */
+if (error != MAPS_ERROR_NONE)
+{
+ // Error handling
}
-/* Use building_number */
+// Use the building_number
free(building_number);
-/* Obtain street name */
+// Obtain the street name
char *street = NULL;
-error = maps_address_get_street(address, &street);
+error = maps_address_get_street(address, &street);
-if(error != MAPS_ERROR_NONE) {
-/* Handle Error */
+if (error != MAPS_ERROR_NONE)
+{
+ // Error handling
}
-/* Use street */
+// Use the street name
free(street);
- </pre>
- <p>Similarly get other address features using:</p>
- <ul>
- <li><p><span style="font-family: Courier New,Courier,monospace;">maps_address_get_district()</span></p>
- <li><p><span style="font-family: Courier New,Courier,monospace;">maps_address_get_city()</span></p>
- <li><p><span style="font-family: Courier New,Courier,monospace;">maps_address_get_state()</span></p>
- <li><p><span style="font-family: Courier New,Courier,monospace;">maps_address_get_country()</span></p>
- <li><p><span style="font-family: Courier New,Courier,monospace;">maps_address_get_country_code()</span></p>
- <li><p><span style="font-family: Courier New,Courier,monospace;">maps_address_get_county()</span></p>
- <li><p><span style="font-family: Courier New,Courier,monospace;">maps_address_get_postal_code()</span></p>
- <li><p><span style="font-family: Courier New,Courier,monospace;">maps_address_get_freetext()</span></p>
- </ul>
- </div>
- </li>
-
-
- <li>
- <div class="devicespec-tit">
- <h2 id="place" name="place" class="items-tit-h2">Recognizing Place information</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
- <p>The place search request is run with <span style="font-family: Courier New,Courier,monospace;">maps_service_search_place()</span> ,
- <span style="font-family: Courier New,Courier,monospace;"> maps_service_search_place_by_area()</span> or
- <span style="font-family: Courier New,Courier,monospace;"> maps_service_search_place_by_address()</span>
- (see section <a class="opensection" href="#search_place">Using Place Search Services</a>).</p>
- <p>The result is retrieved from the Maps Service via multiple iterations of
- <span style="font-family: Courier New,Courier,monospace;"> maps_service_search_place_cb</span> callback with an instance
- of place data passed into.</p>
- <p>The place data can be managed with a handle of type <span style="font-family: Courier New,Courier,monospace;">maps_place_h</span>.</p>
- <p>Different Maps Providers are capable to provide different sets of place data features and below is demonstrates
- how to check ahead if a specified feature is available with your Maps Provider.</p>
- <p>Some Maps Providers may extend place data features with extra properties that are not specified in the Maps API.
- Such properties are organized as a key-value storage where keys are the names of the properties.
- The method of iterating through extra properties of place data is demonstrated in the end of this section.</p>
- <br>
- <p>To get particular features of the place information, such as place name, location and rating, use following functions.
- <ol>
- <li><p>To obtaining the place name use
- <span style="font-family: Courier New,Courier,monospace;"> maps_place_get_name()</span>.</p>
- <pre class="prettyprint">
-/* Obtain place name */
+</pre>
+<p>Similarly, you can get other address features using the following functions:</p>
+<ul>
+ <li><span style="font-family: Courier New,Courier,monospace;">maps_address_get_district()</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace;">maps_address_get_city()</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace;">maps_address_get_state()</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace;">maps_address_get_country()</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace;">maps_address_get_country_code()</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace;">maps_address_get_county()</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace;">maps_address_get_postal_code()</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace;">maps_address_get_freetext()</span></li>
+</ul>
+
+
+<h2 id="place" name="place">Recognizing the Place Information</h2>
+
+<p>The result of the <a href="#search_place">place search request</a> (<span style="font-family: Courier New,Courier,monospace;">maps_service_search_place()</span>, <span style="font-family: Courier New,Courier,monospace;">maps_service_search_place_by_area()</span>, or <span style="font-family: Courier New,Courier,monospace;">maps_service_search_place_by_address()</span>) is retrieved from the map service using multiple iterations of the <span style="font-family: Courier New,Courier,monospace;">maps_service_search_place_cb()</span> callback. The result is an instance of place data.</p>
+
+ <table class="note">
+<tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">Different map providers are capable of providing different sets of place data features. Some map providers can extend the place data features with extra properties that are not specified in the Maps Service API. Such properties are organized as a key-value storage where the keys are the names of the properties.
+
+ <p>If your map provider does not support a specific feature, the get function for the feature returns an error. To prevent problems, you can <a href="#initial">check which data features are available</a> in your map provider using the <span style="font-family: Courier New,Courier,monospace;">maps_service_provider_is_data_supported()</span> function.</p>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+
+<p>To parse place data:</p>
+
+<ol><li><p>To get the place information features, such as place name, location, and rating, use the following functions with a <span style="font-family: Courier New,Courier,monospace;">maps_place_h</span> place handle:</p>
+
+<ul>
+<li>To obtain the place name, use the <span style="font-family: Courier New,Courier,monospace;">maps_place_get_name()</span> function:
+<pre class="prettyprint">
+// Obtain the place name
char *name = NULL;
-error = maps_place_get_name(place, &name);
-if(error != MAPS_ERROR_NONE) {
-/* Handle Error */
+error = maps_place_get_name(place, &name);
+if (error != MAPS_ERROR_NONE)
+{
+ // Error handling
}
-/* Use place name */
+// Use the place name
free(name);
- </pre>
- </li>
+</pre>
+</li>
- <li><p>To obtaining the place location use
- <span style="font-family: Courier New,Courier,monospace;"> maps_place_get_location()</span>.</p>
- <pre class="prettyprint">
-/* Obtain place location */
+<li>To obtain the place location, use the <span style="font-family: Courier New,Courier,monospace;">maps_place_get_location()</span> function:
+<pre class="prettyprint">
+// Obtain the place location
maps_coordinates_h location = NULL;
-error = maps_place_get_location(place, &location);
-if(error != MAPS_ERROR_NONE) {
- /* Handle Error */
+error = maps_place_get_location(place, &location);
+if (error != MAPS_ERROR_NONE)
+{
+ // Error handling
}
-/* Use route location */
+// Use the place location
maps_coordinates_destroy(location);
- </pre>
- </li>
+</pre>
+</li>
- <li><p>To obtaining the place rating use
- <span style="font-family: Courier New,Courier,monospace;"> maps_place_get_rating()</span>.</p>
- <pre class="prettyprint">
-/* Obtain place rating */
+<li>To obtain the place rating, use the <span style="font-family: Courier New,Courier,monospace;">maps_place_get_rating()</span> function:
+<pre class="prettyprint">
+// Obtain the place rating
maps_place_rating_h rating = NULL;
-error = maps_place_get_rating(place, &rating);
-if(error != MAPS_ERROR_NONE) {
- /* Handle Error */
+error = maps_place_get_rating(place, &rating);
+if (error != MAPS_ERROR_NONE)
+{
+ // Error handling
}
-/* Use route rating */
+// Use the place rating
maps_place_rating_destroy(rating);
- </pre>
- </li>
-
- </ol>
- <p>To obtain other place features follow the same approach using functions:</p>
- <ul>
- <li><p><span style="font-family: Courier New,Courier,monospace;">maps_place_get_id()</span></p>
- <li><p><span style="font-family: Courier New,Courier,monospace;">maps_place_get_address()</span></p>
- <li><p><span style="font-family: Courier New,Courier,monospace;">maps_place_get_distance()</span></p>
- <li><p><span style="font-family: Courier New,Courier,monospace;">maps_place_get_uri()</span></p>
- <li><p><span style="font-family: Courier New,Courier,monospace;">maps_place_get_supplier_link()</span></p>
- <li><p><span style="font-family: Courier New,Courier,monospace;">maps_place_get_related_link()</span></p>
- </ul>
-
- <br>
- <p>To get lists of features of the place information, such as categories, reviews and attributes, use following iterating functions.</p>
- <ol>
- <li><p>To obtaining the list of place categories use
- <span style="font-family: Courier New,Courier,monospace;"> maps_place_foreach_category()</span>.</p>
- <pre class="prettyprint">
-/* Obtain a list of place categories */
-error = maps_place_foreach_category(place, __maps_place_categories_cb,
- user_data);
-if(error != MAPS_ERROR_NONE) {
- /* Handle Error */
-}
- </pre>
- </li>
-
- <li><p>The callback
- <span style="font-family: Courier New,Courier,monospace;"> __maps_place_categories_cb()</span> should be implemented as following:</p>
- <pre class="prettyprint">
-static bool __maps_place_categories_cb(int index, int total,
- maps_place_category_h category, void* user_data)
+</pre>
+</li></ul>
+
+<p>To obtain other place features, follow the same approach using the following functions:</p>
+<ul>
+ <li><span style="font-family: Courier New,Courier,monospace;">maps_place_get_id()</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace;">maps_place_get_address()</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace;">maps_place_get_distance()</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace;">maps_place_get_uri()</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace;">maps_place_get_supplier_link()</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace;">maps_place_get_related_link()</span></li>
+</ul>
+
+</li>
+
+<li><p>To get lists of place information features, such as categories, reviews, and attributes, use the following iterating functions:</p>
+<ol type="a">
+<li>To obtain a list of place categories, use the <span style="font-family: Courier New,Courier,monospace;">maps_place_foreach_category()</span> function:
+<pre class="prettyprint">
+// Obtain a list of place categories
+error = maps_place_foreach_category(place, __maps_place_categories_cb, user_data);
+if (error != MAPS_ERROR_NONE)
{
-
- /* Handle obtained place category data */
-
- /* Release results */
- maps_place_category_destroy(category);
- return true;
-}
- </pre>
- </li>
- </ol>
- <p>To obtain other place feature lists follow the same approach using functions:</p>
- <ul>
- <li><p><span style="font-family: Courier New,Courier,monospace;">maps_place_foreach_attribute</span></p>
- <li><p><span style="font-family: Courier New,Courier,monospace;">maps_place_foreach_contact</span></p>
- <li><p><span style="font-family: Courier New,Courier,monospace;">maps_place_foreach_editorial</span></p>
- <li><p><span style="font-family: Courier New,Courier,monospace;">maps_place_foreach_image</span></p>
- <li><p><span style="font-family: Courier New,Courier,monospace;">maps_place_foreach_review</span></p>
- </ul>
-
- <br>
- <p>Some place data features may not be supported by your Maps Provider.</p>
- <p>For example, the Maps Providers may not support place rating data. In this case the function
- <span style="font-family: Courier New,Courier,monospace;"> maps_place_get_rating()</span> will return error
- code <span style="font-family: Courier New,Courier,monospace;">MAPS_ERROR_NOT_SUPPORTED</span> and the value of
- output parameter <span style="font-family: Courier New,Courier,monospace;">rating</span> will be meaningless.</p>
- <p>As mentioned in the section <a class="opensection" href="#initial">Initializing the Maps Services</a>, you can check ahead which
- data features are available in your Maps Provider
- using <span style="font-family: Courier New,Courier,monospace;">maps_service_provider_is_data_supported()</span>.</p>
- <pre class="prettyprint">
-/* Check if route path data is supported */
-bool is_place_rating_supported = false;
-error = maps_service_provider_is_data_supported(maps,
- MAPS_PLACE_RATING, &is_place_rating_supported);
-
-if(error == MAPS_ERROR_NONE) {
- if(is_place_rating_supported) {
-
- /* Obtain place rating */
- maps_place_rating_h rating = NULL;
- error = maps_place_get_rating(place, &rating);
- if(error != MAPS_ERROR_NONE) {
- /* Handle Error */
- }
-
- /* Use route name */
-
- maps_place_rating_destroy(rating);
- }
-} else {
- /* Handle Error */
+ // Error handling
}
- </pre>
-
- <br>
- <p>Some Maps Providers may extend place data features defined in Maps API with specific extra properties.</p>
- <ol>
- <li><p>To iterate through retrieved extra properties use
- <span style="font-family: Courier New,Courier,monospace;"> maps_place_foreach_property()</span>.</p>
- <pre class="prettyprint">
-/* Obtain Maps Provider specific place data properties */
-error = maps_place_foreach_property(place, __maps_place_properties_cb,
- user_data);
-if(error != MAPS_ERROR_NONE) {
- /* Handle Error */
-}
- </pre>
- </li>
-
- <li><p>The callback
- <span style="font-family: Courier New,Courier,monospace;"> __maps_place_properties_cb()</span> should be implemented as following:</p>
- <pre class="prettyprint">
-static bool __maps_place_properties_cb(int index, int total,
- char* key, void* value, void* user_data)
-{
+</pre>
+</li>
- /* Handle obtained a property:
- * property_name: key
- * property_value: value */
-
- /* Release property name and value */
- free(key);
- free(value);
- return true;
+<li>Implement the <span style="font-family: Courier New,Courier,monospace;">__maps_place_categories_cb()</span> callback:
+<pre class="prettyprint">
+static bool __maps_place_categories_cb(int index, int total, maps_place_category_h category, void* user_data)
+{
+ // Handle the obtained place category data
+
+ // Release the results
+ maps_place_category_destroy(category);
+
+ return true;
+}
+</pre>
+</li>
+</ol>
+<p>To obtain other place feature lists, follow the same approach using the following functions:</p>
+<ul>
+ <li><span style="font-family: Courier New,Courier,monospace;">maps_place_foreach_attribute()</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace;">maps_place_foreach_contact()</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace;">maps_place_foreach_editorial()</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace;">maps_place_foreach_image()</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace;">maps_place_foreach_review()</span></li>
+</ul></li>
+
+<li><p>To get the extra properties that some map providers provide to extend the place data features defined in the Maps Service API:</p>
+<ol type="a">
+<li>To iterate through the retrieved extra properties, use the <span style="font-family: Courier New,Courier,monospace;">maps_place_foreach_property()</span> function:
+<pre class="prettyprint">
+// Obtain the map provider-specific place data properties
+error = maps_place_foreach_property(place, __maps_place_properties_cb, user_data);
+if (error != MAPS_ERROR_NONE)
+{
+ // Error handling
}
- </pre>
- </li>
- </ol>
-
- </div>
- </li>
-
-
- <li>
- <div class="devicespec-tit">
- <h2 id="route" name="route" class="items-tit-h2">Recognizing Route information</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
- <p>The route calculation request is run with <span style="font-family: Courier New,Courier,monospace;">maps_service_search_route()</span> or
- <span style="font-family: Courier New,Courier,monospace;"> maps_service_search_route_waypoints()</span> (see
- section <a class="opensection" href="#search_route">Using Routing Service</a>).
- The result is retrieved from the Maps Service via multiple iterations of
- <span style="font-family: Courier New,Courier,monospace;"> maps_service_search_route_cb</span> callback with an instance of route data passed into.
- The route data can be managed with a handle of type <span style="font-family: Courier New,Courier,monospace;">maps_route_h</span>.</p>
- <p>Different Maps Providers are capable to provide different sets of route data features and below is demonstrated
- how to check ahead if a specified feature is available with your Maps Provider.</p>
- <p>Some Maps Providers may extend route data features with extra properties that are not specified in the Maps API. Such properties are organized as a
- key-value storage where keys are the names of the properties.
- The method of iterating through extra properties of place data is demonstrated in the end of this section.</p>
- <br>
- <p>To get particular features of the route information, such as route id, origin, destination and total distance, use following functions.
- <ol>
- <li><p>To obtaining the route id use
- <span style="font-family: Courier New,Courier,monospace;"> maps_route_get_route_id()</span>.</p>
- <pre class="prettyprint">
-/* Obtain route id */
+</pre>
+</li>
+
+<li>Implement the <span style="font-family: Courier New,Courier,monospace;">__maps_place_properties_cb()</span> callback:
+<pre class="prettyprint">
+static bool __maps_place_properties_cb(int index, int total, char* key, void* value, void* user_data)
+{
+ // Handle the obtained property:
+ // property_name: key
+ // property_value: value
+
+ // Release the property name and value
+ free(key);
+ free(value);
+
+ return true;
+}
+</pre>
+</li>
+</ol></li></ol>
+
+<h2 id="route" name="route">Recognizing the Route Information</h2>
+
+
+<p>The result of the <a href="#search_route">route calculation request</a> (<span style="font-family: Courier New,Courier,monospace;">maps_service_search_route()</span> or <span style="font-family: Courier New,Courier,monospace;">maps_service_search_route_waypoints()</span>) is retrieved from the map service using multiple iterations of the <span style="font-family: Courier New,Courier,monospace;">maps_service_search_route_cb()</span> callback. The result is an instance of route data.</p>
+
+ <table class="note">
+<tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">Different map providers are capable of providing different sets of route data features. Some map providers can extend the route data features with extra properties that are not specified in the Maps Service API. Such properties are organized as a key-value storage where the keys are the names of the properties.
+
+ <p>If your map provider does not support a specific feature, the get function for the feature returns an error. To prevent problems, you can <a href="#initial">check which data features are available</a> in your map provider using the <span style="font-family: Courier New,Courier,monospace;">maps_service_provider_is_data_supported()</span> function.</p>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+
+
+<p>To parse route data:</p>
+
+<ol><li><p>To get the route information features, such as route ID, origin, destination, and total distance, use the following functions with a <span style="font-family: Courier New,Courier,monospace;">maps_route_h</span> place handle:</p>
+<ul>
+<li>To obtain the route ID, use the <span style="font-family: Courier New,Courier,monospace;">maps_route_get_route_id()</span> function:
+<pre class="prettyprint">
+// Obtain the route ID
char *id = NULL;
-error = maps_route_get_route_id(route, &id);
-if(error != MAPS_ERROR_NONE) {
- /* Handle Error */
+error = maps_route_get_route_id(route, &id);
+if (error != MAPS_ERROR_NONE)
+{
+ // Error handling
}
-/* Use route id */
+// Use the route ID
free(id);
- </pre>
- </li>
-
- <li><p>To obtaining the route origin and destination use
- <span style="font-family: Courier New,Courier,monospace;"> maps_route_get_origin()</span> and
- <span style="font-family: Courier New,Courier,monospace;"> maps_route_get_destination()</span> respectively.</p>
- <pre class="prettyprint">
-/* Obtain route origin and destination */
+</pre>
+</li>
+
+<li>To obtain the route origin and destination, use the <span style="font-family: Courier New,Courier,monospace;">maps_route_get_origin()</span> and <span style="font-family: Courier New,Courier,monospace;">maps_route_get_destination()</span> functions:
+<pre class="prettyprint">
+// Obtain the route origin and destination
maps_coordinates_h origin = NULL, destination = NULL;
-error = maps_route_get_origin(route, &origin);
-if(error != MAPS_ERROR_NONE) {
- /* Handle Error */
+error = maps_route_get_origin(route, &origin);
+if (error != MAPS_ERROR_NONE)
+{
+ // Error handling
}
-error = maps_route_get_destination(route, &destination);
-if(error != MAPS_ERROR_NONE) {
- /* Handle Error */
+error = maps_route_get_destination(route, &destination);
+if (error != MAPS_ERROR_NONE)
+{
+ // Error handling
}
-/* Use route origin and destination */
+// Use the route origin and destination
maps_coordinates_destroy(origin);
maps_coordinates_destroy(destination);
- </pre>
- </li>
+</pre>
+</li>
- <li><p>To obtaining the route total distance use
- <span style="font-family: Courier New,Courier,monospace;"> maps_route_get_total_distance()</span>.</p>
- <pre class="prettyprint">
-/* Obtain route total distance */
+<li>To obtain the route total distance, use the <span style="font-family: Courier New,Courier,monospace;">maps_route_get_total_distance()</span> function:
+<pre class="prettyprint">
+// Obtain the total route distance
double total_distance = .0;
-error = maps_route_get_total_distance(route, &total_distance);
-if(error != MAPS_ERROR_NONE) {
- /* Handle Error */
-}
-/* Use route total distance */
- </pre>
- </li>
- </ol>
- <p>To obtain other place features follow the same approach using functions:</p>
- <ul>
- <li><p><span style="font-family: Courier New,Courier,monospace;">maps_route_get_bounding_box()</span></p>
- <li><p><span style="font-family: Courier New,Courier,monospace;">maps_route_get_transport_mode()</span></p>
- <li><p><span style="font-family: Courier New,Courier,monospace;">maps_route_get_total_duration()</span></p>
- <li><p><span style="font-family: Courier New,Courier,monospace;">maps_route_get_distance_unit()</span></p>
- <li><p><span style="font-family: Courier New,Courier,monospace;">maps_place_get_supplier_link()</span></p>
- <li><p><span style="font-family: Courier New,Courier,monospace;">maps_place_get_related_link()</span></p>
- </ul>
- <br>
- <p>To get lists of features of the route information, such as path or list of segments, use following iterating functions.</p>
- <ol>
- <li><p>To obtaining the list of geographical points, defining the route, use
- <span style="font-family: Courier New,Courier,monospace;"> maps_route_foreach_path()</span>.</p>
-
<pre class="prettyprint">
+error = maps_route_get_total_distance(route, &total_distance);
+if (error != MAPS_ERROR_NONE)
+{
+ // Error handling
+}
+// Use the total route distance
+</pre>
+</li>
+</ul>
+<p>To obtain other route features, follow the same approach using the following functions:</p>
+<ul>
+ <li><span style="font-family: Courier New,Courier,monospace;">maps_route_get_bounding_box()</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace;">maps_route_get_transport_mode()</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace;">maps_route_get_total_duration()</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace;">maps_route_get_distance_unit()</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace;">maps_place_get_supplier_link()</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace;">maps_place_get_related_link()</span></li>
+</ul></li>
+<li>
+<p>To get lists of route information features, such as path or list of segments, use the following iterating functions:</p>
+<ol type="a">
+<li>To obtain the list of geographic points defining the route, use the <span style="font-family: Courier New,Courier,monospace;">maps_route_foreach_path()</span> function:
+<pre class="prettyprint">
error = maps_route_foreach_path(route, __maps_route_path_cb, user_data);
-if(error != MAPS_ERROR_NONE) {
- /* Handle Error */
+if (error != MAPS_ERROR_NONE)
+{
+ // Error handling
}
- </pre>
- </li>
-
- <li><p>The callback
- <span style="font-family: Courier New,Courier,monospace;"> __maps_route_path_cb()</span> should be implemented as following:</p>
- <pre class="prettyprint">
-static bool __maps_route_path_cb(int index, int total,
- maps_coordinates_h coordinates, void* user_data)
+</pre>
+</li>
+
+<li>Implement the <span style="font-family: Courier New,Courier,monospace;">__maps_route_path_cb()</span> callback:
+<pre class="prettyprint">
+static bool __maps_route_path_cb(int index, int total, maps_coordinates_h coordinates, void* user_data)
{
+ // Handle the obtained route path coordinates
- /* Handle obtained coordinates of route path */
+ // Release the results
+ maps_coordinates_destroy(coordinates);
- /* Release results */
- maps_coordinates_destroy(coordinates);
- return true;
+ return true;
}
- </pre>
- </li>
+</pre>
+</li>
- <li><p>To obtaining the list of route segment use
- <span style="font-family: Courier New,Courier,monospace;"> maps_route_foreach_segment()</span>.</p>
- <pre class="prettyprint">
+<li>To obtain the list of route segments, use the <span style="font-family: Courier New,Courier,monospace;">maps_route_foreach_segment()</span> function:
+<pre class="prettyprint">
error = maps_route_foreach_segment(route, __maps_route_segment_cb, user_data);
-if(error != MAPS_ERROR_NONE)
+if (error != MAPS_ERROR_NONE)
{
- /* Handle Error */
+ // Error handling
}
- </pre>
- </li>
+</pre>
+</li>
- <li><p>The callback
- <span style="font-family: Courier New,Courier,monospace;"> __maps_route_segment_cb()</span> should be implemented as following:</p>
- <pre class="prettyprint">
+<li><p>Implement the <span style="font-family: Courier New,Courier,monospace;">__maps_route_segment_cb()</span> callback:</p>
+<pre class="prettyprint">
static bool __maps_route_segment_cb(int index, int total,
- maps_route_segment_h segment, void* user_data)
+maps_route_segment_h segment, void* user_data)
{
+ // Handle the obtained route segment
- /* Handle obtained segment of route */
+ // Release the results
+ maps_route_segment_destroy(segment);
- /* Release results */
- maps_route_segment_destroy(segment);
- return true;
-}
- </pre>
- </li>
- </ol>
- <br>
- <p>Different Maps Providers may provide the route data in different ways.</p>
- <p>For example, one Maps Provider may represent the route as a list of geographical coordinates while another may define it as a list of segments.
- Attempt to get unsupported features will causse error code MAPS_ERROR_NOT_SUPPORTED.
- To check which features of route data is valuable use maps_service_provider_is_data_supported() as mentioned in
- section <a class="opensection" href="#initial">Initializing the Maps Services</a>.
- <ol>
- <li><p>To obtain route path use following:
- <span style="font-family: Courier New,Courier,monospace;"> maps_route_foreach_path()</span>.</p>
- <pre class="prettyprint">
-/* Check if route path data is supported */
-bool is_route_path_supported = false;
-error = maps_service_provider_is_data_supported(maps,
- MAPS_ROUTE_PATH, &is_route_path_supported);
-
-if(error == MAPS_ERROR_NONE) {
- if(is_route_path_supported) {
-
- /* Obtain route path */
- error = maps_route_foreach_path(route, __maps_route_path_cb,
- user_data);
- if(error != MAPS_ERROR_NONE) {
- /* Handle Error */
- }
- }
-} else {
- /* Handle Error */
-}
- </pre>
- </li>
-
- <li><p>To obtain route segments use following:
- <span style="font-family: Courier New,Courier,monospace;"> maps_route_foreach_path()</span>.</p>
- <pre class="prettyprint">
-/* Check if route segment data is supported */
-
-bool is_route_segment_path_supported = false;
-error = maps_service_provider_is_data_supported(maps,
- MAPS_ROUTE_SEGMENTS_PATH, &is_route_segment_path_supported);
-
-bool is_route_segment_maneuvers_supported = false;
-error = maps_service_provider_is_data_supported(maps,
- MAPS_ROUTE_SEGMENTS_MANEUVERS, &is_route_segment_maneuvers_supported);
-
-if(error == MAPS_ERROR_NONE) {
- if(is_route_segment_path_supported
- || is_route_segment_maneuvers_supported) {
-
- /* Obtain route segments */
- error = maps_route_foreach_segment(route,
- __maps_route_segment_cb, user_data);
- if(error != MAPS_ERROR_NONE) {
- /* Handle Error */
- }
- }
-} else {
- /* Handle Error */
+ return true;
}
- </pre>
- </li>
- </ol>
- <br>
- <p>Some Maps Providers may extend route data features defined in Maps API with specific extra properties.</p>
- <ol>
- <li><p>To iterate through retrieved extra properties use
- <span style="font-family: Courier New,Courier,monospace;"> maps_route_foreach_property()</span>.</p>
- <pre class="prettyprint">
-/* Obtain Maps Provider specific route data properties */
-error = maps_route_foreach_property(route, __maps_route_properties_cb,
- user_data);
-if(error != MAPS_ERROR_NONE) {
- /* Handle Error */
-}
- </pre>
- </li>
-
- <li><p>The callback
- <span style="font-family: Courier New,Courier,monospace;"> __maps_route_properties_cb()</span> should be implemented as following:</p>
- <pre class="prettyprint">
-static bool __maps_route_properties_cb(int index, int total,
- char* key, void* value, void* user_data)
-{
+</pre>
+</li>
+</ol></li>
- /* Handle obtained a property:
- * property_name: key
- * property_value: value */
+<li><p>To get the extra properties that some map providers provide to extend the route data features defined in the Maps Service API:</p>
- /* Release property name and value */
- free(key);
- free(value);
- return true;
+<ol type="a">
+<li>To iterate through the retrieved extra properties, use the <span style="font-family: Courier New,Courier,monospace;">maps_route_foreach_property()</span> function:
+<pre class="prettyprint">
+// Obtain the map provider-specific route data properties
+error = maps_route_foreach_property(route, __maps_route_properties_cb, user_data);
+if (error != MAPS_ERROR_NONE)
+{
+ // Error handling
}
- </pre>
- </li>
- </ol>
- </div>
- </li>
-
-
- <li>
- <div class="devicespec-tit">
- <h2 id="preference" name="preference" class="items-tit-h2">Tuning API requests with preferences</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
- <p>All Maps API requests may be tuned with additional set of preferences.</p>
- <p>Preparing and sending the <span style="font-family: Courier New,Courier,monospace;">preference</span> parameter via API request
- allows the Maps Provider to generate more accurate results.</p>
-
- <ol>
- <li><p>To prepare preferences for Place Search Service use
- <span style="font-family: Courier New,Courier,monospace;"> maps_preference_set_property()</span> with following keys:</p>
- <ul>
- <li><p><span style="font-family: Courier New,Courier,monospace;">MAPS_PLACE_FILTER_TYPE</span></p>
- <li><p><span style="font-family: Courier New,Courier,monospace;">MAPS_PLACE_FILTER_SORT_BY</span></p>
- </ul>
- <p>The example from the section <a class="opensection" href="#search_place">Using Place Search Services</a> may be edited as following:</p>
- <pre class="prettyprint">
-/* Create extra preferences for Place Search Service */
-error = maps_preference_create(&preference);
-if(error != MAPS_ERROR_NONE) {
- /* Handle Error */
+</pre>
+</li>
+
+<li>Implement the <span style="font-family: Courier New,Courier,monospace;">__maps_route_properties_cb()</span> callback:
+<pre class="prettyprint">
+static bool __maps_route_properties_cb(int index, int total, char* key, void* value, void* user_data)
+{
+ // Handle the obtained property:
+ // property_name: key
+ // property_value: value
+
+ // Release the property name and value
+ free(key);
+ free(value);
+
+ return true;
+}
+</pre>
+</li>
+</ol></li></ol>
+
+<h2 id="preference" name="preference">Customizing the Service Requests</h2>
+
+<p>All Maps Service API requests can be customized with additional preferences. Preparing and sending the <span style="font-family: Courier New,Courier,monospace;">preference</span> parameter with the service request allows the map provider to generate more accurate results.</p>
+<p>To customize the service request:</p>
+<ul>
+ <li>To prepare preferences for the place search service, use the <span style="font-family: Courier New,Courier,monospace;">maps_preference_set_property()</span> function with the following keys:
+ <ul>
+ <li><span style="font-family: Courier New,Courier,monospace;">MAPS_PLACE_FILTER_TYPE</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace;">MAPS_PLACE_FILTER_SORT_BY</span></li>
+ </ul>
+<p>The example from <a href="#search_place">Using the Place Search Service</a> can be modified as follows to include the customized preferences:</p>
+<pre class="prettyprint">
+// Create extra preferences for the place search service
+error = maps_preference_create(&preference);
+if (error != MAPS_ERROR_NONE)
+{
+ // Error handling
}
-error = maps_preference_set_property(preference, MAPS_PLACE_FILTER_TYPE, "restaurant");
-if(error != MAPS_ERROR_NONE) {
- /* Handle Error */
+error = maps_preference_set_property(preference, MAPS_PLACE_FILTER_TYPE, "restaurant");
+if (error != MAPS_ERROR_NONE)
+{
+ // Error handling
}
maps_coordinates_h position = NULL;
-/* Create coordinates with maps_coordinates_create() */
+// Create the coordinates with maps_coordinates_create()
int distance = 500;
-error = maps_service_search_place(maps,
- position,
- distance,
- filter,
- preference,
- __maps_service_search_place_cb,
- user_data,
- &request_id);
-
-if(error != MAPS_ERROR_NONE) {
- /* Handle Error */
+error = maps_service_search_place(maps, position, distance, filter, preference,
+ __maps_service_search_place_cb, user_data, &request_id);
+
+if (error != MAPS_ERROR_NONE)
+{
+ // Error handling
}
maps_preference_destroy(preference);
- </pre>
- </li>
-
- <li><p>To prepare preferences for Routing Service use following functions:
- <ul>
- <li><p><span style="font-family: Courier New,Courier,monospace;">maps_preference_set_route_optimization()</span></p>
- <li><p><span style="font-family: Courier New,Courier,monospace;">maps_preference_set_route_transport_mode()</span></p>
- <li><p><span style="font-family: Courier New,Courier,monospace;">maps_preference_set_route_feature_weight()</span></p>
- <li><p><span style="font-family: Courier New,Courier,monospace;">maps_preference_set_route_feature()</span></p>
- </ul>
- <p>Also use maps_preference_set_property() with following keys:</p>
- <ul>
- <li><p><span style="font-family: Courier New,Courier,monospace;">MAPS_ROUTE_FREEFORM_ADDR_TO_AVOID</span></p>
- <li><p><span style="font-family: Courier New,Courier,monospace;">MAPS_ROUTE_STRUCTED_ADDR_TO_AVOID</span></p>
- <li><p><span style="font-family: Courier New,Courier,monospace;">MAPS_ROUTE_CIRCLE_AREA_TO_AVOID</span></p>
- <li><p><span style="font-family: Courier New,Courier,monospace;">MAPS_ROUTE_RECT_AREA_TO_AVOID</span></p>
- <li><p><span style="font-family: Courier New,Courier,monospace;">MAPS_ROUTE_GEOMETRY_BOUNDING_BOX</span></p>
- <li><p><span style="font-family: Courier New,Courier,monospace;">MAPS_ROUTE_GEOMETRY_RETRIEVAL</span></p>
- <li><p><span style="font-family: Courier New,Courier,monospace;">MAPS_ROUTE_INSTRUCTION_GEOMETRY</span></p>
- <li><p><span style="font-family: Courier New,Courier,monospace;">MAPS_ROUTE_INSTRUCTION_BOUNDING_BOX</span></p>
- <li><p><span style="font-family: Courier New,Courier,monospace;">MAPS_ROUTE_INSTRUCTION_RETRIEVAL</span></p>
- <li><p><span style="font-family: Courier New,Courier,monospace;">MAPS_ROUTE_REALTIME_TRAFFIC</span></p>
- </ul>
-
- <p>The example from the section <a class="opensection" href="#search_route">Using Routing Service</a> may be edited as following:</p>
- <pre class="prettyprint">
-/* Create extra preferences for Place Search Service */
-error = maps_preference_create(&preference);
-if(error != MAPS_ERROR_NONE) {
- /* Handle Error */
+</pre>
+</li>
+
+<li>To prepare preferences for the routing service, use the following functions:
+ <ul>
+ <li><span style="font-family: Courier New,Courier,monospace;">maps_preference_set_route_optimization()</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace;">maps_preference_set_route_transport_mode()</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace;">maps_preference_set_route_feature_weight()</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace;">maps_preference_set_route_feature()</span></li>
+ </ul>
+ <p>You can also use the <span style="font-family: Courier New,Courier,monospace;">maps_preference_set_property()</span> function with the following keys:</p>
+ <ul>
+ <li><span style="font-family: Courier New,Courier,monospace;">MAPS_ROUTE_FREEFORM_ADDR_TO_AVOID</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace;">MAPS_ROUTE_STRUCTED_ADDR_TO_AVOID</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace;">MAPS_ROUTE_CIRCLE_AREA_TO_AVOID</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace;">MAPS_ROUTE_RECT_AREA_TO_AVOID</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace;">MAPS_ROUTE_GEOMETRY_BOUNDING_BOX</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace;">MAPS_ROUTE_GEOMETRY_RETRIEVAL</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace;">MAPS_ROUTE_INSTRUCTION_GEOMETRY</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace;">MAPS_ROUTE_INSTRUCTION_BOUNDING_BOX</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace;">MAPS_ROUTE_INSTRUCTION_RETRIEVAL</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace;">MAPS_ROUTE_REALTIME_TRAFFIC</span></li>
+ </ul>
+
+<p>The example from <a href="#search_route">Using the Routing Service</a> can be modified as follows to include the customized preferences:</p>
+<pre class="prettyprint">
+// Create extra preferences for the routing service
+error = maps_preference_create(&preference);
+if (error != MAPS_ERROR_NONE)
+{
+ // Error handling
}
-error = maps_preference_set_property(preference, MAPS_ROUTE_FREEFORM_ADDR_TO_AVOID, "Suwon, Digital City");
-if(error != MAPS_ERROR_NONE) {
- /* Handle Error */
+error = maps_preference_set_property(preference, MAPS_ROUTE_FREEFORM_ADDR_TO_AVOID, "Suwon, Digital City");
+if (error != MAPS_ERROR_NONE)
+{
+ // Error handling
}
error = maps_preference_set_route_optimization(preference, MAPS_ROUTE_TYPE_SHORTEST);
-if(error != MAPS_ERROR_NONE) {
- /* Handle Error */
+if (error != MAPS_ERROR_NONE)
+{
+ // Error handling
}
maps_coordinates_h origin = NULL, destination = NULL;
-/* Create coordinates with maps_coordinates_create() */
-
-error = maps_service_search_route(maps,
- origin,
- destination,
- preference,
- __maps_service_search_route_cb,
- user_data,
- &request_id);
-
-if(error != MAPS_ERROR_NONE) {
- /* Handle Error */
+// Create the coordinates with maps_coordinates_create()
+
+error = maps_service_search_route(maps, origin, destination, preference,
+ __maps_service_search_route_cb, user_data, &request_id);
+
+if (error != MAPS_ERROR_NONE)
+{
+ // Error handling
}
maps_preference_destroy(preference);
- </pre>
- </li>
- </ol>
- <p>In case of specific preferences, required by your Maps Provider, use
- <span style="font-family: Courier New,Courier,monospace;"> maps_preference_set_property()</span> with key-value pairs,
- defined in the appropriate Maps Provider documentation.
- </div>
- </li>
- </ul>
- </div>
- </div>
-
- <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
- <script type="text/javascript" src="../../scripts/showhide.js"></script>
-
- </div>
- </div>
+</pre>
+</li>
+</ul>
+<p>If your map provider requires any specific preferences, use the <span style="font-family: Courier New,Courier,monospace;">maps_preference_set_property()</span> function with key-value pairs defined in the appropriate map provider documentation.</p>
+
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div>
+</div>
</div>
<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
-<div id="footer">
- <p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank"> Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+<div 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);
- })();
+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>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a class="opensection" href="#init">Initializing the Email Service</a></li>
- <li><a class="opensection" href="#creatingmail">Creating and Sending Email</a></li>
+ <li><a href="#init">Initializing the Email Service</a></li>
+ <li><a href="#creatingmail">Creating and Sending Email</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.guides/html/native/messaging/email_n.htm">Email Guide</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MESSAGING__EMAIL__MODULE.html">Email API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MESSAGING__EMAIL__MODULE.html">Email API for Mobile Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Email: Managing Emails</h1>
- <div class="cont"><div class="static-cont">
+
<p>This tutorial demonstrates how you can send email messages with attachments.</p>
+<table class="note">
+<tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">This feature is supported in mobile applications only.</td>
+ </tr>
+ </tbody>
+ </table>
+
<h2>Warm-up</h2>
<p>Become familiar with the Email API basics by learning about:</p>
<ul>
- <li><a class="opensection" href="#init">Initializing the Email Service</a>
+ <li><a href="#init">Initializing the Email Service</a>
<p>Initialize the email service for use.</p></li>
- <li><a class="opensection" href="#creatingmail">Creating and Sending Email</a>
+ <li><a href="#creatingmail">Creating and Sending Email</a>
<p>Create and send a message after adding attachments and recipients.</p></li>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
-
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="init" name="init" class="items-tit-h2">Initializing the Email Service</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="init" name="init">Initializing the Email Service</h2>
+
<p>To initialize the email service:</p>
<ol><li><p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MESSAGING__EMAIL__MODULE.html">Email</a> API, include the <span style="font-family: Courier New,Courier,monospace;"><email.h></span> header file in your application:</p>
<pre class="prettyprint">
<li><p>To build your application with the Email API, package dependencies and the build option must be configured: </p>
-<ol><li>Add the below line to the spec file.
+<ol type="a"><li>Add the below line to the spec file.
<pre class="prettyprint">BuildRequires:capi-messaging-email</pre></li>
<li>Add <span style="font-family: Courier New,Courier,monospace">capi-messaging-email</span> to <span style="font-family: Courier New,Courier,monospace">pkg_check_modules</span> in the <span style="font-family: Courier New,Courier,monospace;">CMakeList.txt</span> file.</li></ol></li></ol>
<p>The email service does not need any initialization or connection opening before the API usage. Email creation and sending functions can be used without any additional preparation.</p>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="creatingmail" name="creatingmail" class="items-tit-h2">Creating and Sending Email</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="creatingmail" name="creatingmail">Creating and Sending Email</h2>
+
<p>To create and send email messages:</p>
<ol><li>Create an email message.
{
dlog_print(DLOG_INFO, LOG_TAG, "Failed to delete email message\n");
}</pre></li></ol>
- </div>
- </li>
- </ul>
-</div>
-</div>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.guides/html/native/messaging/messaging_guide_n.htm">Messaging Guides</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MESSAGING__FRAMEWORK.html">Messaging API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MESSAGING__FRAMEWORK.html">Messaging API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MESSAGING__FRAMEWORK.html">Messaging API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Messaging: Sending SMS, MMS, Email, and Push Messages</h1>
- <p>The messaging tutorials demonstrate how to use the following features in creating Tizen mobile native applications:</p>
+ <p>The messaging tutorials demonstrate how to use the following features in creating Tizen native applications:</p>
<ul>
- <li><a class="opensection" href="sms_mms_tutorial_n.htm">Messages: Creating and Sending SMS and MMS Messages</a> <p>Demonstrates how you can send SMS and MMS messages, and fetch messages from a specified message box.</p></li>
- <li><a class="opensection" href="email_tutorial_n.htm">Email: Managing Emails</a> <p>Demonstrates how you can send emails with attachments.</p></li>
- <li><a class="opensection" href="push_tutorial_n.htm">Push: Using the Push Service</a> <p>Demonstrates how you can receive notifications through the Internet even when the application is not running.</p></li>
+ <li><a href="sms_mms_tutorial_n.htm">Messages: Creating and Sending SMS and MMS Messages</a> <p>Demonstrates how you can send SMS and MMS messages, and fetch messages from a specified message box.</p></li>
+ <li><a href="push_tutorial_n.htm">Push: Using the Push Service</a> <p>Demonstrates how you can receive notifications through the Internet even when the application is not running.</p></li>
</ul>
+<p>The following tutorials apply in <span style="color: red">mobile applications only</span>:</p>
+ <ul>
+ <li><a href="email_tutorial_n.htm">Email: Managing Emails</a> <p>Demonstrates how you can send emails with attachments.</p></li>
+ </ul>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a class="opensection" href="#start">Initializing the Push Service</a></li>
- <li><a class="opensection" href="#connect">Connecting to the Push Service</a></li>
- <li><a class="opensection" href="#registration">Registering with the Push Server</a></li>
+ <li><a href="#start">Initializing the Push Service</a></li>
+ <li><a href="#connect">Connecting to the Push Service</a></li>
+ <li><a href="#registration">Registering with the Push Server</a></li>
<li>Notification management
<ul class="toc">
- <li><a class="opensection" href="#send">Sending Push Notifications</a></li>
- <li><a class="opensection" href="#dealing">Handling Push Notifications</a></li>
+ <li><a href="#send">Sending Push Notifications</a></li>
+ <li><a href="#dealing">Handling Push Notifications</a></li>
</ul></li>
- <li><a class="opensection" href="#security">Managing Security</a></li>
+ <li><a href="#security">Managing Security</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.guides/html/native/messaging/push_n.htm">Push Guide</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MESSAGING__PUSH__PUBLIC__MODULE.html">Push API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MESSAGING__PUSH__PUBLIC__MODULE.html">Push API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MESSAGING__PUSH__PUBLIC__MODULE.html">Push API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Push: Using the Push Service</h1>
- <div class="cont"><div class="static-cont">
+
<p>This tutorial demonstrates how you can use the Tizen Push Service to allow applications in a mobile device to receive notifications through the Internet even when the applications are not running.</p>
<h2>Warm-up</h2>
<p>Become familiar with the Push API basics by learning about:</p>
<ul>
- <li><a class="opensection" href="#start">Initializing the Push Service</a>
+ <li><a href="#start">Initializing the Push Service</a>
<p>Initialize the push service for use.</p></li>
- <li><a class="opensection" href="#connect">Connecting to the Push Service</a>
+ <li><a href="#connect">Connecting to the Push Service</a>
<p>Establish a socket connection to the push service.</p></li>
- <li><a class="opensection" href="#registration">Registering with the Push Server</a>
+ <li><a href="#registration">Registering with the Push Server</a>
<p>Register and unregister with the push server.</p></li>
<li>Notification management
<ul>
- <li><a class="opensection" href="#send">Sending Push Notifications</a>
+ <li><a href="#send">Sending Push Notifications</a>
<p>Send push notifications from the application server to an application.</p></li>
- <li><a class="opensection" href="#dealing">Handling Push Notifications</a>
+ <li><a href="#dealing">Handling Push Notifications</a>
<p>Receive notifications at different states.</p></li>
</ul></li>
- <li><a class="opensection" href="#security">Managing Security</a>
+ <li><a href="#security">Managing Security</a>
<p>Ensure the security of notifications containing sensitive information.</p></li>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
-
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="start" name="start" class="items-tit-h2">Initializing the Push Service</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="start" name="start">Initializing the Push Service</h2>
+
<p>The following figure illustrates the architecture of the Tizen push service.</p>
-<p style="text-align:center;"><img alt="Overview" src="../../images/push_overview.png" /></p>
+<p class="figure">Figure: Tizen push service architecture</p>
+<p align="center"><img alt="Tizen push service architecture" src="../../images/push_overview.png" /></p>
<p>The following steps illustrate a typical scenario for using the push messaging service on a Tizen device:</p>
<ol>
<li>When an application is installed and launched, it sends a registration request to Tizen push server through the push service.</li>
</pre>
</li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="connect" name="connect" class="items-tit-h2">Connecting to the Push Service</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="connect" name="connect">Connecting to the Push Service</h2>
+
<p>To request or receive push notifications, establish a socket connection to the push service. All the information regarding this connection must be controlled by a connection handle which can be defined as a global variable:</p>
<pre class="prettyprint">
<li id="state" name="state">Handle state transitions.
<p>After the connection to the service is made, your application is notified whenever the connection state changes. This notification is conducted through the <span style="font-family: Courier New,Courier,monospace;">_state_cb()</span> callback, which is defined in the <span style="font-family: Courier New,Courier,monospace;">push_service_connect()</span> function. The following figure illustrates the possible states.</p>
-<p
style="text-align:center;"><img alt="State transitions" src="../../images/push_state_transitions.png" /></p>
+<p
align="center"><img alt="State transitions" src="../../images/push_state_transitions.png" /></p>
<p>Once launched, your application is in the <span style="font-family: Courier New,Courier,monospace;">INITIAL</span> state. When the application establishes a connection to the service using the <span style="font-family: Courier New,Courier,monospace;">push_service_connect()</span> function, the state becomes either <span style="font-family: Courier New,Courier,monospace;">UNREGISTERED</span> or <span style="font-family: Courier New,Courier,monospace;">REGISTERED</span>:</p>
-<ul class="ul"><li>If your application is currently registered to the push server, the service forces your application to transit from the <span style="font-family: Courier New,Courier,monospace;">INITIAL</span> state to the <span style="font-family: Courier New,Courier,monospace;">REGISTERED</span> state. In this case, your application can request deregistration to the push server through the push service using the <span style="font-family: Courier New,Courier,monospace;">push_service_deregister()</span> function. If this request is approved by the push server, the state transits to <span style="font-family: Courier New,Courier,monospace;">UNREGISTERED</span>.</li>
+<ul><li>If your application is currently registered to the push server, the service forces your application to transit from the <span style="font-family: Courier New,Courier,monospace;">INITIAL</span> state to the <span style="font-family: Courier New,Courier,monospace;">REGISTERED</span> state. In this case, your application can request deregistration to the push server through the push service using the <span style="font-family: Courier New,Courier,monospace;">push_service_deregister()</span> function. If this request is approved by the push server, the state transits to <span style="font-family: Courier New,Courier,monospace;">UNREGISTERED</span>.</li>
<li>If your application is not currently registered to the push server, the state transits from the <span style="font-family: Courier New,Courier,monospace;">INITIAL</span> state to the <span style="font-family: Courier New,Courier,monospace;">UNREGISTERED</span> state. In this case, your application can request registration to the push server through the push service using the <span style="font-family: Courier New,Courier,monospace;">push_service_register()</span> function. If this request is approved by the push server, the state transits to <span style="font-family: Courier New,Courier,monospace;">REGISTERED</span>.</li>
<li>When an error occurs, the state transits to <span style="font-family: Courier New,Courier,monospace;">ERROR</span>.</li></ul>
<p>In the above example, the <span style="font-family: Courier New,Courier,monospace;">_on_state_registered()</span>, <span style="font-family: Courier New,Courier,monospace;">_on_state_unregistered()</span>, and <span style="font-family: Courier New,Courier,monospace;">_on_state_error()</span> functions contain the actions for the <span style="font-family: Courier New,Courier,monospace;">REGISTERED</span>, <span style="font-family: Courier New,Courier,monospace;">UNREGISTERED</span>, and <span style="font-family: Courier New,Courier,monospace;">ERROR</span> states, respectively. Your application does not need to handle the <span style="font-family: Courier New,Courier,monospace;">INITIAL</span> state because it is maintained internally, and this callback function is never invoked in this state. The second argument, <span style="font-family: Courier New,Courier,monospace;">err</span>, is the error message from the push service when the state becomes ERROR. Consequently, only the <span style="font-family: Courier New,Courier,monospace;">_on_state_error()</span> function takes this argument while others ignore it.</p>
</li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="registration" name="registration" class="items-tit-h2">Registering with the Push Server</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="registration" name="registration">Registering with the Push Server</h2>
+
<p>To receive push notifications, your application must send a registration request to the Tizen push server. When the server receives this request, it assigns a registration ID that is unique to your application on the particular device. When sending a notification from your application server, this registration ID is used as a destination address of your application. If your application no longer needs to receive push notifications, it needs to send a deregistration request to the server.</p>
<ol>
<li id="upon" name="upon">
<p>Your application transits to the <span style="font-family: Courier New,Courier,monospace;">REGISTERED</span> state in one of the following cases:</p>
-<ul class="ul">
+<ul>
<li>Your registration request that your application sent at the <span style="font-family: Courier New,Courier,monospace;">UNREGISTERED</span> state is approved.</li>
<li>Your already-registered application at the <span style="font-family: Courier New,Courier,monospace;">INITIAL</span> state is successfully connected to the push service.</li>
</ul>
<p>In both cases, the <span style="font-family: Courier New,Courier,monospace;">_state_cb()</span> callback function is called with <span style="font-family: Courier New,Courier,monospace;">PUSH_SERVICE_STATE_REGISTERED</span>. The application calls the <span style="font-family: Courier New,Courier,monospace;">_on_state_registered()</span> function immediately, <a href="#state">as shown in the state transitions</a>. Although you determine the actions inside the function, the following example shows the following actions that you need to bear in mind:</p>
-<ul class="ul">
+<ul>
<li>If the application has already been registered, request unread notifications to the service that has arrived before the application is launched.</li>
<li>If the application is newly registered, send the registration ID issued by the push server to your application server.</li>
</ul>
<p>Secondly, retrieve the registration ID from the <span style="font-family: Courier New,Courier,monospace;">push_conn</span> connection handle. If the ID is new or updated, you need to send it to your application server. This ID is used as a destination address to your application in a particular device. If your application has already sent the ID, you can skip this step. This logic is implemented in the <span style="font-family: Courier New,Courier,monospace;">_send_reg_id_if_necessary()</span> function.</p>
<p>Compute the hash value of the ID and compare it with the existing hash value.</p>
-<ul class="ul"><li>If they are different, your current ID is different from the previous one. In that case, send the registration ID to your application server and then store the new hash value. For security, it is not safe to keep your ID as a string because it can be easily exposed.</li>
+<ul><li>If they are different, your current ID is different from the previous one. In that case, send the registration ID to your application server and then store the new hash value. For security, it is not safe to keep your ID as a string because it can be easily exposed.</li>
<li>If they are the same, your application server already has this registration ID. In this case, the application exits this function.</li></ul>
</li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="send" name="send" class="items-tit-h2">Sending Push Notifications</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="send" name="send">Sending Push Notifications</h2>
+
<p>Once your application successfully sends its registration ID to your application server, you are ready to send push notifications from your application server to the application on that particular device. In this tutorial, a simple instruction for sending a push notification to 1 device is provided. For advanced features, refer to the detailed guide from the push server team.</p>
<p>To send push notifications:</p>
-<ul class="ul">
+<ul>
<li>Determine the RQM server.
<p>The request manager (RQM) servers collect your push notifications before sending them to your applications. The RQM server must be chosen based on the first 2 digits of the registration ID.</p>
<li>Send notifications.
<p>With the message field that you just created, you can construct a notification using a JSON query and send it to the RQM server using the POST method. The following list contains the details:</p>
-<ul class="ul">
+<ul>
<li>URI: URI of the RQM server chosen based on the first 2 digits of the registration ID</li>
<li>Method: POST</li>
<li>Data: JSON </li>
<tr>
<td><span style="font-family: Courier New,Courier,monospace;">reliableOption</span></td>
<td>The push server guarantees reliable message delivery if the <span style="font-family: Courier New,Courier,monospace;">reliableOption</span> is set. Possible options are the following:
- <ul class="ul">
+ <ul>
<li><span style="font-family: Courier New,Courier,monospace;">NoReliable</span>: Do not send any acknowledgment back to a third party server and do not store the notification in the push server if the push client did not receive the notification.</li>
<li><span style="font-family: Courier New,Courier,monospace;">Transport</span>: Send an acknowledgment back to the third party server when the push client receives the notification.</li>
<li><span style="font-family: Courier New,Courier,monospace;">Application</span>: Send an acknowledgment back to the third party server when a third party application checks the notification.</li>
</pre></li>
<li>Example request
-<pre class="prettyprint">
+<pre class="prettyprint lang-html">
{
- "encoding" : "base64" // Optional
+ "encoding" : "base64" <!--Optional-->
"regID" : "ab123456",
"requestID" : "0000001",
- "sender" : "oscal", // Optional
- "type" : 0 // Optional
- "message" : "badgeOption=INCREASE&badgeNumber=1&action=ALERT&alertMessage=Hi", // Optional
- "appData" : "{id:asdf&passwd:1234}", // Optional, (Opaque)
- "delayDate" : 60, // Optional
- "reliableOption" : "Transport", // Optional
- "sessionInfo" : "002002", // Optional
- "timeStamp" : 1234567890, // Optional
+ "sender" : "oscal", <!--Optional-->
+ "type" : 0 <!--Optional-->
+ "message" : "badgeOption=INCREASE&badgeNumber=1&action=ALERT&alertMessage=Hi", <!--Optional-->
+ "appData" : "{id:asdf&passwd:1234}", <!--Optional, (Opaque)-->
+ "delayDate" : 60, <!--Optional-->
+ "reliableOption" : "Transport", <!--Optional-->
+ "sessionInfo" : "002002", <!--Optional-->
+ "timeStamp" : 1234567890, <!--Optional-->
}
</pre>
</li>
</ul>
</li>
</ul>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="dealing" name="dealing" class="items-tit-h2">Handling Push Notifications</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="dealing" name="dealing">Handling Push Notifications</h2>
+
<p>When a notification arrives at the device, it is delivered to the destination application in a manner that depends on whether the application is running.</p>
<p>To handle incoming push notifications:</p>
-<ul class="ul">
+<ul>
<li id="receive" name="receive">Receive notifications when the application is running.
<p>When a notification arrives to your application while it is running (precisely, your application is connected to the service), the <span style="font-family: Courier New,Courier,monospace;">_noti_cb()</span> function is called as defined in the <span style="font-family: Courier New,Courier,monospace;">push_service_connect()</span> function. In this callback function, you can handle the received notification. The following example shows how your application can retrieve the app data (payload), message, and timestamp from the received notification:</p>
<li>Receive notifications when the application is not running.
<p>If the notification arrives when your application is not running, there are 3 ways to handle the notification:</p>
-<ul class="ul">
+<ul>
<li>Forcibly launch the application and deliver the notification to it.</li>
<li>Store the notification at the push service database and request it later when the application is launched.</li>
<li>Discard it.</li>
</li>
</ul>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="security" name="security" class="items-tit-h2">Managing Security</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="security" name="security">Managing Security</h2>
+
<p>When you send a notification with sensitive information, be aware of the chance that the notification is hijacked by someone else. It is your responsibility to keep such sensitive information safe from malicious access. The following instructions are strongly recommended:</p>
-<ul class="ul">
+<ul>
<li>Keep your push app ID confidential. <p>If it is exposed, hackers can try to hijack your notifications using a fake application with the exposed ID.</p></li>
<li>Do not store the registration ID on the device. <p>This ID can be seen as a destination address of the notifications. Without this ID, hackers cannot send fake notifications to your application.</p></li>
<li>Encrypt sensitive information. <p>When you send sensitive information, such as personal information and financial transactions, encrypt it and load it to the notification as a payload. Do not load the information to the message field of the notification. When the notification arrives at the device, your application decrypts the payload and retrieves the sensitive information.</p></li>
<li>Do not hardcode your AppSecret in your source code. <p>The AppSecret is a key to accessing the push server for sending notifications. If notifications are sent from your application server, your application does not need to know the AppSecret at all. Keep the AppSecret in the server and do not load any related information in your application. If you want device-to-device notification delivery without your application server, your application needs the AppSecret to send a notification from a device. In this case, it is your responsibility to keep the AppSecret safe.</p></li>
</ul>
- </div>
- </li>
- </ul>
-</div>
-</div>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a class="opensection" href="#init">Initializing the Messages Service</a></li>
- <li><a class="opensection" href="#fetching">Fetching Messages from a Specified Message Box</a></li>
- <li><a class="opensection" href="#sending">Sending SMS or MMS Messages</a></li>
+ <li><a href="#init">Initializing the Messages Service</a></li>
+ <li><a href="#fetching">Fetching Messages from a Specified Message Box</a></li>
+ <li><a href="#sending">Sending SMS or MMS Messages</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.guides/html/native/messaging/messages_n.htm">Messages Guide</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MESSAGING__MESSAGES__MODULE.html">Messages API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MESSAGING__MESSAGES__MODULE.html">Messages API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MESSAGING__MESSAGES__MODULE.html">Messages API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Messages: Creating and Sending SMS and MMS Messages</h1>
- <div class="cont"><div class="static-cont">
+
<p>This tutorial demonstrates how you can send SMS and MMS messages, and fetch messages from a specified message box.</p>
<h2>Warm-up</h2>
<p>Become familiar with the Messages API basics by learning about:</p>
<ul>
- <li><a class="opensection" href="#init">Initializing the Messages Service</a>
+ <li><a href="#init">Initializing the Messages Service</a>
<p>Initialize the Messages service for use.</p></li>
- <li><a class="opensection" href="#fetching">Fetching Messages from a Specified Message Box</a>
+ <li><a href="#fetching">Fetching Messages from a Specified Message Box</a>
<p>Fetch all SMS or MMS messages from a given message box (such as Inbox or the sent items).</p></li>
- <li><a class="opensection" href="#sending">Sending SMS or MMS Messages</a>
+ <li><a href="#sending">Sending SMS or MMS Messages</a>
<p>Create and send a message, and add attachments to MMS messages.</p></li>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
-
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="init" name="init" class="items-tit-h2">Initializing the Messages Service</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="init" name="init">Initializing the Messages Service</h2>
+
<p>To initialize the Messages service:</p>
-<ol><li><p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MESSAGING__MESSAGES__MODULE.html">Messages</a> API, include the <span style="font-family: Courier New,Courier,monospace"><messages.h></span> header file in your application:</p>
+<ol><li><p>To use the functions and data types of the Messages API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MESSAGING__MESSAGES__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MESSAGING__MESSAGES__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><messages.h></span> header file in your application:</p>
<pre class="prettyprint">
#include <messages.h>
</pre></li>
<pre class="prettyprint">messages_close_service(service_handle);
service_handle = NULL;</pre></li></ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="fetching" name="fetching" class="items-tit-h2">Fetching Messages from a Specified Message Box</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="fetching" name="fetching">Fetching Messages from a Specified Message Box</h2>
+
<p>To fetch messages from a message box, use the <span style="font-family: Courier New,Courier,monospace;">messages_foreach_message()</span> function with the appropriate parameters. One of these parameters is the callback function called for each message matching the search criteria.</p>
<ol><li>Define the message searching callback function.
-<ol><li>
+<ol type="a"><li>
<p>The callback function signature has to match the following typedef:</p>
<pre class="prettyprint">typedef bool(* messages_search_cb)(messages_message_h msg, int index, int result_count, int total_count, void *user_data)</pre></li>
<li><p>Within the callback, to print the message content (or to show it to the user in any other way), extract its text, address, and type as below:</p>
<li>Call the search function.
<p>With a connection opened and callback prepared, the <span style="font-family: Courier New,Courier,monospace;">messages_foreach_message()</span> function can be called to retrieve all existing messages stored in different mailboxes. The function arguments allow to select only a subset of all available messages based on:</p>
-<ul class="ul"><li>Message box type (inbox, outbox, sent items, drafts, or all of them)</li>
+<ul><li>Message box type (inbox, outbox, sent items, drafts, or all of them)</li>
<li>Message type (such as SMS, MMS)</li>
<li>Keyword (for searching based on text and subject)</li>
<li>Address (message recipient address)</li></ul>
}
messages_close_service(service_handle);</pre></li></ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="sending" name="sending" class="items-tit-h2">Sending SMS or MMS Messages</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="sending" name="sending">Sending SMS or MMS Messages</h2>
+
<p>The Messaging API provides functions to send SMS (Short Message Service) messages and MMS (Multimedia Message Service) messages with attachments (image or video files):</p>
<ol><li>Create a message.
<p>Before sending a message, open a connection to the messaging service.</p>
}</pre></li>
<li>Set a subject and add an attachment (note that sending MMS is not supported on the Emulator).
-<ul
class="ul"><li><p>You can set a message subject and add attachments to MMS messages. Set the subject:</p>
+<ul><li><p>You can set a message subject and add attachments to MMS messages. Set the subject:</p>
<pre class="prettyprint">error_code = messages_mms_set_subject(msg_hndl, "MMS test");
if (error_code != MESSAGES_ERROR_NONE)
{
}</pre></li></ul></li>
<li>Send the message.
-<ol><li><p>SMS and MMS sending is an asynchronous operation, and a callback function is needed to receive the sending operation status. This function has to match the following typedef:</p>
+<ol
type="a"><li><p>SMS and MMS sending is an asynchronous operation, and a callback function is needed to receive the sending operation status. This function has to match the following typedef:</p>
<pre class="prettyprint">typedef void(* messages_sent_cb)(messages_sending_result_e result, void *user_data)</pre></li>
<li><p>Using the first parameter in the callback (result), the messaging service informs you about the sending status. It can be used to determine whether the sending succeeded:</p>
<pre class="prettyprint">static void sent_msg_cb(messages_sending_result_e result, void *user_data)
{
dlog_print(DLOG_DEBUG, LOG_TAG, "Failed to send message");
}</pre></li></ol></li></ol>
- </div>
- </li>
-
- </ul>
-</div>
-</div>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
ret = fread(buffer, 1, nbytes, fp_r);
ret = audio_out_write(handle, buffer, nbytes);
- if(ret > AUDIO_IO_ERROR_NONE)
+ if (ret > AUDIO_IO_ERROR_NONE)
{
// Error handling
}
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a class="opensection" href="#init">Initializing the Camera</a></li>
- <li><a class="opensection" href="#photo">Taking a Photo</a></li>
- <li><a class="opensection" href="#attributes">Setting Camera Attributes</a></li>
- <li><a class="opensection" href="#release">Releasing Resources</a></li>
+ <li><a href="#init">Initializing the Camera</a></li>
+ <li><a href="#photo">Taking a Photo</a></li>
+ <li><a href="#attributes">Setting Camera Attributes</a></li>
+ <li><a href="#release">Releasing Resources</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.guides/html/native/multimedia/camera_n.htm">Camera Guide</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html">Camera API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html">Camera API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html">Camera API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Camera: Controlling a Camera Device</h1>
- <div class="cont"><div class="static-cont">
+
<p>This tutorial demonstrates how you can start a camera preview and take a photo. This tutorial also demonstrates how you can configure a camera by setting selected attributes.</p>
<h2>Warm-up</h2>
<p>Become familiar with the Camera API basics by learning about:</p>
<ul>
- <li><a class="opensection" href="#init">Initializing the Camera</a>
+ <li><a href="#init">Initializing the Camera</a>
<p>Initialize the camera for use.</p>
</li>
- <li><a class="opensection" href="#photo">Taking a Photo</a>
+ <li><a href="#photo">Taking a Photo</a>
<p>Start a camera preview and take a photo.</p>
</li>
- <li><a class="opensection" href="#attributes">Setting Camera Attributes</a>
+ <li><a href="#attributes">Setting Camera Attributes</a>
<p>Set the camera preview, zoom, and brightness attributes.</p>
</li>
- <li><a class="opensection" href="#release">Releasing Resources</a>
+ <li><a href="#release">Releasing Resources</a>
<p>Stop the camera, unregister the callback functions, and destroy the camera handle and release all its resources.</p>
</li>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
-
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="init" name="init" class="items-tit-h2">Initializing the Camera</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="init" name="init">Initializing the Camera</h2>
<p>Before you can start a camera preview or take a photo:</p>
-<ol><li><p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html">Camera</a> API, include the <span style="font-family: Courier New,Courier,monospace"><camera.h></span> header file in your application:</p>
+<ol><li><p>To use the functions and data types of the Camera API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><camera.h></span> header file in your application:</p>
<pre class="prettyprint">
#include <camera.h>
</pre></li>
dlog_print(DLOG_ERROR, LOG_TAG , "error code = %d", error_code);
}</pre>
-<p><span style="font-family: Courier New,Courier,monospace">CAMERA_DEVICE_CAMERA0</span> means that the current activated camera sensor is 0, of 2 selectable devices. These values are defined in the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html#gab030be4ec6b05144c3f2a732541e4104">camera_device_e</a> enumeration.</p>
+<p><span style="font-family: Courier New,Courier,monospace">CAMERA_DEVICE_CAMERA0</span> means that the current activated camera sensor is 0, of 2 selectable devices. These values are defined in the <span style="font-family: Courier New,Courier,monospace">camera_device_e</span> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html#gab030be4ec6b05144c3f2a732541e4104">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html#gab030be4ec6b05144c3f2a732541e4104">wearable</a> applications).</p>
</li>
</pre>
-<p>The returned state is one of the values defined in the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html#ga28cde1b92417f9ce43dde605ed822cde">camera_state_e</a> enumeration. If the state is not <span style="font-family: Courier New,Courier,monospace">CAMERA_STATE_CREATED</span>, reinitialize the camera.</p>
+<p>The returned state is one of the values defined in the <span style="font-family: Courier New,Courier,monospace">camera_state_e</span> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html#ga28cde1b92417f9ce43dde605ed822cde">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html#ga28cde1b92417f9ce43dde605ed822cde">wearable</a> applications). If the state is not <span style="font-family: Courier New,Courier,monospace">CAMERA_STATE_CREATED</span>, reinitialize the camera.</p>
</li>
<li>
-<p>Set the display for showing preview images by using the <span style="font-family: Courier New,Courier,monospace">camera_set_display()</span> function with 1 of the camera display types (<span style="font-family: Courier New,Courier,monospace">CAMERA_DISPLAY_TYPE_EVAS</span> or <span style="font-family: Courier New,Courier,monospace">CAMERA_DISPLAY_TYPE_OVERLAY</span>) defined in the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html#ga3ddd0982778fdfacd3694d643d1610ac">camera_display_type_e</a> enumeration:</p>
+<p>Set the display for showing preview images by using the <span style="font-family: Courier New,Courier,monospace">camera_set_display()</span> function with 1 of the camera display types (<span style="font-family: Courier New,Courier,monospace">CAMERA_DISPLAY_TYPE_EVAS</span> or <span style="font-family: Courier New,Courier,monospace">CAMERA_DISPLAY_TYPE_OVERLAY</span>) defined in the <span style="font-family: Courier New,Courier,monospace">camera_display_type_e</span> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html#ga3ddd0982778fdfacd3694d643d1610ac">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html#ga3ddd0982778fdfacd3694d643d1610ac">wearable</a> applications):</p>
<table class="note">
<tbody>
</table>
-<ul class="ul"><li>Example: Set the display according to the <span style="font-family: Courier New,Courier,monospace">camera_display_type_e</span>
+<ul><li>Example: Set the display according to the <span style="font-family: Courier New,Courier,monospace">camera_display_type_e</span>
<pre class="prettyprint">
int error_code = CAMERA_ERROR_NONE;
evas_object_color_set(cam_data->rect, 0, 0, 0, 0);
evas_object_render_op_set(cam_data->rect, EVAS_RENDER_COPY);
evas_object_size_hint_weight_set(cam_data->rect, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
- // Show window after base gui is set up
+ // Show the window after the base GUI is set up
evas_object_show(cam_data->win);
break;
error_code = camera_set_capture_format(cam_data.g_camera, CAMERA_PIXEL_FORMAT_JPEG);
</pre>
-<p>The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html#ga18b291f5f688ef92692b0cc273fd6ece">camera_pixel_format_e</a> enumeration defines the available capture formats.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">camera_pixel_format_e</span> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html#ga18b291f5f688ef92692b0cc273fd6ece">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html#ga18b291f5f688ef92692b0cc273fd6ece">wearable</a> applications) defines the available capture formats.</p>
</li>
error_code = camera_set_preview_cb(cam_data.g_camera, _camera_preview_cb, NULL);
</pre>
-<p>The following example code implements the <span style="font-family: Courier New,Courier,monospace">_camera_preview_cb()</span> callback function. The callback function starts auto-focusing using the <span style="font-family: Courier New,Courier,monospace">camera_start_focusing()</span> function, whose parameters are the <span style="font-family: Courier New,Courier,monospace">camera_h</span> camera handle and a Boolean flag defining whether the camera must continuously try to focus. The <span style="font-family: Courier New,Courier,monospace">g_enable_focus</span> flag is set to <span style="font-family: Courier New,Courier,monospace">false</span> to prevent the capturing process from restarting. If the result value of <span style="font-family: Courier New,Courier,monospace"> camera_start_focusing()</span> with continuous mode true is CAMERA_ERROR_NOT_SUPPORTED, please set second parameter value as false</p>
+<p>The following example code implements the <span style="font-family: Courier New,Courier,monospace">_camera_preview_cb()</span> callback function. The callback function starts auto-focusing using the <span style="font-family: Courier New,Courier,monospace">camera_start_focusing()</span> function, whose parameters are the <span style="font-family: Courier New,Courier,monospace">camera_h</span> camera handle and a Boolean flag defining whether the camera must continuously try to focus. The <span style="font-family: Courier New,Courier,monospace">g_enable_focus</span> flag is set to <span style="font-family: Courier New,Courier,monospace">false</span> to prevent the capturing process from restarting. If the result value of the <span style="font-family: Courier New,Courier,monospace">camera_start_focusing()</span> function with the continuous mode set to <span style="font-family: Courier New,Courier,monospace">true</span> is <span style="font-family: Courier New,Courier,monospace">CAMERA_ERROR_NOT_SUPPORTED</span>, set the second parameter value as <span style="font-family: Courier New,Courier,monospace">false</span>.</p>
<pre class="prettyprint">
static void _camera_preview_cb(camera_preview_data_s *frame, void *user_data)
if (g_enable_focus == true)
{
error_code = camera_start_focusing(cam_data.g_camera, true);
+
if (error_code == CAMERA_ERROR_NOT_SUPPORTED)
{
error_code = camera_start_focusing(cam_data.g_camera, false);
}
+
g_enable_focus = false;
}
}</pre>
</li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="photo" name="photo" class="items-tit-h2">Taking a Photo</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="photo" name="photo">Taking a Photo</h2>
+
<p>To take a photo:</p>
<ol>
</li>
<li>Capture an image:
-<ol>
+<ol type="a">
<li>
</ol></li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="attributes" name="attributes" class="items-tit-h2">Setting Camera Attributes</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="attributes" name="attributes">Setting Camera Attributes</h2>
+
<p>You can set the following additional camera attributes:</p>
-<ul class="ul">
+<ul>
<li>Camera preview attributes</li>
<li>Camera zoom attribute</li>
<li>Camera brightness attribute</li>
// Set camera brightness
error_code = camera_attr_set_brightness(cam_data.g_camera, g_bright_level);
</pre>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="release" name="release" class="items-tit-h2">Releasing Resources</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="release" name="release">Releasing Resources</h2>
+
<p>After you have finished working with the camera, stop the camera and clean up the application environment:</p>
<ol>
<pre class="prettyprint">// Destroy camera handle
error_code = camera_destroy(cam_data.g_camera);</pre></li>
</ol>
- </div>
- </li>
- </ul>
-</div>
-</div>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a class="opensection" href="#init">Initializing the Image Utilities</a></li>
+ <li><a href="#init">Initializing the Image Utilities</a></li>
<li>Image manipulation
<ul class="toc">
- <li><a class="opensection" href="#colorspace">Converting the Color Space</a></li>
- <li><a class="opensection" href="#resize">Resizing an Image</a></li>
- <li><a class="opensection" href="#rotate">Rotating an Image</a></li>
- <li><a class="opensection" href="#crop">Cropping an Image</a></li>
+ <li><a href="#colorspace">Converting the Color Space</a></li>
+ <li><a href="#resize">Resizing an Image</a></li>
+ <li><a href="#rotate">Rotating an Image</a></li>
+ <li><a href="#crop">Cropping an Image</a></li>
</ul>
</li>
- <li><a class="opensection" href="#decode">Decoding from a File or Memory</a></li>
- <li><a class="opensection" href="#encode">Encoding to a File or Memory</a></li>
+ <li><a href="#decode">Decoding from a File or Memory</a></li>
+ <li><a href="#encode">Encoding to a File or Memory</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.guides/html/native/multimedia/image_util_n.htm">Image Util Guide</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__IMAGE__UTIL__MODULE.html">Image Util API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__IMAGE__UTIL__MODULE.html">Image Util API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__IMAGE__UTIL__MODULE.html">Image Util API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Image Util: Encoding, Decoding, and Transforming Images</h1>
- <div class="cont"><div class="static-cont">
+
<p>This tutorial demonstrates how you can convert, resize, rotate, and crop an image, and decode and encode a JPEG image.</p>
<p>Become familiar with the Image Util API basics by learning about:</p>
<ul>
- <li><a class="opensection" href="#init">Initializing Image Utilities</a>
+ <li><a href="#init">Initializing Image Utilities</a>
<p>Initialize the image utilities for use.</p></li>
<li>Image manipulation
<ul>
- <li><a class="opensection" href="#colorspace">Converting the Color Space</a>
+ <li><a href="#colorspace">Converting the Color Space</a>
<p>Convert an image from one color space to another.</p>
</li>
- <li><a class="opensection" href="#resize">Resizing an Image</a>
+ <li><a href="#resize">Resizing an Image</a>
<p>Resize an image.</p>
</li>
- <li><a class="opensection" href="#rotate">Rotating an Image</a>
+ <li><a href="#rotate">Rotating an Image</a>
<p>Rotate an image.</p>
</li>
- <li><a class="opensection" href="#crop">Cropping an Image</a>
+ <li><a href="#crop">Cropping an Image</a>
<p>Crop an image.</p>
</li>
</ul>
</li>
- <li><a class="opensection" href="#decode">Decoding from a File or Memory</a>
+ <li><a href="#decode">Decoding from a File or Memory</a>
<p>Decode a JPEG image from a file or memory.</p>
</li>
- <li><a class="opensection" href="#encode">Encoding to a File or Memory</a>
+ <li><a href="#encode">Encoding to a File or Memory</a>
<p>Encode raw image data to a JPEG file or to memory in JPEG format.</p>
</li>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
-
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="init" name="init" class="items-tit-h2">Initializing the Image Utilities</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="init" name="init">Initializing the Image Utilities</h2>
+
<p>To initialize image utilities:</p>
<ol>
-<li><p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__IMAGE__UTIL__MODULE.html">Image Util</a> API, include the <span style="font-family: Courier New,Courier,monospace"><image_util.h></span> header file in your application:</p>
+<li><p>To use the functions and data types of the Image Util API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__IMAGE__UTIL__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__IMAGE__UTIL__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><image_util.h></span> header file in your application:</p>
<pre class="prettyprint">
#include <image_util.h>
</pre></li>
void * user_data);</pre>
<p>For more information about the YUV color space, see <a href="http://www.fourcc.org/yuv.php" target="blank">http://www.fourcc.org/yuv.php</a>.</p></li></ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="colorspace" name="colorspace" class="items-tit-h2">Converting the Color Space</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="colorspace" name="colorspace">Converting the Color Space</h2>
+
<p>To convert an image from one color space to another:</p>
<ol><li>Create a transform handle to support the conversion.
<th class="note">Note</th>
</tr>
<tr>
- <td class="note"><ul class="ul"><li>The function only converts the color space. It does not change the image width or height.</li>
+ <td class="note"><ul><li>The function only converts the color space. It does not change the image width or height.</li>
<li>Because of the restrictions of the image processing library, not all color space combinations are supported for conversion. For example, the NV12 format is commonly used in hardware chips, but it is not supported by the library.</li>
<li>If the hardware acceleration is enabled, you can execute 2 more image processings using just the created handle.</li></ul></td>
</tr>
</li></ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="resize" name="resize" class="items-tit-h2">Resizing an Image</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="resize" name="resize">Resizing an Image</h2>
+
<p>To resize an image:</p>
<ol><li><p>Create a transform handle to support resizing.</p>
<th class="note">Note</th>
</tr>
<tr>
- <td class="note"><ul class="ul"><li>Since the source format is the same as the target format, you can ignore the format.</li>
+ <td class="note"><ul><li>Since the source format is the same as the target format, you can ignore the format.</li>
<li>If the color space is YUV, the target image width and height must be multiples of 8. This restriction does not apply to the RGB images.</li>
<li>If the hardware acceleration is enabled, you can execute 2 more image processings using just the created handle.</li></ul></td>
</tr>
<p>When the callback confirms that the transform is completed, call the <span style="font-family: Courier New,Courier,monospace">image_util_transform_destroy()</span> function:</p>
<pre class="prettyprint">ret = image_util_transform_destroy(handle);</pre>
</li></ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="rotate" name="rotate" class="items-tit-h2">Rotating an Image</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="rotate" name="rotate">Rotating an Image</h2>
+
<p>To rotate an image:</p>
<ol><li><p>Create a transform handle to support rotating.</p>
<pre class="prettyprint">ret = image_util_transform_set_rotation(handle, rotation);</pre>
<p>The possible values for the <span style="font-family: Courier New,Courier,monospace">rotation</span> parameter are:</p>
-<ul class="ul">
+<ul>
<li><span style="font-family: Courier New,Courier,monospace">IMAGE_UTIL_ROTATION_NONE</span></li>
<li><span style="font-family: Courier New,Courier,monospace">IMAGE_UTIL_ROTATION_90</span></li>
<li><span style="font-family: Courier New,Courier,monospace">IMAGE_UTIL_ROTATION_180</span></li>
<th class="note">Note</th>
</tr>
<tr>
- <td class="note"><ul class="ul"><li>Since the source format is the same as the target format, you can ignore the <span style="font-family: Courier New,Courier,monospace">src_format.</span></li>
+ <td class="note"><ul><li>Since the source format is the same as the target format, you can ignore the <span style="font-family: Courier New,Courier,monospace">src_format.</span></li>
<li>If the color space is YUV, the target image width and height must be multiples of 8. This restriction does not apply to the RGB images.</li>
<li>If the hardware acceleration is enabled, you can execute 2 more image processings using just the created handle.</li></ul></td>
</tr>
<pre class="prettyprint">ret = image_util_transform_destroy(handle);</pre>
</li></ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="crop" name="crop" class="items-tit-h2">Cropping an Image</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="crop" name="crop">Cropping an Image</h2>
+
<p>To crop an image:</p>
<ol><li><p>Create a transform handle to support cropping.</p>
<th class="note">Note</th>
</tr>
<tr>
- <td class="note"><ul class="ul"><li>Because of a YUV restriction, and because the crop start position can otherwise be set arbitrarily, the cropped image width and height must be even.</li>
+ <td class="note"><ul><li>Because of a YUV restriction, and because the crop start position can otherwise be set arbitrarily, the cropped image width and height must be even.</li>
<li>If the hardware acceleration is enabled, you can execute 2 more image processings using just the created handle.</li></ul></td>
</tr>
</tbody>
</table>
</li></ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="decode" name="decode" class="items-tit-h2">Decoding from a File or Memory</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="decode" name="decode">Decoding from a File or Memory</h2>
+
<p>To decode a JPEG image:</p>
-<ul class="ul"><li>To decode from a file, use the <span style="font-family: Courier New,Courier,monospace">image_util_decode_jpeg()</span> function.
+<ul><li>To decode from a file, use the <span style="font-family: Courier New,Courier,monospace">image_util_decode_jpeg()</span> function.
<p>Manually allocate the memory for the image buffer based on a calculated buffer size.</p>
<p>Manually allocate the memory for the image buffer based on a calculated buffer size.</p>
<pre class="prettyprint">ret = image_util_decode_jpeg_from_memory(jpeg_buffer, jpeg_size, colorspace, image_buffer, width, height, size);</pre></li></ul>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="encode" name="encode" class="items-tit-h2">Encoding to a File or Memory</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="encode" name="encode">Encoding to a File or Memory</h2>
+
<p>To encode a rotated or flipped image:</p>
-<ul class="ul"><li>To encode to a JPEG file, use the <span style="font-family: Courier New,Courier,monospace">image_util_encode_jpeg()</span> function:
+<ul><li>To encode to a JPEG file, use the <span style="font-family: Courier New,Courier,monospace">image_util_encode_jpeg()</span> function:
<pre class="prettyprint">ret = image_util_encode_jpeg(img_flip_target, dest_width, dest_height, colorspace, 100, OUTPUT_ROTATED_JPEG);</pre></li>
<li>To encode to memory in JPEG format, use the <span style="font-family: Courier New,Courier,monospace">image_util_encode_jpeg_to_memory()</span> function:
-<pre class="prettyprint">ret = image_util_encode_jpeg_to_memory(img_flip_target, dest_width, dest_height, colorspace, 100, jpeg_buffer, jpeg_size);</pre></li></ul>
- </div>
- </li>
- </ul>
-</div>
-</div>
+<pre class="prettyprint">ret = image_util_encode_jpeg_to_memory(img_flip_target, dest_width, dest_height, colorspace, 100, jpeg_buffer, jpeg_size);</pre></li></ul>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a class="opensection" href="#init">Initializing Media Codecs</a></li>
- <li><a class="opensection" href="#manage">Managing Media Codecs</a></li>
- <li><a class="opensection" href="#release">Releasing Resources</a></li>
+ <li><a href="#init">Initializing Media Codecs</a></li>
+ <li><a href="#manage">Managing Media Codecs</a></li>
+ <li><a href="#release">Releasing Resources</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.guides/html/native/multimedia/media_codecs_n.htm">Media Codec Guide</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CODEC__MODULE.html">Media Codec API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CODEC__MODULE.html">Media Codec API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__CODEC__MODULE.html">Media Codec API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Media Codec: Encoding and Decoding Media Files</h1>
- <div class="cont"><div class="static-cont">
+
-<p>This tutorial demonstrates how to encode and decode media files.</p>
+<p>This tutorial demonstrates how you can encode and decode media files.</p>
<h2>Warm-up</h2>
<p>Become familiar with the Media Codec API basics by learning about:</p>
<ul><li>
-<a class="opensection" href="#init">Initializing Media Codecs</a>
+<a href="#init">Initializing Media Codecs</a>
<p>Initialize the media codecs for use.</p></li>
-<li><a class="opensection" href="#manage">Managing Media Codecs</a>
+<li><a href="#manage">Managing Media Codecs</a>
<p>Prepare and start the codec.</p></li>
-<li><a class="opensection" href="#release">Releasing Resources</a>
+<li><a href="#release">Releasing Resources</a>
<p>Reset the codec and destroy the handle.</p></li></ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
-
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="init" name="init" class="items-tit-h2">Initializing Media Codecs</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="init" name="init">Initializing Media Codecs</h2>
+
<p>Before using the Media codec:</p>
<ol>
-<li><p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CODEC__MODULE.html">Media Codec</a> API, include the <span style="font-family: Courier New,Courier,monospace"><media_codec.h></span> header file in your application:</p>
+<li><p>To use the functions and data types of the Media Codec API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CODEC__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__CODEC__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><media_codec.h></span> header file in your application:</p>
<pre class="prettyprint">
#include <media_codec.h>
</pre></li>
ret = mediacodec_create(&mediacodec);</pre>
</li>
<li>If the handle is created normally, set the codec and configuration using the <span style="font-family: Courier New,Courier,monospace">mediacodec_set_codec()</span> function.
-<p>The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CODEC__MODULE.html#ga2e7775fb3609e4349c742b1d9eb5febc">mediacodec_codec_type_e</a> and <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CODEC__MODULE.html#gab01ad3dbb4989537108a5c9f2062447a">mediacodec_support_type_e</a> enumeration define the media codec type and support type.</p>
+<p>The enumerations <span style="font-family: Courier New,Courier,monospace">mediacodec_codec_type_e</span> (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CODEC__MODULE.html#ga2e7775fb3609e4349c742b1d9eb5febc">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__CODEC__MODULE.html#ga2e7775fb3609e4349c742b1d9eb5febc">wearable</a> applications) and <span style="font-family: Courier New,Courier,monospace">mediacodec_support_type_e</span> (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CODEC__MODULE.html#gab01ad3dbb4989537108a5c9f2062447a">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__CODEC__MODULE.html#gab01ad3dbb4989537108a5c9f2062447a">wearable</a> applications) define the media codec type and support type.</p>
<pre class="prettyprint">ret = mediacodec_set_codec(mediacodec, (mediacodec_codec_type_e)codecid, flag); </pre>
</li>
<li>Set the video decoder using the <span style="font-family: Courier New,Courier,monospace">mediacodec_set_vdec_info()</span> or <span style="font-family: Courier New,Courier,monospace">mediacodec_set_venc_info()</span> function.
ret = mediacodec_set_venc_info(mediacodec, width, height, fps, target_bits);</pre>
</li></ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="manage" name="manage" class="items-tit-h2">Managing Media Codecs</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="manage" name="manage">Managing Media Codecs</h2>
+
<p>The Media Codec usage follows a basic pattern:</p>
<ol><li>Create and configure the Media Codec handle.</li>
<li>Loop until done:
-<ul class="ul"><li>If an input buffer is ready, read a chunk of input and copy it into the buffer.</li>
+<ul><li>If an input buffer is ready, read a chunk of input and copy it into the buffer.</li>
<li>If an output buffer is ready, copy the output from the buffer.</li></ul></li>
<li>Release the Media Codec handle.</li></ol>
</pre>
</li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="release" name="release" class="items-tit-h2">Releasing Resources</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="release" name="release">Releasing Resources</h2>
+
<p>To reset the codec and destroy the handle using the <span style="font-family: Courier New,Courier,monospace">mediacodec_unprepare()</span> and <span style="font-family: Courier New,Courier,monospace">mediacodec_destroy()</span> functions after you have finished work with the media codec:</p>
<pre class="prettyprint">ret = mediacodec_unprepare(mediacodec);
ret = mediacodec_destroy(mediacodec);
</pre>
<p>Afterwards, the media codec state is changed to <span style="font-family: Courier New,Courier,monospace">MEDIACODEC_STATE_NONE</span>.</p>
- </div>
- </li>
- </ul>
-</div>
-</div>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a class="opensection" href="#format">Managing the Media Format Handle</a></li>
- <li><a class="opensection" href="#packet">Managing the Media Packet Handle</a></li>
+ <li><a href="#format">Managing the Media Format Handle</a></li>
+ <li><a href="#packet">Managing the Media Packet Handle</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.guides/html/native/multimedia/media_tools_n.htm">Media Tool Guide</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__TOOL__MODULE.html">Media Tool API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__TOOL__MODULE.html">Media Tool API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__TOOL__MODULE.html">Media Tool API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Media Tool: Managing Media Handles</h1>
- <div class="cont"><div class="static-cont">
+
-<p>This tutorial demonstrates how to create, set, and get media handles.</p>
+<p>This tutorial demonstrates how you can create, set, and get media handles.</p>
<h2>Warm-up</h2>
<p>Become familiar with the Media Tool API basics by learning about:</p>
-<ul><li><a class="opensection" href="#format">Managing the Media Format Handle</a>
+<ul><li><a href="#format">Managing the Media Format Handle</a>
<p>Create, set, and get the <span style="font-family: Courier New,Courier,monospace"><media_format_h></span> handle.</p></li>
-<li><a class="opensection" href="#packet">Managing the Media Packet Handle</a>
+<li><a href="#packet">Managing the Media Packet Handle</a>
<p>Create, set, and get the <span style="font-family: Courier New,Courier,monospace"><media_packet_h></span> handle.</p></li></ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
-
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="format" name="format" class="items-tit-h2">Managing the Media Format Handle</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="format" name="format">Managing the Media Format Handle</h2>
+
<p>To manage the media format handle:</p>
-<ol><li><p>To use the media format handle of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__TOOL__MODULE.html">Media Tool</a> API, include the <span style="font-family: Courier New,Courier,monospace"><media_format.h></span> header file in your application:</p>
+<ol><li><p>To use the media format handle of the Media Tool API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__TOOL__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__TOOL__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><media_format.h></span> header file in your application:</p>
<pre class="prettyprint">
#include <media_format.h>
</pre></li>
{
print("media_format_get_video is failed...");
}</pre></li></ol>
- </div>
- </li>
-<li>
- <div class="devicespec-tit">
- <h2 id="packet" name="packet" class="items-tit-h2">Managing the Media Packet Handle</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="packet" name="packet">Managing the Media Packet Handle</h2>
+
<p>To manage the media packet handle:</p>
<ol>
-<li><p>To use the media packet handle of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__TOOL__MODULE.html">Media Tool</a> API, include the <span style="font-family: Courier New,Courier,monospace"><media_packet.h></span> header file in your application:</p>
+<li><p>To use the media packet handle of the Media Tool API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__TOOL__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__TOOL__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><media_packet.h></span> header file in your application:</p>
<pre class="prettyprint">
#include <media_packet.h>
</pre></li>
<li>Define a handle for <span style="font-family: Courier New,Courier,monospace">media_packet_h</span> and pass it to a creation function with an existing <span style="font-family: Courier New,Courier,monospace">media_format_h</span> handle.
<p>To reuse the packet handle, set the return value as <span style="font-family: Courier New,Courier,monospace">MEDIA_PACKET_REUSE</span> of <span style="font-family: Courier New,Courier,monospace">int (*media_packet_finalize_cb)</span> and use <span style="font-family: Courier New,Courier,monospace">media_format_unref(media_format_h fmt)</span> after creating the handle.</p>
<p>The following creation functions are available:</p>
-<ul class="ul"><li>Create a handle and allocate a buffer into the heap or TBM surface with the <span style="font-family: Courier New,Courier,monospace">media_packet_create_alloc()</span> function:
+<ul><li>Create a handle and allocate a buffer into the heap or TBM surface with the <span style="font-family: Courier New,Courier,monospace">media_packet_create_alloc()</span> function:
<pre class="prettyprint">
{
media_format_h fmt;
// If format2 ref_count is bigger than 1, it is not free
media_packet_destroy(packet);
</pre></li></ol>
- </div>
- </li>
- </ul>
-</div>
-</div>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a class="opensection" href="#init_metadata">Initializing the Metadata Extractor</a></li>
- <li><a class="opensection" href="#get_metadata">Getting Metadata, Artwork, and Frame</a></li>
+ <li><a href="#init_metadata">Initializing the Metadata Extractor</a></li>
+ <li><a href="#get_metadata">Getting Metadata, Artwork, and Frame</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.guides/html/native/multimedia/metadata_extractor_n.htm">Metadata Extractor Guide</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__METADATA__EXTRACTOR__MODULE.html">Metadata Extractor API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__METADATA__EXTRACTOR__MODULE.html">Metadata Extractor API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__METADATA__EXTRACTOR__MODULE.html">Metadata Extractor API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Metadata Extractor: Extracting Metadata from an Input Media File</h1>
- <div class="cont"><div class="static-cont">
+
<p>This tutorial demonstrates how you can extract metadata from media files.</p>
<p>Become familiar with the Metadata Extractor API basics by learning about:</p>
<ul>
- <li><a class="opensection" href="#init_metadata">Initializing the Metadata Extractor</a>
+ <li><a href="#init_metadata">Initializing the Metadata Extractor</a>
<p>Initialize the metadata extractor for use.</p></li>
- <li><a class="opensection" href="#get_metadata">Getting Metadata, Artwork, and Frame</a>
+ <li><a href="#get_metadata">Getting Metadata, Artwork, and Frame</a>
<p>Create a metadata extractor handle, bind the handle with the file, and get metadata, artwork, lyrics, and frames.</p></li>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
-
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="init_metadata" name="init_metadata" class="items-tit-h2">Initializing the Metadata Extractor</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="init_metadata" name="init_metadata">Initializing the Metadata Extractor</h2>
+
<table class="note">
<tbody>
<tr>
<p>To initialize the metadata extractor:</p>
<ol>
-<li><p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__METADATA__EXTRACTOR__MODULE.html">Metadata Extractor</a> API, include the <span style="font-family: Courier New,Courier,monospace;"><metadata_extractor.h></span> header file in your application:</p>
+<li><p>To use the functions and data types of the Metadata Extractor API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__METADATA__EXTRACTOR__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__METADATA__EXTRACTOR__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace;"><metadata_extractor.h></span> header file in your application:</p>
<pre class="prettyprint">
#include <metadata_extractor.h>
</pre></li><li><p>To work with the Metadata Extractor API, create a handle to the metadata extractor. A global variable is used in this tutorial:</p>
</pre>
</li></ol>
<p>The metadata extractor APIs can use not only common content in the storage (internal or external), but also the private content in your application data.</p>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="get_metadata" name="get_metadata" class="items-tit-h2">Getting Metadata, Artwork, and Frame</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="get_metadata" name="get_metadata">Getting Metadata, Artwork, and Frame</h2>
+
<p>To get metadata from the file:</p>
<ol>
<li>Create the metadata extractor handle.
</pre></li>
<li>Get metadata from the file.
-<p>Use the <span style="font-family: Courier New,Courier,monospace;">metadata_extractor_get_metadata()</span> function, which takes 3 parameters. The first one is the handle to the metadata extractor. The second parameter is the wanted data type. The possible values for this parameter are those defined in the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__METADATA__EXTRACTOR__MODULE.html#ga5b27fedbf5aaa22106f88b831c596872">metadata_extractor_attr_e</a> enumeration. In this tutorial all the possible data from the file is extracted, so a function with all possible attribute types is needed. The value read from the file is stored in the final parameter, which is a pointer to the <span style="font-family: Courier New,Courier,monospace;">char</span> variable and is fulfilled by the function.</p>
+<p>Use the <span style="font-family: Courier New,Courier,monospace;">metadata_extractor_get_metadata()</span> function, which takes 3 parameters. The first one is the handle to the metadata extractor. The second parameter is the wanted data type. The possible values for this parameter are those defined in the <span style="font-family: Courier New,Courier,monospace;">metadata_extractor_attr_e</span> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__METADATA__EXTRACTOR__MODULE.html#ga5b27fedbf5aaa22106f88b831c596872">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__METADATA__EXTRACTOR__MODULE.html#ga5b27fedbf5aaa22106f88b831c596872">wearable</a> applications). In this tutorial all the possible data from the file is extracted, so a function with all possible attribute types is needed. The value read from the file is stored in the final parameter, which is a pointer to the <span style="font-family: Courier New,Courier,monospace;">char</span> variable and is fulfilled by the function.</p>
<pre class="prettyprint">
char *value = NULL;
<li>Get synchronized lyrics from the file (in case of music content).
<p>Use the <span style="font-family: Courier New,Courier,monospace;">metadata_extractor_get_synclyrics()</span> function. It takes the following parameters:</p>
-<ul class="ul">
+<ul>
<li>Handle to the metadata extractor</li>
<li>Index of the time/lyrics set</li>
<li>Time information of the index</li>
<pre class="prettyprint">
metadata_extractor_destroy(g_metadata_h);
</pre></li>
-</ol>
- </div>
- </li>
- </ul>
-</div>
-</div>
+</ol>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
<li><a href="tone_player_tutorial_n.htm">Tone Player: Playing Tones</a> <p>Demonstrates how you can play tones.</p></li>
<li><a href="wav_player_tutorial_n.htm">WAV Player: Playing Waveform Audio Files</a> <p>Demonstrates how you can play WAV files.</p></li>
<li><a href="sound_manager_tutorial_n.htm">Sound Manager: Managing Sound Parameters</a> <p>Demonstrates how you can set the sound session type and control volume.</p></li>
+ <li><a href="screen_mirroring_tutorial_n.htm">Screen Mirroring Sink: Mirroring Screen and Sound</a> <p>Demonstrates how you can mirror the device screen and sound to another device wirelessly.</p></li>
</ul>
<p>The following tutorials apply in <span style="color: red">mobile applications only</span>:</p>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
<li>Player
<ul class="toc">
- <li><a class="opensection" href="#init">Initializing the Player</a></li>
- <li><a class="opensection" href="#play_audio">Playing an Audio File</a></li>
- <li><a class="opensection" href="#play_video">Playing a Video File</a></li>
- <li><a class="opensection" href="#release">Stopping the Player and Releasing Resources</a></li>
+ <li><a href="#init">Initializing the Player</a></li>
+ <li><a href="#play_audio">Playing an Audio File</a></li>
+ <li><a href="#play_video">Playing a Video File</a></li>
+ <li><a href="#release">Stopping the Player and Releasing Resources</a></li>
</ul>
</li>
<li>Multi-player
<ul class="toc">
- <li><a class="opensection" href="#init_multiplayer">Initializing the Players</a></li>
- <li><a class="opensection" href="#play">Playing Multiple Files Simultaneously</a></li>
+ <li><a href="#init_multiplayer">Initializing the Players</a></li>
+ <li><a href="#play">Playing Multiple Files Simultaneously</a></li>
</ul>
</li>
<li>Advanced player
<ul class="toc">
- <li><a class="opensection" href="#set_parameters">Setting Display Parameters</a></li>
- <li><a class="opensection" href="#get_stream">Getting Stream Information</a></li>
- <li><a class="opensection" href="#insert">Inserting Subtitles</a></li>
+ <li><a href="#set_parameters">Setting Display Parameters</a></li>
+ <li><a href="#get_stream">Getting Stream Information</a></li>
+ <li><a href="#insert">Inserting Subtitles</a></li>
</ul>
</li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.guides/html/native/multimedia/player_n.htm">Player Guide</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__PLAYER__MODULE.html">Player API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__PLAYER__MODULE.html">Player API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__PLAYER__MODULE.html">Player API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Player: Playing Multimedia Content from a File, Network, and Memory</h1>
- <div class="cont"><div class="static-cont">
+
<p>This tutorial demonstrates how you can play audio and video files and play multiple audio files simultaneously.</p>
<li>Player
<ul>
- <li><a class="opensection" href="#init">Initialing the Player</a>
+ <li><a href="#init">Initialing the Player</a>
<p>Initialize the player for use.</p>
</li>
- <li><a class="opensection" href="#play_audio">Playing an Audio File</a>
+ <li><a href="#play_audio">Playing an Audio File</a>
<p>Play an audio file.</p>
</li>
- <li><a class="opensection" href="#play_video">Playing a Video File</a>
+ <li><a href="#play_video">Playing a Video File</a>
<p>Play a video file.</p>
</li>
- <li><a class="opensection" href="#release">Stopping the Player and Releasing Resources</a>
+ <li><a href="#release">Stopping the Player and Releasing Resources</a>
<p>Stop the player and release the resources allocated to the player.</p>
</li>
</ul>
</li>
<li>Multi-player
<ul>
- <li><a class="opensection" href="#init_multiplayer">Initializing the Players</a>
+ <li><a href="#init_multiplayer">Initializing the Players</a>
<p>Initialize the players for use.</p></li>
- <li><a class="opensection" href="#play">Playing Multiple Files Simultaneously</a>
+ <li><a href="#play">Playing Multiple Files Simultaneously</a>
<p>Create multiple players for playing multiple files simultaneously.</p>
</li>
</ul>
<ul>
<li>Advanced player
<ul>
- <li><a class="opensection" href="#set_parameters">Setting Display Parameters</a>
+ <li><a href="#set_parameters">Setting Display Parameters</a>
<p>Set different display parameters.</p>
</li>
- <li><a class="opensection" href="#get_stream">Getting Stream Information</a>
+ <li><a href="#get_stream">Getting Stream Information</a>
<p>Get information about the stream.</p>
</li>
- <li><a class="opensection" href="#insert">Inserting Subtitles</a>
+ <li><a href="#insert">Inserting Subtitles</a>
<p>Insert subtitles to video files.</p>
</li>
</ul>
</li>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
-
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="init" name="init" class="items-tit-h2">Initializing the Player</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="init" name="init">Initializing the Player</h2>
+
<p>To initialize the player:</p>
<ol>
-<li><p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__PLAYER__MODULE.html">Player</a> API, include the <span style="font-family: Courier New,Courier,monospace"><player.h></span>, <span style="font-family: Courier New,Courier,monospace"><Elementary.h></span>, and <span style="font-family: Courier New,Courier,monospace"><glib.h></span> header files in your application:</p>
+<li><p>To use the functions and data types of the Player API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__PLAYER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__PLAYER__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><player.h></span>, <span style="font-family: Courier New,Courier,monospace"><Elementary.h></span>, and <span style="font-family: Courier New,Courier,monospace"><glib.h></span> header files in your application:</p>
<pre class="prettyprint">#include <player.h>
#include <Elementary.h>
#include <glib.h>
</li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="play_audio" name="play_audio" class="items-tit-h2">Playing an Audio File</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
-<p>To play an audio file:</p><ol>
+
+ <h2 id="play_audio" name="play_audio">Playing an Audio File</h2>
+
+<p>To play an audio file:</p>
+<ol>
<li>
<p>Set the audio file path after creating the audio player handler.</p>
</li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="play_video" name="play_video" class="items-tit-h2">Playing a Video File</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="play_video" name="play_video">Playing a Video File</h2>
+
<p>To play a video file:</p>
<ol>
<th class="note">Note</th>
</tr>
<tr>
- <td class="note">In
-case of an overlay surface, when the device orientation changes, the
-displayed video does not rotate automatically. If you want to change
-the video orientation according to the device orientation, use the <span style="font-family: Courier New,Courier,monospace;">player_set_display_rotation()</span> function within the <span style="font-family: Courier New,Courier,monospace;">app_device_orientation_cb()</span>
-callback function used by the application. In case of an Evas surface,
-the Evas object for the video is rotated by the window manager used by
-the application, not by the <span style="font-family: Courier New,Courier,monospace;">player_set_display_rotation()</span> function.</td>
+ <td class="note">In case of an overlay surface, when the device orientation changes, the displayed video does not rotate automatically. If you want to change the video orientation according to the device orientation, use the <span style="font-family: Courier New,Courier,monospace;">player_set_display_rotation()</span> function within the <span style="font-family: Courier New,Courier,monospace;">app_device_orientation_cb()</span> callback function used by the application. In case of an Evas surface, the Evas object for the video is rotated by the window manager used by the application, not by the <span style="font-family: Courier New,Courier,monospace;">player_set_display_rotation()</span> function.</td>
</tr>
</tbody>
</table>
<p>Play the video file:</p>
-<ol>
+<ol type="a">
<li>
</li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="release" name="release" class="items-tit-h2">Stopping the Player and Releasing Resources</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="release" name="release">Stopping the Player and Releasing Resources</h2>
+
<p>To stop the player when it is no longer needed:</p>
<ol><li>Reset the player using the <span style="font-family: Courier New,Courier,monospace;">player_unprepare()</span> function with the player handle as a parameter. Before using this function, make sure that the player is stopped using the <span style="font-family: Courier New,Courier,monospace;">player_stop()</span> function.<p></p>
dlog_print(DLOG_ERROR, LOG_TAG, "player_destroy = %d", error_code);
</pre></li></ol>
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="init_multiplayer" name="init_multiplayer" class="items-tit-h2">Initializing the Players</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="init_multiplayer" name="init_multiplayer">Initializing the Players</h2>
+
<p>To initialize the players:</p>
<ol>
-<li><p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__PLAYER__MODULE.html">Player</a> API, include the <span style="font-family: Courier New,Courier,monospace"><player.h></span>, <span style="font-family: Courier New,Courier,monospace"><stdio.h></span>, and <span style="font-family: Courier New,Courier,monospace"><unistd.h></span> header files in your application:</p>
+<li><p>To use the functions and data types of the Player API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__PLAYER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__PLAYER__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><player.h></span>, <span style="font-family: Courier New,Courier,monospace"><stdio.h></span>, and <span style="font-family: Courier New,Courier,monospace"><unistd.h></span> header files in your application:</p>
<pre class="prettyprint">
#include <player.h>
#include <stdio.h>
static const int PLAYBACK_TIME=6;</pre>
<p>To ensure that a function has been properly executed, always check its return value. If the return value differs from <span style="font-family: Courier New,Courier,monospace">PLAYER_ERROR_NONE</span>, an error has occurred.</p></li></ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="play" name="play" class="items-tit-h2">Playing Multiple Files Simultaneously</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="play" name="play">Playing Multiple Files Simultaneously</h2>
+
<p>To play multiple files simultaneously:</p>
<ol>
<p>Play the files:</p>
-<ol>
+<ol type="a">
<li>
</li>
</ol>
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="set_parameters" name="set_parameters" class="items-tit-h2">Setting Display Parameters</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="set_parameters" name="set_parameters">Setting Display Parameters</h2>
+
<p>To set the display parameters:</p>
<ol>
- <li><a class="opensection" href="#init">Create the player handle</a> and <a class="opensection" href="#play_video">prepare the player</a>.</li>
+ <li><a href="#init">Create the player handle</a> and <a href="#play_video">prepare the player</a>.</li>
<li>Set the parameters:
- <ul class="ul">
+ <ul>
<li>Set the display.
- <ol>
+ <ol type="a">
<li><p>To play a video, set the display on which the video is rendered. Get the display handle from the window with the <span style="font-family: Courier New,Courier,monospace;">GET_DISPLAY()</span> function, and set the display type.</p>
<p>The display is created from the <span style="font-family: Courier New,Courier,monospace;">player_set_display()</span> function called with the player handle, a <span style="font-family: Courier New,Courier,monospace;">player_display_type_e</span> display type, and a <span style="font-family: Courier New,Courier,monospace;">player_display_h</span> display handle.</p>
<p>After successfully calling this function, the player is connected to the display handle.</p>
<p>After a successful call of this function, the player state is set to <span style="font-family: Courier New,Courier,monospace;">PLAYER_STATE_PLAYING</span>. The playback of the media contents stored in the previously specified file starts. The video file plays until the <span style="font-family: Courier New,Courier,monospace;">player_stop()</span> or <span style="font-family: Courier New,Courier,monospace;">player_pause()</span> function is called.</p></li></ol></li>
<li>Set the display visibility.
- <ol><li><p>Before setting the visibility of the x surface video display, check that it has not already been done by using the <span style="font-family: Courier New,Courier,monospace;">player_is_display_visible()</span> function:</p>
+ <ol
type="a"><li><p>Before setting the visibility of the x surface video display, check that it has not already been done by using the <span style="font-family: Courier New,Courier,monospace;">player_is_display_visible()</span> function:</p>
<pre class="prettyprint">bool is_visible;
error_code = player_is_display_visible(player, &is_visible);
</pre></li></ol></li>
<li>Set the display mode.
- <ol><li><p>Check the possibility of using the video display mode using the <span style="font-family: Courier New,Courier,monospace;">player_is_display_mode_changeable()</span> function:</p>
+ <ol
type="a"><li><p>Check the possibility of using the video display mode using the <span style="font-family: Courier New,Courier,monospace;">player_is_display_mode_changeable()</span> function:</p>
<pre class="prettyprint">bool is_changeable;
error_code = player_is_display_mode_changeable(player, &is_changeable);
dlog_print(DLOG_ERROR, LOG_TAG, "player_is_display_mode_changeable = %d", error_code);
</pre></li>
- <li><p>If the <span style="font-family: Courier New,Courier,monospace;">is_changeable</span> variable is set to <span style="font-family: Courier New,Courier,monospace;">true</span>, set the display mode using the <span style="font-family: Courier New,Courier,monospace;">player_set_display_mode()</span> function. The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__PLAYER__DISPLAY__MODULE.html#gaafcf6f7487d8cb376e1851a6e1253f3a">player_display_mode_e</a> enumerator defines the available display modes.</p>
+ <li><p>If the <span style="font-family: Courier New,Courier,monospace;">is_changeable</span> variable is set to <span style="font-family: Courier New,Courier,monospace;">true</span>, set the display mode using the <span style="font-family: Courier New,Courier,monospace;">player_set_display_mode()</span> function. The <span style="font-family: Courier New,Courier,monospace;">player_display_mode_e</span> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__PLAYER__DISPLAY__MODULE.html#gaafcf6f7487d8cb376e1851a6e1253f3a">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__PLAYER__DISPLAY__MODULE.html#gaafcf6f7487d8cb376e1851a6e1253f3a">wearable</a> applications) defines the available display modes.</p>
<pre class="prettyprint">if (is_changeable)
{
error_code = player_set_display_mode(player, PLAYER_DISPLAY_MODE_FULL_SCREEN);
}</pre></li></ol></li>
<li>Set the display rotation.
-<p>Set the display rotation using the <span style="font-family: Courier New,Courier,monospace;">player_set_display_rotation()</span> function. The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__PLAYER__DISPLAY__MODULE.html#gab8c4c170d4b2628a09831edc8d652302">player_display_rotation_e</a> enumerator defines the available display rotations.</p>
+<p>Set the display rotation using the <span style="font-family: Courier New,Courier,monospace;">player_set_display_rotation()</span> function. The <span style="font-family: Courier New,Courier,monospace;">player_display_rotation_e</span> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__PLAYER__DISPLAY__MODULE.html#gab8c4c170d4b2628a09831edc8d652302">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__PLAYER__DISPLAY__MODULE.html#gab8c4c170d4b2628a09831edc8d652302">wearable</a> applications) defines the available display rotations.</p>
<pre class="prettyprint">error_code = player_set_display_rotation(player, PLAYER_DISPLAY_ROTATION_90);
dlog_print(DLOG_ERROR, LOG_TAG, "player_set_display_mode = %d", error_code);</pre></li></ul></li></ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="get_stream" name="get_stream" class="items-tit-h2">Getting Stream Information</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="get_stream" name="get_stream">Getting Stream Information</h2>
+
<p>To get stream information:</p>
<ol>
-<li><a class="opensection" href="#init">Create the player handle</a>, <a class="opensection" href="#play_video">prepare the player</a>, and <a class="opensection" href="#set_parameters">set the display</a>.
+<li><a href="#init">Create the player handle</a>, <a href="#play_video">prepare the player</a>, and <a href="#set_parameters">set the display</a>.
<table class="note">
<tbody>
</tbody>
</table> </li>
<li>Get the stream information
-<ul class="ul"><li>Get the video size.
+<ul><li>Get the video size.
<p>Get the width and height of the video display using the <span style="font-family: Courier New,Courier,monospace;">player_get_video_size()</span> function:</p>
error_code = player_get_album_art(player, &album_art, &size);
dlog_print(DLOG_INFO, LOG_TAG, "player_set_display_mode = %d", error_code);
</pre></li></ul></li></ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="insert" name="insert" class="items-tit-h2">Inserting Subtitles</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="insert" name="insert">Inserting Subtitles</h2>
+
<p>To insert subtitles to a video file:</p>
-<ol><li><a class="opensection" href="#init">Create the player handle</a> and <a class="opensection" href="#play_video">prepare the player</a>.</li>
+<ol><li><a href="#init">Create the player handle</a> and <a href="#play_video">prepare the player</a>.</li>
<li><p>To set the subtitle path, use the <span style="font-family: Courier New,Courier,monospace;">player_set_subtitle_path()</span> function:</p>
<pre class="prettyprint">#define SUBTITLE "subtitles_test_file.srt"
</table>
<p>After setting the subtitle path, you can <a href="#play_video">play the video file</a> as usual, by setting the video display and starting the player.</p></li></ol>
- </div>
- </li>
- </ul>
-</div>
-</div>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a class="opensection" href="#init">Initializing the Radio</a></li>
- <li><a class="opensection" href="#scan">Scanning for All Available Radio Frequencies</a></li>
- <li><a class="opensection" href="#tune">Tuning the Radio and Beginning Listening</a></li>
- <li><a class="opensection" href="#seek">Seeking for a Nearby Channel</a></li>
+ <li><a href="#init">Initializing the Radio</a></li>
+ <li><a href="#scan">Scanning for All Available Radio Frequencies</a></li>
+ <li><a href="#tune">Tuning the Radio and Beginning Listening</a></li>
+ <li><a href="#seek">Seeking for a Nearby Channel</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.guides/html/native/multimedia/radio_n.htm">Radio Guide</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__RADIO__MODULE.html">Radio API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__RADIO__MODULE.html">Radio API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__RADIO__MODULE.html">Radio API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Radio: Accessing the Radio</h1>
- <div class="cont"><div class="static-cont">
+
-<p>This tutorial demonstrates how to create and tune a radio.</p>
+<p>This tutorial demonstrates how you can access and tune a radio.</p>
<h2>Warm-up</h2>
<p>Become familiar with the Radio API basics by learning about:</p>
<ul>
- <li><a class="opensection" href="#init">Initializing the Radio</a>
+ <li><a href="#init">Initializing the Radio</a>
<p>Initialize the radio for use.</p></li>
- <li><a class="opensection" href="#scan">Scanning for All Available Radio Frequencies</a>
+ <li><a href="#scan">Scanning for All Available Radio Frequencies</a>
<p>Scan for radio frequencies.</p></li>
- <li><a class="opensection" href="#tune">Tuning the Radio and Beginning Listening</a>
+ <li><a href="#tune">Tuning the Radio and Beginning Listening</a>
<p>Tune in to a station and begin listening.</p></li>
- <li><a class="opensection" href="#seek">Seeking for a Nearby Channel</a>
+ <li><a href="#seek">Seeking for a Nearby Channel</a>
<p>Look for radio channels nearby.</p></li>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
-
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="init" name="init" class="items-tit-h2">Initializing the Radio</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="init" name="init">Initializing the Radio</h2>
+
<p>To initialize the radio for use:</p><ol>
-<li><p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__RADIO__MODULE.html">Radio</a> API, include the <span style="font-family: Courier New,Courier,monospace"><radio.h></span> header file in your application:</p>
+<li><p>To use the functions and data types of the Radio API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__RADIO__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__RADIO__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><radio.h></span> header file in your application:</p>
<pre class="prettyprint">
#include <radio.h>
</pre></li>
}
}
</pre></li></ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="scan" name="scan" class="items-tit-h2">Scanning for All Available Radio Frequencies</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="scan" name="scan">Scanning for All Available Radio Frequencies</h2>
+
<p>To scan for available radio frequencies:</p>
<ol><li><p>Define and set the callback for the "scan completed" notification:</p>
<pre class="prettyprint">radio_scan_start(mRadio.radio, on_scan_updated, &mRadio);</pre>
<p>The scanning time depends on your environment (the strength of the radio signal). Cancel the current scan using the <span style="font-family: Courier New,Courier,monospace">radio_scan_stop()</span> function.</p></li></ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="tune" name="tune" class="items-tit-h2">Tuning the Radio and Beginning Listening</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="tune" name="tune">Tuning the Radio and Beginning Listening</h2>
+
<p>To tune in to a frequency:</p>
<ol><li><p>Select the frequency and tune into it.</p>
</pre>
<p>If the radio emits no sound, check the signal strength with the <span style="font-family: Courier New,Courier,monospace">radio_get_signal_strength()</span> function, which returns the current signal strength as a 'dbuV' value.</p></li></ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="seek" name="seek" class="items-tit-h2">Seeking for a Nearby Channel</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="seek" name="seek">Seeking for a Nearby Channel</h2>
+
<p>To seek for a nearby channel:</p>
<ol><li>Use the <span style="font-family: Courier New,Courier,monospace">radio_seek_up()</span> and <span style="font-family: Courier New,Courier,monospace">radio_seek_down()</span> functions to search for an active nearby channel frequency and tune into that frequency. This is very similar to the scanning operation, but only the nearest active frequency is searched for. Once the maximum frequency is reached in any direction, the search is stopped.
}
</pre>
</li></ol>
- </div>
- </li>
- </ul>
-</div>
-</div>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
<li>Audio recorder
<ul class="toc">
- <li><a class="opensection" href="#init_audio">Initializing the Audio Recorder</a></li>
- <li><a class="opensection" href="#record_audio">Recording Audio</a></li>
+ <li><a href="#init_audio">Initializing the Audio Recorder</a></li>
+ <li><a href="#record_audio">Recording Audio</a></li>
</ul>
</li>
<li>Video recorder
<ul class="toc">
- <li><a class="opensection" href="#init_video">Initializing the Video Recorder</a></li>
- <li><a class="opensection" href="#record_video">Recording a Video</a></li>
+ <li><a href="#init_video">Initializing the Video Recorder</a></li>
+ <li><a href="#record_video">Recording a Video</a></li>
</ul>
</li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.guides/html/native/multimedia/recorder_n.htm">Recorder Guide</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__RECORDER__MODULE.html">Recorder API</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html">Camera API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__RECORDER__MODULE.html">Recorder API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html">Camera API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__RECORDER__MODULE.html">Recorder API for Wearable Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html">Camera API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Recorder: Recording Audio and Video</h1>
- <div class="cont"><div class="static-cont">
+
<p>This tutorial demonstrates how you can record audio and video.</p>
<ul>
<li>Audio recorder
<ul>
- <li><a class="opensection" href="#init_audio">Initializing the Audio Recorder</a>
+ <li><a href="#init_audio">Initializing the Audio Recorder</a>
<p>Initialize the audio recorder for use.</p></li>
- <li><a class="opensection" href="#record_audio">Recording Audio</a>
+ <li><a href="#record_audio">Recording Audio</a>
<p>Start, stop, cancel, and pause recording an audio file, and release resources after finishing recording.</p>
</li>
</ul>
</li>
<li>Video recorder
<ul>
- <li><a class="opensection" href="#init_video">Initializing the Video Recorder</a>
+ <li><a href="#init_video">Initializing the Video Recorder</a>
<p>Initialize the devices for use.</p>
</li>
- <li><a class="opensection" href="#record_video">Recording a Video</a>
+ <li><a href="#record_video">Recording a Video</a>
<p>Prepare, record, commit, and cancel a video.</p></li>
</ul>
</li>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="init_audio" name="init_audio" class="items-tit-h2">Initializing the Audio Recorder</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="init_audio" name="init_audio">Initializing the Audio Recorder</h2>
<p>To initialize the audio recorder for use:</p>
<ol>
-<li><p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__RECORDER__MODULE.html">Recorder</a> API, include the <span style="font-family: Courier New,Courier,monospace"><recorder.h></span> header file in your application:</p>
+<li><p>To use the functions and data types of the Recorder API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__RECORDER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__RECORDER__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><recorder.h></span> header file in your application:</p>
<pre class="prettyprint">
#include <recorder.h>
</pre></li>
<li><p>The callback function returns the following parameters:</p>
-<ul class="ul">
+<ul>
<li><span style="font-family: Courier New,Courier,monospace">previous</span>: The previous state of the audio recorder.</li>
<li><span style="font-family: Courier New,Courier,monospace">current</span>: The current state of the audio recorder.</li>
<li><span style="font-family: Courier New,Courier,monospace">by_policy</span>: If the state was changed by a policy, this is set to <span style="font-family: Courier New,Courier,monospace">true</span>.</li>
{
dlog_print(DLOG_DEBUG, LOG_TAG , "Recording limit reached: %d\n", type);
}</pre></li></ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="record_audio" name="record_audio" class="items-tit-h2">Recording Audio</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="record_audio" name="record_audio">Recording Audio</h2>
+
<p>To record audio:</p>
<ol>
<li><p>To prepare the audio recorder for recording, use the <span style="font-family: Courier New,Courier,monospace">recorder_prepare()</span> function:</p>
<li><p>After you have finished recording, release all resources associated with the audio recorder:</p>
- <ol>
+ <ol type="a">
<li>Unregister the recording limit callback function using the <span style="font-family: Courier New,Courier,monospace">recorder_unset_recording_limit_reached_cb()</span> function.
<pre class="prettyprint">error_code = recorder_unset_recording_limit_reached_cb(g_recorder);</pre></li>
<pre class="prettyprint">error_code = recorder_destroy(g_recorder);</pre></li></ol></li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="init_video" name="init_video" class="items-tit-h2">Initializing the Video Recorder</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="init_video" name="init_video">Initializing the Video Recorder</h2>
+
<p>To initialize the video recorder:</p>
-<ol><li>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html">Camera</a> and <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__RECORDER__MODULE.html">Recorder</a> APIs, include the <span style="font-family: Courier New,Courier,monospace;"><camera.h></span> and <span style="font-family: Courier New,Courier,monospace;"><recorder.h></span> header files in your application:
+<ol><li>To use the functions and data types of the Camera API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__CAMERA__MODULE.html">wearable</a> applications) and Recorder (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__RECORDER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__RECORDER__MODULE.html">wearable</a> applications) APIs, include the <span style="font-family: Courier New,Courier,monospace;"><camera.h></span> and <span style="font-family: Courier New,Courier,monospace;"><recorder.h></span> header files in your application:
<pre class="prettyprint">
#include <camera.h>
#include <recorder.h>
}
</pre></li>
<li><p>The callback function receives the following parameters:</p>
-<ul class="ul">
+<ul>
<li>Previous state of the recorder</li>
<li>Current state of the recorder</li>
<li><span style="font-family: Courier New,Courier,monospace">by_policy</span> flag (true if the state is changed by policy)</li>
</pre></li>
<li><p>The Recorder API supports the following attributes:</p>
-<ul class="ul">
+<ul>
<li>Audio codec for encoding audio stream</li>
<li>Video codec for encoding video stream</li>
<li>File format</li>
// Set the file path to store the recorded data
error_code = recorder_set_filename(rec_data.recorder, filename);
</pre></li>
-<li><p><a class="opensection" href="#init_audio">Set the audio encoder, bitrate of the audio encoder, and sampling rate of audio</a> using the <span style="font-family: Courier New,Courier,monospace">recorder_set_audio_encoder()</span>, <span style="font-family: Courier New,Courier,monospace">recorder_attr_set_audio_encoder_bitrate()</span>, and <span style="font-family: Courier New,Courier,monospace">recorder_attr_set_audio_samplerate()</span> functions, as with the video encoder.</p>
+<li><p><a href="#init_audio">Set the audio encoder, bitrate of the audio encoder, and sampling rate of audio</a> using the <span style="font-family: Courier New,Courier,monospace">recorder_set_audio_encoder()</span>, <span style="font-family: Courier New,Courier,monospace">recorder_attr_set_audio_encoder_bitrate()</span>, and <span style="font-family: Courier New,Courier,monospace">recorder_attr_set_audio_samplerate()</span> functions, as with the video encoder.</p>
</li></ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="record_video" name="record_video" class="items-tit-h2">Recording a Video</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="record_video" name="record_video">Recording a Video</h2>
+
<p>To record a video:</p>
<ol>
<p>After this the recorder state is changed to <span style="font-family: Courier New,Courier,monospace">RECORDER_STATE_NONE</span>.</p>
</li>
</ol>
- </div>
- </li>
- </ul>
-</div>
-</div>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
+++ /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>Screen Mirroring: Mirroring screen and sound</title>
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="navigation">
- <div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
- </div>
- <div id="toc_border"><div id="toc">
- <p class="toc-title">Content</p>
- <ul class="toc">
- <li><a class="opensection" href="#init">Initializing the screen mirroring sink</a></li>
- <li><a class="opensection" href="#prepare">Preparing the screen mirroring sink</a></li>
- <li><a class="opensection" href="#connect">Connecting and Starting the screen mirroring sink</a></li>
- <li><a class="opensection" href="#release">Releasing Resources</a></li>
- <li><a class="opensection" href="#handle">Handling exception of the screen mirroring sink</a></li>
- </ul>
- <p class="toc-title">Related Info</p>
- <ul class="toc">
- <li><a href="../../../../org.tizen.guides/html/native/multimedia/screen_mirroring_n.htm">Screen Mirroring Guide</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SCMIRRORING_SINK__MODULE.html">Screen Mirroring sink API</a></li>
- </ul>
- </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Screen Mirroring: Mirroring screen and sound</h1>
- <div class="cont"><div class="static-cont">
-<p>This tutorial demonstrates how you can play screen mirroring as sink.</p>
-
-<h2>Warm-up</h2>
-<p>Become familiar with Screen Mirroring API basics by learning about:</p>
-
-<ul>
- <li><a class="opensection" href="#init">Initializing the screen mirroring sink</a>
- <p>Initialize the screen mirroring sink for use.</p>
- </li>
- <li><a class="opensection" href="#prepare">Preparing the screen mirroring sink</a>
- <p>Set specific information, and prepare the screen mirroring sink.</p>
- </li>
- <li><a class="opensection" href="#connect">Connecting and Starting the screen mirroring sink</a>
- <p>Connect and Start the screen mirroring sink.</p>
- </li>
- <li><a class="opensection" href="#release">Releasing Resources</a>
- <p>Disconnect and unprepare the screen mirroring sink, and destroy the sink handle and release all its resources.</p>
- </li>
- <li><a class="opensection" href="#handle">Handling exception of the screen mirroring sink</a>
- <p>Handle exception of the screen mirroring sink</p>
- </li>
-
-</ul>
-
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
-
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="init" name="init" class="items-tit-h2">Initializing the screen mirroring sink</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
-<p>To initialize the screen mirroring sink.</p>
-
-<ol><li><p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SCMIRRORING_SINK__MODULE.html">Screen Mirroring sink</a> API, include the <span style="font-family: Courier New,Courier,monospace"><scmirroring_type.h></span> and <span style="font-family: Courier New,Courier,monospace"><scmirroring_sink.h></span> header file in your application:</p>
-<pre class="prettyprint">
-#include <scmirroring_type.h>
-#include <scmirroring_sink.h>
-</pre></li>
-
- <li><p>Create a screen mirroring sink handle using <span style="font-family: Courier New,Courier,monospace">scmirroring_sink_create()</span> function. The screen mirroring state will be <span style="font-family: Courier New,Courier,monospace">SCMIRRORING_STATE_NULL</span> immediately.</p>
-<pre class="prettyprint">
-static scmirroring_sink_h g_scmirroring;
-
-static int init_scmirroring_sink()
-{
- int ret = SCMIRRORING_ERROR_NONE;
- ret = scmirroring_sink_create(&g_scmirroring);
- if(ret != SCMIRRORING_ERROR_NONE)
- {
- dlog_print(DLOG_ERROR, LOG_TAG, "scmirroring_sink_create fail [%d]", ret);
- return FALSE;
- }
- return TRUE;
-}
-</pre></li>
-</ol>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="prepare" name="prepare" class="items-tit-h2">Preparing the screen mirroring sink</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
-<p>To prepare the screen mirroring sink:</p>
-
-<ol>
- <li>Register a callback function using <span style="font-family: Courier New,Courier,monospace">scmirroring_sink_set_state_changed()</span> function for checking scmirroring sink state.</li>
- <li>Set a display object using <span style="font-family: Courier New,Courier,monospace">scmirroring_sink_set_display()</span> function before calling <span style="font-family: Courier New,Courier,monospace">scmirroring_sink_prepare()</span> function.</li>
- <li>Prepare the screen mirroring sink using <span style="font-family: Courier New,Courier,monospace">scmirroring_sink_prepare()</span> function. The screen mirroring state will be <span style="font-family: Courier New,Courier,monospace">SCMIRRORING_STATE_PREPARED</span> immediately.
-
-<pre class="prettyprint">
-static void scmirroring_state_callback(scmirroring_error_e error_code, scmirroring_state_e state, void *user_data);
-
-static int prepare_scmirroring_sink(scmirroring_display_type_e display_type, Evas_Object* display_object)
-{
- ret = scmirroring_sink_set_state_changed_cb(g_scmirroring, scmirroring_state_callback, NULL);
- if(ret != SCMIRRORING_ERROR_NONE)
- {
- dlog_print(DLOG_ERROR, LOG_TAG, "scmirroring_sink_set_state_changed_cb fail [%d]", ret);
- return FALSE;
- }
-
- ret = scmirroring_sink_set_display(g_scmirroring, display_type, display_object);
- if(ret != SCMIRRORING_ERROR_NONE)
- {
- dlog_print(DLOG_ERROR, LOG_TAG, "scmirroring_sink_set_display fail [%d]", ret);
- return FALSE;
- }
- ret = scmirroring_sink_prepare(g_scmirroring);
- if(ret != SCMIRRORING_ERROR_NONE)
- {
- dlog_print(DLOG_ERROR, LOG_TAG, "scmirroring_sink_prepare fail [%d]", ret);
- return FALSE;
- }
- return TRUE;
-}
-
-static void scmirroring_state_callback(scmirroring_error_e error_code, scmirroring_state_e state, void *user_data)
-{
- dlog_print(DLOG_ERROR, LOG_TAG, "Received Callback error code[%d], state[%d]", error_code, state);
-
- switch(state)
- {
- case SCMIRRORING_STATE_NULL:
- break;
- case SCMIRRORING_STATE_PREPARED:
- break;
- case SCMIRRORING_STATE_CONNECTED:
- break;
- case SCMIRRORING_STATE_PLAYING:
- break;
- case SCMIRRORING_STATE_PAUSED:
- break;
- case SCMIRRORING_STATE_DISCONNECTED:
- break;
- case SCMIRRORING_STATE_NONE:
- break;
- default:
- dlog_print(DLOG_ERROR, LOG_TAG, " state[%d] Invalid State", state);
- break;
-
- }
- return;
-}</pre>
- </li>
-
-</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="connect" name="connect" class="items-tit-h2">Connecting and Starting the screen mirroring sink
-</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
-<p>To connect and start the screen mirroring sink:</p>
-
-<ol>
- <li>Set IP and port number using <span style="font-family: Courier New,Courier,monospace">scmirroring_sink_set_ip_and_port()</span> function before calling <span style="font-family: Courier New,Courier,monospace">scmirroring_sink_connect()</span> function.</li>
- <li>Connect the screen mirroring sink to the screen mirroring source using <span style="font-family: Courier New,Courier,monospace">scmirroring_sink_connect()</span> function. The screen mirroring state will be <span style="font-family: Courier New,Courier,monospace">SCMIRRORING_STATE_CONNECTED</span> asynchronously. You should check to change the state using state callback function.</li>
- <li>Start the screen mirroring sink using <span style="font-family: Courier New,Courier,monospace">scmirroring_sink_start()</span> function when the screen mirroring state is <span style="font-family: Courier New,Courier,monospace">SCMIRRORING_STATE_CONNECTED</span>. The screen mirroring state will be <span style="font-family: Courier New,Courier,monospace">SCMIRRORING_STATE_PLAYING</span> asynchronously.
- </li>
-
-<pre class="prettyprint">
-static void scmirroring_state_callback(scmirroring_error_e error_code, scmirroring_state_e state, void *user_data);
-
-static int start_scmirroring_sink(const char* peer_ip, const char* peer_port)
-{
- int ret;
- ret = scmirroring_sink_set_ip_and_port(g_scmirroring, peer_ip, peer_port);
- if(ret != SCMIRRORING_ERROR_NONE)
- {
- dlog_print(DLOG_ERROR, LOG_TAG, " scmirroring_sink_set_ip_and_port fail [%d]", ret);
- return FALSE;
- }
- ret = scmirroring_sink_connect(g_scmirroring);
- if(ret != SCMIRRORING_ERROR_NONE)
- {
- dlog_print(DLOG_ERROR, LOG_TAG, " scmirroring_sink_connect fail [%d]", ret);
- return FALSE;
- }
-
- return TRUE:
-}
-
-static void scmirroring_state_callback(scmirroring_error_e error_code, scmirroring_state_e state, void *user_data)
-{
- int ret;
- dlog_print(DLOG_ERROR, LOG_TAG, "Received Callback error code[%d], state[%d]", error_code, state);
-
- switch(state)
- {
- case SCMIRRORING_STATE_NULL:
- break;
- case SCMIRRORING_STATE_PREPARED:
- break;
- case SCMIRRORING_STATE_CONNECTED:
- ret = scmirroring_sink_start(g_scmirroring);
- if(ret != SCMIRRORING_ERROR_NONE)
- {
- dlog_print(DLOG_ERROR, LOG_TAG, " scmirroring_sink_start fail [%d]", ret);
- return;
- }
- break;
- case SCMIRRORING_STATE_PLAYING:
- break;
- case SCMIRRORING_STATE_PAUSED:
- break;
- case SCMIRRORING_STATE_DISCONNECTED:
- break;
- case SCMIRRORING_STATE_NONE:
- break;
- default:
- dlog_print(DLOG_ERROR, LOG_TAG, " state[%d] Invalid State", state);
- break;
- }
- return;
-}</pre>
-</ol>
- <li>
- <div class="devicespec-tit">
- <h2 id="release" name="release" class="items-tit-h2">Releasing Resources</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
-<p>After you have finished working with the screen mirroring sink, disconnect the screen mirroring sink and release all resources:</p>
-
-<ol>
- <li>Disconnect the screen mirroring sink using <span style="font-family: Courier New,Courier,monospace">scmirroring_sink_disconnect()</span> function. The screen mirroring state will be <span style="font-family: Courier New,Courier,monospace">SCMIRRORING_STATE_DISCONNECTED</span> immediately.</li>
- <li>Unprepare the screen mirroring sink using <span style="font-family: Courier New,Courier,monospace">scmirroring_sink_unprepare()</span> function. The screen mirroring state will be <span style="font-family: Courier New,Courier,monospace">SCMIRRORING_STATE_NULL</span> immediately.</li>
- <li>Destroy the screen mirroring sink using <span style="font-family: Courier New,Courier,monospace">scmirroring_sink_destroy()</span> function. The screen mirroring state will be <span style="font-family: Courier New,Courier,monospace">SCMIRRORING_STATE_NONE</span> immediately.</li>
- <pre class="prettyprint">
-static int destroy_scmirroring_sink()
-{
- ret = scmirroring_sink_disconnect(g_scmirroring);
- if(ret != SCMIRRORING_ERROR_NONE)
- {
- dlog_print(DLOG_ERROR, LOG_TAG, " scmirroring_sink_disconnect fail [%d]", ret);
- return FALSE;
- }
-
- ret = scmirroring_sink_unprepare(g_scmirroring);
- if(ret != SCMIRRORING_ERROR_NONE)
- {
- dlog_print(DLOG_ERROR, LOG_TAG, " scmirroring_sink_unprepare fail [%d]", ret);
- return FALSE;
- }
-
- ret = scmirroring_sink_destroy(g_scmirroring);
- if(ret != SCMIRRORING_ERROR_NONE)
- {
- dlog_print(DLOG_ERROR, LOG_TAG, " scmirroring_sink_destroy fail [%d]", ret);
- return FALSE;
- }
- return TRUE;
-}
- </pre>
-</ol>
- </div>
- </li>
-<li>
- <div class="devicespec-tit">
- <h2 id="handle" name="handle" class="items-tit-h2">Handling exception of the screen mirroring</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
-<p>To handle exception of the screen mirroring:</p>
-
-<ol>
- <li> If the state callback function is received <span style="font-family: Courier New,Courier,monospace">SCMIRRORING_STATE_DISCONNECTED</span> state, you should release the screen mirroring sink. The situation is caused by the source device disconnects the session or the screen mirroring sink has internal problem. </li>
- <pre class="prettyprint">
-static void scmirroring_state_callback(scmirroring_error_e error_code, scmirroring_state_e state, void *user_data)
-{
- int ret;
- dlog_print(DLOG_ERROR, LOG_TAG, "Received Callback error code[%d], state[%d]", error_code, state);
-
- switch(state)
- {
- case SCMIRRORING_STATE_NULL:
- break;
- case SCMIRRORING_STATE_PREPARED:
- break;
- case SCMIRRORING_STATE_CONNECTED:
- break;
- case SCMIRRORING_STATE_PLAYING:
- break;
- case SCMIRRORING_STATE_PAUSED:
- break;
- case SCMIRRORING_STATE_DISCONNECTED:
- ret = scmirroring_sink_unprepare(g_scmirroring);
- if(ret != SCMIRRORING_ERROR_NONE)
- {
- dlog_print(DLOG_ERROR, LOG_TAG, " scmirroring_sink_unprepare fail [%d]", ret);
- return;
- }
- /* Fill what you want to do*/
- break;
- case SCMIRRORING_STATE_NONE:
- break;
- default:
- dlog_print(DLOG_ERROR, LOG_TAG, " state[%d] Invalid State", state);
- break;
- }
- return;
-}
- </pre>
-</ol>
- </div>
- </li>
- </ul>
-</div>
-</div>
-
-<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>Screen Mirroring Sink: Mirroring Screen and Sound</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+ <div id="profile">
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+ </div>
+ <div id="toc_border"><div id="toc">
+ <p class="toc-title">Content</p>
+ <ul class="toc">
+ <li><a href="#init">Initializing the Screen Mirroring Sink</a></li>
+ <li><a href="#prepare">Preparing the Screen Mirroring Sink</a></li>
+ <li><a href="#connect">Connecting and Starting the Screen Mirroring Sink</a></li>
+ <li><a href="#release">Releasing Resources</a></li>
+ <li><a href="#handle">Handling Screen Mirroring Sink Exceptions</a></li>
+ </ul>
+ <p class="toc-title">Related Info</p>
+ <ul class="toc">
+ <li><a href="../../../../org.tizen.guides/html/native/multimedia/screen_mirroring_n.htm">Screen Mirroring Sink Guide</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SCMIRRORING_SINK__MODULE.html">Screen Mirroring Sink API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__SCMIRRORING_SINK__MODULE.html">Screen Mirroring Sink API for Wearable Native</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Screen Mirroring Sink: Mirroring Screen and Sound</h1>
+
+<p>This tutorial demonstrates how you can mirror the device screen and sound to another device wirelessly as a sink.</p>
+
+<h2>Warm-up</h2>
+<p>Become familiar with Screen Mirroring Sink API basics by learning about:</p>
+
+<ul>
+ <li><a href="#init">Initializing the Screen Mirroring Sink</a>
+ <p>Initialize the screen mirroring sink for use.</p>
+ </li>
+ <li><a href="#prepare">Preparing the Screen Mirroring Sink</a>
+ <p>Set specific information, and prepare the screen mirroring sink.</p>
+ </li>
+ <li><a href="#connect">Connecting and Starting the Screen Mirroring Sink</a>
+ <p>Connect and start the screen mirroring sink.</p>
+ </li>
+ <li><a href="#release">Releasing Resources</a>
+ <p>Disconnect and unprepare the screen mirroring sink, and destroy the sink handle and release all its resources.</p>
+ </li>
+ <li><a href="#handle">Handling Screen Mirroring Sink Exceptions</a>
+ <p>Handle exceptions in the screen mirroring sink processes.</p>
+ </li>
+</ul>
+
+ <h2 id="init" name="init">Initializing the Screen Mirroring Sink</h2>
+
+<p>To initialize the screen mirroring sink:</p>
+
+<ol><li><p>To use the functions and data types of the Screen Mirroring Sink API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SCMIRRORING_SINK__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__SCMIRRORING_SINK__MODULE.html">mobile</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><scmirroring_type.h></span> and <span style="font-family: Courier New,Courier,monospace"><scmirroring_sink.h></span> header files in your application:</p>
+<pre class="prettyprint">
+#include <scmirroring_type.h>
+#include <scmirroring_sink.h>
+</pre></li>
+
+ <li><p>Create a screen mirroring sink handle using the <span style="font-family: Courier New,Courier,monospace">scmirroring_sink_create()</span> function. The screen mirroring state immediately becomes <span style="font-family: Courier New,Courier,monospace">SCMIRRORING_STATE_NULL</span>.</p>
+<pre class="prettyprint">
+static scmirroring_sink_h g_scmirroring;
+
+static int init_scmirroring_sink()
+{
+ int ret = SCMIRRORING_ERROR_NONE;
+ ret = scmirroring_sink_create(&g_scmirroring);
+ if (ret != SCMIRRORING_ERROR_NONE)
+ {
+ dlog_print(DLOG_ERROR, LOG_TAG, "scmirroring_sink_create fail [%d]", ret);
+
+ return FALSE;
+ }
+
+ return TRUE;
+}
+</pre></li>
+</ol>
+
+ <h2 id="prepare" name="prepare">Preparing the Screen Mirroring Sink</h2>
+
+<p>To prepare the screen mirroring sink:</p>
+
+<ol>
+ <li>Register and define a callback for checking the screen mirroring sink state using the <span style="font-family: Courier New,Courier,monospace">scmirroring_sink_set_state_changed_cb()</span> function.
+ <pre class="prettyprint">
+static void scmirroring_state_callback(scmirroring_error_e error_code, scmirroring_state_e state, void *user_data)
+{
+ dlog_print(DLOG_ERROR, LOG_TAG, "Received Callback error code[%d], state[%d]", error_code, state);
+
+ switch (state)
+ {
+ case SCMIRRORING_STATE_NULL:
+ break;
+ case SCMIRRORING_STATE_PREPARED:
+ break;
+ case SCMIRRORING_STATE_CONNECTED:
+ break;
+ case SCMIRRORING_STATE_PLAYING:
+ break;
+ case SCMIRRORING_STATE_PAUSED:
+ break;
+ case SCMIRRORING_STATE_DISCONNECTED:
+ break;
+ case SCMIRRORING_STATE_NONE:
+ break;
+ default:
+ dlog_print(DLOG_ERROR, LOG_TAG, " state[%d] Invalid State", state);
+ break;
+ }
+
+ return;
+}
+
+static int prepare_scmirroring_sink(scmirroring_display_type_e display_type, Evas_Object* display_object)
+{
+ ret = scmirroring_sink_set_state_changed_cb(g_scmirroring, scmirroring_state_callback, NULL);
+ if (ret != SCMIRRORING_ERROR_NONE)
+ {
+ dlog_print(DLOG_ERROR, LOG_TAG, "scmirroring_sink_set_state_changed_cb fail [%d]", ret);
+
+ return FALSE;
+ }
+</pre>
+ </li>
+ <li>Set a display object using the <span style="font-family: Courier New,Courier,monospace">scmirroring_sink_set_display()</span> function before calling the <span style="font-family: Courier New,Courier,monospace">scmirroring_sink_prepare()</span> function.
+ <pre class="prettyprint">
+ ret = scmirroring_sink_set_display(g_scmirroring, display_type, display_object);
+ if (ret != SCMIRRORING_ERROR_NONE)
+ {
+ dlog_print(DLOG_ERROR, LOG_TAG, "scmirroring_sink_set_display fail [%d]", ret);
+
+ return FALSE;
+ }</pre>
+ </li>
+ <li>Prepare the screen mirroring sink using the <span style="font-family: Courier New,Courier,monospace">scmirroring_sink_prepare()</span> function. The screen mirroring state immediately becomes <span style="font-family: Courier New,Courier,monospace">SCMIRRORING_STATE_PREPARED</span>.
+
+<pre class="prettyprint">
+ ret = scmirroring_sink_prepare(g_scmirroring);
+ if (ret != SCMIRRORING_ERROR_NONE)
+ {
+ dlog_print(DLOG_ERROR, LOG_TAG, "scmirroring_sink_prepare fail [%d]", ret);
+
+ return FALSE;
+ }
+
+ return TRUE;
+}
+</pre>
+ </li>
+
+</ol>
+
+ <h2 id="connect" name="connect">Connecting and Starting the Screen Mirroring Sink</h2>
+
+<p>To connect and start the screen mirroring sink:</p>
+
+<ol>
+ <li>Set IP and port number using the <span style="font-family: Courier New,Courier,monospace">scmirroring_sink_set_ip_and_port()</span> function before calling the <span style="font-family: Courier New,Courier,monospace">scmirroring_sink_connect()</span> function.
+ <pre class="prettyprint">
+static int start_scmirroring_sink(const char* peer_ip, const char* peer_port)
+{
+ int ret;
+ ret = scmirroring_sink_set_ip_and_port(g_scmirroring, peer_ip, peer_port);
+ if (ret != SCMIRRORING_ERROR_NONE)
+ {
+ dlog_print(DLOG_ERROR, LOG_TAG, " scmirroring_sink_set_ip_and_port fail [%d]", ret);
+
+ return FALSE;
+ }
+</pre></li>
+ <li>Connect the screen mirroring sink to the screen mirroring source using the <span style="font-family: Courier New,Courier,monospace">scmirroring_sink_connect()</span> function. The screen mirroring state becomes <span style="font-family: Courier New,Courier,monospace">SCMIRRORING_STATE_CONNECTED</span> asynchronously. Monitor the state changes using the state callback.
+ <pre class="prettyprint">
+ ret = scmirroring_sink_connect(g_scmirroring);
+ if (ret != SCMIRRORING_ERROR_NONE)
+ {
+ dlog_print(DLOG_ERROR, LOG_TAG, " scmirroring_sink_connect fail [%d]", ret);
+
+ return FALSE;
+ }
+
+ return TRUE;
+}
+</pre></li>
+ <li>Start the screen mirroring sink using the <span style="font-family: Courier New,Courier,monospace">scmirroring_sink_start()</span> function when the screen mirroring state is <span style="font-family: Courier New,Courier,monospace">SCMIRRORING_STATE_CONNECTED</span>. The screen mirroring state becomes <span style="font-family: Courier New,Courier,monospace">SCMIRRORING_STATE_PLAYING</span> asynchronously.
+
+
+<pre class="prettyprint">
+static void scmirroring_state_callback(scmirroring_error_e error_code, scmirroring_state_e state, void *user_data)
+{
+ int ret;
+ dlog_print(DLOG_ERROR, LOG_TAG, "Received Callback error code[%d], state[%d]", error_code, state);
+
+ switch (state)
+ {
+ // Other cases
+ case SCMIRRORING_STATE_CONNECTED:
+ ret = scmirroring_sink_start(g_scmirroring);
+ if (ret != SCMIRRORING_ERROR_NONE)
+ {
+ dlog_print(DLOG_ERROR, LOG_TAG, " scmirroring_sink_start fail [%d]", ret);
+
+ return;
+ }
+ break;
+ // Other cases
+ }
+
+ return;
+}</pre> </li>
+</ol>
+
+ <h2 id="release" name="release">Releasing Resources</h2>
+
+<p>After you have finished working with the screen mirroring sink, disconnect the screen mirroring sink and release all resources:</p>
+
+<ol>
+ <li>Disconnect the screen mirroring sink using <span style="font-family: Courier New,Courier,monospace">scmirroring_sink_disconnect()</span> function. The screen mirroring state immediately becomes <span style="font-family: Courier New,Courier,monospace">SCMIRRORING_STATE_DISCONNECTED</span>.
+ <pre class="prettyprint">
+static int destroy_scmirroring_sink()
+{
+ ret = scmirroring_sink_disconnect(g_scmirroring);
+ if (ret != SCMIRRORING_ERROR_NONE)
+ {
+ dlog_print(DLOG_ERROR, LOG_TAG, " scmirroring_sink_disconnect fail [%d]", ret);
+
+ return FALSE;
+ }
+</pre></li>
+ <li>Unprepare the screen mirroring sink using the <span style="font-family: Courier New,Courier,monospace">scmirroring_sink_unprepare()</span> function. The screen mirroring state immediately becomes <span style="font-family: Courier New,Courier,monospace">SCMIRRORING_STATE_NULL</span>.
+ <pre class="prettyprint">
+ ret = scmirroring_sink_unprepare(g_scmirroring);
+ if (ret != SCMIRRORING_ERROR_NONE)
+ {
+ dlog_print(DLOG_ERROR, LOG_TAG, " scmirroring_sink_unprepare fail [%d]", ret);
+
+ return FALSE;
+ }
+</pre></li>
+ <li>Destroy the screen mirroring sink using the <span style="font-family: Courier New,Courier,monospace">scmirroring_sink_destroy()</span> function. The screen mirroring state immediately becomes <span style="font-family: Courier New,Courier,monospace">SCMIRRORING_STATE_NONE</span>.
+ <pre class="prettyprint">
+ ret = scmirroring_sink_destroy(g_scmirroring);
+ if (ret != SCMIRRORING_ERROR_NONE)
+ {
+ dlog_print(DLOG_ERROR, LOG_TAG, " scmirroring_sink_destroy fail [%d]", ret);
+
+ return FALSE;
+ }
+
+ return TRUE;
+}</pre></li>
+</ol>
+
+ <h2 id="handle" name="handle">Handling Screen Mirroring Sink Exceptions</h2>
+
+<p>To handle screen mirroring exceptions:</p>
+
+<p>If the state callback function returns the <span style="font-family: Courier New,Courier,monospace">SCMIRRORING_STATE_DISCONNECTED</span> state, <a href="#release">release the screen mirroring sink</a>. The situation is caused by the source device as it disconnects the session, or the screen mirroring sink has internal problem.</p>
+ <pre class="prettyprint">
+static void scmirroring_state_callback(scmirroring_error_e error_code, scmirroring_state_e state, void *user_data)
+{
+ int ret;
+ dlog_print(DLOG_ERROR, LOG_TAG, "Received Callback error code[%d], state[%d]", error_code, state);
+
+ switch (state)
+ {
+ // Other cases
+ case SCMIRRORING_STATE_DISCONNECTED:
+ ret = scmirroring_sink_unprepare(g_scmirroring);
+ if (ret != SCMIRRORING_ERROR_NONE)
+ {
+ dlog_print(DLOG_ERROR, LOG_TAG, " scmirroring_sink_unprepare fail [%d]", ret);
+
+ return;
+ }
+ // Do something
+ break;
+ // Other cases
+ }
+
+ return;
+}</pre>
+
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a class="opensection" href="#set">Setting the Sound Session Type</a></li>
- <li><a class="opensection" href="#manage">Managing Volume Control</a></li>
- <li><a class="opensection" href="#query">Querying Sound Devices</a></li>
- <li><a class="opensection" href="#session">Managing Sound Manager Session Parameters</a></li>
+ <li><a href="#set">Setting the Sound Session Type</a></li>
+ <li><a href="#manage">Managing Volume Control</a></li>
+ <li><a href="#query">Querying Sound Devices</a></li>
+ <li><a href="#session">Managing Sound Manager Session Parameters</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.guides/html/native/multimedia/sound_manager_n.htm">Sound Manager Guide</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__MODULE.html">Sound Manager API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__MODULE.html">Sound Manager API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__SOUND__MANAGER__MODULE.html">Sound Manager API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Sound Manager: Managing Sound Parameters</h1>
- <div class="cont"><div class="static-cont">
+
<p>This tutorial demonstrates how you manage sounds.</p>
<p>Become familiar with the Sound Manager API basics by learning about:</p>
<ul>
-<li><a class="opensection" href="#set">Setting the Sound Session Type</a>
+<li><a href="#set">Setting the Sound Session Type</a>
<p>Set a sound session type for your application.</p></li>
-<li><a class="opensection" href="#manage">Managing Volume Control</a>
+<li><a href="#manage">Managing Volume Control</a>
<p>Control the volume of your application.</p></li>
-<li><a class="opensection" href="#query">Querying Sound Devices</a>
+<li><a href="#query">Querying Sound Devices</a>
<p>Query sound device information.</p></li></ul>
<h2>Follow-up</h2>
<p>Once we have learned the basics of the Sound Manager API, we can now move on to more advanced tasks, including:</p>
<ul>
-<li><a class="opensection" href="#session">Managing Sound Manager Session Parameters</a>
+<li><a href="#session">Managing Sound Manager Session Parameters</a>
<p>Obtain and set basic sound session parameters, such as volume and sound type of the actual sound sessions.</p></li></ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
-
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="set" name="set" class="items-tit-h2">Setting the Sound Session Type</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="set" name="set">Setting the Sound Session Type</h2>
+
<p>To set your application sound session type and monitor session changes:</p>
-<ol><li><p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__MODULE.html">Sound Manager</a> API, include the <span style="font-family: Courier New,Courier,monospace"><sound_manager.h></span> header file in your application:</p>
+<ol><li><p>To use the functions and data types of the Sound Manager API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__SOUND__MANAGER__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><sound_manager.h></span> header file in your application:</p>
<pre class="prettyprint">
#include <sound_manager.h>
</pre></li>
<li>Set the sound session type.
<p>Set the application sound session type using the <span style="font-family: Courier New,Courier,monospace">sound_manager_set_session_type()</span> function. The function sets the type of your sound session across the system.</p>
-<p>The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__SESSION__MODULE.html#ga125699870d48881ea153a4fce7140958">sound_session_type_e</a> enumeration defines the available sound session types.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">sound_session_type_e</span> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__SESSION__MODULE.html#ga125699870d48881ea153a4fce7140958">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__SOUND__MANAGER__SESSION__MODULE.html#ga125699870d48881ea153a4fce7140958">wearable</a> applications) defines the available sound session types.</p>
<pre class="prettyprint">int error_code;
error_code = sound_manager_set_session_type(SOUND_SESSION_TYPE_MEDIA);
<li><p>To register the callback function, call <span style="font-family: Courier New,Courier,monospace">sound_manager_set_session_interrupted_cb()</span> with a callback and the data which passes the user data:</p>
<pre class="prettyprint">error_code = sound_manager_set_session_interrupted_cb(_sound_session_interrupted_cb, NULL);
</pre></li></ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="manage" name="manage" class="items-tit-h2">Managing Volume Control</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="manage" name="manage">Managing Volume Control</h2>
+
<p>To control your application volume:</p>
-<ol><li><p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__MODULE.html">Sound Manager</a> API, include the <span style="font-family: Courier New,Courier,monospace"><sound_manager.h></span> header file in your application:</p>
+<ol><li><p>To use the functions and data types of the Sound Manager API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__SOUND__MANAGER__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><sound_manager.h></span> header file in your application:</p>
<pre class="prettyprint">
#include <sound_manager.h>
</pre></li>
ret = sound_manager_set_volume(type, value);
</pre></li></ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="query" name="query" class="items-tit-h2">Querying Sound Devices</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="query" name="query">Querying Sound Devices</h2>
+
<p>To query for information:</p>
-<ol><li>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__MODULE.html">Sound Manager</a> API, include the <span style="font-family: Courier New,Courier,monospace"><sound_manager.h></span> header file in your application:
+<ol><li>To use the functions and data types of the Sound Manager API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__SOUND__MANAGER__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><sound_manager.h></span> header file in your application:
<pre class="prettyprint">
#include <sound_manager.h>
</pre></li>
<li>To query the information of the connected sound devices:
-<ul class="ul"><li>To access sound devices and their information:
-<ol>
+<ul><li>To access sound devices and their information:
+<ol type="a">
<li>Set the mask.
<p>Define a combination of masks to narrow down the sound devices whose information you need.</p>
}
</pre></li></ol></li>
<li>To monitor the device connection changes:
-<ol><li>To receive a notification whenever the sound device connection state changes, define the <span style="font-family: Courier New,Courier,monospace">sound_device_connected_cb</span> callback function.
+<ol type="a"><li>To receive a notification whenever the sound device connection state changes, define the <span style="font-family: Courier New,Courier,monospace">sound_device_connected_cb</span> callback function.
<pre class="prettyprint">
static void _sound_device_connected_cb(sound_device_h device, bool is_connected, void* user_data)
{
<p>Remember that the initial state of the connected sound device is deactivated.</p></li></ol></li>
<li>To monitor the device information changes:
-<ol><li>To receive a notification whenever the sound device information changes, define the <span style="font-family: Courier New,Courier,monospace">sound_device_information_changed_cb</span> callback function.
+<ol type="a"><li>To receive a notification whenever the sound device information changes, define the <span style="font-family: Courier New,Courier,monospace">sound_device_information_changed_cb</span> callback function.
<pre class="prettyprint">
static void _sound_device_information_changed_cb(sound_device_h device,
sound_device_changed_info_e changed_info,
</pre>
</li></ol></li>
</ul> </li></ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="session" name="session" class="items-tit-h2">Managing Sound Manager Session Parameters</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+<h2 id="session" name="session">Managing Sound Manager Session Parameters</h2>
<p>To obtain and modify basic sound session parameters:</p>
<ol>
-<li><p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__MODULE.html">Sound Manager</a> API, include the <span style="font-family: Courier New,Courier,monospace"><sound_manager.h></span> header file in your application:</p>
+<li><p>To use the functions and data types of the Sound Manager API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__SOUND__MANAGER__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><sound_manager.h></span> header file in your application:</p>
<pre class="prettyprint">
#include <sound_manager.h>
</pre>
<li>Store the parameter data.
<p>The session parameters are stored in the following enumeration structures:</p>
-<ul class="ul"><li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__SESSION__MODULE.html#ga125699870d48881ea153a4fce7140958">sound_session_type_e</a></li>
-<li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__SESSION__MODULE.html#ga132bd49bd7d0f5037cc292f9c7ad1c32">sound_session_option_for_during_play_e</a></li>
-<li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__SESSION__MODULE.html#ga26a030df874992a461af04255c6c3eef">sound_session_option_for_starting_e</a></li>
-<li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__SESSION__MODULE.html#ga20d1d7fa84dc322f03b58d42806cd9d9">sound_session_option_for_resumption_e</a></li></ul>
+<ul><li><span style="font-family: Courier New,Courier,monospace">sound_session_type_e</span> (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__SESSION__MODULE.html#ga125699870d48881ea153a4fce7140958">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__SOUND__MANAGER__SESSION__MODULE.html#ga125699870d48881ea153a4fce7140958">wearable</a> applications)</li>
+<li><span style="font-family: Courier New,Courier,monospace">sound_session_option_for_during_play_e</span> (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__SESSION__MODULE.html#ga132bd49bd7d0f5037cc292f9c7ad1c32">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__SOUND__MANAGER__SESSION__MODULE.html#ga132bd49bd7d0f5037cc292f9c7ad1c32">wearable</a> applications)</li>
+<li><span style="font-family: Courier New,Courier,monospace">sound_session_option_for_starting_e</span> (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__SESSION__MODULE.html#ga26a030df874992a461af04255c6c3eef">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__SOUND__MANAGER__SESSION__MODULE.html#ga26a030df874992a461af04255c6c3eef">wearable</a> applications)</li>
+<li><span style="font-family: Courier New,Courier,monospace">sound_session_option_for_resumption_e</span> (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__SESSION__MODULE.html#ga20d1d7fa84dc322f03b58d42806cd9d9">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__SOUND__MANAGER__SESSION__MODULE.html#ga20d1d7fa84dc322f03b58d42806cd9d9">wearable</a> applications)</li></ul>
</li>
<li>Detect interruptions.
-<ol><li>
+<ol type="a"><li>
<p>To detect and track session status changes, register a callback function:</p>
<pre class="prettyprint">
sound_manager_set_session_interrupted_cb(_sound_session_interrupted_cb, NULL);
</pre></li>
-<li><p>Define the callback function content. The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__SESSION__MODULE.html#ga9d7c723a05f1eab1b1d535bfad527b93">sound_session_interrupted_code_e</a> enumeration defines the available interruption sources.</p>
+<li><p>Define the callback function content. The <span style="font-family: Courier New,Courier,monospace">sound_session_interrupted_code_e</span> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__SESSION__MODULE.html#ga9d7c723a05f1eab1b1d535bfad527b93">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__SOUND__MANAGER__SESSION__MODULE.html#ga9d7c723a05f1eab1b1d535bfad527b93">wearable</a> applications) defines the available interruption sources.</p>
<pre class="prettyprint">
void _sound_session_interrupted_cb(sound_session_interrupted_code_e code, void * userdata)
</li></ol></li>
<li>Manage the session type.
-<p>To get a valid sound session, the
<a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__TONE__PLAYER__MODULE.html">Tone Player</a> API is used in this tutorial. For more information, see the <a href="tone_player_tutorial_n.htm">Tone Player Tutorial</a>.</p>
+<p>To get a valid sound session, the
Tone Player API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__TONE__PLAYER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__TONE__PLAYER__MODULE.html">wearable</a> applications) is used in this tutorial. For more information, see the <a href="tone_player_tutorial_n.htm">Tone Player Tutorial</a>.</p>
<p>To determine and change the session type, use the following functions:</p>
<pre class="prettyprint">
sound_manager_unset_session_interrupted_cb();
</pre>
</li>
-</ol>
-
- </div>
- </li>
- </ul>
-</div>
-</div>
+</ol>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a class="opensection" href="#init">Initializing the Tone Player</a></li>
- <li><a class="opensection" href="#play">Playing a Tone</a></li>
- <li><a class="opensection" href="#duration">Playing a Tone for a Specified Duration</a></li>
+ <li><a href="#init">Initializing the Tone Player</a></li>
+ <li><a href="#play">Playing a Tone</a></li>
+ <li><a href="#duration">Playing a Tone for a Specified Duration</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.guides/html/native/multimedia/tone_player_n.htm">Tone Player Guide</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__TONE__PLAYER__MODULE.html">Tone Player API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__TONE__PLAYER__MODULE.html">Tone Player API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__TONE__PLAYER__MODULE.html">Tone Player API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Tone Player: Playing Tones</h1>
- <div class="cont"><div class="static-cont">
+
-<p>This tutorial demonstrates how to play audio tones.</p>
+<p>This tutorial demonstrates how you can play audio tones.</p>
<h2>Warm-up</h2>
<p>Become familiar with the Tone Player API basics by learning about:</p>
<ul>
- <li><a class="opensection" href="#init">Initializing the Tone Player</a>
+ <li><a href="#init">Initializing the Tone Player</a>
<p>Initialize the tone player for use.</p></li>
- <li><a class="opensection" href="#play">Playing a Tone</a>
+ <li><a href="#play">Playing a Tone</a>
<p>Start playing a tone and stop playing it.</p></li>
- <li><a class="opensection" href="#duration">Playing a Tone for a Specified Duration</a>
+ <li><a href="#duration">Playing a Tone for a Specified Duration</a>
<p>Play a tone for a specified duration.</p></li>
</ul>
-
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
-
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="init" name="init" class="items-tit-h2">Initializing the Tone Player</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="init" name="init">Initializing the Tone Player</h2>
<p>Initialize the tone player:</p>
-<ol><li>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__TONE__PLAYER__MODULE.html">Tone Player</a> API, include the <span style="font-family: Courier New,Courier,monospace"><tone_player.h></span> and <span style="font-family: Courier New,Courier,monospace"><sound_manager.h></span> header files in your application:
+<ol><li>To use the functions and data types of the Tone Player API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__TONE__PLAYER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__TONE__PLAYER__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><tone_player.h></span> and <span style="font-family: Courier New,Courier,monospace"><sound_manager.h></span> header files in your application:
<pre class="prettyprint">
#include <tone_player.h>
#include <sound_manager.h>
</pre></li>
<li>To start using the tone player, declare a variable which identifies the tone player:
<pre class="prettyprint">int tone_player_id;</pre></li></ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="play" name="play" class="items-tit-h2">Playing a Tone</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="play" name="play">Playing a Tone</h2>
<p>To start and stop playing a tone:</p>
<ol>
<li>To start playback, use the <span style="font-family: Courier New,Courier,monospace">tone_player_start()</span> function. The player ID is assigned if the function succeeds. The function takes the following parameters:
- <ul class="ul">
+ <ul>
<li>Tone type, selected from the <span style="font-family: Courier New,Courier,monospace">tone_type_e</span> enum, defines which tone type to use (such as DTMF0 or DTMF1).</li>
<li>Media sound type, from the <span style="font-family: Courier New,Courier,monospace">sound_type_e</span> enum, defines which sound type is used (such as <span style="font-family: Courier New,Courier,monospace">NOTIFICATION</span>, <span style="font-family: Courier New,Courier,monospace">ALARM</span>, or <span style="font-family: Courier New,Courier,monospace">RINGTONE</span>).</li>
<li>Tone duration in milliseconds. If the duration is set to -1, the playback continues infinitely.</li>
<pre class="prettyprint">tone_player_stop(tone_player_id);</pre>
</li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="duration" name="duration" class="items-tit-h2">Playing a Tone for a Specified Duration</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="duration" name="duration">Playing a Tone for a Specified Duration</h2>
<p>To start playing a tone, use the <span style="font-family: Courier New,Courier,monospace">tone_player_start()</span> function with the tone type, sound type, and duration time as parameters. In this example, a congestion tone is played as a call sound for 1 second (1000 milliseconds):</p>
<pre class="prettyprint">tone_player_start(TONE_TYPE_SUP_CONGESTION, SOUND_TYPE_CALL, 1000, &tone_player_id);</pre>
<p>When the duration is set to a specified time, playing is stopped automatically. You can also use the <span style="font-family: Courier New,Courier,monospace">tone_player_stop()</span> function to stop the playback manually.</p>
- </div>
- </li>
- </ul>
-</div>
-</div>
+
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a class="opensection" href="#init">Initializing Video Utilities</a></li>
- <li><a class="opensection" href="#manage">Managing Transcoding</a></li>
- <li><a class="opensection" href="#set">Setting Parameters</a></li>
- <li><a class="opensection" href="#get">Monitoring the Transcoding Progress</a></li>
+ <li><a href="#init">Initializing Video Utilities</a></li>
+ <li><a href="#manage">Managing Transcoding</a></li>
+ <li><a href="#set">Setting Parameters</a></li>
+ <li><a href="#get">Monitoring the Transcoding Progress</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.guides/html/native/multimedia/video_util_n.htm">Video Util Guide</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__VIDEO__UTIL__MODULE.html">Video Util API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__VIDEO__UTIL__MODULE.html">Video Util API for Mobile Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Video Util: Transcoding Media Files</h1>
- <div class="cont"><div class="static-cont">
+
<p>This tutorial demonstrates how you can transcode and trim video files.</p>
+<table class="note">
+<tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">This feature is supported in mobile applications only.</td>
+ </tr>
+ </tbody>
+ </table>
<h2>Warm-up</h2>
<p>Become familiar with the Video Util API basics by learning about:</p>
<ul>
- <li><a class="opensection" href="#init">Initializing Video Utilities</a>
+ <li><a href="#init">Initializing Video Utilities</a>
<p>Initialize the video utilities for use.</p></li>
- <li><a class="opensection" href="#manage">Managing Transcoding</a>
+ <li><a href="#manage">Managing Transcoding</a>
<p>Start, cancel, and finish the transcoding process and monitor its progress.</p></li>
</ul>
<h2>Follow-up</h2>
<p>Once we have learned the basics of the Video Util API, we can now move on to more advanced tasks, including:</p>
<ul>
- <li><a class="opensection" href="#set">Setting Parameters</a>
+ <li><a href="#set">Setting Parameters</a>
<p>Set basic parameters for the video utility.</p></li>
- <li><a class="opensection" href="#get">Monitoring the Transcoding Progress</a>
+ <li><a href="#get">Monitoring the Transcoding Progress</a>
<p>Get progress information about the transcoding process.</p></li>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
-
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="init" name="init" class="items-tit-h2">Initializing Video Utilities</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="init" name="init">Initializing Video Utilities</h2>
+
<p>Before using the video util:</p>
<ol>
<pre class="prettyprint">
error_code = video_util_destroy(handle);
</pre></li></ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="manage" name="manage" class="items-tit-h2">Managing Transcoding</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="manage" name="manage">Managing Transcoding</h2>
+
<p>To manage the transcoding process:</p>
<ol><li><p>If the prerequisites are set normally, start the transcoding with the <span style="font-family: Courier New,Courier,monospace">video_util_start_transcoding()</span> function.</p>
</pre></li>
<li><p>While transcoding:</p>
-<ul class="ul"><li>Call the <span style="font-family: Courier New,Courier,monospace">video_util_get_progress_transcoding()</span> function to get the current progress.
+<ul><li>Call the <span style="font-family: Courier New,Courier,monospace">video_util_get_progress_transcoding()</span> function to get the current progress.
</li>
<li>Call the <span style="font-family: Courier New,Courier,monospace">video_util_cancel_transcoding()</span> function to cancel the transcoding process.
<p>This function destroys the handle of a completed transcoding. The function contains the cancel function, if it is called during the transcoding process.</p>
<p>If you do not call the destroy function after completing the transcoding, new transcoding is not possible, and a memory crash can occur.</p></li></ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="set" name="set" class="items-tit-h2">Setting Parameters</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="set" name="set">Setting Parameters</h2>
+
<p>To set the basic parameters of the video util:</p>
<ol>
<li><a href="#init">Initialize the video utilities</a>.</li>
<li>Check the supported file format.
-<ol><li><p>Check the supported file formats:</p>
+<ol
type="a"><li><p>Check the supported file formats:</p>
<pre class="prettyprint">
error_code = video_util_foreach_supported_file_format(handle, video_util_file_supported, NULL);
</li>
<li>Check the supported codecs.
-<ol><li><p>Check the supported audio and video codecs:</p>
+<ol
type="a"><li><p>Check the supported audio and video codecs:</p>
<pre class="prettyprint">
video_util_foreach_supported_video_codec(handle, video_util_video_supported, NULL);
</pre>
</li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="get" name="get" class="items-tit-h2">Monitoring the Transcoding Progress</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="get" name="get">Monitoring the Transcoding Progress</h2>
+
<p>To get the progress of the video util:</p>
<ol>
<li><a href="#init">Initialize the video utilities</a>.</li>
video_util_get_progress_transcoding(video_util_h handle, unsigned long *current_position, unsigned long *duration);
</pre>
</li>
-
-
</ol>
- </div>
- </li>
- </ul>
-</div>
-</div>
+
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a class="opensection" href="#start">Starting and Stopping the WAV Player</a></li>
+ <li><a href="#start">Starting and Stopping the WAV Player</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.guides/html/native/multimedia/wav_player_n.htm">WAV Player Guide</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__WAV__PLAYER__MODULE.html">WAV Player API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__WAV__PLAYER__MODULE.html">WAV Player API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__WAV__PLAYER__MODULE.html">WAV Player API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>WAV Player: Playing Waveform Audio Files</h1>
- <div class="cont"><div class="static-cont">
+
-<p>This tutorial demonstrates how to play Waveform Audio File Format (WAV) files.</p>
+<p>This tutorial demonstrates how you can play Waveform Audio File Format (WAV) files.</p>
<h2>Warm-up</h2>
<p>Become familiar with the WAV Player API basics by learning about:</p>
<ul>
- <li><a class="opensection" href="#start">Starting and Stopping the WAV Player</a>
+ <li><a href="#start">Starting and Stopping the WAV Player</a>
<p>Start and stop playing a WAV file.</p></li>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
-
- <ul class="devicespecifications">
-<li>
- <div class="devicespec-tit">
- <h2 id="start" name="start" class="items-tit-h2">Starting and Stopping the WAV Player</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="start" name="start">Starting and Stopping the WAV Player</h2>
+
<p>To start and stop the WAV player:</p>
<ol>
-<li><p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__WAV__PLAYER__MODULE.html">WAV Player</a> API, include the <span style="font-family: Courier New,Courier,monospace"><wav_player.h></span> header file in your application:</p>
+<li><p>To use the functions and data types of the WAV Player API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__WAV__PLAYER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__WAV__PLAYER__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><wav_player.h></span> header file in your application:</p>
<pre class="prettyprint">
#include <stdio.h>
#include <wav_player.h>
</pre>
</li>
</ol>
- </div>
- </li>
- </ul>
-</div>
-</div>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a class="opensection" href="#init">Initializing Bluetooth</a></li>
- <li><a class="opensection" href="#enable">Enabling and Disabling Bluetooth</a></li>
- <li><a class="opensection" href="#state">Initializing Bluetooth and Checking the Adapter State</a></li>
- <li><a class="opensection" href="#find">Finding Other Devices</a></li>
+ <li><a href="#init">Initializing Bluetooth</a></li>
+ <li><a href="#enable">Enabling and Disabling Bluetooth</a></li>
+ <li><a href="#state">Initializing Bluetooth and Checking the Adapter State</a></li>
+ <li><a href="#find">Finding Other Devices</a></li>
<li>Serial Port Profile (SPP)
- <ul class="toc">
- <li><a class="opensection" href="#connect">Connecting to Other Devices Using SPP</a></li>
- <li><a class="opensection" href="#exchange">Exchanging Data Using SPP</a></li>
- <li><a class="opensection" href="#disconnect">Disconnecting from the Connected Device Using SPP</a></li>
- </ul></li>
+ <ul class="toc">
+ <li><a href="#connect">Connecting to Other Devices Using SPP</a></li>
+ <li><a href="#exchange">Exchanging Data Using SPP</a></li>
+ <li><a href="#disconnect">Disconnecting from the Connected Device Using SPP</a></li>
+ </ul>
+ </li>
+ <li><a href="#gatt">Performing GATT Operations</a></li>
<li>Object Push Profile (OPP)
- <ul class="toc"><li><a class="opensection" href="#exc">Exchanging Data Using OPP</a></li>
- </ul></li>
- <li><a class="opensection" href="#release">Releasing All Resources</a></li>
+ <ul class="toc">
+ <li><a href="#exc">Exchanging Data Using OPP</a></li>
+ </ul>
+ </li>
+ <li>Bluetooth LE
+ <ul class="toc">
+ <li><a href="#le_adapter">Enabling the Bluetooth LE Adapter and Checking its State</a></li>
+ <li><a href="#le_scan">Managing Bluetooth LE Scans</a></li>
+ <li><a href="#add_adv_data">Adding Advertising Data to the LE Advertisement</a></li>
+ <li><a href="#set_adv_conn">Setting the Advertising Connectable Mode</a></li>
+ <li><a href="#set_adv_mode">Setting the LE Advertising Mode</a></li>
+ <li><a href="#start_adv">Starting Advertising</a></li>
+ </ul>
+ </li>
+ <li><a href="#release">Releasing All Resources</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.guides/html/native/network/bluetooth_n.htm">Bluetooth Guide</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__BLUETOOTH__MODULE.html">Bluetooth API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__BLUETOOTH__MODULE.html">Bluetooth API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__BLUETOOTH__MODULE.html">Bluetooth API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Bluetooth: Managing Bluetooth Devices</h1>
- <div class="cont"><div class="static-cont">
+
<p>This tutorial demonstrates how you can use Bluetooth connections.</p>
<h2>Warm-up</h2>
<p>Become familiar with the Bluetooth API basics by learning about:</p>
<ul>
- <li><a class="opensection" href="#init">Initializing Bluetooth</a>
+ <li><a href="#init">Initializing Bluetooth</a>
<p>Initialize Bluetooth for use.</p></li>
- <li><a class="opensection" href="#enable">Enabling and Disabling Bluetooth</a>
+ <li><a href="#enable">Enabling and Disabling Bluetooth</a>
<p>Enable or disable Bluetooth. </p></li>
- <li><a class="opensection" href="#state">Initializing Bluetooth and Checking the Adapter State</a>
+ <li><a href="#state">Initializing Bluetooth and Checking the Adapter State</a>
<p>Initialize Bluetooth and check the Bluetooth adapter state.</p></li>
- <li><a class="opensection" href="#find">Finding Other Devices</a>
+ <li><a href="#find">Finding Other Devices</a>
<p>Find other devices using Bluetooth.</p></li>
<li>Serial Port Profile (SPP)
<ul>
- <li><a class="opensection" href="#connect">Connecting to Other Devices Using SPP</a>
- <p>Connect to other devices through SPP.</p></li>
- <li><a class="opensection" href="#exchange">Exchanging Data Using SPP</a>
- <p>Exchange data between devices through SPP.</p></li>
- <li><a class="opensection" href="#disconnect">Disconnecting from the Connected Device Using SPP</a>
- <p>Disconnect from the connected devices.</p></li>
+ <li><a href="#connect">Connecting to Other Devices Using SPP</a>
+
<p>Connect to other devices through SPP.</p></li>
+ <li><a href="#exchange">Exchanging Data Using SPP</a>
+
<p>Exchange data between devices through SPP.</p></li>
+ <li><a href="#disconnect">Disconnecting from the Connected Device Using SPP</a>
+
<p>Disconnect from the connected devices.</p></li>
</ul></li>
+ <li><a href="#gatt">Performing GATT Operations</a>
+ <p>Create a client to connect to a remote service, get service details, and read and set service attributes.</p></li>
<li>Object Push Profile (OPP)
- <ul><li><a class="opensection" href="#exc">Exchanging Data Using OPP</a>
- <p>Exchange data between devices through OPP.</p></li>
+ <ul>
+ <li><a href="#exc">Exchanging Data Using OPP</a>
+ <p>Exchange data between devices through OPP.</p></li>
+ </ul></li>
+ <li>Bluetooth LE
+ <ul>
+
+ <li><a href="#le_adapter">Enabling the Bluetooth LE Adapter and Checking its State</a>
+ <p>Ensure that the Bluetooth LE (BLE) adapter is enabled.</p></li>
+ <li><a href="#le_scan">Managing Bluetooth LE Scans</a>
+ <p>Start the scan, handle the scanning results, and stop the scan.</p></li>
+ <li><a href="#add_adv_data">Adding Advertising Data to the LE Advertisement</a>
+ <p>Add advertising data to an LE advertisement or a scan result.</p></li>
+ <li><a href="#set_adv_conn">Setting the Advertising Connectable Mode</a>
+ <p>Define whether the advertising type is connectable or non-connectable.</p></li>
+ <li><a href="#set_adv_mode">Setting the LE Advertising Mode</a>
+ <p>Control the advertising power and latency.</p></li>
+ <li><a href="#start_adv">Starting Advertising</a>
+ <p>Start advertising with the advertising parameters.</p></li>
</ul></li>
- <li><a class="opensection" href="#release">Releasing All Resources</a>
+
+ <li><a href="#release">Releasing All Resources</a>
<p>Release all resources related to using the Bluetooth connection.</p></li>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
-
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="init" name="init" class="items-tit-h2">Initializing Bluetooth</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="init" name="init">Initializing Bluetooth</h2>
<p>To initialize Bluetooth:</p>
<ol>
<li>
-<p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__BLUETOOTH__MODULE.html">Bluetooth</a> API, include the <span style="font-family: Courier New,Courier,monospace"><bluetooth.h></span> header file in your application:</p>
+<p>To use the functions and data types of the Bluetooth API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__BLUETOOTH__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__BLUETOOTH__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><bluetooth.h></span> header file in your application:</p>
<pre class="prettyprint">
#include <bluetooth.h>
</pre></li>
return;
}</pre></li></ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="enable" name="enable" class="items-tit-h2">Enabling and Disabling Bluetooth</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="enable" name="enable">Enabling and Disabling Bluetooth</h2>
<p>To enable or disable Bluetooth:</p>
<p>No Bluetooth API is provided to enable or disable Bluetooth. Use the Bluetooth ON/OFF application illustrated in the following figure (off screen on the left and on screen on the right).</p>
-
<p class="figure">Figure: Bluetooth ON/OFF application</p>
- <p
style="text-align:center;"><img alt="Bluetooth ON/OFF application" src="../../images/bluetooth_onoff.png" /></p>
+ <p class="figure">Figure: Bluetooth ON/OFF application</p>
+ <p
align="center"><img alt="Bluetooth ON/OFF application" src="../../images/bluetooth_onoff.png" /></p>
<pre class="prettyprint">
#include <app_control.h>
return 0;
}</pre>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="state" name="state" class="items-tit-h2">Initializing Bluetooth and Checking the Adapter State</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="state" name="state">Initializing Bluetooth and Checking the Adapter State</h2>
+
<p>To communicate with other devices using Bluetooth, learn how to check the Bluetooth adapter state:</p>
<ol><li>Check, whether the Bluetooth adapter is enabled on your device:
</pre></li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="find" name="find" class="items-tit-h2">Finding Other Devices</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="find" name="find">Finding Other Devices</h2>
+
<p>To find remote Bluetooth devices either through device discovery or querying bonded devices:</p>
<h3>Defining and Registering the Discovery State Callback Function</h3>
<p>A remote Bluetooth device will respond to the request if it is enabled and in a discovery mode. Classic Bluetooth and Bluetooth LE usages are the same.</p>
<pre class="prettyprint">
// Classic Bluetooth
-ret = bt_adapter_start_discover_device(type);
+ret = bt_adapter_start_device_discovery();
if (ret != BT_ERROR_NONE)
{
- dlog_print(DLOG_ERROR, LOG_TAG, "[bt_adapter_start_discover_device] Failed.");
+ dlog_print(DLOG_ERROR, LOG_TAG, "[bt_adapter_start_device_discovery] Failed.");
}</pre>
<h3>Enabling Discovery</h3>
}</pre>
<p>To change the visibility mode, use the Bluetooth visibility setting application (shown below with the initial screen on the left and the visibility setting screen on the right).</p>
-
-<p
style="text-align:center;"><img alt="Bluetooth visibility setting application" src="../../images/bluetooth_visibility.png" /></p>
+<p class="figure">Figure: Bluetooth visibility setting application</p>
+<p
align="center"><img alt="Bluetooth visibility setting application" src="../../images/bluetooth_visibility.png" /></p>
<pre class="prettyprint">
#include <app_control.h>
<h3>Requesting Bonding with a Remote Bluetooth Device</h3>
<p>You already got information about a remote device through device discovery or querying a bonded device. You can request to bond with that device using the <span style="font-family: Courier New,Courier,monospace;">bt_device_create_bond()</span> function. If you want to cancel bonding, call <span style="font-family: Courier New,Courier,monospace;">bt_device_cancel_bonding()</span>.</p>
-<p>To get notified when the bonding has finished, register a <span style="font-family: Courier New,Courier,monospace;">bt_device_bond_created_cb()</span> callback function using the <span style="font-family: Courier New,Courier,monospace;">bt_device_set_bond_created_cb()</span> function. From this callback, you can get the service list that the remote Bluetooth device provides and the service uuid from that service list.</p>
+<p>To get notified when the bonding has finished, register a <span style="font-family: Courier New,Courier,monospace;">bt_device_bond_created_cb()</span> callback function using the <span style="font-family: Courier New,Courier,monospace;">bt_device_set_bond_created_cb()</span> function. From this callback, you can get the service list that the remote Bluetooth device provides and the service UUID from that service list.</p>
<p>The example below shows how to implement a <span style="font-family: Courier New,Courier,monospace;">bt_device_bond_created_cb()</span> callback function and bond with a remote Bluetooth device.</p>
<pre class="prettyprint">void device_bond_created_cb(int result, bt_device_info_s *device_info, void *user_data)
<p>You can verify the bonding by calling the <span style="font-family: Courier New,Courier,monospace;">bt_adapter_foreach_bonded_device()</span> function.</p>
<p>If you want to remove the device from the bonded list, call the <span style="font-family: Courier New,Courier,monospace;">bt_device_destroy_bond()</span> function.</p>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="connect" name="connect" class="items-tit-h2">Connecting to Other Devices Using SPP</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="connect" name="connect">Connecting to Other Devices Using SPP</h2>
<p>To connect to other devices:</p>
<h3>Connecting as a Server</h3>
<p>This function is declared as follows:</p>
<pre class="prettyprint">int bt_socket_listen_and_accept_rfcomm(int socket_fd, int max_pending_connections)</pre>
-<ul class="ul"><li><span style="font-family: Courier New,Courier,monospace;">int socket_fd</span>: socket fd passed from <span style="font-family: Courier New,Courier,monospace;">bt_socket_create_rfcomm()</span>, which starts listening</li>
+<ul><li><span style="font-family: Courier New,Courier,monospace;">int socket_fd</span>: socket fd passed from <span style="font-family: Courier New,Courier,monospace;">bt_socket_create_rfcomm()</span>, which starts listening</li>
<li><span style="font-family: Courier New,Courier,monospace;">int max_pending_connections</span>: maximum number of pending connections that a Bluetooth server can store</li></ul>
<th class="note">Note</th>
</tr>
<tr>
- <td class="note">When you connect to a Bluetooth server device, keep the server socket fd from <span style="font-family: Courier New,Courier,monospace;">bt_socket_connection_s->socket_fd</span> in <span style="font-family: Courier New,Courier,monospace;">bt_socket_connection_state_changed_cb()</span>.</td>
+ <td class="note">When you connect to a Bluetooth server device, keep the server socket fd from <span style="font-family: Courier New,Courier,monospace;">bt_socket_connection_s->socket_fd</span> in <span style="font-family: Courier New,Courier,monospace;">bt_socket_connection_state_changed_cb()</span>.</td>
</tr>
</tbody>
</table>
{
dlog_print(DLOG_INFO, LOG_TAG, "[bt_socket_connect_rfcomm] Succeeded. bt_socket_connection_state_changed_cb will be called.");
}</pre>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="exchange" name="exchange" class="items-tit-h2">Exchanging Data Using SPP</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="exchange" name="exchange">Exchanging Data Using SPP</h2>
+
<p>To share data between devices after establishing a connection:</p>
<ol><li><p>To write data, use the <span style="font-family: Courier New,Courier,monospace;">bt_socket_send_data()</span> function.</p>
<p>This function is declared as follows:</p>
}</pre>
</li></ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="disconnect" name="disconnect" class="items-tit-h2">Disconnecting from the Connected Device Using SPP</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="disconnect" name="disconnect">Disconnecting from the Connected Device Using SPP</h2>
+
<p>To disconnect from a device, call the <span style="font-family: Courier New,Courier,monospace;">bt_socket_destroy_rfcomm()</span> or <span style="font-family: Courier New,Courier,monospace;">bt_socket_disconnect_rfcomm()</span> function:</p>
<ol><li>Disconnect the Bluetooth server:
{
dlog_print(DLOG_INFO, LOG_TAG, "[bt_socket_destroy_rfcomm] Succeeded. server_socket_fd = %d.", server_socket_fd);
}</pre></li></ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="exc" name="exc" class="items-tit-h2">Exchanging Data Using OPP</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+<h2 id="gatt" name="gatt">Performing GATT Operations</h2>
+<p>To perform GATT operations:</p>
+<ol>
+<li>Register a callback for connection state changes:
+<pre class="prettyprint">
+int ret = 0;
+// Register for GATT connection callback
+void __bt_gatt_connection_state_changed_cb(int result,
+ bool connected,
+ const char *remote_address,
+ void *user_data)
+{
+ if (connected)
+ dlog_print(DLOG_INFO, LOG_TAG, "LE connected");
+ else
+ dlog_print(DLOG_INFO, LOG_TAG, "LE disconnected");
+}
+ret = bt_gatt_set_connection_state_changed_cb(__bt_gatt_connection_state_changed_cb, NULL);
+</pre></li>
+
+<li>Create a client to connect to the remote service device:
+<pre class="prettyprint">
+int ret = 0;
+
+ret = bt_gatt_client_create(remote_addr, &client);
+if (ret == BT_ERROR_NONE)
+ dlog_print(DLOG_INFO, LOG_TAG, "Success");
+break;
+</pre>
+
+</li>
+<li>Discover the service, characteristics, and descriptors of the remote service:
+<ol type="a"><li>Discover the service:
+<pre class="prettyprint">
+int ret = 0;
+
+ret = bt_gatt_client_foreach_services(client,
+ __bt_gatt_client_foreach_svc_cb,
+ (void *)test_id);
+if (ret != BT_ERROR_NONE)
+{
+ dlog_print(DLOG_INFO, LOG_TAG, "fail");
+}
+break;
+</pre>
+</li>
+<li>Use the <span style="font-family: Courier New,Courier,monospace;">bt_gatt_client_foreach_svc_cb()</span> callback to initiate the service characteristics discovery:
+<pre class="prettyprint">
+bool __bt_gatt_client_foreach_svc_cb(int total, int index, bt_gatt_h svc_handle, void *data)
+{
+ int test_id = (int)data;
+ int ret;
+ char *uuid = NULL;
+ char *str = NULL;
+
+ bt_gatt_get_uuid(svc_handle, &uuid);
+ bt_gatt_get_uuid_specification_name(uuid, &str);
+
+ dlog_print(DLOG_INFO, LOG_TAG, "[%d / %d] %s (%s)", index, total, str ? str : "Unknown", uuid);
+
+ g_free(str);
+ g_free(uuid);
+
+ if (test_id == BT_UNIT_TEST_FUNCTION_GATT_CLIENT_PRINT_ALL)
+ {
+ ret = bt_gatt_service_foreach_characteristics(svc_handle,
+ __bt_gatt_client_foreach_chr_cb,
+ (void *)test_id);
+ if (ret != BT_ERROR_NONE)
+ {
+ dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_service_foreach_characteristics is failed : %d", ret);
+ }
+
+ return true;
+ }
+}
+</pre>
+</li>
+<li>Use the <span style="font-family: Courier New,Courier,monospace;">bt_gatt_client_foreach_chr_cb()</span> callback to discover the characteristic descriptors:
+<pre class="prettyprint">
+bool __bt_gatt_client_foreach_chr_cb(int total, int index, bt_gatt_h chr_handle, void *data)
+{
+ int ret;
+ char *uuid = NULL;
+ char *str = NULL;
+
+ bt_gatt_get_uuid(chr_handle, &uuid);
+ bt_gatt_get_uuid_specification_name(uuid, &str);
+
+ dlog_print(DLOG_INFO, LOG_TAG, "\t[%d / %d] %s (%s)", index, total, str ? str : "Unknown", uuid);
+ __bt_gatt_client_print_value(chr_handle);
+
+ g_free(str);
+ g_free(uuid);
+
+ ret = bt_gatt_characteristic_foreach_descriptors(chr_handle,
+ __bt_gatt_client_foreach_desc_cb, NULL);
+ if (ret != BT_ERROR_NONE)
+ dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_characteristic_foreach_descriptors is failed : %d", ret);
+
+ return true;
+}
+</pre>
+</li>
+<li>Use the <span style="font-family: Courier New,Courier,monospace;">bt_gatt_client_foreach_desc_cb()</span> callback to get the descriptor data:
+<pre class="prettyprint">
+bool __bt_gatt_client_foreach_desc_cb(int total, int index, bt_gatt_h desc_handle, void *data)
+{
+ char *uuid = NULL;
+ char *str = NULL;
+
+ bt_gatt_get_uuid(desc_handle, &uuid);
+ bt_gatt_get_uuid_specification_name(uuid, &str);
+
+ dlog_print(DLOG_INFO, LOG_TAG, "\t\t[%d / %d] %s (%s)", index, total, str ? str : "Unknown", uuid);
+ __bt_gatt_client_print_value(desc_handle);
+
+ g_free(str);
+ g_free(uuid);
+
+ return true;
+}
+</pre>
+</li>
+</ol>
+</li>
+<li>Read the value of the given attribute handle:
+<pre class="prettyprint">
+{
+ char *svc_uuid = NULL;
+ char *chr_uuid = NULL;
+ char *desc_uuid = NULL;
+ bt_gatt_h svc = NULL;
+ bt_gatt_h chr = NULL;
+ bt_gatt_h desc = NULL;
+
+ if (g_test_param.param_count < 2)
+ {
+ dlog_print(DLOG_INFO, LOG_TAG, "Input parameters first");
+ break;
+ }
+
+ svc_uuid = g_test_param.params[0];
+ chr_uuid = g_test_param.params[1];
+
+ ret = bt_gatt_client_get_service(client, svc_uuid, &svc);
+ if (ret != BT_ERROR_NONE)
+ {
+ dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_client_get_service is failed : %d", ret);
+ __bt_free_test_param(&g_test_param);
+ break;
+ }
+
+ ret = bt_gatt_service_get_characteristic(svc, chr_uuid, &chr);
+ if (ret != BT_ERROR_NONE)
+ {
+ dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_service_get_characteristic is failed : %d", ret);
+ __bt_free_test_param(&g_test_param);
+ break;
+ }
+
+ if (g_test_param.param_count > 2)
+ {
+ desc_uuid = g_test_param.params[2];
+ ret = bt_gatt_characteristic_get_descriptor(chr, desc_uuid, &desc);
+ if (ret != BT_ERROR_NONE)
+ {
+ dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_characteristic_get_descriptor is failed : %d", ret);
+ __bt_free_test_param(&g_test_param);
+ break;
+ }
+ ret = bt_gatt_client_read_value(desc,
+ __bt_gatt_client_read_complete_cb, NULL);
+ }
+ else
+ {
+ ret = bt_gatt_client_read_value(chr,
+ __bt_gatt_client_read_complete_cb, NULL);
+ }
+
+ if (ret != BT_ERROR_NONE)
+ {
+ dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_client_read_value is failed : %d", ret);
+ }
+
+ __bt_free_test_param(&g_test_param);
+}
+</pre>
+<p>After the reading operation is complete, use the <span style="font-family: Courier New,Courier,monospace;">bt_gatt_client_read_complete_cb()</span> callback to handle values:</p>
+<pre class="prettyprint">
+void __bt_gatt_client_read_complete_cb(int result, bt_gatt_h gatt_handle, void *data)
+{
+ char *uuid = NULL;
+ char *str = NULL;
+
+ bt_gatt_get_uuid(gatt_handle, &uuid);
+ bt_gatt_get_uuid_specification_name(uuid, &str);
+
+ dlog_print(DLOG_INFO, LOG_TAG, "Read %s for %s (%s)",
+ result == BT_ERROR_NONE ? "Success" : "Fail", str ? str : "Unknown", uuid);
+
+ g_free(str);
+ g_free(uuid);
+
+ if (result != BT_ERROR_NONE)
+
+ return;
+
+ __bt_gatt_client_print_value(gatt_handle);
+
+ return;
+}
+</pre>
+</li>
+<li>Set a value for the given attribute handle:
+
+<pre class="prettyprint">
+{
+ char *svc_uuid = NULL;
+ char *chr_uuid = NULL;
+ char *desc_uuid = NULL;
+ bt_gatt_h svc = NULL;
+ bt_gatt_h chr = NULL;
+ bt_gatt_h desc = NULL;
+
+ if (g_test_param.param_count < 2)
+ {
+ dlog_print(DLOG_INFO, LOG_TAG, "Input parameters first");
+ break;
+ }
+
+ svc_uuid = g_test_param.params[0];
+ chr_uuid = g_test_param.params[1];
+
+ ret = bt_gatt_client_get_service(client, svc_uuid, &svc);
+ if (ret != BT_ERROR_NONE)
+ {
+ dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_client_get_service is failed : %d", ret);
+ __bt_free_test_param(&g_test_param);
+ break;
+ }
+
+ ret = bt_gatt_service_get_characteristic(svc, chr_uuid, &chr);
+ if (ret != BT_ERROR_NONE)
+ {
+ dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_service_get_characteristic is failed : %d", ret);
+ __bt_free_test_param(&g_test_param);
+ break;
+ }
+
+ if (g_test_param.param_count > 2)
+ {
+ desc_uuid = g_test_param.params[2];
+ ret = bt_gatt_characteristic_get_descriptor(chr, desc_uuid, &desc);
+ if (ret != BT_ERROR_NONE)
+ {
+ dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_characteristic_get_descriptor is failed : %d", ret);
+ __bt_free_test_param(&g_test_param);
+ break;
+ }
+
+ ret = __bt_gatt_client_set_value(g_test_param.params[3],
+ g_test_param.params[4], desc);
+ if (ret != BT_ERROR_NONE)
+ {
+ dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_set_value is failed : %d", ret);
+ __bt_free_test_param(&g_test_param);
+ break;
+ }
+
+ ret = bt_gatt_client_write_value(desc,
+ __bt_gatt_client_write_complete_cb, NULL);
+ }
+ else
+ {
+ ret = __bt_gatt_client_set_value(g_test_param.params[2],
+ g_test_param.params[3], chr);
+ if (ret != BT_ERROR_NONE)
+ {
+ dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_set_value is failed : %d", ret);
+ __bt_free_test_param(&g_test_param);
+ break;
+ }
+
+ ret = bt_gatt_client_write_value(chr,
+ __bt_gatt_client_write_complete_cb, NULL);
+ }
+
+ if (ret != BT_ERROR_NONE)
+ {
+ dlog_print(DLOG_INFO, LOG_TAG, "bt_gatt_client_write_value is failed : %d", ret);
+ }
+
+ __bt_free_test_param(&g_test_param);
+}
+</pre>
+<p>After the writing operation is complete, use the <span style="font-family: Courier New,Courier,monospace;">bt_gatt_client_write_complete_cb()</span> callback to finish the task:</p>
+<pre class="prettyprint">
+void __bt_gatt_client_write_complete_cb(int result, bt_gatt_h gatt_handle, void *data)
+{
+ char *uuid = NULL;
+ char *str = NULL;
+
+ bt_gatt_get_uuid(gatt_handle, &uuid);
+ bt_gatt_get_uuid_specification_name(uuid, &str);
+
+ dlog_print(DLOG_INFO, LOG_TAG, "Write %s for %s (%s)",
+ result == BT_ERROR_NONE ? "Success" : "Fail", str ? str : "Unknown", uuid);
+
+ g_free(str);
+ g_free(uuid);
+
+ return;
+}
+</pre>
+</li>
+<li>When you no longer need the client, disconnect from the remote service and destroy the client:
+<pre class="prettyprint">
+int ret = 0;
+
+ret = bt_gatt_client_destroy(client);
+if (ret == BT_ERROR_NONE)
+ dlog_print(DLOG_INFO, LOG_TAG, "Success");
+client = NULL;
+break;
+</pre></li>
+</ol>
+
+
+ <h2 id="exc" name="exc">Exchanging Data Using OPP</h2>
<p>To exchange data with Object Push Profile (OPP):</p>
<p>The API has a server role to initialize the status of an OPP server device.</p>
<pre class="prettyprint">
bt_error_e ret;
-
char *directory = NULL;
storage_get_directory(0, STORAGE_DIRECTORY_DOWNLOADS, &directory);
+
void connection_requested_cb_for_opp_server(const char *remote_address, void *user_data)
{
dlog_print(DLOG_INFO, LOG_TAG, "remote_address: %s", remote_address);
}
-ret = bt_opp_server_initialize_by_connection_request (directory, connection_requested_cb_for_opp_server, NULL);
+ret = bt_opp_server_initialize_by_connection_request(directory, connection_requested_cb_for_opp_server, NULL);
if (ret != BT_ERROR_NONE)
{
dlog_print(DLOG_ERROR, LOG_TAG, "[bt_opp_server_initialize_by_connection_request] Failed.");
return -1;
}
</pre>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="release" name="release" class="items-tit-h2">Releasing All Resources</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+
+
+ <h2 id="le_adapter" name="le_adapter">Enabling the Bluetooth LE Adapter and Checking its State</h2>
+
+ <p>In order to communicate with the remote device or to perform BLE (Bluetooth LE) operations on the local device, the LE adapter must be enabled. The device user can enable or disable BLE in the device with an ON/OFF button. The procedure applies to both basic rate and enhanced data rate (BR/EDR).</p>
+
+ <p class="figure">Figure: Bluetooth ON/OFF button</p>
+ <p align="center"><img alt="Bluetooth ON/OFF button" src="../../images/bluetooth_onoff.png" /></p>
+
+ <p>To check whether the BLE adapter is enabled, retrieve the adapter state:</p>
+
+<pre class="prettyprint">
+bt_adapter_le_state_e le_adapter_state;
+// Check whether BLE is enabled
+ret = bt_adapter_get_le_state(&le_adapter_state);
+
+if (ret != BT_ERROR_NONE)
+{
+ dlog_print(DLOG_ERROR, LOG_TAG, "[bt_adapter_le_get_state] Failed");
+
+ return;
+}
+
+// If the Bluetooth service is disabled
+if (le_adapter_state == BT_ADAPTER_DISABLED)
+{
+ dlog_print(DLOG_ERROR, LOG_TAG, "Bluetooth LE adapter is not enabled. You should enable Bluetooth!!");
+}
+</pre>
+<p>To monitor the changes in the LE adapter and BLE states, define and register the appropriate callback functions.</p>
+
+
+ <h2 id="le_scan" name="le_scan">Managing Bluetooth LE Scans</h2>
+
+ <p>To discover nearby LE devices, perform a scan:</p>
+ <ol>
+ <li>
+ <p>To start the BLE scan:</p>
+
+<pre class="prettyprint">
+int main()
+{
+ int ret = BT_ERROR_NONE;
+ ret = bt_adapter_le_start_scan(__bt_adapter_le_scan_result_cb, NULL);
+
+ if (ret != BT_ERROR_NONE)
+ {
+ dlog_print(DLOG_ERROR, LOG_TAG, "[bt_adapter_le_start_scan] Failed.");
+ }
+
+ return;
+}
+</pre>
+ </li>
+
+ <li><p>Use a registered callback to retrieve the scan results. The callback contains information of all the LE scanned devices, such as the device names, scanned devices' transmission level, service data list, appearance of the devices, and manufacture data of the devices.</p>
+ <p>To handle the scan result:</p>
+
+ <pre class="prettyprint">
+int ret;
+
+void __bt_adapter_le_scan_result_cb(int result,
+ bt_adapter_le_device_scan_result_info_s *info,
+ void *user_data)
+{
+ bt_adapter_le_packet_type_e pkt_type = BT_ADAPTER_LE_PACKET_ADVERTISING;
+
+ if (info == NULL)
+ {
+ dlog_print T(DLOG_INFO, LOG_TAG, "No discovery_info!");
+
+ return;
+ }
+
+ if (info->adv_data_len > 31 || info->scan_data_len > 31)
+ {
+ dlog_print (DLOG_INFO, LOG_TAG, "###################");
+ bt_adapter_le_stop_scan();
+ dlog_print (DLOG_INFO, LOG_TAG, "###################");
+
+ return;
+ }
+
+ for (i = 0; i < 2; i++)
+ {
+ char **uuids;
+ char *device_name;
+ int tx_power_level;
+ bt_adapter_le_service_data_s *data_list;
+ int appearance;
+ int manufacturer_id;
+ char *manufacturer_data;
+ int manufacturer_data_len;
+ int count;
+
+ pkt_type += i;
+ if (pkt_type == BT_ADAPTER_LE_PACKET_ADVERTISING && info->adv_data == NULL) continue;
+ if (pkt_type == BT_ADAPTER_LE_PACKET_SCAN_RESPONSE && info->scan_data == NULL) break;
+
+ if (bt_adapter_le_get_scan_result_service_uuids(info, pkt_type, &uuids, &count) == BT_ERROR_NONE)
+ {
+ int i;
+ for (i = 0; i < count; i++)
+ {
+ DLOG_PRINT(DLOG_INFO, LOG_TAG, "UUID[%d] = %s", i + 1, uuids[i]);
+ g_free(uuids[i]);
+ }
+ g_free(uuids);
+ }
+ if (bt_adapter_le_get_scan_result_device_name(info, pkt_type, &device_name) == BT_ERROR_NONE)
+ {
+ DLOG_PRINT(DLOG_INFO, LOG_TAG, "Device name = %s", device_name);
+ g_free(device_name);
+ }
+ if (bt_adapter_le_get_scan_result_tx_power_level(info, pkt_type, &tx_power_level) == BT_ERROR_NONE)
+ {
+ DLOG_PRINT(DLOG_INFO, LOG_TAG, "TX Power level = %d", tx_power_level);
+ }
+ if (bt_adapter_le_get_scan_result_service_solicitation_uuids(info, pkt_type, &uuids, &count) == BT_ERROR_NONE)
+ {
+ int i;
+ for (i = 0; i < count; i++)
+ {
+ DLOG_PRINT(DLOG_INFO, LOG_TAG, "Solicitation UUID[%d] = %s", i + 1, uuids[i]);
+ g_free(uuids[i]);
+ }
+ g_free(uuids);
+ }
+ if (bt_adapter_le_get_scan_result_service_data_list(info, pkt_type, &data_list, &count) == BT_ERROR_NONE)
+ {
+ int i;
+ for (i = 0; i < count; i++)
+ DLOG_PRINT(DLOG_INFO, LOG_TAG, "Service Data[%d] = [0x%2.2X%2.2X:0x%.2X...]", i + 1,
+ data_list[i].service_uuid[0], data_list[i].service_uuid[1], data_list[i].service_data[0]);
+ bt_adapter_le_free_service_data_list(data_list, count);
+ }
+ if (bt_adapter_le_get_scan_result_appearance(info, pkt_type, &appearance) == BT_ERROR_NONE)
+ {
+ DLOG_PRINT(DLOG_INFO, LOG_TAG, "Appearance = %d", appearance);
+ }
+ if (bt_adapter_le_get_scan_result_manufacturer_data(info, pkt_type, &manufacturer_id,
+ &manufacturer_data, &manufacturer_data_len) == BT_ERROR_NONE)
+ {
+ DLOG_PRINT(DLOG_INFO, LOG_TAG, "Manufacturer data[ID:%.4X, 0x%.2X%.2X...(len:%d)]",
+ manufacturer_id, manufacturer_data[0], manufacturer_data[1], manufacturer_data_len);
+ g_free(manufacturer_data);
+ }
+ }
+}
+</pre>
+
+</li>
+
+<li>
+ <p>To stop the BLE scan:</p>
+<pre class="prettyprint">
+int main()
+{
+ int ret = BT_ERROR_NONE;
+ ret = bt_adapter_le_stop_scan();
+
+ if (ret != BT_ERROR_NONE)
+ {
+ dlog_print(DLOG_ERROR, LOG_TAG, "[bt_adapter_le_stop_scan] Failed.");
+ }
+
+ return;
+}
+</pre>
+</li>
+</ol>
+
+
+ <h2 id="add_adv_data" name="add_adv_data">Adding Advertising Data to the LE Advertisement</h2>
+
+ <p>LE advertising data can be added to the LE advertisement or the scan response data. You can add various information, such as the device name, service UUID, service solicitation UUID, advertising appearance, advertising transmission power level, device name, and manufacturer data.</p>
+<p>To add the advertising data:</p>
+
+<pre class="prettyprint">
+static bt_advertiser_h advertiser = NULL;
+static bt_advertiser_h advertiser_list[3] = {NULL, };
+static int advertiser_index = 0;
+
+int le_add_advertising_data()
+{
+ int adv_data_type = 3; // Default all
+ int manufacturer_id = 117;
+ char *manufacture = NULL;
+ char manufacture_0[] = {0x0, 0x0, 0x0, 0x0};
+ char manufacture_1[] = {0x01, 0x01, 0x01, 0x01};
+ char manufacture_2[] = {0x02, 0x02, 0x02, 0x02};
+ char manufacture_3[] = {0x03, 0x03, 0x03, 0x03};
+ char service_data[] = {0x01, 0x02, 0x03};
+ const char *time_svc_uuid_16 = "1805";
+ const char *battery_svc_uuid_16 = "180f";
+ const char *heart_rate_svc_uuid_16 = "180d";
+ const char *immediate_alert_svc_uuid_16 = "1802";
+ const char *ancs_uuid_128 = "7905F431-B5CE-4E99-A40F-4B1E122D00D0";
+ int appearance = 192; // 192 is a generic watch
+
+ advertiser = advertiser_list[advertiser_index];
+
+ if (advertiser == NULL)
+ {
+ ret = bt_adapter_le_create_advertiser(&advertiser);
+ dlog_print(DLOG_INFO, LOG_TAG, "created le advertiser(%d)", ret);
+ advertiser_list[advertiser_index] = advertiser;
+ }
+ else
+ {
+ ret = bt_adapter_le_clear_advertising_data(advertiser, BT_ADAPTER_LE_PACKET_ADVERTISING);
+ if (ret != BT_ERROR_NONE)
+ dlog_print(DLOG_INFO, LOG_TAG, "clear advertising data [0x%04x]", ret);
+ ret = bt_adapter_le_clear_advertising_data(advertiser, BT_ADAPTER_LE_PACKET_SCAN_RESPONSE);
+ if (ret != BT_ERROR_NONE)
+ dlog_print(DLOG_INFO, LOG_TAG, "clear scan response data [0x%04x]", ret);
+ }
+
+ if (g_test_param.param_count > 0)
+ {
+ adv_data_type = atoi(g_test_param.params[0]);
+ __bt_free_test_param(&g_test_param);
+ }
+
+ switch (adv_data_type)
+ {
+ case 0: // Service UUID
+ ret = bt_adapter_le_add_advertising_service_uuid(advertiser, BT_ADAPTER_LE_PACKET_ADVERTISING,
+ time_svc_uuid_16);
+ if (ret != BT_ERROR_NONE)
+ dlog_print(DLOG_INFO, LOG_TAG, "add service_uuid [0x%04x]", ret);
+
+ ret = bt_adapter_le_add_advertising_service_uuid(advertiser, BT_ADAPTER_LE_PACKET_ADVERTISING,
+ battery_svc_uuid_16);
+ if (ret != BT_ERROR_NONE)
+ dlog_print(DLOG_INFO, LOG_TAG, "add service_uuid [0x%04x]", ret);
+
+ manufacture = manufacture_0;
+ break;
+
+ case 1: // Service solicitation
+ ret = bt_adapter_le_add_advertising_service_solicitation_uuid(advertiser, BT_ADAPTER_LE_PACKET_ADVERTISING,
+ heart_rate_svc_uuid_16);
+ if (ret != BT_ERROR_NONE)
+ dlog_print(DLOG_INFO, LOG_TAG, "dd service_solicitation_uuid [0x%04x]", ret);
+
+ ret = bt_adapter_le_add_advertising_service_solicitation_uuid(advertiser, BT_ADAPTER_LE_PACKET_ADVERTISING,
+ immediate_alert_svc_uuid_16);
+ if (ret != BT_ERROR_NONE)
+ dlog_print(DLOG_INFO, LOG_TAG, "add service_solicitation_uuid [0x%04x]", ret);
+
+ manufacture = manufacture_1;
+ break;
+
+ case 2: // Appearance & TX power level
+ ret = bt_adapter_le_set_advertising_appearance(advertiser, BT_ADAPTER_LE_PACKET_ADVERTISING,
+ appearance);
+ if (ret != BT_ERROR_NONE)
+ dlog_print(DLOG_INFO, LOG_TAG, "add appearance data [0x%04x]", ret);
+
+ ret = bt_adapter_le_set_advertising_tx_power_level(advertiser, BT_ADAPTER_LE_PACKET_ADVERTISING, true);
+ if (ret != BT_ERROR_NONE)
+ dlog_print (DLOG_INFO, LOG_TAG, "add appearance data [0x%04x]", ret);
+
+ manufacture = manufacture_2;
+ break;
+
+ case 3: // All
+ ret = bt_adapter_le_add_advertising_service_uuid(advertiser, BT_ADAPTER_LE_PACKET_ADVERTISING,
+ time_svc_uuid_16);
+ if (ret != BT_ERROR_NONE)
+ dlog_print(DLOG_INFO, LOG_TAG, "add service_uuid [0x%04x]", ret);
+
+ ret = bt_adapter_le_add_advertising_service_uuid(advertiser, BT_ADAPTER_LE_PACKET_ADVERTISING,
+ battery_svc_uuid_16);
+ if (ret != BT_ERROR_NONE)
+ dlog_print(DLOG_INFO, LOG_TAG, "add service_uuid [0x%04x]", ret);
+
+ ret = bt_adapter_le_add_advertising_service_solicitation_uuid(advertiser, BT_ADAPTER_LE_PACKET_ADVERTISING,
+ heart_rate_svc_uuid_16);
+ if (ret != BT_ERROR_NONE)
+ dlog_print(DLOG_INFO, LOG_TAG, "add service_solicitation_uuid [0x%04x]", ret);
+
+ ret = bt_adapter_le_add_advertising_service_solicitation_uuid(advertiser, BT_ADAPTER_LE_PACKET_ADVERTISING,
+ immediate_alert_svc_uuid_16);
+ if (ret != BT_ERROR_NONE)
+ dlog_print(DLOG_INFO, LOG_TAG, "add service_solicitation_uuid [0x%04x]", ret);
+
+ ret = bt_adapter_le_set_advertising_appearance(advertiser, BT_ADAPTER_LE_PACKET_ADVERTISING,
+ appearance);
+ if (ret != BT_ERROR_NONE)
+ dlog_print(DLOG_INFO, LOG_TAG, "add appearance data [0x%04x]", ret);
+
+ ret = bt_adapter_le_set_advertising_tx_power_level(advertiser, BT_ADAPTER_LE_PACKET_ADVERTISING,
+ true);
+ if (ret != BT_ERROR_NONE)
+ dlog_print(DLOG_INFO, LOG_TAG, "add tx_power_level [0x%04x]", ret);
+
+ manufacture = manufacture_3;
+ break;
+
+ case 4: // ANCS
+ ret = bt_adapter_le_add_advertising_service_solicitation_uuid(advertiser, BT_ADAPTER_LE_PACKET_ADVERTISING,
+ time_svc_uuid_16);
+ if (ret != BT_ERROR_NONE)
+ dlog_print(DLOG_INFO, LOG_TAG, "add service_solicitation_uuid [0x%04x]", ret);
+
+ ret = bt_adapter_le_add_advertising_service_solicitation_uuid(advertiser, BT_ADAPTER_LE_PACKET_ADVERTISING,
+ ancs_uuid_128);
+ if (ret != BT_ERROR_NONE)
+ dlog_print(DLOG_INFO, LOG_TAG, "add service_solicitation_uuid [0x%04x]", ret);
+
+ ret = bt_adapter_le_set_advertising_device_name(advertiser, BT_ADAPTER_LE_PACKET_SCAN_RESPONSE, true);
+ if (ret != BT_ERROR_NONE)
+ dlog_print (DLOG_INFO, LOG_TAG, "set device name [0x%04x]", ret);
+
+ return 0;
+
+ default:
+ dlog_print(DLOG_INFO, LOG_TAG, "No adv data");
+ break;
+ }
+ // Default scan response data
+ ret = bt_adapter_le_add_advertising_service_data(advertiser, BT_ADAPTER_LE_PACKET_SCAN_RESPONSE,
+ time_svc_uuid_16, service_data,
+ sizeof(service_data));
+ if (ret != BT_ERROR_NONE)
+ dlog_print(DLOG_INFO, LOG_TAG, "add service_data [0x%04x]", ret);
+
+ ret = bt_adapter_le_set_advertising_device_name(advertiser, BT_ADAPTER_LE_PACKET_SCAN_RESPONSE, true);
+ if (ret != BT_ERROR_NONE)
+ dlog_print(DLOG_INFO, LOG_TAG, "set device name [0x%04x]", ret);
+
+ ret = bt_adapter_le_add_advertising_manufacturer_data(advertiser, BT_ADAPTER_LE_PACKET_SCAN_RESPONSE,
+ manufacturer_id, ;manufacture, sizeof(manufacture_0));
+ if (ret != BT_ERROR_NONE)
+ dlog_print(DLOG_INFO, LOG_TAG, "add manufacturer data [0x%04x]", ret);
+}
+</pre>
+
+
+ <h2 id="set_adv_conn" name="set_adv_conn">Setting the Advertising Connectable Mode</h2>
+
+ <p>When advertising to the remote device, use the <span style="font-family: Courier New,Courier,monospace;">bt_adapter_le_set_advertising_connectable()</span> function to define whether the advertising type is connectable or non-connectable:</p>
+
+<pre class="prettyprint">
+static bt_advertiser_h advertiser = NULL;
+static bt_advertiser_h advertiser_list[3] = {NULL,};
+static int advertiser_index = 0;
+int type = BT_ADAPTER_LE_ADVERTISING_CONNECTABLE;
+
+advertiser = advertiser_list[advertiser_index];
+
+if (advertiser == NULL)
+{
+ ret = bt_adapter_le_create_advertiser(&advertiser);
+ dlog_print(DLOG_INFO, LOG_TAG, "created le advertiser(%d)", ret);
+ advertiser_list[advertiser_index] = advertiser;
+}
+
+if (g_test_param.param_count > 0)
+{
+ type = atoi(g_test_param.params[0]);
+ __bt_free_test_param(&g_test_param);
+}
+
+ret = bt_adapter_le_set_advertising_connectable(advertiser, type);
+if (ret != BT_ERROR_NONE)
+ dlog_print(DLOG_INFO, LOG_TAG, "add scan response data [0x%04x]", ret);
+</pre>
+
+ <h2 id="set_adv_mode" name="set_adv_mode">Setting the LE Advertising Mode</h2>
+
+<p>The advertising mode controls the advertising power and latency, and can be set to the balanced, low latency, or low energy advertising mode.</p>
+
+<p>To set the advertising mode:</p>
+
+
+<pre class="prettyprint">
+static bt_advertiser_h advertiser = NULL;
+static bt_advertiser_h advertiser_list[3] = {NULL,};
+static int advertiser_index = 0;
+
+int mode = BT_ADAPTER_LE_ADVERTISING_MODE_BALANCED;
+
+advertiser = advertiser_list[advertiser_index];
+
+if (advertiser == NULL)
+{
+ ret = bt_adapter_le_create_advertiser(&advertiser);
+ dlog_print(DLOG_INFO, LOG_TAG, "created le advertiser(%d)", ret);
+ advertiser_list[advertiser_index] = advertiser;
+}
+
+if (g_test_param.param_count > 0)
+{
+ mode = atoi(g_test_param.params[0]);
+ __bt_free_test_param(&g_test_param);
+}
+
+ret = bt_adapter_le_set_advertising_mode(advertiser, mode);
+if (ret != BT_ERROR_NONE)
+ dlog_print(DLOG_INFO, LOG_TAG, "add scan response data [0x%04x]", ret);
+</pre>
+
+ <h2 id="start_adv" name="start_adv">Starting Advertising</h2>
+
+<p>To start advertising with the given advertiser and advertising parameters information, use the <span style="font-family: Courier New,Courier,monospace;">bt_adapter_le_start_advertising_new()</span> function:</p>
+
+<pre class="prettyprint">
+bt_adapter_le_advertising_state_changed_cb cb;
+
+if (advertiser_index == 0) cb = __bt_adapter_le_advertising_state_changed_cb;
+else if (advertiser_index == 0) cb = __bt_adapter_le_advertising_state_changed_cb_2;
+else cb = __bt_adapter_le_advertising_state_changed_cb_3;
+
+advertiser = advertiser_list[advertiser_index];
+advertiser_index++;
+advertiser_index %= 3;
+
+if (advertiser == NULL)
+{
+ ret = bt_adapter_le_create_advertiser(&advertiser);
+ dlog_print(DLOG_INFO, LOG_TAG, "created le advertiser(%d)", ret);
+ advertiser_list[advertiser_index] = advertiser;
+}
+
+ret = bt_adapter_le_start_advertising_new(advertiser, cb, NULL);
+if (ret < BT_ERROR_NONE)
+ dlog_print(DLOG_INFO, LOG_TAG, "failed with [0x%04x]", ret);
+</pre>
+
+
+
+ <h2 id="release" name="release">Releasing All Resources</h2>
+
<p>To release all Bluetooth resources, call the <span style="font-family: Courier New,Courier,monospace;">bt_deinitialize()</span> function:</p>
<pre class="prettyprint">
// Unregister callbacks
dlog_print(DLOG_ERROR, LOG_TAG, "[bt_deinitialize] Failed.");
}</pre>
- </div>
- </li>
-
- </ul>
-</div>
-</div>
-
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
</script>
</body>
-</html>
+</html>
\ No newline at end of file
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a class="opensection" href="#init">Initializing Connections</a></li>
- <li><a class="opensection" href="#detail">Getting the Network Connection Details</a></li>
- <li><a class="opensection" href="#info">Getting the Connection Information</a></li>
- <li><a class="opensection" href="#register">Registering the Property Change Callback</a></li>
+ <li><a href="#init">Initializing Connections</a></li>
+ <li><a href="#detail">Getting the Network Connection Details</a></li>
+ <li><a href="#info">Getting the Connection Information</a></li>
+ <li><a href="#register">Registering the Property Change Callback</a></li>
+ <li>IP sockets
+ <ul class="toc">
+ <li><a href="#socket_init">Initializing a Socket</a></li>
+ <li><a href="#socket_family">Retrieving the Address Family</a></li>
+ <li><a href="#socket_create">Creating the Socket and Managing the Remote Host Connection</a></li>
+ </ul></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.guides/html/native/network/connection_n.htm">Connection Guide</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__CONNECTION__MODULE.html">Connection API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__CONNECTION__MODULE.html">Connection API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__CONNECTION__MODULE.html">Connection API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Connection: Managing Modem Data Connections</h1>
- <div class="cont"><div class="static-cont">
+
<p>This tutorial demonstrates how you can get the network connection information, such as default gateway and proxy configuration, IPv4 and IPv6 addresses, cellular connection state, and data transfer statistics.</p>
<h2>Warm-up</h2>
<p>Become familiar with the Connection API basics by learning about:</p>
<ul>
- <li><a class="opensection" href="#init">Initializing Connections</a>
+ <li><a href="#init">Initializing Connections</a>
<p>Initialize the connection module for use.</p></li>
- <li><a class="opensection" href="#detail">Getting the Network Connection Details</a>
+ <li><a href="#detail">Getting the Network Connection Details</a>
<p>Get the current connection type, IP address, and proxy information.</p></li>
- <li><a class="opensection" href="#info">Getting the Connection Information</a>
+ <li><a href="#info">Getting the Connection Information</a>
<p>Obtain cellular and Wi-Fi connection information with data transfer statistics, such as the amount of total sent/received data and last sent/received data.</p></li>
- <li><a class="opensection" href="#register">Registering the Property Change Callback</a>
+ <li><a href="#register">Registering the Property Change Callback</a>
<p>Register a callback for receiving notifications about connection property changes.</p></li>
+ <li>IP sockets
+ <ul>
+ <li><a href="#socket_init">Initializing a Socket</a>
+ <p>Initialize a socket for use and check the default connection.</p></li>
+ <li><a href="#socket_family">Retrieving the Address Family</a>
+ <p>Get the IP addresses for the hostname.</p></li>
+ <li><a href="#socket_create">Creating the Socket and Managing the Remote Host Connection</a>
+ <p>Create the socket, and communicate with the remote host.</p></li>
+ </ul>
+ </li>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
-
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="init" name="init" class="items-tit-h2">Initializing Connections</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="init" name="init">Initializing Connections</h2>
-<p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__CONNECTION__MODULE.html">Connection</a> API, include the <span style="font-family: Courier New,Courier,monospace"><net_connection.h></span> header file in your application:</p>
+<p>To use the functions and data types of the Connection API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__CONNECTION__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__CONNECTION__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><net_connection.h></span> header file in your application:</p>
<pre class="prettyprint">
#include <net_connection.h>
</pre>
<p>Destroy the created connection handle when you do not need it anymore. </p>
<pre class="prettyprint">connection_destroy(connection);</pre>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="detail" name="detail" class="items-tit-h2">Getting the Network Connection Details</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="detail" name="detail">Getting the Network Connection Details</h2>
+
<p>To get the type of the current connection, IP address, and proxy information, the Connection API supports the following network types:</p>
-<ul class="ul"><li><span style="font-family: Courier New,Courier,monospace;">CONNECTION_TYPE_DISCONNECTED</span></li>
+<ul><li><span style="font-family: Courier New,Courier,monospace;">CONNECTION_TYPE_DISCONNECTED</span></li>
<li><span style="font-family: Courier New,Courier,monospace;">CONNECTION_TYPE_WIFI</span></li>
<li><span style="font-family: Courier New,Courier,monospace;">CONNECTION_TYPE_CELLULAR</span></li>
<li><span style="font-family: Courier New,Courier,monospace;">CONNECTION_TYPE_ETHERNET</span></li>
</ul>
<p>The Connection API supports both IPv4 and IPv6 with the following address types:</p>
-<ul class="ul"><li><span style="font-family: Courier New,Courier,monospace;">CONNECTION_ADDRESS_FAMILY_IPV4</span></li>
+<ul><li><span style="font-family: Courier New,Courier,monospace;">CONNECTION_ADDRESS_FAMILY_IPV4</span></li>
<li><span style="font-family: Courier New,Courier,monospace;">CONNECTION_ADDRESS_FAMILY_IPV6</span></li></ul>
<p>In this tutorial, an IPv4 address is retrieved.</p>
dlog_print(DLOG_INFO, LOG_TAG, "Proxy address : %s", proxy_addr);
free(proxy_addr);
}</pre></li></ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="info" name="info" class="items-tit-h2">Getting the Connection Information</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="info" name="info">Getting the Connection Information</h2>
+
<p>To obtain cellular and Wi-Fi connection information with data transfer statistics, such as the amount of total sent or received data and last sent or received data (only Wi-Fi and cellular statistics information is supported):</p>
<ol><li>To get the cellular connection state, use the <span style="font-family: Courier New,Courier,monospace;">connection_get_cellular_state()</span> function. There are 6 states in which the network connection can be:
-<ul class="ul">
+<ul>
<li><span style="font-family: Courier New,Courier,monospace;">CONNECTION_CELLULAR_STATE_OUT_OF_SERVICE</span></li>
<li><span style="font-family: Courier New,Courier,monospace;">CONNECTION_CELLULAR_STATE_FLIGHT_MODE</span></li>
<li><span style="font-family: Courier New,Courier,monospace;">CONNECTION_CELLULAR_STATE_ROAMING_OFF</span></li>
<li>To get the Wi-Fi connection state, use the <span style="font-family: Courier New,Courier,monospace;">connection_get_wifi_state()</span> function. There are 3 states in which the Wi-Fi connection can be:
-<ul class="ul">
+<ul>
<li><span style="font-family: Courier New,Courier,monospace;">CONNECTION_WIFI_STATE_DEACTIVATED</span></li>
<li><span style="font-family: Courier New,Courier,monospace;">CONNECTION_WIFI_STATE_DISCONNECTED</span></li>
<li><span style="font-family: Courier New,Courier,monospace;">CONNECTION_WIFI_STATE_CONNECTED</span></li>
<p>Statistics are identified by the following constants:</p>
-<ul class="ul">
+<ul>
<li><span style="font-family: Courier New,Courier,monospace;">CONNECTION_STATISTICS_TYPE_LAST_RECEIVED_DATA</span></li>
<li><span style="font-family: Courier New,Courier,monospace;">CONNECTION_STATISTICS_TYPE_LAST_SENT_DATA</span></li>
<li><span style="font-family: Courier New,Courier,monospace;">CONNECTION_STATISTICS_TYPE_TOTAL_RECEIVED_DATA</span></li>
<p>Use the following constants to set the connection type:</p>
-<ul class="ul">
+<ul>
<li><span style="font-family: Courier New,Courier,monospace;">CONNECTION_TYPE_WIFI</span></li>
<li><span style="font-family: Courier New,Courier,monospace;">CONNECTION_TYPE_CELLULAR</span></li>
</ul>
error_code = connection_get_statistics(connection, CONNECTION_TYPE_WIFI, CONNECTION_STATISTICS_TYPE_TOTAL_SENT_DATA, & total_sent_size);
// Handle statistics</pre></li></ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="register" name="register" class="items-tit-h2">Registering the Property Change Callback</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="register" name="register">Registering the Property Change Callback</h2>
+
<p>To register callback functions that are called when information changes:</p>
<ol><li>Define callback functions.
// Error handling
}
</pre></li></ol>
- </div>
- </li>
- </ul>
-</div>
-</div>
+
+<h2 id="socket_init" name="socket_init">Initializing a Socket</h2>
+
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">Before executing an application that uses socket connections, add a smack policy. For example:
+ <p><span style="font-family: Courier New,Courier,monospace;">chsmack -e connman <Application executable path></span></p>
+</td>
+ </tr>
+ </tbody>
+ </table>
+
+<p>To initialize a socket for use:</p>
+<ol>
+<li>Declare the necessary variables:
+<pre class="prettyprint">
+int main(int argc, char **argv)
+{
+ int rv = 0;
+ int ip_type = -1;
+ char user_url[100] = {0,};
+ char user_port[10] = {0,};
+ char user_msg[200] = {0,};
+ char *local_ipv4 = NULL;
+ char *local_ipv6 = NULL;
+ char *interface_name = NULL;
+
+ connection_type_e net_state;
+ connection_h connection = NULL;
+ connection_profile_h profile_h = NULL;
+
+ // Input the URL and message to be sent
+</pre></li>
+<li>Include the required header files and <a href="#init">create a connection handle</a>.
+</li>
+<li>Check whether the default connection is available:
+<pre class="prettyprint">
+ connection_type_e net_state;
+
+ rv = connection_get_type(connection, &net_state);
+ if (rv != CONNECTION_ERROR_NONE || net_state == CONNECTION_TYPE_DISCONNECTED)
+ {
+ printf("Not connected %d\n", rv);
+ connection_destroy(connection);
+
+ return -1;
+ }
+</pre>
+</li>
+<li>Check the address type of the default connection.
+<p>The address type can be IPv4 or IPv6.</p>
+<pre class="prettyprint">
+ int ip_type = -1;
+ char *local_ipv4 = NULL;
+ char *local_ipv6 = NULL;
+ connection_profile_h profile_h = NULL;
+
+ rv = connection_get_current_profile(connection, &profile_h);
+ if (rv != CONNECTION_ERROR_NONE)
+ {
+ printf("Fail to get profile handle %d\n", rv);
+ connection_destroy(connection);
+
+ return -1;
+ }
+
+ rv = connection_profile_get_ip_address(profile_h, CONNECTION_ADDRESS_FAMILY_IPV6, &local_ipv6);
+ if (rv == CONNECTION_ERROR_NONE && g_strcmp0(local_ipv6, "::") != 0)
+ {
+ ip_type = CONNECTION_ADDRESS_FAMILY_IPV6;
+ printf("IPv6 address : %s\n", local_ipv6);
+ }
+
+ // If both IPv4 and IPv6 types are set, the IPv4 type is used as default here
+ rv = connection_profile_get_ip_address(profile_h, CONNECTION_ADDRESS_FAMILY_IPV4, &local_ipv4);
+ if (rv == CONNECTION_ERROR_NONE && g_strcmp0(local_ipv4, &0.0.0.0&) != 0)
+ {
+ ip_type = CONNECTION_ADDRESS_FAMILY_IPV4;
+ printf("IPv4 address : %s\n", local_ipv4);
+ }
+
+ if (ip_type != CONNECTION_ADDRESS_FAMILY_IPV6 && ip_type != CONNECTION_ADDRESS_FAMILY_IPV4)
+ {
+ printf("No IP address!\n");
+ goto done;
+ }
+
+ connection_profile_get_network_interface_name(profile_h, &interface_name);
+ printf("Interface Name:%s\n", interface_name);
+}
+</pre>
+</li>
+</ol>
+
+<h2 id="socket_family" name="socket_family">Retrieving the Address Family</h2>
+
+<p>To get the IP addresses for the hostname to connect:</p>
+<ol>
+<li>Define the user URL and the message to be sent:
+<pre class="prettyprint">
+int main(int argc, char **argv)
+{
+ // Initialize the socket
+
+ printf("Enter the URL and Port: ");
+ rv = scanf("%s %s", user_url, user_port);
+
+ if (rv <= 0)
+ {
+ printf("scanf() fail %d\n", rv);
+
+ return -1;
+ }
+
+ printf("Enter the message to send : ");
+ rv = scanf("%s", user_msg);
+
+ if (rv <= 0)
+ {
+ printf("scanf() fail %d\n", rv);
+
+ return -1;
+ }
+</pre>
+</li>
+<li>Retrieve the IP addresses:
+<pre class="prettyprint">
+ struct sockaddr_in6 *addr6;
+ struct addrinfo hints;
+ struct addrinfo *result;
+ char user_url[100] = {0,};
+ char user_port[10] = {0,};
+
+ memset(&hints, 0x00, sizeof(struct addrinfo));
+
+ hints.ai_family = PF_UNSPEC;
+ hints.ai_socktype = SOCK_STREAM;
+ hints.ai_protocol = IPPROTO_TCP;
+
+ if (getaddrinfo(user_url, user_port, &hints, &result) != 0)
+ {
+ printf("getaddrinfo() error\n");
+ goto done;
+ }
+}
+</pre>
+</li>
+</ol>
+
+<h2 id="socket_create" name="socket_create">Creating the Socket and Managing the Remote Host Connection</h2>
+
+<p>To create the socket and connect to a remote host:</p>
+<ol>
+<li>Find the proper address family and create the socket:
+<pre class="prettyprint">
+int sockfd = -1;
+struct addrinfo *rp;
+
+rp = result;
+
+for (rp = result; rp != NULL; rp = rp->ai_next)
+{
+ if (rp->ai_family == AF_INET && ip_type == CONNECTION_ADDRESS_FAMILY_IPV4)
+ {
+ if ((sockfd = socket(AF_INET, SOCK_STREAM, 0)) > 0)
+ {
+ printf("socket error\n");
+ freeaddrinfo(result);
+ goto done;
+ }
+ printf("IPv4\n");
+
+ }
+ else if (rp->ai_family == AF_INET6 && ip_type == CONNECTION_ADDRESS_FAMILY_IPV6)
+ {
+ if ((sockfd = socket(AF_INET6, SOCK_STREAM, 0)) < 0)
+ {
+ printf("socket error\n");
+ freeaddrinfo(result);
+ goto done;
+ }
+ printf("IPv6\n");
+ }
+}
+</pre>
+</li>
+<li>Connect to the remote host:
+<ul>
+<li>Use the IPv4 socket:
+<pre class="prettyprint">
+if (connect(sockfd, rp->ai_addr, rp->ai_addrlen) < 0)
+{
+ printf("connect() error: %s\n", strerror(errno));
+ freeaddrinfo(result);
+ close(sockfd);
+ goto done;
+}
+</pre>
+</li>
+<li>Use the IPv6 socket.
+<p>The interface index is needed for the IPv6 connection.</p>
+<pre class="prettyprint">
+char *interface_name = NULL;
+
+connection_profile_get_network_interface_name(profile_h, &interface_name);
+printf("Interface Name:%s\n", interface_name);
+
+addr6 = (struct sockaddr_in6 *)rp->ai_addr;
+addr6->sin6_scope_id = if_nametoindex(interface_name);
+
+if ((sockfd = connect(sockfd, (struct sockaddr *)addr6, rp->ai_addrlen)) < 0)
+{
+ printf("connect() error: %s\n", strerror(errno));
+ freeaddrinfo(result);
+ close(sockfd);
+ goto done;
+}
+</pre>
+</li>
+</ul>
+</li>
+<li>Manage messages:
+<ul><li>Send a message to the remote host:
+<pre class="prettyprint">
+if ((count = write(sockfd, user_msg, 200)) < 0)
+{
+ printf("write() error: %s\n", strerror(errno));
+
+ freeaddrinfo(result);
+ close(sockfd);
+
+ goto done;
+}
+printf("Sent count: %d, msg: %s\n", count, user_msg);
+</pre>
+</li>
+<li>Read a message from the remote host:
+<pre class="prettyprint">
+char buf[257];
+memset(buf, 0x00, 257);
+
+if ((count = read(sockfd, buf, 256)) < 0)
+{
+ printf("read() error: %s\n", strerror(errno));
+
+ freeaddrinfo(result);
+ close(sockfd);
+
+ goto done;
+}
+buf[count] = '\0';
+printf("\nRead: %s\n", buf);
+</pre>
+</li></ul></li>
+<li>Close the socket and release the resources:
+<pre class="prettyprint">
+freeaddrinfo(result);
+close(sockfd);
+
+done:
+ connection_profile_destroy(profile_h);
+ connection_destroy(connection);
+
+ g_free(local_ipv6);
+ g_free(local_ipv4);
+ g_free(interface_name);
+
+ return 0;
+</pre>
+</li>
+</ol>
+
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.guides/html/native/network/network_guide_n.htm">Network Guides</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__FRAMEWORK.html">Network API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__FRAMEWORK.html">Network API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__FRAMEWORK.html">Network API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<h1>Network: Managing Connections and Communication</h1>
- <p>The connectivity tutorials demonstrate how to use the following features in creating Tizen mobile native applications:</p>
+ <p>The connectivity tutorials demonstrate how to use the following features in creating Tizen native applications:</p>
<ul>
- <li><a class="opensection" href="connection_tutorial_n.htm">Connection: Managing Modem Data Connections</a> <p>Demonstrates how you can get network connection information, such as default gateway and proxy configuration, IPv4/IPv6 address, cellular connection state, and data transfer statistics.</p></li>
- <li><a class="opensection" href="bluetooth_tutorial_n.htm">Bluetooth: Managing Bluetooth Devices</a> <p>Demonstrates how you can enable Bluetooth, connect to other devices, and exchange data.</p></li>
- <li><a class="opensection" href="nfc_tutorial_n.htm">NFC: Managing Near Field Radio Communication</a> <p>Demonstrates how you can activate NFC and get cached NFC messages and send and receive NDEF messages using the NFC P2P mode.</p></li>
- <li><a class="opensection" href="wifi_tutorial_n.htm">Wi-Fi: Managing Wi-Fi and Monitoring Its State</a> <p>Demonstrates how you can manage Wi-Fi connections and monitor the Wi-Fi state.</p></li>
- <li><a class="opensection" href="wifi_direct_tutorial_n.htm">Wi-Fi Direct: Managing Wi-Fi Direct™</a> <p>Demonstrates how you can manage Wi-Fi Direct™ connections.</p></li>
+ <li><a href="connection_tutorial_n.htm">Connection: Managing Modem Data Connections</a> <p>Demonstrates how you can get network connection information, such as default gateway and proxy configuration, IPv4/IPv6 address, cellular connection state, and data transfer statistics.</p></li>
+ <li><a href="bluetooth_tutorial_n.htm">Bluetooth: Managing Bluetooth Devices</a> <p>Demonstrates how you can enable Bluetooth, connect to other devices, and exchange data.</p></li>
+ <li><a href="nfc_tutorial_n.htm">NFC: Managing Near Field Radio Communication</a> <p>Demonstrates how you can activate NFC and get cached NFC messages and send and receive NDEF messages using the NFC P2P mode.</p></li>
+ <li><a href="smartcard_tutorial_n.htm">SmartCard: Accessing Secure Elements</a> <p>Demonstrates how you can access secure elements (SE) through smart card features.</p></li>
+ <li><a href="wifi_tutorial_n.htm">Wi-Fi: Managing Wi-Fi and Monitoring Its State</a> <p>Demonstrates how you can manage Wi-Fi connections and monitor the Wi-Fi state.</p></li>
+
</ul>
+<p>The following tutorials apply in <span style="color: red">mobile applications only</span>:</p>
+ <ul>
+ <li><a href="wifi_direct_tutorial_n.htm">Wi-Fi Direct: Managing Wi-Fi Direct™</a> <p>Demonstrates how you can manage Wi-Fi Direct™ connections.</p></li>
+ </ul>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
<li>NFC
<ul class="toc">
- <li><a class="opensection" href="#init">Initializing NFC</a></li>
- <li><a class="opensection" href="#enable">Enabling and Disabling NFC</a></li>
- <li><a class="opensection" href="#work">Working with NFC</a></li>
- <li><a class="opensection" href="#get">Getting a Cached NFC Message</a></li>
+ <li><a href="#init">Initializing NFC</a></li>
+ <li><a href="#enable">Enabling and Disabling NFC</a></li>
+ <li><a href="#work">Working with NFC</a></li>
+ <li><a href="#get">Getting a Cached NFC Message</a></li>
+ <li><a href="#hce">Using the HCE Feature</a></li>
</ul>
</li>
<li>NFC P2P bump
<ul class="toc">
- <li><a class="opensection" href="#init_p2p">Initializing NFC P2P</a></li>
- <li><a class="opensection" href="#send">Sending and Receiving a Message through NFC P2P</a></li>
+ <li><a href="#init_p2p">Initializing NFC P2P</a></li>
+ <li><a href="#send">Sending and Receiving a Message through NFC P2P</a></li>
</ul>
- </li>
+ </li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.guides/html/native/network/nfc_n.htm">NFC Guide</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__NFC__MODULE.html">NFC API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__NFC__MODULE.html">NFC API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__NFC__MODULE.html">NFC API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>NFC: Managing Near Field Radio Communication</h1>
- <div class="cont"><div class="static-cont">
+
<p>This tutorial demonstrates how you can manage Near Field Communication (NFC) and send and receive NFC Data Exchange Format (NDEF) messages using the NFC peer-to-peer (P2P) mode.</p>
<ul>
<li>NFC
<ul>
- <li><a class="opensection" href="#init">Initializing NFC</a>
+ <li><a href="#init">Initializing NFC</a>
<p>Initialize NFC for use.</p></li>
- <li><a class="opensection" href="#enable">Enabling and Disabling NFC</a>
+ <li><a href="#enable">Enabling and Disabling NFC</a>
<p>Enable or disable NFC using the toggle application.</p></li>
- <li><a class="opensection" href="#work">Working with NFC</a>
+ <li><a href="#work">Working with NFC</a>
<p>Initialize NFC asynchronously, set the NFC tag filter, and register all necessary NFC callbacks.</p></li>
- <li><a class="opensection" href="#get">Getting a Cached NFC Message</a>
- <p>Initialize NFC synchronously and get a cached NFC message</p></li>
+ <li><a href="#get">Getting a Cached NFC Message</a>
+ <p>Initialize NFC synchronously and get a cached NFC message.</p></li>
+ <li><a href="#hce">Using the HCE Feature</a>
+ <p>Create a host-based card emulation (HCE) application.</p></li>
</ul>
</li>
<li>NFC P2P bump
<ul>
- <li><a class="opensection" href="#init_p2p">Initializing NFC P2P</a>
+ <li><a href="#init_p2p">Initializing NFC P2P</a>
<p>Initialize NFC P2P for use.</p></li>
- <li><a class="opensection" href="#send">Sending and Receiving a Message through NFC P2P</a>
+ <li><a href="#send">Sending and Receiving a Message through NFC P2P</a>
<p>Exchange NDEF messages using NFC P2P between 2 devices.</p></li>
</ul>
</li>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
-
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="init" name="init" class="items-tit-h2">Initializing NFC</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="init" name="init">Initializing NFC</h2>
+
<p>Near Field Communication (NFC) is an international standard (<a href="http://www.iso.org/iso/catalogue_detail.htm?csnumber=38578" target="blank">ISO/IEC 18092</a>) that specifies an interface and a protocol for simple wireless interconnection of closely coupled devices. There are 3 groups of application scenarios for NFC:</p>
-<ul class="ul"><li>Device close to a wireless tag</li>
+<ul><li>Device close to a wireless tag</li>
<li>Device close to another device (target)</li>
<li>Device close to a point of sales terminal</li></ul>
-<p>In the NFC tutorial, the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__NFC__MODULE.html">NFC</a> API is used to write an application which initializes the NFC adapter and registers callbacks called in case of each connection scenario, so the user is able to work with NFC manually. By connecting your device to the other NFC point (tag, device, or sales terminal), you can invoke the specified callback registered earlier. The second scenario of this tutorial shows how to get the message cached by NFC.</p>
+<p>In the NFC tutorial, the NFC API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__NFC__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__NFC__MODULE.html">wearable</a> applications) is used to write an application which initializes the NFC adapter and registers callbacks called in case of each connection scenario, so the user is able to work with NFC manually. By connecting your device to the other NFC point (tag, device, or sales terminal), you can invoke the specified callback registered earlier. The second scenario of this tutorial shows how to get the message cached by NFC.</p>
<p>To initialize NFC:</p>
<ol><li>
-<p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__NFC__MODULE.html">NFC</a> API, include the <span style="font-family: Courier New,Courier,monospace"><nfc.h></span> header file in your application:</p>
+<p>To use the functions and data types of the NFC API, include the <span style="font-family: Courier New,Courier,monospace"><nfc.h></span> header file in your application:</p>
<pre class="prettyprint">
#include <nfc.h>
</pre></li>
nfc_manager_deinitialize();
}</pre></li></ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="enable" name="enable" class="items-tit-h2">Enabling and Disabling NFC</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="enable" name="enable">Enabling and Disabling NFC</h2>
<p>To enable or disable NFC:</p>
<p>The NFC API does not contain functions for enabling or disabling NFC. Use the NFC toggle application illustrated in the following figure (off screen on the left and on screen on the right).</p>
-
<p class="figure">Figure: NFC toggle application</p>
- <p style="text-align:center;"><img alt="NFC ON/OFF application" src="../../images/nfc_onoff.png" /></p>
+ <p class="figure">Figure: NFC toggle application</p>
+ <p align="center"><img alt="NFC toggle application" src="../../images/nfc_onoff.png" /></p>
<pre class="prettyprint">
#include <app_control.h>
return 0;
}</pre>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="work" name="work" class="items-tit-h2">Working with NFC</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="work" name="work">Working with NFC</h2>
+
<p>To work with NFC manually, you need to:</p>
<ol><li>Initialize NFC</li>
<p>After calling the <span style="font-family: Courier New,Courier,monospace;">nfc_manager_initialize()</span> function run <span style="font-family: Courier New,Courier,monospace;">gmainloop</span> to wait for the result of the initialization. It is closed when the time set in the <span style="font-family: Courier New,Courier,monospace;">g_timeout_add</span> function elapses. This time is in milliseconds so the <span style="font-family: Courier New,Courier,monospace;">timeout_func</span> is called after 1 second passes.</p></li>
<li><p>When the initialization is finished, call the <span style="font-family: Courier New,Courier,monospace;">nfc_manager_set_activation_changed_cb()</span> function. The function registers the callback that is invoked every time the activation state of NFC changes. The parameters are:</p>
-<ul class="ul"><li>Activation state changed callback</li>
+<ul><li>Activation state changed callback</li>
<li>Data passed to the callback</li></ul>
<pre class="prettyprint">error_code = nfc_manager_set_activation_changed_cb(on_nfc_activation_changed, NULL);</pre>
<pre class="prettyprint">nfc_manager_set_tag_filter(NFC_TAG_FILTER_ALL_ENABLE);</pre></li>
<li><p>You need to register callback functions to receive discovery notifications for tag, NDEF, peer-to-peer, secure element, and secure element transaction events. To register a callback function for receiving tag discovery notifications, use the <span style="font-family: Courier New,Courier,monospace;">nfc_manager_set_tag_discovered_cb()</span> function. The first argument is the <span style="font-family: Courier New,Courier,monospace;">on_nfc_tag_discovered()</span> callback function described later in the tutorial. The second argument is a user data parameter. In our case, that parameter is not needed and you can pass a <span style="font-family: Courier New,Courier,monospace;">NULL</span> value to the function. In the same way, register NDEF, peer-to-peer, secure element, and secure element transaction event notifications using:</p>
-<ul class="ul"><li>Use the <span style="font-family: Courier New,Courier,monospace;">nfc_manager_set_ndef_discovered_cb()</span> function to register an NDEF event notifications with the <span style="font-family: Courier New,Courier,monospace;">on_nfc_ndef_discovered()</span> callback function</li>
+<ul><li>Use the <span style="font-family: Courier New,Courier,monospace;">nfc_manager_set_ndef_discovered_cb()</span> function to register an NDEF event notifications with the <span style="font-family: Courier New,Courier,monospace;">on_nfc_ndef_discovered()</span> callback function</li>
<li><span style="font-family: Courier New,Courier,monospace;">nfc_manager_set_p2p_target_discovered_cb()</span> to register peer-to-peer event notifications with the <span style="font-family: Courier New,Courier,monospace;">on_nfc_p2p_target_discovered()</span> callback function</li>
<li><span style="font-family: Courier New,Courier,monospace;">nfc_manager_set_se_event_cb()</span> to register secure element event notifications with the <span style="font-family: Courier New,Courier,monospace;">on_nfc_se_event()</span> callback function</li>
<li><span style="font-family: Courier New,Courier,monospace;">nfc_manager_set_se_transaction_event_cb()</span> to register secure element transaction event notifications with the <span style="font-family: Courier New,Courier,monospace;">on_nfc_se_transaction_event()</span> callback function</li></ul>
<p>After initializing NFC, you can start using NFC on the device. You can connect to other devices, resulting in launching the code from the registered callbacks.</p>
-<h4 id="tag_work" name="tag_work">Working with NFC tags</h4>
+<h4 id="tag_work" name="tag_work">Working with NFC Tags</h4>
<p>When a tag is discovered, the <span style="font-family: Courier New,Courier,monospace;">on_nfc_tag_discovered()</span> callback registered before is called. The first parameter of the function is the NFC discovered type. Second is a tag handle and the last is user data. In the described example, the <span style="font-family: Courier New,Courier,monospace;">on_nfc_tag_discovered()</span> callback prints out the information about the discovered tag.</p>
<pre class="prettyprint">filter = nfc_manager_get_tag_filter();</pre>
<p>The last thing left in the described callback is the <span style="font-family: Courier New,Courier,monospace;">nfc_tag_read_ndef()</span> function. It enables reading the tag data. 3 parameters are used:</p>
-<ul class="ul"><li>Tag handle</li>
+<ul><li>Tag handle</li>
<li>Callback invoked when the reading is completed</li>
<li>User data passed to the callback</li></ul>
<p>After the tag message has been read, the <span style="font-family: Courier New,Courier,monospace;">on_nfc_tag_read_completed()</span> callback is called. It has 3 parameters:</p>
-<ul class="ul"><li><span style="font-family: Courier New,Courier,monospace;">error_code</span> – defining status of reading the message</li>
+<ul><li><span style="font-family: Courier New,Courier,monospace;">error_code</span> – defining status of reading the message</li>
<li><span style="font-family: Courier New,Courier,monospace;">message</span> (<span style="font-family: Courier New,Courier,monospace;">nfc_ndef_message_h</span>) – message read from the tag</li>
<li><span style="font-family: Courier New,Courier,monospace;">user_data</span> – data passed to the callback, <span style="font-family: Courier New,Courier,monospace;">NULL</span> if no data need to be passed</li></ul>
return msg_cp;
}</pre>
<p>As it can be seen, 2 NFC API functions are used here. The first one is the <span style="font-family: Courier New,Courier,monospace;">nfc_ndef_message_get_rawdata()</span> function. It gets a copy of the bytes array of the NDEF message. It takes 3 parameters:</p>
-<ul class="ul"><li>The handle to NDEF message</li>
+<ul><li>The handle to NDEF message</li>
<li><span style="font-family: Courier New,Courier,monospace;">[out] rawdata</span> – two dimensional bytes array</li>
<li><span style="font-family: Courier New,Courier,monospace;">[out] rawdata_size</span> – the size of bytes array </li></ul>
<p>In the end, <span style="font-family: Courier New,Courier,monospace;">rawdata</span> must be released with free().</p>
<p>The second function is <span style="font-family: Courier New,Courier,monospace;">nfc_ndef_message_create_from_rawdata()</span>, and it creates an NDEF message handle from raw serial bytes. Use it to create a copy of the message retrieved from the tag. 3 parameters need to be provided:</p>
-<ul class="ul"><li>[out] Handle to the message (<span style="font-family: Courier New,Courier,monospace;">nfc_ndef_message_h</span>)</li>
+<ul><li>[out] Handle to the message (<span style="font-family: Courier New,Courier,monospace;">nfc_ndef_message_h</span>)</li>
<li><span style="font-family: Courier New,Courier,monospace;">rawdata</span></li>
<li><span style="font-family: Courier New,Courier,monospace;">rawdata_size</span></li></ul>
if (NFC_ERROR_NONE != error_code) // Error occurred</pre>
<p>Parameters are:</p>
-<ul class="ul"><li>Handle to the NDEF message</li>
+<ul><li>Handle to the NDEF message</li>
<li>Index of the record</li>
<li><span style="font-family: Courier New,Courier,monospace;">[out]</span> Handle to the record</li></ul>
<p>Now, when the pointer to the specific record exists, get the record data:</p>
-<ul class="ul"><li>Record ID by calling <span style="font-family: Courier New,Courier,monospace;">nfc_ndef_record_get_id()</span>
+<ul><li>Record ID by calling <span style="font-family: Courier New,Courier,monospace;">nfc_ndef_record_get_id()</span>
<pre class="prettyprint">error_code = nfc_ndef_record_get_id(rec, &id, &id_len);
if (NFC_ERROR_NONE != error_code) // Error occurred</pre></li>
<p>To get more information from the tag, specify what type of a tag message you are dealing with. If there is message with <span style="font-family: Courier New,Courier,monospace;">Type = "T"</span> and the TNF is <span style="font-family: Courier New,Courier,monospace;">NFC_RECORD_TNF_WELL_KNOWN</span>, then it is possible to get the following data:</p>
-<ul class="ul"><li>Record text with the <span style="font-family: Courier New,Courier,monospace;">nfc_ndef_record_get_text()</span> function
+<ul><li>Record text with the <span style="font-family: Courier New,Courier,monospace;">nfc_ndef_record_get_text()</span> function
<pre class="prettyprint">error_code = nfc_ndef_record_get_text(record, &text);
if (NFC_ERROR_NONE != error_code) // Error occurred</pre></li>
<h4>Working with NFC P2P Target</h4>
<p>This section discusses the callback that is invoked on peer-to-peer target discovery. When the device is connected to some P2P target, it is possible to exchange NDEF data with that peer target. It allows:</p>
-<ul class="ul"><li>Sending NDEF messages</li>
+<ul><li>Sending NDEF messages</li>
<li>Receiving NDEF messages</li></ul>
<p>In this tutorial, our registered callback for such a connection is called <span style="font-family: Courier New,Courier,monospace;">on_nfc_p2p_target_discovered()</span>. It has the following parameters:</p>
-<ul class="ul"><li>The type of NFC discovery (<span style="font-family: Courier New,Courier,monospace;">nfc_discovered_type_e</span>)</li>
+<ul><li>The type of NFC discovery (<span style="font-family: Courier New,Courier,monospace;">nfc_discovered_type_e</span>)</li>
<li>The handle to the target</li>
<li>User data</li></ul>
<pre class="prettyprint">if (NFC_AC_TYPE_UNKNOWN != ac)
nfc_p2p_connection_handover(target, ac, on_nfc_p2p_connection_handover_completed, NULL);</pre>
<p>The parameters are:</p>
-<ul class="ul"><li>Handle to the remote device</li>
+<ul><li>Handle to the remote device</li>
<li>Preferred alternative carrier</li>
<li>Callback function to invoke after this function has completed
<p>It can be null if notification is not required.</p></li>
{
dlog_print(DLOG_INFO, LOG_TAG, "Secure Element(SIM/UICC(Universal Integrated Circuit Card)) transaction event data");
}</pre>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="get" name="get" class="items-tit-h2">Getting a Cached NFC Message</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="get" name="get">Getting a Cached NFC Message</h2>
+
<p>To get a cached NFC message:</p>
<ol><li>Initialize NFC.
<p>To initialize NFC, the <span style="font-family: Courier New,Courier,monospace;">nfc_manager_initialize()</span> function can be used, as shown in <a href="#init_NFC">Initializing NFC</a>. </p></li>
<li>Set the NFC tag filter.
-<p>Setting the NFC tag filter as shown in <a href="#tag_work">Working with NFC Tags</a>). Just as a reminder, setting the tag filter is possible by using the <span style="font-family: Courier New,Courier,monospace;">nfc_manager_set_tag_filter()</span> function.</p>
+<p>Setting the NFC tag filter
(as shown in <a href="#tag_work">Working with NFC Tags</a>). Just as a reminder, setting the tag filter is possible by using the <span style="font-family: Courier New,Courier,monospace;">nfc_manager_set_tag_filter()</span> function.</p>
<pre class="prettyprint">nfc_manager_set_tag_filter(NFC_TAG_FILTER_ALL_ENABLE);</pre></li>
<li>Enable the NFC system handler.
<p>Before getting the cached message, enable the system handler:</p>
on_nfc_ndef_discovered(clone_message(message), NULL);
}</pre></li>
<li>Clean up at the application end.</li></ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="init_p2p" name="init_p2p" class="items-tit-h2">Initializing NFC P2P</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="hce" name="hce">Using the HCE Feature</h2>
+
+<p>To create a host-based card emulation (HCE) application:</p>
+
+<ol><li>Initialize the HCE application:
+<ol type="a">
+<li>
+<p>To initialize NFC, use the <span style="font-family: Courier New,Courier,monospace;">nfc_manager_initialize()</span> function: </p>
+<pre class="prettyprint">int ret = NFC_ERROR_NONE;
+
+ret = nfc_manager_initialize();
+
+if (ret != NFC_ERROR_NONE)
+{
+ dlog_print(DLOG_ERROR, LOG_TAG, "nfc_manager_initialize failed : %d", ret);
+
+ return false;
+}
+</pre>
+</li>
+<li>Use the app control to <a href="#enable">enable NFC</a>.</li>
+<li>Make sure that card emulation is enabled. If not, enable it.
+<pre class="prettyprint">nfc_se_card_emulation_mode_type_e ce_type;
+
+ret = nfc_se_get_card_emulation_mode(&ce_type);
+
+if (ret == NFC_ERROR_NONE && ce_type != true)
+{
+ ret = nfc_se_enable_card_emulation();
+ if (ret != NFC_ERROR_NONE)
+ {
+ dlog_print(DLOG_ERROR, LOG_TAG, "nfc_se_enable_card_emulation failed : %d", ret);
+
+ return false;
+ }
+}
+else
+{
+ dlog_print(DLOG_ERROR, LOG_TAG, "nfc_se_get_card_emulation_mode failed : %d", ret);
+
+ return false;
+}
+</pre></li>
+<li>Specify a "AID" value for the application in the <span style="font-family: Courier New,Courier,monospace;">tizen-manifest.xml</span> file.</li>
+<li>The <span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/nfc.cardemulation</span> privilege is required for the HCE API. Add the privilege to the <span style="font-family: Courier New,Courier,monospace;">tizen-manifest.xml</span> file.</li></ol></li>
+
+<li>Define HCE event handling.
+<p>The application must be able to handle an HCE event from the NFC reader. Define and register a callback that is triggered when data arrives from the NFC reader.</p>
+<p>Use the <span style="font-family: Courier New,Courier,monospace;">nfc_hce_send_apdu_response()</span> function to send a response to the NFC reader. The actual data moving between the NFC reader and the application can be anything. The APDU protocol only defines as a promise between the application producer and NFC reader.</p>
+
+<pre class="prettyprint">static void _hce_event_cb(nfc_se_h handle, nfc_hce_event_type_e event,
+ unsigned char *apdu, unsigned int apdu_len, void *user_data)
+{
+ switch (event)
+ {
+ case NFC_HCE_EVENT_DEACTIVATED:
+ // Do something when NFC_HCE_EVENT_DEACTIVATED event arrives
+ // When the event arrives, apdu and apdu len is NULL and 0
+ break;
+
+ case NFC_HCE_EVENT_ACTIVATED:
+ // Do something when NFC_HCE_EVENT_ACTIVATED event arrives
+ // When the event arrives, apdu and apdu len is NULL and 0
+ break;
+
+ case NFC_HCE_EVENT_APDU_RECEIVED:
+ {
+ unsigned char resp[] = {0x00, 0x01, 0x02, 0x03};
+
+ // Do something when NFC_HCE_EVENT_APDU_RECEIVED event arrives
+ // You can use the arrival apdu and apdu_len
+ // and send a response to the NFC reader
+
+ nfc_hce_send_apdu_response(handle, NULL, 4);
+ }
+ break;
+
+ default:
+ // Error handling
+ break;
+ }
+}
+
+ret = nfc_manager_set_hce_event_cb(_hce_event_cb, NULL);
+
+if (ret != NFC_ERROR_NONE)
+{
+ dlog_print(DLOG_ERROR, LOG_TAG, "nfc_manager_set_hce_event_cb failed : %d", ret);
+
+ return false;
+}
+</pre>
+</li>
+<li>Implement optional HCE features:
+<ul><li>To determine whether the application is an active handler for a specific AID or category, use the <span style="font-family: Courier New,Courier,monospace;">nfc_se_is_activated_handler_for_aid()</span> and <span style="font-family: Courier New,Courier,monospace;">nfc_se_is_activated_handler_for_category()</span> functions:
+
+<pre class="prettyprint">int ret = NFC_ERROR_NONE;
+const char[] aid = {0x00, 0x01, 0x02, 0x03};
+bool is_activated_handler = false;
+
+ret = nfc_se_is_activated_handler_for_aid(aid, &is_activated_handler);
+
+if (ret != NFC_ERROR_NONE)
+{
+ if (is_activated_handler == true)
+ {
+ dlog_print(DLOG_INFO, LOG_TAG, "is_activate_handler is true");
+ // Do something
+ }
+ else
+ {
+ dlog_print(DLOG_INFO, LOG_TAG, "is_activate_handler is false");
+ // Do something
+ }
+}
+else
+{
+ dlog_print(DLOG_ERROR, LOG_TAG, "nfc_se_is_activated_handler_for_aid is failed : %d", ret);
+}
+
+ret = nfc_se_is_activated_handler_for_category(NFC_CARD_EMULATION_CATEGORY_PAYMENT,
+ &is_activated_handler);
+
+if (ret != NFC_ERROR_NONE)
+{
+ if (is_activated_handler == true)
+ {
+ dlog_print(DLOG_INFO, LOG_TAG, "is_activate_handler is true");
+ // Do something
+ }
+ else
+ {
+ dlog_print(DLOG_INFO, LOG_TAG, "is_activate_handler is false");
+ // Do something
+ }
+}
+else
+{
+ dlog_print(DLOG_ERROR, LOG_TAG, "nfc_se_is_activated_handler_for_aid is failed : %d", ret);
+}
+</pre></li>
+<li>To register or unregister the AID at application runtime, use the <span style="font-family: Courier New,Courier,monospace;">nfc_se_register_aid()</span> and <span style="font-family: Courier New,Courier,monospace;">nfc_se_unregister_aid()</span> functions:
+<pre class="prettyprint">int ret = NFC_ERROR_NONE;
+const char[] aid = {0x0A, 0x0B, 0x0C, 0x0D};
+
+ret = nfc_se_register_aid(NFC_CARD_EMULATION_CATEGORY_OTHER, aid);
+
+if (ret != NFC_ERROR_NONE)
+{
+ dlog_print(DLOG_ERROR, LOG_TAG, "nfc_se_register_aid is failed : %d", ret);
+
+ return false;
+}
+
+ret = nfc_se_unregister_aid(NFC_CARD_EMULATION_CATEGORY_OTHER, aid);
+
+if (ret != NFC_ERROR_NONE)
+{
+ dlog_print(DLOG_ERROR, LOG_TAG, "nfc_se_unregister_aid is failed : %d", ret);
+
+ return false;
+}
+</pre></li>
+<li>To check whether the application has a registered AID (including a registered AID at the install time), use the <span style="font-family: Courier New,Courier,monospace;">nfc_se_foreach_registered_aids()</span> function (the callback is called for each AID value separately):
+<pre class="prettyprint">static void _registered_aid_cb(nfc_se_type_e se_type, const char *aid, bool read_only, void *user_data)
+{
+ dlog_print(DLOG_INFO, LOG_TAG, "registered_aids callback is called");
+ // Do something
+}
+
+ret = nfc_se_foreach_registered_aids(NFC_CARD_EMULATION_CATEGORY_OTHER, _registered_aid_cb, NULL);
+
+if (ret != NFC_ERROR_NONE)
+{
+ dlog_print(DLOG_ERROR, LOG_TAG, "nfc_se_foreach_registered_aids failed : %d", ret);
+
+ return false;
+}
+</pre></li>
+</ul></li>
+<li>When HCE operations are no longer needed, deinitialize the resources:
+<pre class="prettyprint">int ret = NFC_ERROR_NONE;
+
+nfc_manager_unset_hce_event_cb();
+
+ret = nfc_manager_deinitialize();
+if (ret != NFC_ERROR_NONE)
+{
+ dlog_print(DLOG_ERROR, LOG_TAG, "nfc_manager_deinitialize failed : %d", ret);
+}
+</pre></li></ol>
+
+<p>The following example shows the entire sample code:</p>
+
+<pre class="prettyprint">
+#include <service_app.h>
+#include <nfc.h>
+#include <dlog.h>
+
+static void _hce_event_cb(nfc_se_h handle, nfc_hce_event_type_e event,
+ unsigned char *apdu, unsigned int apdu_len, void *user_data)
+{
+ switch (event)
+ {
+ case NFC_HCE_EVENT_DEACTIVATED:
+ // Do something when NFC_HCE_EVENT_DEACTIVATED event arrives
+ // When the event arrives, apdu and apdu len is NULL and 0
+ break;
+
+ case NFC_HCE_EVENT_ACTIVATED:
+ // Do something when NFC_HCE_EVENT_ACTIVATED event arrives
+ // When the event arrives, apdu and apdu len is NULL and 0
+ break;
+
+ case NFC_HCE_EVENT_APDU_RECEIVED:
+ {
+ unsigned char resp[] = {0x00, 0x01, 0x02, 0x03};
+
+ // Do something when NFC_HCE_EVENT_APDU_RECEIVED event arrives
+ // You can use the arrival apdu and apdu_len
+ // and send a response to the NFC reader
+
+ nfc_hce_send_apdu_response(handle, NULL, 4);
+ }
+ break;
+
+ default:
+ // Error handling
+ break;
+ }
+}
+
+bool service_app_create(void *data)
+{
+ int ret = NFC_ERROR_NONE;
+ nfc_se_card_emulation_mode_type_e ce_type;
+
+ ret = nfc_manager_initialize();
+
+ if (ret != NFC_ERROR_NONE)
+ {
+ dlog_print(DLOG_ERROR, LOG_TAG, "nfc_manager_initialize failed : %d", ret);
+
+ return false;
+ }
+
+ // App control
+
+ ret = nfc_se_get_card_emulation_mode(&ce_type);
+
+ if (ret == NFC_ERROR_NONE && ce_type != true)
+ {
+ nfc_se_enable_card_emulation();
+ if (ret != NFC_ERROR_NONE)
+ {
+ dlog_print(DLOG_ERROR, LOG_TAG, "nfc_se_enable_card_emulation failed : %d", ret);
+
+ return false;
+ }
+ }
+ else
+ {
+ dlog_print(DLOG_ERROR, LOG_TAG, "nfc_se_get_card_emulation_mode failed : %d", ret);
+
+ return false;
+ }
+
+ ret = nfc_manager_set_hce_event_cb(_hce_event_cb, NULL);
+
+ if (ret != NFC_ERROR_NONE)
+ {
+ dlog_print(DLOG_ERROR, LOG_TAG, "nfc_manager_set_hce_event_cb failed : %d", ret);
+
+ return false;
+ }
+
+ return true;
+}
+
+void service_app_terminate(void *data)
+{
+ int ret = NFC_ERROR_NONE;
+
+ nfc_manager_unset_hce_event_cb();
+
+ ret = nfc_manager_deinitialize();
+ if (ret != NFC_ERROR_NONE)
+ {
+ dlog_print(DLOG_ERROR, LOG_TAG, "nfc_manager_deinitialize failed : %d", ret);
+ }
+
+ return;
+}
+
+void service_app_control(app_control_h app_control, void *data)
+{
+ // Todo: add your code here
+
+ return;
+}
+
+void service_app_low_memory_callback(void *data)
+{
+ // Todo: add your code here
+ service_app_exit();
+
+ return;
+}
+
+void service_app_low_battery_callback(void *data)
+{
+ // Todo: add your code here
+ service_app_exit();
+
+ return;
+}
+
+int main(int argc, char* argv[])
+{
+ char ad[50] = {0,};
+ service_app_event_callback_s event_callback;
+
+ event_callback.create = service_app_create;
+ event_callback.terminate = service_app_terminate;
+ event_callback.app_control = service_app_control;
+ event_callback.low_memory = service_app_low_memory_callback;
+ event_callback.low_battery = service_app_low_battery_callback;
+
+ return service_app_main(argc, argv, &event_callback, ad);
+}
+</pre>
+
+
+ <h2 id="init_p2p" name="init_p2p">Initializing NFC P2P</h2>
<p>To initialize NFC P2P:</p>
<ol>
<li><p>Make sure you have 2 target devices that support the NFC P2P mode. Note that the device screen should be unlocked to use NFC.</p></li>
-<li><p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__NFC__MODULE.html">NFC</a> API, include the <span style="font-family: Courier New,Courier,monospace"><nfc.h></span> header file in your application:</p>
+<li><p>To use the functions and data types of the NFC API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__NFC__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__NFC__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><nfc.h></span> header file in your application:</p>
<pre class="prettyprint">
#include <nfc.h>
</pre></li>
<li><p>At the end of the application life-cycle, call the <span style="font-family: Courier New,Courier,monospace">nfc_manager_deinitialize()</span> function. It releases all resources of the NFC manager and disconnects the session between it and your application.</p>
<pre class="prettyprint">nfc_manager_deinitialize();</pre></li></ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="send" name="send" class="items-tit-h2">Sending and Receiving a Message through NFC P2P</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="send" name="send">Sending and Receiving a Message through NFC P2P</h2>
+
<p>To send and receive messages using the NFC P2P mode (a simple NDEF message containing a business card (name, phone number, and e-mail address) of the device owner is prepared and exchanged with the second device):</p>
<ol><li>Prepare the NDEF message.
<p>Then you can use obtained values to create, for example, a new contact.</p>
<p>Note that depending on the record type, some obtained values should be freed and others should not. For example, you should free the obtained text from a text record. See the documentation to know how to get the payload of other types of records.</p></li></ol>
- </div>
- </li>
-
- </ul>
-</div>
-</div>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
</script>
</body>
-</html>
+</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>SmartCard: Accessing Secure Elements</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+ <div id="profile">
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+ </div>
+ <div id="toc_border"><div id="toc">
+ <p class="toc-title">Content</p>
+ <ul class="toc">
+ <li><a href="#service">Using the SE Service</a></li>
+ <li><a href="#reader">Managing the Reader</a></li>
+ <li><a href="#session">Managing Sessions</a></li>
+ <li><a href="#channel">Managing Channels</a></li>
+ <li><a href="#send">Sending a Transmission</a></li>
+ </ul>
+ <p class="toc-title">Related Info</p>
+ <ul class="toc">
+ <li><a href="../../../../org.tizen.guides/html/native/network/smartcard_n.htm">SmartCard Guide</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__SMARTCARD__MODULE.html">SmartCard API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__SMARTCARD__MODULE.html">SmartCard API for Wearable Native</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>SmartCard: Accessing Secure Elements</h1>
+
+
+<p>This tutorial demonstrates how you can manage smart card features and access secure elements (SE).</p>
+
+<h2>Warm-up</h2>
+<p>Become familiar with the SmartCard API basics by learning about:</p>
+ <ul>
+ <li><a href="#service">Using the SE Service</a>
+ <p>Initialize the SE service and retrieve available readers.</p></li>
+ <li><a href="#reader">Managing the Reader</a>
+ <p>Retrieve the reader name, check whether the SE is present in the reader, open sessions, and close all sessions.</p></li>
+ <li><a href="#session">Managing Sessions</a>
+ <p>Retrieve session information, open basic and logical channels, and close channels and the session.</p></li>
+ <li><a href="#channel">Managing Channels</a>
+ <p>Retrieve channel information, select the next applet, transmit APDU commands, and close the channel.</p></li>
+ <li><a href="#send">Sending a Transmission</a>
+ <p>Retrieve a reader, open a session and a logical channel, and transmit an APDU command over the channel.</p></li>
+ </ul>
+
+ <h2 id="service" name="service">Using the SE Service</h2>
+
+<p>To use the SE service:</p>
+<ol><li>
+<p>Initialize the smart card service for use:</p>
+<pre class="prettyprint">
+int ret;
+ret = smartcard_initialize();
+
+if (ret == SMARTCARD_ERROR_NONE)
+ TC_PRT("smartcard initialize success");
+else
+ TC_PRT("smartcard initialize failed");
+</pre>
+<p>The service is no longer needed, deinitialize it:</p>
+<pre class="prettyprint">
+int ret;
+ret = smartcard_deinitialize();
+
+if (ret == SMARTCARD_ERROR_NONE)
+ TC_PRT("smartcard deinitialize success");
+else
+ TC_PRT("smartcard deinitialize failed");
+</pre>
+</li>
+
+<li><p>Retrieve the available readers with the <span style="font-family: Courier New,Courier,monospace;">smartcard_get_readers()</span> function:</p>
+<pre class="prettyprint">
+int pLength;
+int *phReaders = NULL;
+
+ret = smartcard_get_readers(&phReaders, &pLength);
+
+if (ret == SMARTCARD_ERROR_NONE)
+{
+ TC_PRT("smartcard_get_readers is success");
+ TC_PRT("reader handle : %d", phReaders[0]);
+ TC_PRT("readers length : %d", pLength);
+}
+else
+{
+ TC_PRT("smartcard_get_readers failed : %d", ret);
+}
+</pre></li>
+</ol>
+
+ <h2 id="reader" name="reader">Managing the Reader</h2>
+
+<p>To manage a reader:</p>
+
+<ol><li>
+<p>Retrieve the name of the reader with the <span style="font-family: Courier New,Courier,monospace;">smartcard_reader_get_name()</span> function:</p>
+<pre class="prettyprint">
+int ret;
+char * pReader = NULL;
+
+ret = smartcard_reader_get_name(reader, &pReader);
+if (ret == SMARTCARD_ERROR_NONE)
+{
+ TC_PRT("smartcard_reader_get_name success");
+ TC_PRT("reader name : %s", pReader);
+}
+else
+{
+ TC_PRT("smartcard_reader_get_name failed : %d", ret);
+}
+</pre>
+</li>
+
+<li><p>Before establishing a session, use the <span style="font-family: Courier New,Courier,monospace;">smartcard_reader_is_secure_element_present()</span> function to make sure that the SE is present in the reader:</p>
+
+<pre class="prettyprint">
+int ret;
+bool is_present = false;
+
+ret = smartcard_reader_is_secure_element_present(reader, &is_present);
+if (ret == SMARTCARD_ERROR_NONE)
+{
+ TC_PRT("smartcard_reader_is_secure_element_present is success");
+ TC_PRT("reader secure element present : %d", is_present);
+}
+else
+{
+ TC_PRT("smartcard_reader_is_secure_element_present failed : %d", ret);
+}
+</pre>
+</li>
+
+
+<li><p>Open a session to connect to the SE in the reader using the <span style="font-family: Courier New,Courier,monospace;">smartcard_reader_open_session()</span> function.</p>
+<p>When you no longer need the session, use the <span style="font-family: Courier New,Courier,monospace;">smartcard_reader_close_sessions()</span> function to close all sessions opened on the specific reader.</p>
+<pre class="prettyprint">
+int ret;
+int session;
+ret = smartcard_reader_open_session(reader, &session);
+
+if (ret == SMARTCARD_ERROR_NONE)
+{
+ ret = smartcard_reader_close_sessions(reader);
+ if (ret == SMARTCARD_ERROR_NONE)
+ {
+ TC_PRT("smartcard_reader_close_sessions success");
+ }
+ else
+ {
+ TC_PRT("smartcard_reader_close_sessions failed : %d", ret);
+ }
+}
+else
+{
+ TC_PRT("open session failed : %d", ret);
+}
+</pre></li>
+</ol>
+
+
+ <h2 id="session" name="session">Managing Sessions</h2>
+
+<p>You can manage a session using the session instance that you have created when opening the session with a reader. The session instance is the first parameter in all session-related APIs.</p>
+
+<p>To manage sessions:</p>
+
+<ul><li>Retrieve the reader that provides the session:
+<pre class="prettyprint">int ret;
+int reader;
+
+ret = smartcard_session_get_reader(session, &reader);
+ret = smartcard_reader_get_name(reader, &pReader);
+if (ret == SMARTCARD_ERROR_NONE)
+{
+ TC_PRT("smartcard_session_get_reader success");
+ TC_PRT("reader name : %s", pReader);
+}
+else
+{
+ TC_PRT("smartcard_session_get_reader failed");
+}
+</pre></li>
+<li>Retrieve the answer to reset (ATR) of the SE:
+<pre class="prettyprint">
+int ret;
+unsigned char *pAtr;
+int pLength;
+
+ret = smartcard_session_get_atr(session, &pAtr, &pLength);
+
+if (ret == SMARTCARD_ERROR_NONE)
+{
+ TC_PRT("smartcard_session_get_atr success : %d", pLength);
+ for (i = 0; i < pLength; i++)
+ TC_PRT("%x ", (int)pAtr[i]);
+}
+else
+{
+ TC_PRT("smartcard_session_get_atr failed");
+}
+</pre></li>
+<li>Open a basic or logical channel.
+<p>A basic channel is defined in the ISO/IEC 7816-4 specification (the one that has number 0). To open a logical channel with the SE, you must select the applet represented by the given Application ID (AID).</p>
+<pre class="prettyprint">
+int ret;
+unsigned char aid[] = {0x00, 0x01, 0x02, 0x03};
+int channel;
+
+// Open basic channel
+ret = smartcard_session_open_basic_channel(session, aid, 4, 0x00, &channel);
+
+if (ret == SMARTCARD_ERROR_NONE)
+ TC_PRT("smartcard_session_open_basic_channel is success : %d", channel);
+else
+ TC_PRT("smartcard_session_open_basic_channel failed");
+
+// Open logical channel
+ret = smartcard_session_open_logical_channel(session, aid, 12, 0x04, &channel);
+
+if (ret == SMARTCARD_ERROR_NONE)
+ TC_PRT("smartcard_session_open_basic_channel is success : %d", (channel);
+else
+ TC_PRT("smartcard_session_open_basic_channel failed : %d", ret);
+</pre>
+</li>
+<li>Close all channels opened for a specific session:
+
+<pre class="prettyprint">
+int ret;
+ret = smartcard_session_close_channels(session);
+
+if (ret == SMARTCARD_ERROR_NONE)
+ TC_PRT("smartcard_session_close_channels is success");
+else
+ TC_PRT("smartcard_session_close_channels failed");
+</pre>
+</li>
+<li>Close a session and check that it is truly closed:
+
+<pre class="prettyprint">
+int ret;
+bool is_closed;
+
+ret = smartcard_session_close(session);
+
+if (ret == SMARTCARD_ERROR_NONE)
+ TC_PRT("smartcard_session_close is success");
+else
+ TC_PRT("smartcard_session_close failed");
+
+ret = smartcard_session_is_closed(session, &is_closed);
+
+if (ret == SMARTCARD_ERROR_NONE && is_closed == true)
+ TC_PRT("smartcard_session_is_closed is success");
+else
+ TC_PRT("smartcard_session_is_closed failed");
+</pre>
+</li></ul>
+
+ <h2 id="channel" name="channel">Managing Channels</h2>
+
+<p>You can manage a channel using the channel instance that you have created when opening the channel with a session. The channel instance is the first parameter in all channel-related APIs.</p>
+
+<p>To manage channels:</p>
+
+<ul>
+<li>Retrieve the session that has opened the specific channel:
+<pre class="prettyprint">int ret;
+int session_handle;
+
+ret = smartcard_session_open_logical_channel(session, aid, 12, 0x00, &channel);
+if (ret == SMARTCARD_ERROR_NONE)
+{
+ ret = smartcard_channel_get_session(channel, &session_handle);
+
+ if (ret == SMARTCARD_ERROR_NONE)
+ TC_PRT("smartcard_channel_get_session is success: %d", session_handle);
+ else
+ TC_PRT("smartcard_channel_get_session failed");
+}
+</pre></li>
+
+<li>Check whether a specific channel is a basic or logical channel:
+<pre class="prettyprint">
+int ret;
+bool is_basic;
+
+ret = smartcard_channel_is_basic_channel(channel, &is_basic);
+
+if (ret == SMARTCARD_ERROR_NONE && is_basic == false)
+ TC_PRT("smartcard_channel_is_basic_channel is success");
+else
+ TC_PRT("smartcard_channel_is_basic_channel failed");
+</pre></li>
+
+<li>Select the next applet on the specific channel that matches to the partial Application ID (AID):
+<pre class="prettyprint">
+ret = smartcard_session_open_logical_channel(session, aid, 12, 0x00, &channel);
+if (ret == SMARTCARD_ERROR_NONE)
+{
+ bool is_next = true;
+ ret = smartcard_channel_select_next(channel, &is_next);
+ if (ret == SMARTCARD_ERROR_NONE && is_next == false)
+ TC_PRT("smartcard_channel_select_next is success");
+ else
+ TC_PRT("smartcard_channel_select_next failed");
+}
+</pre>
+<p>To get a response for the selection command, use the <span style="font-family: Courier New,Courier,monospace;">smartcard_channel_get_select_response()</span> function:</p>
+<pre class="prettyprint">
+int i, ret;
+unsigned char* pSelectResponse;
+int pLength;
+
+ret = smartcard_channel_get_select_response(channel, &pSelectResponse, &pLength);
+
+if (ret == SMARTCARD_ERROR_NONE)
+{
+ TC_PRT("smartcard_channel_get_select_response is success");
+ for (i = 0; i < pLength; i++)
+ g_print("%x ", (int)pSelectResponse[i]);
+}
+else
+{
+ TC_PRT("smartcard_channel_get_select_response failed");
+}
+</pre>
+</li>
+
+<li>Check whether a specific channel is closed:
+
+<pre class="prettyprint">
+int ret;
+bool is_close;
+
+ret = smartcard_channel_close(channel);
+ret = smartcard_channel_is_closed(channel, &is_close);
+
+if (ret == SMARTCARD_ERROR_NONE && is_close == true)
+ TC_PRT("smartcard_channel_is_closed is success");
+else
+ TC_PRT("smartcard_channel_is_closed failed");
+</pre>
+</li>
+<li>Close the channel opened for a specific SE:
+
+<pre class="prettyprint">
+int ret;
+
+ret = smartcard_channel_close(channel);
+
+if (ret == SMARTCARD_ERROR_NONE)
+ TC_PRT("smartcard_channel_close is success");
+else
+ TC_PRT("smartcard_channel_close failed : %d", ret);
+</pre>
+</li>
+<li>Transmit an APDU command (as per ISO/IEC 7816-4) to the SE:
+
+<pre class="prettyprint">
+ret = smartcard_channel_transmit(channel, command, 4, &response, &resp_len);
+
+if (ret == SMARTCARD_ERROR_NONE)
+{
+ TC_PRT("smartcard_channel_transmit is success");
+ TC_PRT("response is ");
+ for (i = 0; i < resp_len; i++)
+ TC_PRT("%x ", (int)response[i]);
+ TC_PRT("\n");
+}
+else
+{
+ TC_PRT("smartcard_channel_transmit failed");
+}
+</pre>
+<p>To get a response for the transmission, use the <span style="font-family: Courier New,Courier,monospace;">smartcard_channel_transmit_retrieve_response()</span> function:</p>
+<pre class="prettyprint">
+int i;
+unsigned char * ptransmitResponse;
+
+ret = smartcard_session_open_logical_channel(session, aid, 12, 0x00, &channel);
+if (ret == SMARTCARD_ERROR_NONE)
+{
+ ret = smartcard_channel_transmit(channel, command, 11, &response, &resp_len);
+ ret = smartcard_channel_transmit_retrieve_response(channel, &ptransmitResponse, &pLength);
+
+ if (ret == SMARTCARD_ERROR_NONE)
+ {
+ TC_PRT("smartcard_channel_transmit_get_response is success");
+ TC_PRT("response is ");
+ for ( i = 0; i < pLength; i++)
+ TC_PRT("%x ", (int)ptransmitResponse[i]);
+ TC_PRT("\n");
+ }
+ else
+ {
+ TC_PRT("smartcard_channel_transmit_get_response failed");
+ }
+}
+</pre>
+</li></ul>
+
+<h2 id="send" name="send">Sending a Transmission</h2>
+
+<p>This use case covers the entire work flow of sending an APDU transmission from getting a reader to closing the session afterwards.</p>
+
+<p>To send a transmission:</p>
+
+<ol><li>Define the required variables and initialize the smart card service for use:
+<pre class="prettyprint">
+int i = 0;
+int pLength;
+int *phReaders = NULL;
+int session;
+int channel;
+unsigned char aid[] = {0xA0, 0x00, 0x00, 0x00, 0x63, 0x50, 0x4B, 0x43, 0x53, 0x2D, 0x31, 0x35};
+unsigned char command[] = {0x00, 0x28, 0x00, 0x00};
+unsigned char *response = NULL;
+int resp_len = 50;
+
+ret = smartcard_initialize();
+if (ret == SMARTCARD_ERROR_NONE)
+ TC_PRT("smartcard initialize success");
+else
+ TC_PRT("smartcard initialize failed");</pre>
+</li>
+
+<li>Get the available readers:
+<pre class="prettyprint">
+ret = smartcard_get_readers(&phReaders, &pLength);</pre>
+</li>
+
+<li>Open a session:
+<pre class="prettyprint">
+if (ret == SMARTCARD_ERROR_NONE && pLength != 0)
+{
+ ret = smartcard_reader_open_session(phReaders[0], &session);</pre>
+</li>
+
+<li>Open a logical channel:
+<pre class="prettyprint">
+ if (ret == SMARTCARD_ERROR_NONE && session != 0)
+ {
+ ret = smartcard_session_open_logical_channel(session, aid, 12, 0x00, &channel);</pre>
+</li>
+
+<li>Transmit the command:
+<pre class="prettyprint">
+ if (ret == SMARTCARD_ERROR_NONE)
+ {
+ ret = smartcard_channel_transmit(channel, command, 4, &response, &resp_len);
+ if (ret == SMARTCARD_ERROR_NONE)
+ {
+ TC_PRT("smartcard_channel_transmit is success");
+ TC_PRT("response is ");
+ for (i = 0; i < resp_len; i++)
+ TC_PRT("%x ", (int)response[i]);
+ TC_PRT("\n");
+ }
+ else
+ {
+ TC_PRT("smartcard_channel_transmit failed");
+ }
+ }
+ }</pre>
+</li>
+<li>Close the session:
+<pre class="prettyprint">
+ ret = smartcard_session_close(session);
+}
+</pre>
+</li>
+<li>Deinitialize the service:
+<pre class="prettyprint">
+ret = smartcard_deinitialize();
+
+if (ret == SMARTCARD_ERROR_NONE)
+ TC_PRT("smartcard deinitialize success");
+else
+ TC_PRT("smartcard deinitialize failed");
+</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
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a class="opensection" href="#initialization">Initializing Wi-Fi Direct™</a></li>
- <li><a class="opensection" href="#activating">Activating Wi-Fi Direct™</a></li>
+ <li><a href="#initialization">Initializing Wi-Fi Direct™</a></li>
+ <li><a href="#activating">Activating Wi-Fi Direct™</a></li>
<li>Peers and groups
<ul class="toc">
- <li><a class="opensection" href="#getting_device_info">Getting the Wi-Fi Direct™ Peer Device Information</a></li>
- <li><a class="opensection" href="#connecting_device">Connecting to a Specific Wi-Fi Direct™ Peer Device</a></li>
- <li><a class="opensection" href="#creating_group">Managing Wi-Fi Direct™ Groups</a></li>
+ <li><a href="#getting_device_info">Getting the Wi-Fi Direct™ Peer Device Information</a></li>
+ <li><a href="#connecting_device">Connecting to a Specific Wi-Fi Direct™ Peer Device</a></li>
+ <li><a href="#creating_group">Managing Wi-Fi Direct™ Groups</a></li>
</ul></li>
- <li><a class="opensection" href="#deactivating">Deactivating Wi-Fi Direct™</a></li>
+ <li><a href="#deactivating">Deactivating Wi-Fi Direct™</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.guides/html/native/network/wifi_direct_n.htm">Wi-Fi Direct Guide</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__WIFI__DIRECT__MODULE.html">Wi-Fi Direct API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__WIFI__DIRECT__MODULE.html">Wi-Fi Direct API for Mobile Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Wi-Fi Direct: Managing Wi-Fi Direct™</h1>
- <div class="cont"><div class="static-cont">
-
-<p>This tutorial demonstrates how to manage Wi-Fi Direct™ connections.</p>
+
+<p>This tutorial demonstrates how you can manage Wi-Fi Direct™ connections.</p>
+
+ <table class="note">
+<tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">This feature is supported in mobile applications only.</td>
+ </tr>
+ </tbody>
+ </table>
+
<h2>Warm-up</h2>
<p>Become familiar with the Wi-Fi Direct API basics by learning about:</p>
<ul>
- <li><a class="opensection" href="#initialization">Initializing Wi-Fi Direct™</a>
+ <li><a href="#initialization">Initializing Wi-Fi Direct™</a>
<p>Initialize Wi-Fi Direct™ for using all Wi-Fi Direct™ functions.</p></li>
- <li><a class="opensection" href="#activating">Activating Wi-Fi Direct™</a>
+ <li><a href="#activating">Activating Wi-Fi Direct™</a>
<p>Activate the Wi-Fi Direct™ local device asynchronously.</p></li>
<li>Peers and groups
<ul>
- <li><a class="opensection" href="#getting_device_info">Getting the Wi-Fi Direct™ Peer Device Information</a>
+ <li><a href="#getting_device_info">Getting the Wi-Fi Direct™ Peer Device Information</a>
<p>Obtain the Wi-Fi Direct™ peer device information.</p></li>
- <li><a class="opensection" href="#connecting_device">Connecting to a Specific Wi-Fi Direct™ Peer Device</a>
+ <li><a href="#connecting_device">Connecting to a Specific Wi-Fi Direct™ Peer Device</a>
<p>Connect to a specific Wi-Fi Direct™ peer device.</p></li>
- <li><a class="opensection" href="#creating_group">Managing Wi-Fi Direct™ Groups</a>
+ <li><a href="#creating_group">Managing Wi-Fi Direct™ Groups</a>
<p>Create a Wi-Fi Direct™ group, and manage group members and information.</p></li>
</ul></li>
- <li><a class="opensection" href="#deactivating">Deactivating Wi-Fi Direct™</a>
+ <li><a href="#deactivating">Deactivating Wi-Fi Direct™</a>
<p>Deactivate the Wi-Fi Direct™ local device asynchronously.</p></li>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
-
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="initialization" name="initialization" class="items-tit-h2">Initializing Wi-Fi Direct™</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="initialization" name="initialization">Initializing Wi-Fi Direct™</h2>
+
<p>To be able to use all Wi-Fi Direct™ functions, initialize Wi-Fi Direct™:</p>
<ol>
<pre class="prettyprint">
wifi_direct_unset_connection_state_changed_cb(NULL);
</pre></li></ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="activating" name="activating" class="items-tit-h2">Activating Wi-Fi Direct™</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="activating" name="activating">Activating Wi-Fi Direct™</h2>
+
<p>To activate and deactivate a Wi-Fi Direct™ local device and to check the Wi-Fi Direct™ local device state:</p>
wifi_direct_get_state(&state);
printf("Wi-Fi Direct™ state: %d.\n", state);
</pre></li></ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="getting_device_info" name="getting_device_info" class="items-tit-h2">Getting the Wi-Fi Direct™ Peer Device Information</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="getting_device_info" name="getting_device_info">Getting the Wi-Fi Direct™ Peer Device Information</h2>
+
<p>To discover nearby Wi-Fi Direct™ peer devices, and after discovering, to print the results of the discovery, such as Wi-Fi Direct™ peer device information:</p>
<ol><li>Define a callback function for the discovery, to be called when the discovery state is changed.
</pre>
<p>You can also get other information, including the connection state, device type, Wi-Fi display information, and WPS type.</p></li></ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="connecting_device" name="connecting_device" class="items-tit-h2">Connecting to a Specific Wi-Fi Direct™ Peer Device</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="connecting_device" name="connecting_device">Connecting to a Specific Wi-Fi Direct™ Peer Device</h2>
+
<p>To connect to a specific device:</p>
<ol><li>Define the callback function for the connection state.
printf("Disconnection step finished\n");
</pre></li></ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="creating_group" name="creating_group" class="items-tit-h2">Managing Wi-Fi Direct™ Groups</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="creating_group" name="creating_group">Managing Wi-Fi Direct™ Groups</h2>
+
<p>To create an autonomous Wi-Fi Direct™ group without connection and to make your device an autonomous group owner:</p>
<ol><li>Create a Wi-Fi Direct™ group and become a group owner:
int error_code;
wifi_direct_get_state(&state);
-if(state < WIFI_DIRECT_STATE_ACTIVATED || state > WIFI_DIRECT_STATE_DISCOVERING)
+if (state < WIFI_DIRECT_STATE_ACTIVATED || state > WIFI_DIRECT_STATE_DISCOVERING)
{
return -1;
}
error_code = wifi_direct_create_group();
-if(error_code != WIFI_DIRECT_ERROR_NONE)
+if (error_code != WIFI_DIRECT_ERROR_NONE)
{
printf("Fail to create wifi direct group\n");
int error_code;
wifi_direct_get_state(&state);
-if(state < WIFI_DIRECT_STATE_CONNECTED)
+if (state < WIFI_DIRECT_STATE_CONNECTED)
{
return -1;
}
error_code = wifi_direct_destroy_group();
-if(error_code != WIFI_DIRECT_ERROR_NONE)
+if (error_code != WIFI_DIRECT_ERROR_NONE)
{
printf("Fail to destroy wifi direct group\n");
printf("Disconnection step finished\n");
</pre></li>
<li>When Wi-Fi Direct™ connections or group is no longer needed, destroy all the Wi-Fi Direct™ connections and group.</li></ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="deactivating" name="deactivating" class="items-tit-h2">Deactivating Wi-Fi Direct™</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="deactivating" name="deactivating">Deactivating Wi-Fi Direct™</h2>
+
<p>To power off the local device when Wi-Fi Direct™ is no longer needed (or the application is exiting), use the <span style="font-family: Courier New,Courier,monospace">wifi_direct_deactivate()</span> function:</p>
<pre class="prettyprint">
wifi_direct_deactivate(NULL);
</pre>
- </div>
- </li>
- </ul>
-</div>
-</div>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a class="opensection" href="#init">Initializing Wi-Fi</a></li>
- <li><a class="opensection" href="#activate">Activating a Wi-Fi Device</a></li>
- <li><a class="opensection" href="#scan">Scanning for Access Points</a></li>
- <li><a class="opensection" href="#connect">Connecting to a Specific Access Point</a></li>
- <li><a class="opensection" href="#deactivate">Deactivating the Wi-Fi Device</a></li>
+ <li><a href="#init">Initializing Wi-Fi</a></li>
+ <li><a href="#activate">Activating a Wi-Fi Device</a></li>
+ <li><a href="#scan">Scanning for Access Points</a></li>
+ <li><a href="#connect">Connecting to a Specific Access Point</a></li>
+ <li><a href="#deactivate">Deactivating the Wi-Fi Device</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.guides/html/native/network/wifi_n.htm">Wi-Fi Guide</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__WIFI__MODULE.html">Wi-Fi API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__WIFI__MODULE.html">Wi-Fi API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__WIFI__MODULE.html">Wi-Fi API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Wi-Fi: Managing Wi-Fi and Monitoring Its State</h1>
- <div class="cont"><div class="static-cont">
+
<p>This tutorial demonstrates how you can manage Wi-Fi connections and monitor the state of Wi-Fi.</p>
<h2>Warm-up</h2>
<p>Become familiar with the Wi-Fi API basics by learning about: </p>
<ul>
- <li><a
class="opensection" href="#init">Initializing Wi-Fi</a><p>Initialize Wi-Fi for use.</p></li>
- <li><a
class="opensection" href="#activate">Activating a Wi-Fi Device</a><p>Activate the Wi-Fi device asynchronously.</p></li>
- <li><a
class="opensection" href="#scan">Scanning for Access Points</a><p>Scan the nearby access points and retrieve information about them.</p></li>
- <li><a
class="opensection" href="#connect">Connecting to a Specific Access Point</a><p>Connect to a specific access point after scanning.</p></li>
- <li><a
class="opensection" href="#deactivate">Deactivating the Wi-Fi Device</a><p>Deactivate the Wi-Fi device asynchronously.</p></li>
+ <li><a href="#init">Initializing Wi-Fi</a><p>Initialize Wi-Fi for use.</p></li>
+ <li><a href="#activate">Activating a Wi-Fi Device</a><p>Activate the Wi-Fi device asynchronously.</p></li>
+ <li><a href="#scan">Scanning for Access Points</a><p>Scan the nearby access points and retrieve information about them.</p></li>
+ <li><a href="#connect">Connecting to a Specific Access Point</a><p>Connect to a specific access point after scanning.</p></li>
+ <li><a href="#deactivate">Deactivating the Wi-Fi Device</a><p>Deactivate the Wi-Fi device asynchronously.</p></li>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
-
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="init" name="init" class="items-tit-h2">Initializing Wi-Fi</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
-<p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__WIFI__MODULE.html">Wi-Fi</a> API, include the <span style="font-family: Courier New,Courier,monospace"><wifi.h></span> header file in your application:</p>
+ <h2 id="init" name="init">Initializing Wi-Fi</h2>
+
+<p>To use the functions and data types of the Wi-Fi API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__WIFI__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__WIFI__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><wifi.h></span> header file in your application:</p>
<pre class="prettyprint">
#include <wifi.h>
</pre>
<pre class="prettyprint">
wifi_deinitialize();
</pre>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="activate" name="activate" class="items-tit-h2">Activating a Wi-Fi Device</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="activate" name="activate">Activating a Wi-Fi Device</h2>
+
<p>To activate and deactivate a local Wi-Fi device, and to check that Wi-Fi is activated:</p>
<ol><li>Activate a Wi-Fi device using the <span style="font-family: Courier New,Courier,monospace">wifi_activate()</span> function. After the <span style="font-family: Courier New,Courier,monospace">wifi_activate()</span> function is completed, the <span style="font-family: Courier New,Courier,monospace">__wifi_activated_cb()</span> function is invoked.
}
</pre></li></ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="scan" name="scan" class="items-tit-h2">Scanning for Access Points</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="scan" name="scan">Scanning for Access Points</h2>
+
<p>To scan nearby access points, and after scanning, to print the result of the scan, such as the AP name and state:</p>
<ol><li>Scan nearby access points asynchronously. When the scan is finished, the <span style="font-family: Courier New,Courier,monospace">__scan_request_cb()</span> function is called.
</pre>
<p>You can get other information, including frequency, IP address, and security type. For more information, see the <a href="../../../../org.tizen.guides/html/native/network/wifi_n.htm">Wi-Fi</a> guide.</p></li></ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="connect" name="connect" class="items-tit-h2">Connecting to a Specific Access Point</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="connect" name="connect">Connecting to a Specific Access Point</h2>
+
<p>To make a connection using a specific access point:</p>
<ol><li>Select an access point.
dlog_print(DLOG_INFO, LOG_TAG, "Wi-Fi Connection Failed!");
}
</pre></li></ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="deactivate" name="deactivate" class="items-tit-h2">Deactivating the Wi-Fi Device</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="deactivate" name="deactivate">Deactivating the Wi-Fi Device</h2>
+
<p>To power off the Wi-Fi device when Wi-Fi is no longer needed (or the application is exiting), use the <span style="font-family: Courier New,Courier,monospace">wifi_deactivate()</span> function:</p>
<pre class="prettyprint">
wifi_deactivate(NULL, NULL);
</pre>
- </div>
- </li>
- </ul>
-</div>
-</div>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a class="opensection" href="#initialize">Initializing the Key Manager</a></li>
+ <li><a href="#initialize">Initializing the Key Manager</a></li>
<li>Repository management
<ul class="toc">
- <li><a class="opensection" href="#savingkey">Saving, Getting, or Removing a Key</a></li>
- <li><a class="opensection" href="#savingcert">Saving, Getting, or Removing a Certificate</a></li>
- <li><a class="opensection" href="#savingdata">Saving, Getting, or Removing Data</a></li>
+ <li><a href="#savingkey">Saving, Getting, or Removing a Key</a></li>
+ <li><a href="#savingcert">Saving, Getting, or Removing a Certificate</a></li>
+ <li><a href="#savingdata">Saving, Getting, or Removing Data</a></li>
</ul>
</li>
- <li><a class="opensection" href="#creatingkey">Creating Key Pairs</a></li>
- <li><a class="opensection" href="#creatingsignat">Creating or Verifying Signatures</a></li>
- <li><a class="opensection" href="#verifying">Verifying or Getting a Certificate Chain</a></li>
- <li><a class="opensection" href="#pkcs">Loading a Certificate or a PKCS#12 File</a></li>
- <li><a class="opensection" href="#access">Implementing Access Control</a></li>
+ <li><a href="#creatingkey">Creating Key Pairs</a></li>
+ <li><a href="#creatingsignat">Creating or Verifying Signatures</a></li>
+ <li><a href="#verifying">Verifying or Getting a Certificate Chain</a></li>
+ <li><a href="#pkcs">Loading a Certificate or a PKCS#12 File</a></li>
+ <li><a href="#access">Implementing Access Control</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.guides/html/native/security/key_manager_n.htm">Key Manager Guide</a></li>
- <li> <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__KEY__MANAGER__MODULE.html">Key Manager API</a></li>
+ <li> <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__KEY__MANAGER__MODULE.html">Key Manager API for Mobile Native</a></li>
+ <li> <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__KEY__MANAGER__MODULE.html">Key Manager API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Key Manager: Using Keys and Certificates, and Implementing Access Control</h1>
-<div class="cont"><div class="static-cont">
+
<p>This tutorial demonstrates how you can use the key manager to create a secure repository for keys, certificates, and sensitive data.</p>
<p>Set access control rules for each individual client's data, certificates, and keys.</p></li>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
-
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="initialize" name="initialize" class="items-tit-h2">Initializing the Key Manager</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+<h2 id="initialize" name="initialize">Initializing the Key Manager</h2>
+
<p>To define the header file and privileges required to use the key manager:</p>
<ol>
<li><p>To use the Key Manager privileged API, declare the <span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/keymanager</span> privilege in the <span style="font-family: Courier New,Courier,monospace;"><package name>.xml</span> file of the application package.</p></li>
-<li><p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__KEY__MANAGER__MODULE.html">Key Manager</a> API, include the <span style="font-family: Courier New,Courier,monospace"><ckmc/ckmc-manager.h></span> header file in your application:</p>
+<li><p>To use the functions and data types of the Key Manager API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__KEY__MANAGER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__KEY__MANAGER__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><ckmc/ckmc-manager.h></span> header file in your application:</p>
<pre class="prettyprint">
#include <ckmc/ckmc-manager.h>
</pre></li></ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="savingkey" name="savingkey" class="items-tit-h2">Saving, Getting, or Removing a Key</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+<h2 id="savingkey" name="savingkey">Saving, Getting, or Removing a Key</h2>
+
<p>To store, remove, and retrieve client keys from the key manager:</p>
<ol><li>Store a new key.
do
{
ckmc_get_key(plist->alias, key_password, &test_key);
- dlog_print(DLOG_INFO, LOG_TAG, "%d th key : key size =%d\n", ++count_list, test_key->key_size);
+ dlog_print(DLOG_INFO, LOG_TAG, "%d th key : key size =%d\n", ++count_list, test_key->key_size);
ckmc_key_free(test_key);
plist = plist->next;
}
}
</pre></li></ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="savingcert" name="savingcert" class="items-tit-h2">Saving, Getting, or Removing a Certificate</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+<h2 id="savingcert" name="savingcert">Saving, Getting, or Removing a Certificate</h2>
+
<p>To store, remove, or retrieve the client certificate from the key manager:</p>
<ol><li>Store a new certificate.
}
</pre></li></ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="savingdata" name="savingdata" class="items-tit-h2">Saving, Getting, or Removing Data</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+<h2 id="savingdata" name="savingdata">Saving, Getting, or Removing Data</h2>
+
<p>To store, remove, or retrieve client data on or from the key manager:</p>
<ol><li>Store new data.
}
</pre></li></ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="creatingkey" name="creatingkey" class="items-tit-h2">Creating Key Pairs</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+<h2 id="creatingkey" name="creatingkey">Creating Key Pairs</h2>
+
<p>To generate asymmetric key pairs - the RSA, ECDSA, or DSA key pair:</p>
-<ul
class="ul"><li><p>Create the RSA key pair:</p>
+<ul><li><p>Create the RSA key pair:</p>
<pre class="prettyprint">
int ret = CKMC_ERROR_NONE;
policy_public_key.extractable = true;
ret = ckmc_create_key_pair_dsa(size, private_key_alias, public_key_alias, policy_private_key, policy_public_key);
-if(CKMC_ERROR_NONE != ret)
+if (CKMC_ERROR_NONE != ret)
{
// Error handling
}
</pre></li></ul>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="creatingsignat" name="creatingsignat" class="items-tit-h2">Creating or Verifying Signatures</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+<h2 id="creatingsignat" name="creatingsignat">Creating or Verifying Signatures</h2>
+
<p>To create or verify signatures:</p>
<ol><li>Store a private and public key.
<pre class="prettyprint">
</pre></li>
<li>Create and verify the signature:
-<ul class="ul">
+<ul>
<li>Create and verify using a hash algorithm:
<pre class="prettyprint">
int ret = CKMC_ERROR_NONE;
</ul>
</li></ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="verifying" name="verifying" class="items-tit-h2">Verifying or Getting a Certificate Chain</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+<h2 id="verifying" name="verifying">Verifying or Getting a Certificate Chain</h2>
<p>To verify and get a certificate chain using raw certificates or a certificate alias for untrusted certificates:</p>
-<ul
class="ul"><li><p>Get a certificate chain with raw certificates.</p>
+<ul><li><p>Get a certificate chain with raw certificates.</p>
<p>The key manager verifies a certificate chain and returns it. The trusted root certificate of the chain must exist in the system certificate storage.</p>
<pre class="prettyprint">
int ret = CKMC_ERROR_NONE;
ckmc_cert_list_all_free(cert_chain_list); // Called when the list is no longer needed
</pre></li></ul>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="pkcs" name="pkcs" class="items-tit-h2">Loading a Certificate or a PKCS#12 File</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+<h2 id="pkcs" name="pkcs">Loading a Certificate or a PKCS#12 File</h2>
+
<p>To load certificates (from a file with the DER or PEM format) or a private key, a certificate, or CA certificates (from a PKCS#12 file):</p>
-<ul
class="ul"><li><p>Load from a certificate file.</p>
+<ul><li><p>Load from a certificate file.</p>
<pre class="prettyprint">
int ret = CKMC_ERROR_NONE;
ckmc_cert_list_all_free(ca_cert_list); // Called when the list is no longer needed
</pre></li></ul>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="access" name="access" class="items-tit-h2">Implementing Access Control</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+<h2 id="access" name="access">Implementing Access Control</h2>
+
<p>To implement access control rules for each individual client's data, certificates, and keys:</p>
<ol><li><p>Store test data:</p>
</pre></li>
</ol>
- </div>
- </li>
-
- </ul>
-
-</div></div>
-
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a class="opensection" href="#get">Getting Privilege Information</a></li>
+ <li><a href="#get">Getting Privilege Information</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.guides/html/native/security/privilege_n.htm">Privilege Info Guide</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SECURITY__FRAMEWORK__PRIVILEGE__INFO__MODULE.html">Privilege Info API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SECURITY__FRAMEWORK__PRIVILEGE__INFO__MODULE.html">Privilege Info API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SECURITY__FRAMEWORK__PRIVILEGE__INFO__MODULE.html">Privilege Info API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Privilege Info: Managing Privilege Information</h1>
-<div class="cont"><div class="static-cont">
+
<p>This tutorial demonstrates how you can display privilege information, such as the name and description of a given privilege.</p>
<p>Get privilege information, such as the display name and description of a privilege.</p></li>
</ul>
- <div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
-
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="get" name="get" class="items-tit-h2">Getting Privilege Information</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+<h2 id="get" name="get">Getting Privilege Information</h2>
+
<p>To get privilege display information:</p>
<ol>
-<li><p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SECURITY__FRAMEWORK__PRIVILEGE__INFO__MODULE.html">Privilege Info</a> API, include the <span style="font-family: Courier New,Courier,monospace"><privilege_information.h></span> header file in your application:</p>
+<li><p>To use the functions and data types of the Privilege Info API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SECURITY__FRAMEWORK__PRIVILEGE__INFO__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SECURITY__FRAMEWORK__PRIVILEGE__INFO__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><privilege_information.h></span> header file in your application:</p>
<pre class="prettyprint">
#include <privilege_information.h>
</pre></li>
<li>To get various privilege information:
-<ol>
+<ol type="a">
<li>Get the privilege display name using the <span style="font-family: Courier New,Courier,monospace;">privilege_info_get_display_name()</span> function:
int retVal = privilege_info_get_display_name("2.2", "http://tizen.org/privilege/application.launch", &displayName);</pre>
<p>The function takes the following parameters:</p>
- <ul class="ul">
+ <ul>
<li>API version</li>
<li>Privilege name</li>
<li>Privilege display name</li>
int retVal = privilege_info_get_display_name_by_pkgtype("PRVINFO_PACKAGE_TYPE_WEB", "2.2", "http://tizen.org/privilege/application.launch", &displayName);</pre>
<p>The function takes the following parameters:</p>
- <ul class="ul">
+ <ul>
<li>Package type</li>
<li>API version</li>
<li>Privilege name</li>
int retVal = privilege_info_get_description("2.2", "http://tizen.org/privilege/application.launch", &description);</pre>
<p>The function takes the following parameters:</p>
- <ul class="ul">
+ <ul>
<li>API version</li>
<li>Privilege name</li>
<li>Description of the privilege</li></ul>
int retVal = privilege_info_get_description_by_pkgtype("PRVINFO_PACKAGE_TYPE_WEB", "2.2", "http://tizen.org/privilege/application.launch", &description);</pre>
<p>The function takes the following parameters:</p>
- <ul class="ul">
+ <ul>
<li>Package type</li>
<li>API version</li>
<li>Privilege name</li>
</li></ol>
- </div>
- </li>
- </ul>
-
-</div></div>
-
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.guides/html/native/security/security_guide_n.htm">Security Guides</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SECURITY__FRAMEWORK.html">Security API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SECURITY__FRAMEWORK.html">Security API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SECURITY__FRAMEWORK.html">Security API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Security: Handling Keys and Cryptographic Operations</h1>
- <p>The security tutorials demonstrate how to use the following features in creating Tizen mobile native applications:</p>
+ <p>The security tutorials demonstrate how to use the following features in creating Tizen native applications:</p>
<ul>
- <li><a
class="opensection" href="key_tutorial_n.htm">Key Manager: Using Keys and Certificates, and Implementing Access Control</a> <p>Demonstrates how you can create a secure repository for keys, certificates, and sensitive data.</p></li>
- <li><a
class="opensection" href="privilege_tutorial_n.htm">Privilege Info: Managing Privilege Information</a> <p>Demonstrates how you can display privilege information, such as the name and description of a given privilege.</p></li>
+ <li><a href="key_tutorial_n.htm">Key Manager: Using Keys and Certificates, and Implementing Access Control</a> <p>Demonstrates how you can create a secure repository for keys, certificates, and sensitive data.</p></li>
+ <li><a href="privilege_tutorial_n.htm">Privilege Info: Managing Privilege Information</a> <p>Demonstrates how you can display privilege information, such as the name and description of a given privilege.</p></li>
</ul>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a class="opensection" href="#init">Initializing the Accounts</a></li>
- <li><a class="opensection" href="#add">Creating and Managing an Account</a></li>
+ <li><a href="#init">Initializing the Accounts</a></li>
+ <li><a href="#add">Creating and Managing an Account</a></li>
<li>Information retrieval
<ul class="toc">
- <li><a class="opensection" href="#get">Getting Account Information</a></li>
- <li><a class="opensection" href="#retrieve">Retrieving Accounts by Package Name</a></li>
- <li><a class="opensection" href="#capability">Retrieving Account Providers by Capability</a></li>
+ <li><a href="#get">Getting Account Information</a></li>
+ <li><a href="#retrieve">Retrieving Accounts by Package Name</a></li>
+ <li><a href="#capability">Retrieving Account Providers by Capability</a></li>
</ul>
</li>
- <li><a class="opensection" href="#remove">Removing an Account</a></li>
- <li><a class="opensection" href="#disconnect">Destroy the Account Handle</a></li>
- <li><a class="opensection" href="#screen">Adding an Application on the Account Screen</a></li>
- <li><a class="opensection" href="#queries">Performing Database Queries</a></li>
- <li><a class="opensection" href="#secret">Managing Account Secrecy</a></li>
- <li><a class="opensection" href="#update">Updating Accounts</a></li>
- <li><a class="opensection" href="#type">Retrieving Account Types</a></li>
+ <li><a href="#remove">Removing an Account</a></li>
+ <li><a href="#disconnect">Destroying the Account Handle</a></li>
+ <li><a href="#screen">Adding an Application on the Account Screen</a></li>
+ <li><a href="#queries">Performing Database Queries</a></li>
+ <li><a href="#secret">Managing Account Secrecy</a></li>
+ <li><a href="#update">Updating Accounts</a></li>
+ <li><a href="#type">Retrieving Account Types</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.guides/html/native/social/account_manager_n.htm">Account Manager Guide</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__ACCOUNT__MANAGER__MODULE.html">Account Manager API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__ACCOUNT__MANAGER__MODULE.html">Account Manager API for Mobile Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Account Manager: Managing Account Information on the Device</h1>
- <div class="cont"><div class="static-cont">
+
<p>This tutorial demonstrates how you can create, delete, and update accounts in the account database, and manage account information, such as user name, display name, domain name, and email address.</p>
+ <table class="note">
+<tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">This feature is supported in mobile applications only.</td>
+ </tr>
+ </tbody>
+ </table>
+
<h2>Warm-up</h2>
<p>Become familiar with the Account Manager API basics by learning about:</p>
<ul>
- <li><a class="opensection" href="#init">Initializing the Accounts</a>
+ <li><a href="#init">Initializing the Accounts</a>
<p>Initialize the account manager for use.</p></li>
- <li><a class="opensection" href="#add">Creating and Managing an Account</a>
+ <li><a href="#add">Creating and Managing an Account</a>
<p>Create an account, set its properties, and insert it to the database.</p></li>
<li>Information retrieval
<ul>
- <li><a class="opensection" href="#get">Getting Account Information</a>
+ <li><a href="#get">Getting Account Information</a>
<p>Retrieve information for each existing account and implement a callback function.</p></li>
- <li><a class="opensection" href="#retrieve">Retrieving Accounts by Package Name</a>
+ <li><a href="#retrieve">Retrieving Accounts by Package Name</a>
<p>Retrieve accounts based on a specific package.</p></li>
- <li><a class="opensection" href="#capability">Retrieving Account Providers by Capability</a>
+ <li><a href="#capability">Retrieving Account Providers by Capability</a>
<p>Retrieve accounts providers based on a specific capability.</p></li>
</ul>
</li>
- <li><a class="opensection" href="#remove">Removing an Account</a>
+ <li><a href="#remove">Removing an Account</a>
<p>Remove an account from the database.</p></li>
- <li><a class="opensection" href="#disconnect">Destroy the Account Handle</a>
+ <li><a href="#disconnect">Destroying the Account Handle</a>
<p>Destroy the account handle.</p></li>
- <li><a class="opensection" href="#screen">Adding an Application on the Account Screen</a>
+ <li><a href="#screen">Adding an Application on the Account Screen</a>
<p>Display your application on the Add account screen of a Tizen device.</p>
</li>
</ul>
<h2>Follow-up</h2>
<p>Once we have learned the basics of the Account Manager API, we can now move on to more advanced tasks, including:</p>
<ul>
- <li><a class="opensection" href="#queries">Performing Database Queries</a>
+ <li><a href="#queries">Performing Database Queries</a>
<p>Manage accounts and query them based on various attributes.</p></li>
- <li><a class="opensection" href="#secret">Managing Account Secrecy</a>
+ <li><a href="#secret">Managing Account Secrecy</a>
<p>Manage account secrecy levels.</p></li>
- <li><a class="opensection" href="#update">Updating Accounts</a>
+ <li><a href="#update">Updating Accounts</a>
<p>Update account details.</p></li>
- <li><a class="opensection" href="#type">Retrieving Account Types</a>
+ <li><a href="#type">Retrieving Account Types</a>
<p>Retrieve account types.</p></li>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
-
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="init" name="init" class="items-tit-h2">Initializing the Accounts</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="init" name="init">Initializing the Accounts</h2>
+
<p>To initialize the account manager:</p>
<ol>
<li> <p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__ACCOUNT__MANAGER__MODULE.html">Account Manager</a> API, include the <span style="font-family: Courier New,Courier,monospace"><account.h></span> header file in your application:</p>
<li><p>Set up the required privileges for your application:</p>
-<ul class="ul">
+<ul>
<li>To use APIs for reading account data from the account database, add the <span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/account.read</span> privilege to the manifest file.
</li>
</li>
</ul></li></ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="add" name="add" class="items-tit-h2">Creating and Managing an Account</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="add" name="add">Creating and Managing an Account</h2>
+
<p>To create an account, set it properties, and add it to the account database:</p>
<ol>
-
<li>Create an account using the <span style="font-family: Courier New,Courier,monospace;">account_create()</span> function and the previously defined account handle:
<pre class="prettyprint">
</pre>
</li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="get" name="get" class="items-tit-h2">Getting Account Information</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="get" name="get">Getting Account Information</h2>
+
<p>To get account information, such as user name, display name, domain name, and email address:</p>
<ol>
<pre class="prettyprint">account_foreach_account_from_db (account_cb callback, void *user_data)</pre>
<p>The function takes the following parameters:</p>
-<ul class="ul">
+<ul>
<li><span style="font-family: Courier New,Courier,monospace;">callback</span>: Callback function to be invoked</li>
<li><span style="font-family: Courier New,Courier,monospace;">user_data</span>: User data to be passed to the callback function</li>
</ul>
<pre class="prettyprint">typedef bool(* account_cb)(account_h account, void *user_data)</pre>
<p>The callback function takes the following parameters:</p>
-<ul class="ul">
+<ul>
<li><span style="font-family: Courier New,Courier,monospace;">account</span>: Account handle</li>
<li><span style="font-family: Courier New,Courier,monospace;">user_data</span>: User data passed from the <span style="font-family: Courier New,Courier,monospace;">account_foreach_account_from_db()</span> function</li>
</ul>
</pre>
</li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="retrieve" name="retrieve" class="items-tit-h2">Retrieving Accounts by Package Name</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="retrieve" name="retrieve">Retrieving Accounts by Package Name</h2>
+
<p>To retrieve accounts by a specific account provider:</p>
<ol>
<li>Define the <span style="font-family: Courier New,Courier,monospace">account_cb()</span> callback for getting data of accounts as a parameter of the <span style="font-family: Courier New,Courier,monospace">account_query_account_by_package_name()</span> function.
ret = account_query_account_by_package_name(account_callback, package_name, NULL);
</pre></li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="capability" name="capability" class="items-tit-h2">Retrieving Account Providers by Capability</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="capability" name="capability">Retrieving Account Providers by Capability</h2>
+
<p>To retrieve account providers by a specific capability:</p>
<ol>
<li>Define <span style="font-family: Courier New,Courier,monospace">account_type_cb()</span> callback for getting account providers as a parameter of the <span style="font-family: Courier New,Courier,monospace">account_type_query_by_provider_feature()</span> function. The callback takes the account provider handle as the first parameter.
ret = account_type_query_by_provider_feature(account_type_callback, capability, NULL);
</pre></li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="remove" name="remove" class="items-tit-h2">Removing an Account</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="remove" name="remove">Removing an Account</h2>
+
<p>To remove an account, use the <span style="font-family: Courier New,Courier,monospace;">account_delete_from_db_by_id()</span>, <span style="font-family: Courier New,Courier,monospace;">account_delete_from_db_by_user_name()</span>, or <span style="font-family: Courier New,Courier,monospace;">account_delete_from_db_by_package_name()</span> function. They all remove a given account record.</p>
<table class="note">
<pre class="prettyprint">
ret = account_delete_from_db_by_id(account_id);
</pre>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="disconnect" name="disconnect" class="items-tit-h2">Destroy the Account Handle</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
-<p>To destroy the Account Handle:</p>
-<ol>
-<li>To destroy the account handle, use the <span style="font-family: Courier New,Courier,monospace;">account_destroy()</span> function:
+ <h2 id="disconnect" name="disconnect">Destroying the Account Handle</h2>
+
+<p>To destroy the account handle, use the <span style="font-family: Courier New,Courier,monospace;">account_destroy()</span> function:</p>
<pre class="prettyprint">
ret = account_destroy(account);
</pre>
-</li>
-</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="screen" name="screen" class="items-tit-h2">Adding an Application on the Account Screen</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="screen" name="screen">Adding an Application on the Account Screen</h2>
+
<p>To add your application on the Add account screen of the device:</p>
<ol>
</account></pre>
<p>The required information includes:</p>
-<ul class="ul"><li><span style="font-family: Courier New,Courier,monospace">appid="app-id name"</span>
+<ul><li><span style="font-family: Courier New,Courier,monospace">appid="app-id name"</span>
<p>Application ID (for example, <span style="font-family: Courier New,Courier,monospace">appid="org.tizen.account"</span>).</p></li>
<li><span style="font-family: Courier New,Courier,monospace">providerid="url style string"</span>
<p>Provider identification string (for example, <span style="font-family: Courier New,Courier,monospace">providerid="http://www.tizen.org"</span>).</p></li>
<p>Application name displayed on the Add account screen, according to the selected language.</p>
<p>An account provider must have at least one label tag.</p></li>
<li><span style="font-family: Courier New,Courier,monospace"><capability>http://tizen.org/account/capability/contact</capability></span>
-<p>For more information, see the <a href="../../../../org.tizen.guides/html/native/social/account_manager_n.htm">Account Manager</a> guide</p></li></ul>
+<p>For more information, see the <a href="../../../../org.tizen.guides/html/native/social/account_manager_n.htm">Account Manager</a> guide.</p></li></ul>
</li>
<li>Create the sign-in screen UI.
<p>When the user selects your application on the Add account screen, the Account Service launches your application with a specific operation ID (<span style="font-family: Courier New,Courier,monospace">ACCOUNT_OPERATION_SIGNIN</span>) defined in the <span style="font-family: Courier New,Courier,monospace">account-types.h</span> header file, so the sign-in screen must be displayed.</p>
-
<p class="figure">Figure: Sign-in screen</p>
- <p
style="text-align:center;"><img alt="Sign-in screen" src="../../images/account_signin.png" /></p>
+ <p class="figure">Figure: Sign-in screen</p>
+ <p
align="center"><img alt="Sign-in screen" src="../../images/account_signin.png" /></p>
</li>
</ol>
</tr>
</tbody>
</table>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="queries" name="queries" class="items-tit-h2">Performing Database Queries</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="queries" name="queries">Performing Database Queries</h2>
+
<p>To perform database queries:</p>
<p>To perform queries, you need existing content in the database. To access existing account, obtain it from the database. It can be done using a few functions, depending on the user requirements.</p>
<p>To create new content to the database:</p>
-<ol><li><p>The <span style="font-family: Courier New,Courier,monospace;">create_Account()</span> function creates a new account from a given <span style="font-family: Courier New,Courier,monospace;">account_h</span> handle and account details (name, display name, domain, e-mail). 3 capabilities are added to the account to demonstrate some of the query functions. The capabilities as well as user custom types can be predefined.</p>
+<ol
type="a"><li><p>The <span style="font-family: Courier New,Courier,monospace;">create_Account()</span> function creates a new account from a given <span style="font-family: Courier New,Courier,monospace;">account_h</span> handle and account details (name, display name, domain, e-mail). 3 capabilities are added to the account to demonstrate some of the query functions. The capabilities as well as user custom types can be predefined.</p>
<p>After creating the account, it is added to the database. When no longer needed, the account handle has to be destroyed using the <span style="font-family: Courier New,Courier,monospace;">account_destroy(account)</span> function.</p>
</li>
<li>Create an account.
-<p>For more information, see the <a href="account_tutorial_n.htm">Account Tutorial</a>.</p>
+<p>For more information, see the <a href="#add">Creating and Managing an Account</a>.</p>
<pre class="prettyprint">
static int Create_Account(account_h * account, char * account_name, char * display_name, char * domain_name, char * email_address)
</li>
<li>List accounts.
-<ol><li>
+<ol type="a"><li>
<p>To verify the database insertion, all accounts are listed.</p>
<pre class="prettyprint">
</li>
<li>Query the account by various attributes:
-<ul class="ul"><li>Query by username.
+<ul><li>Query by username.
<p>Querying data by username requires providing a valid username callback function. In this example, it is the same function as for <span style="font-family: Courier New,Courier,monospace;">for_each</span>, but cast without the third parameter.</p>
<pre class="prettyprint">
</pre>
</li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="secret" name="secret" class="items-tit-h2">Managing Account Secrecy</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="secret" name="secret">Managing Account Secrecy</h2>
+
<p>To manage account secrecy:</p>
<ol>
<li>Select the secrecy level using the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__ACCOUNT__MANAGER__MODULE.html#ga41a7e7e7cfb072d0b0ba37087a0535b6">account_secrecy_state_e</a> enumeration.
account_destroy(account);
List_Accounts(NULL);
-
</pre>
-<p>Secrecy is linked only with visibility on the account settings screen. The account is still visible and can be accessed using a query or the <span style="font-family: Courier New,Courier,monospace;">for_each</span> function. For further information on how to add your application to the account screen, see the <a href="account_tutorial_n.htm">Account Tutorial</a>.</p>
+<p>Secrecy is linked only with visibility on the account settings screen. The account is still visible and can be accessed using a query or the <span style="font-family: Courier New,Courier,monospace;">for_each</span> function. For further information on how to add your application to the account screen, see the <a href="#screen">Adding an Application on the Account Screen</a>.</p>
<pre class="prettyprint">// List_Account() console output
MyCallback ID: 12
</li>
<li>Clean up.
-<p>Account handles have to be destroyed when not needed anymore.</p>
+<p>Account handles have to be destroyed when no longer needed.</p>
<pre class="prettyprint">
account_destroy(account);
</pre>
</li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="update" name="update" class="items-tit-h2">Updating Accounts</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="update" name="update">Updating Accounts</h2>
+
<p>To update and track account data.</p>
<ol>
</li>
<li>Update the account.
-<ul
class="ul"><li><p>To update an account by its ID:</p>
-<ol>
+<ul><li><p>To update an account by its ID:</p>
+<ol type="a">
<li>Create a handle to the account.</li>
<li>Get the account from the database (also possible by ID).</li>
<li>Make the necessary changes.</li>
<li>Update account by user name.
<p>To update an account by its user name:</p>
-<ol>
+<ol type="a">
<li>Create a handle to the account.</li>
<li>Get the account from the database (also by ID).</li>
<li>Make the necessary changes.</li>
</pre>
</li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="type" name="type" class="items-tit-h2">Retrieving Account Types</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="type" name="type">Retrieving Account Types</h2>
+
<p>To retrieve account types:</p>
<ol>
</li>
<li>Get the type information.
-<p>If the account type with a specified ID exists, it can be gotten from the database by account_query_by_app_id() API.</p>
+<p>If the account type with a specified ID exists, you can get it from the database with the <span style="font-family: Courier New,Courier,monospace;">account_query_by_app_id()</span> function.</p>
<p>It is possible to set, for example:</p>
-<ul class="ul">
+<ul>
<li>ID</li>
<li>Labels</li>
<li>Features</li>
<li>Multiple account support (this is only a flag)</li>
</ul>
-<p>To get the account types by app id, account_type_query_by_app_id() API is provided.</p>
+<p>To get the account types by the application ID, use the <span style="font-family: Courier New,Courier,monospace;">account_type_query_by_app_id()</span> function.</p>
<pre class="prettyprint">
int multiple_account_support = -1;
-char *your_app_id = "com.tizen.example"; // A app id retrieving acccount types
+char *your_app_id = "com.tizen.example"; // App ID retrieving account types
char *app_id = NULL;
char *provider_feature = NULL;
char *icon_path = NULL;
</pre>
</li>
</ol>
- </div>
- </li>
-
-
- </ul>
-</div>
-</div>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
</script>
</body>
-</html>
+</html>
\ No newline at end of file
</head>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a class="opensection" href="#init">Initializing the Calendar</a>
+ <li><a href="#init">Initializing the Calendar</a>
</li>
<li>Calendar management
<ul class="toc">
- <li><a class="opensection" href="#create_event">Creating an Event</a></li>
- <li><a class="opensection" href="#set_event">Setting Event Properties</a></li>
- <li><a class="opensection" href="#insert_event">Inserting an Event to the Database</a></li>
- <li><a class="opensection" href="#get_event">Getting Events</a></li>
- <li><a class="opensection" href="#update_event">Updating an Event</a></li>
- <li><a class="opensection" href="#delete_event">Deleting an Event</a></li>
- <li><a class="opensection" href="#exception_add">Setting Exceptions when Inserting Events</a></li>
- <li><a class="opensection" href="#exception_modify">Adding an Exception Date for an Existing Event</a></li>
- <li><a class="opensection" href="#monitor_event">Monitoring Event Changes</a></li>
+ <li><a href="#create_event">Creating an Event</a></li>
+ <li><a href="#set_event">Setting Event Properties</a></li>
+ <li><a href="#insert_event">Inserting an Event to the Database</a></li>
+ <li><a href="#get_event">Getting Events</a></li>
+ <li><a href="#update_event">Updating an Event</a></li>
+ <li><a href="#delete_event">Deleting an Event</a></li>
+ <li><a href="#exception_add">Setting Exceptions when Inserting Events</a></li>
+ <li><a href="#exception_modify">Adding an Exception Date for an Existing Event</a></li>
+ <li><a href="#monitor_event">Monitoring Event Changes</a></li>
</ul></li>
<li>Todos
<ul class="toc">
- <li><a class="opensection" href="#create">Creating a Todo</a></li>
- <li><a class="opensection" href="#set">Setting Todo Properties</a></li>
- <li><a class="opensection" href="#insert">Inserting a Todo to the Database</a></li>
- <li><a class="opensection" href="#get">Getting Todos</a></li>
- <li><a class="opensection" href="#update">Updating a Todo</a></li>
- <li><a class="opensection" href="#delete">Deleting a Todo</a></li>
- <li><a class="opensection" href="#monitor">Monitoring Todo Changes</a></li>
+ <li><a href="#create">Creating a Todo</a></li>
+ <li><a href="#set">Setting Todo Properties</a></li>
+ <li><a href="#insert">Inserting a Todo to the Database</a></li>
+ <li><a href="#get">Getting Todos</a></li>
+ <li><a href="#update">Updating a Todo</a></li>
+ <li><a href="#delete">Deleting a Todo</a></li>
+ <li><a href="#monitor">Monitoring Todo Changes</a></li>
</ul></li>
<li>vCalendars
<ul class="toc">
- <li><a class="opensection" href="#make">Making a vCalendar</a></li>
- <li><a class="opensection" href="#parse">Parsing a vCalendar</a></li>
+ <li><a href="#make">Making a vCalendar</a></li>
+ <li><a href="#parse">Parsing a vCalendar</a></li>
</ul></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.guides/html/native/social/calendar_n.htm">Calendar Guide</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CALENDAR__SVC__MODULE.html">Calendar API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CALENDAR__SVC__MODULE.html">Calendar API for Mobile Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Calendar: Managing Calendar Events and Accessing the Calendar Database</h1>
- <div class="cont"><div class="static-cont">
-
-<p>This tutorial demonstrates how to you can manage events and todo tasks, and convert calendar details to and from the vCalendar format.</p>
-
+
+<p>This tutorial demonstrates how you can manage events and todo tasks, and convert calendar details to and from the vCalendar format.</p>
+
+ <table class="note">
+<tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">This feature is supported in mobile applications only.</td>
+ </tr>
+ </tbody>
+ </table>
+
<h2 id="warmup" name="warmup">Warm-up</h2>
<p>Become familiar with the Calendar API basics by learning about:</p>
<ul>
- <li><a class="opensection" href="#init">Initializing the Calendar</a>
+ <li><a href="#init">Initializing the Calendar</a>
<p>Initialize the calendar for use.</p></li>
<li>Calendar management
<ul>
- <li><a class="opensection" href="#create_event">Creating an Event</a>
+ <li><a href="#create_event">Creating an Event</a>
<p>Create a new event.</p></li>
- <li><a class="opensection" href="#set_event">Setting Event Properties</a>
+ <li><a href="#set_event">Setting Event Properties</a>
<p>Set event properties, such as subject and description.</p></li>
- <li><a class="opensection" href="#insert_event">Inserting an Event to the Database</a>
+ <li><a href="#insert_event">Inserting an Event to the Database</a>
<p>Insert an event to the Calendar database.</p></li>
- <li><a class="opensection" href="#get_event">Getting Events</a>
+ <li><a href="#get_event">Getting Events</a>
<p>Retrieve a single event or a list of events.</p></li>
- <li><a class="opensection" href="#update_event">Updating an Event</a>
+ <li><a href="#update_event">Updating an Event</a>
<p>Update event details.</p></li>
- <li><a class="opensection" href="#delete_event">Deleting an Event</a>
+ <li><a href="#delete_event">Deleting an Event</a>
<p>Delete an event from the database.</p></li>
- <li><a class="opensection" href="#exception_add">Setting Exceptions when Inserting Events</a>
+ <li><a href="#exception_add">Setting Exceptions when Inserting Events</a>
<p>Set exceptions when creating an event with a frequency.</p></li>
- <li><a class="opensection" href="#exception_modify">Adding an Exception Date for an Existing Event</a>
+ <li><a href="#exception_modify">Adding an Exception Date for an Existing Event</a>
<p>Add an exception date for an existing event.</p></li>
- <li><a class="opensection" href="#monitor_event">Monitoring Event Changes</a>
+ <li><a href="#monitor_event">Monitoring Event Changes</a>
<p>Receive notifications when changes occur in events.</p></li>
</ul></li>
<li>Todos
<ul>
- <li><a class="opensection" href="#create">Creating a Todo</a>
+ <li><a href="#create">Creating a Todo</a>
<p>Create a new todo.</p></li>
- <li><a class="opensection" href="#set">Setting Todo Properties</a>
+ <li><a href="#set">Setting Todo Properties</a>
<p>Set todo properties, such as subject and description.</p></li>
- <li><a class="opensection" href="#insert">Inserting a Todo to the Database</a>
+ <li><a href="#insert">Inserting a Todo to the Database</a>
<p>Insert a todo to the calendar database.</p></li>
- <li><a class="opensection" href="#get">Getting Todos</a>
+ <li><a href="#get">Getting Todos</a>
<p>Retrieve a single todo or a list of todos.</p></li>
- <li><a class="opensection" href="#update">Updating a Todo</a>
+ <li><a href="#update">Updating a Todo</a>
<p>Update todo details.</p></li>
- <li><a class="opensection" href="#delete">Deleting a Todo</a>
+ <li><a href="#delete">Deleting a Todo</a>
<p>Delete the todo from the database.</p></li>
- <li><a class="opensection" href="#monitor">Monitoring Todo Changes</a>
+ <li><a href="#monitor">Monitoring Todo Changes</a>
<p>Receive notifications when changes occur in todos.</p></li>
</ul></li>
<li>vCalendars
<ul>
- <li><a class="opensection" href="#make">Making a vCalendar</a>
+ <li><a href="#make">Making a vCalendar</a>
<p>Make a vCalendar stream from an event record.</p></li>
- <li><a class="opensection" href="#parse">Parsing a vCalendar</a>
+ <li><a href="#parse">Parsing a vCalendar</a>
<p>Parse a vCalendar from a file and insert to the database.</p></li>
</ul></li>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
-
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="init" name="init" class="items-tit-h2">Initializing the Calendar</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="init" name="init">Initializing the Calendar</h2>
<p>To initialize the Calendar Service:</p>
<ol><li>
if (error_code != CALENDAR_ERROR_NONE)
dlog_print(DLOG_ERROR, LOG_TAG, "calendar disconnect failed: %x\n", error_code);</pre></li></ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="create_event" name="create_evemt" class="items-tit-h2">Creating an Event</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="create_event" name="create_event">Creating an Event</h2>
+
<p>To define and create a new event handle (record), since the Calendar Service uses the event handler mechanism:</p>
<p>Use the <span style="font-family: Courier New,Courier,monospace">calendar_record_create()</span> function with the defined event handle as a parameter to create an event associated to the event handle and an <span style="font-family: Courier New,Courier,monospace">_calendar_event._uri</span> parameter for the event type.</p>
<p>Verify the status of the error code. If the event is created correctly, the function returns <span style="font-family: Courier New,Courier,monospace">CALENDAR_ERROR_NONE</span>. If an error is reported, you can check the error and take appropriate action or stop other operations on the database.</p>
error_code = calendar_record_create(_calendar_event._uri, &event);
if (error_code != CALENDAR_ERROR_NONE)
dlog_print(DLOG_ERROR, LOG_TAG, "calendar_record_create: %x\n", error_code);</pre>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="set_event" name="set_event" class="items-tit-h2">Setting Event Properties</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="set_event" name="set_event">Setting Event Properties</h2>
+
<p>To set the event properties:</p>
<ol><li>Set the event subject.
if (error_code != CALENDAR_ERROR_NONE)
dlog_print(DLOG_ERROR, LOG_TAG, "calendar add alarm failed \n");</pre>
<p>The following alarm tick units are available:</p>
-<ul class="ul"><li><span style="font-family: Courier New,Courier,monospace">CALENDAR_ALARM_TIME_UNIT_MINUTE</span></li>
+<ul><li><span style="font-family: Courier New,Courier,monospace">CALENDAR_ALARM_TIME_UNIT_MINUTE</span></li>
<li><span style="font-family: Courier New,Courier,monospace">CALENDAR_ALARM_TIME_UNIT_HOUR</span></li>
<li><span style="font-family: Courier New,Courier,monospace">CALENDAR_ALARM_TIME_UNIT_DAY</span></li>
<li><span style="font-family: Courier New,Courier,monospace">CALENDAR_ALARM_TIME_UNIT_WEEK</span></li>
if (error_code != CALENDAR_ERROR_NONE)
dlog_print(DLOG_ERROR, LOG_TAG, "calendar add alarm failed \n");</pre></li></ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="insert_event" name="insert_event" class="items-tit-h2">Inserting an Event to the Database</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="insert_event" name="insert_event">Inserting an Event to the Database</h2>
+
<p>To insert an event record:</p>
<ol><li>Use the <span style="font-family: Courier New,Courier,monospace">calendar_db_insert_record()</span> function to insert the newly created event into the Calendar database. The first argument is the event handle, the second is the record ID - a unique ID is assigned to the event you are adding and returned as the second argument. If the event is inserted successfully, the function returns <span style="font-family: Courier New,Courier,monospace">CALENDAR_ERROR_NONE</span>.
<li>After inserting, destroy the used structures:
<pre class="prettyprint">calendar_record_destroy(event, true);</pre></li></ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="get_event" name="get_event" class="items-tit-h2">Getting Events</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="get_event" name="get_event">Getting Events</h2>
+
<p>To retrieve a single event or all events one by one. You can also filter the events by one of the properties:</p>
<ol><li>Get a single event record using its ID.
dlog_print(DLOG_ERROR, LOG_TAG, "db get all records failed: %x\n", error_code);</pre></li>
<li>Filter the list.
-<ol><li>
+<ol type="a"><li>
<p>To get events with filtering, you need a record list and a query:</p>
<pre class="prettyprint">calendar_list_h list = NULL;
calendar_query_h query = NULL;
calendar_query_destroy(query);</pre></li></ol></li>
<li>Iterate the list and read the records.
-<ol><li>Get records from the list using <span style="font-family: Courier New,Courier,monospace">calendar_list_get_current_record_p()</span>, and <span style="font-family: Courier New,Courier,monospace">calendar_list_next()</span> or <span style="font-family: Courier New,Courier,monospace">calendar_list_prev()</span>. Inside the loop, get details of each record.
+<ol type="a"><li>Get records from the list using <span style="font-family: Courier New,Courier,monospace">calendar_list_get_current_record_p()</span>, and <span style="font-family: Courier New,Courier,monospace">calendar_list_next()</span> or <span style="font-family: Courier New,Courier,monospace">calendar_list_prev()</span>. Inside the loop, get details of each record.
<p>Note on the returned values' ownership: some functions have the <span style="font-family: Courier New,Courier,monospace">_p</span> postfix. It means that the returned value must not be freed by the application, as it is a pointer to the data in an existing record.</p>
<pre class="prettyprint">calendar_record_h record;
while (calendar_list_get_current_record_p(list, &record) == CALENDAR_ERROR_NONE)
<p>To get access to a specified data from the record, firstly it is necessary to get its child responsible for the requested type.</p></li></ol></li>
<li>Free the list:
<pre class="prettyprint">calendar_list_destroy(list, true);</pre></li></ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="update_event" name="update_event" class="items-tit-h2">Updating an Event</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+
+ <h2 id="update_event" name="update_event">Updating an Event</h2>
+
<p>To update an event record:</p>
<ol><li>Get the event record handle to update with the ID.
dlog_print(DLOG_ERROR, LOG_TAG, "db update record failed: %x\n", error_code);</pre></li>
<li>When the event handle is no longer needed, use the <span style="font-family: Courier New,Courier,monospace">calendar_record_destroy()</span> function to destroy the event handle and free the allocated memory.
<pre class="prettyprint">calendar_record_destroy(record, true);</pre></li></ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="delete_event" name="delete_event" class="items-tit-h2">Deleting an Event</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="delete_event" name="delete_event">Deleting an Event</h2>
+
<p>To delete an event, call the <span style="font-family: Courier New,Courier,monospace">calendar_db_delete_record()</span> function with <span style="font-family: Courier New,Courier,monospace">_calendar_event._uri</span> as the first parameter and event ID as the second one:</p>
<pre class="prettyprint">int event_id = ... // Acquire event ID
error_code = calendar_db_delete_record(_calendar_event._uri, event_id);
if (error_code != CALENDAR_ERROR_NONE)
dlog_print(DLOG_ERROR, LOG_TAG, "db delete record failed: %x\n", error_code);</pre>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="exception_add" name="exception_add" class="items-tit-h2">Setting Exceptions when Inserting Events</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="exception_add" name="exception_add">Setting Exceptions when Inserting Events</h2>
+
<p>To set an exception date to an event record when creating the event:</p>
<ol><li>Create a recurring event.
<p>The following example creates an event record with the following properties:</p>
-<ul class="ul"><li>Frequency: <span style="font-family: Courier New,Courier,monospace">CALENDAR_RECURRENCE_MONTHLY</span></li>
+<ul><li>Frequency: <span style="font-family: Courier New,Courier,monospace">CALENDAR_RECURRENCE_MONTHLY</span></li>
<li>Interval: 1</li>
<li>Bymonthday: "3, 4, 5"</li>
<li>Range type: count</li>
dlog_print(DLOG_ERROR, LOG_TAG, "calendar db insert record failed: %x\n", error_code);
calendar_record_destroy(event, true);</pre></li></ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="exception_modify" name="exception_modify" class="items-tit-h2">Adding an Exception Date for an Existing Event</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="exception_modify" name="exception_modify">Adding an Exception Date for an Existing Event</h2>
+
<p>To add an exception date to an existing event:</p>
<ol><li>Make sure you have an existing event.</li>
calendar_record_destroy(event, true);</pre></li></ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="monitor_event" name="monitor_event" class="items-tit-h2">Monitoring Event Changes</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="monitor_event" name="monitor_event">Monitoring Event Changes</h2>
+
<p>To register a callback function that listens for event changes:</p>
<ol><li>Register the callback function.
<pre class="prettyprint">error_code = calendar_db_add_changed_cb(_calendar_event._uri, _event_changed_callback, NULL);
calendar_record_destroy(record, true);
}</pre></li></ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="create" name="create" class="items-tit-h2">Creating a Todo</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="create" name="create">Creating a Todo</h2>
+
<p>To define and create a new todo handle record, since the Calendar Service uses a todo handler mechanism:</p>
<p>Use the <span style="font-family: Courier New,Courier,monospace">calendar_record_create()</span> function with the defined todo handle as a parameter to create a todo associated with the todo handle and a <span style="font-family: Courier New,Courier,monospace">_calendar_todo._uri</span> parameter for the todo type.</p>
<p>Verify the status of the error code. If the todo handle is created correctly, the function returns <span style="font-family: Courier New,Courier,monospace">CALENDAR_ERROR_NONE</span>. If an error is reported, check the error and take appropriate action, or stop other operations on the database.</p>
error_code = calendar_record_create(_calendar_todo._uri, &todo);
if (error_code != CALENDAR_ERROR_NONE)
dlog_print(DLOG_ERROR, LOG_TAG, "calendar_record_create: %x\n", error_code);</pre>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="set" name="set" class="items-tit-h2">Setting Todo Properties</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="set" name="set">Setting Todo Properties</h2>
+
<p>To set the todo properties:</p>
<ol><li>Set the todo subject.
<p>To set the subject, call <span style="font-family: Courier New,Courier,monospace">calendar_record_set_str()</span>. This function takes the todo handle (created before) as the first argument, <span style="font-family: Courier New,Courier,monospace">_calendar_todo.summary</span> for the subject type, and the subject, which is string value, as the third argument. The <span style="font-family: Courier New,Courier,monospace">calendar_record_set_str()</span> function returns the status code. If the function returns an error, take appropriate action, such as freeing memory, removing handles, and disconnecting from the service, if needed.</p>
<pre class="prettyprint">error_code = calendar_record_set_int(todo, _calendar_todo.todo_status, CALENDAR_TODO_STATUS_COMPLETED);
if (error_code != CALENDAR_ERROR_NONE)
dlog_print(DLOG_ERROR, LOG_TAG, "set todo_status failed : %x\n", error_code);</pre></li></ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="insert" name="insert" class="items-tit-h2">Inserting a Todo to the Database</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="insert" name="insert">Inserting a Todo to the Database</h2>
+
<p>To insert a todo record:</p>
<ol><li>Use the <span style="font-family: Courier New,Courier,monospace">calendar_db_insert_record()</span> function to insert a newly created todo into the Calendar database. The first argument is the todo handle, the second is the record ID. A unique ID is assigned to the record you are adding, and is returned as the third argument of the called function. If the todo is inserted successfully, the function returns <span style="font-family: Courier New,Courier,monospace">CALENDAR_ERROR_NONE</span>.
<pre class="prettyprint">int id;
dlog_print(DLOG_ERROR, LOG_TAG, "db insert record failed: %x\n", error_code);</pre></li>
<li>After inserting, destroy the used structures:
<pre class="prettyprint">calendar_record_destroy(todo, true);</pre></li></ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="get" name="get" class="items-tit-h2">Getting Todos</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="get" name="get">Getting Todos</h2>
+
<p>To retrieve a single todo or all todos one by one. You can also filter the todos by one of the properties:</p>
<ol><li>Get a single todo record using its ID.
if (error_code != CALENDAR_ERROR_NONE)
dlog_print(DLOG_ERROR, LOG_TAG, "db get all records failed: %x\n", error_code);</pre></li>
<li>Filter the list.
-<ol><li>To get todos with filtering, you need a record list and a query:
+<ol type="a"><li>To get todos with filtering, you need a record list and a query:
<pre class="prettyprint">calendar_list_h list = NULL;
calendar_query_h query = NULL;
calendar_query_destroy(query);</pre></li>
</ol></li>
<li>Iterate the list and read the records.
-<ol><li>Get records from the list using <span style="font-family: Courier New,Courier,monospace">calendar_list_get_current_record_p()</span>, and <span style="font-family: Courier New,Courier,monospace">calendar_list_next()</span> or <span style="font-family: Courier New,Courier,monospace">calendar_list_prev()</span>. Inside the loop, get details of each record.
+<ol type="a"><li>Get records from the list using <span style="font-family: Courier New,Courier,monospace">calendar_list_get_current_record_p()</span>, and <span style="font-family: Courier New,Courier,monospace">calendar_list_next()</span> or <span style="font-family: Courier New,Courier,monospace">calendar_list_prev()</span>. Inside the loop, get details of each record.
<p>Note on the returned values' ownership: some functions have the <span style="font-family: Courier New,Courier,monospace">_p</span> postfix. It means that the returned value must not be freed by the application, as it is a pointer to the data in an existing record.</p>
<pre class="prettyprint">calendar_record_h record;
while (calendar_list_get_current_record_p(list, &record) == CALENDAR_ERROR_NONE)
<li>Free the list:
<pre class="prettyprint">
calendar_list_destroy(list, true);</pre></li></ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="update" name="update" class="items-tit-h2">Updating a Todo</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="update" name="update">Updating a Todo</h2>
+
<p>To update a todo record:</p>
<ol><li>Get the todo record handle to update with the ID.
<pre class="prettyprint">calendar_record_h record;
dlog_print(DLOG_ERROR, LOG_TAG, "db update record failed: %x\n", error_code);</pre></li>
<li>When the todo handle is no longer needed, use the <span style="font-family: Courier New,Courier,monospace">calendar_record_destroy()</span> function to destroy the todo handle and free the allocated memory.
<pre class="prettyprint">calendar_record_destroy(record, true);</pre></li></ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="delete" name="delete" class="items-tit-h2">Deleting a Todo</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="delete" name="delete">Deleting a Todo</h2>
+
<p>To delete a todo, use the <span style="font-family: Courier New,Courier,monospace">calendar_db_delete_record()</span> function with <span style="font-family: Courier New,Courier,monospace">_calendar_todo._uri</span> as the first parameter and the todo ID as the second one.</p>
<pre class="prettyprint">int todo_id = ... // Acquire todo ID
error_code = calendar_db_delete_record(_calendar_todo._uri, todo_id);
if (error_code != CALENDAR_ERROR_NONE)
dlog_print(DLOG_ERROR, LOG_TAG, "db delete record failed: %x\n", error_code);</pre>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="monitor" name="monitor" class="items-tit-h2">Monitoring Todo Changes</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="monitor" name="monitor">Monitoring Todo Changes</h2>
+
<p>To register a callback function that listens for todo changes:</p>
<ol><li>Register the callback function.
calendar_record_destroy(record, true);
}</pre></li></ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="make" name="make" class="items-tit-h2">Making a vCalendar</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="make" name="make">Making a vCalendar</h2>
+
<p>To make a vCalendar stream from an event record:</p>
<ol><li>Get the event record by the event ID.
<pre class="prettyprint">int event_id = ... // Acquire event ID
<li>When the list handle is no longer needed, use the <span style="font-family: Courier New,Courier,monospace">calendar_list_destroy()</span> function to destroy the list handle and free the allocated memory.
<pre class="prettyprint">free(vcalendar_stream);
calendar_list_destroy(list, true);</pre></li></ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="parse" name="parse" class="items-tit-h2">Parsing a vCalendar</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="parse" name="parse">Parsing a vCalendar</h2>
+
<p>To parse a vCalendar from a file and insert to the database:</p>
<pre class="prettyprint">char vcalendar_file_path[512] = {0};
char *resource_path = app_get_resource_path();
return true;
}</pre>
- </div>
- </li>
- </ul>
-</div>
-</div>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a class="opensection" href="#init">Initializing Contacts</a></li>
+ <li><a href="#init">Initializing Contacts</a></li>
<li>Contacts
<ul class="toc">
- <li><a class="opensection" href="#create_contact">Creating a Contact</a></li>
- <li><a class="opensection" href="#set_contact">Setting Contact Properties</a></li>
- <li><a class="opensection" href="#insert_contact">Inserting a Contact to the Database</a></li>
- <li><a class="opensection" href="#get_contact">Getting Contacts</a></li>
- <li><a class="opensection" href="#update_contact">Updating a Contact</a></li>
- <li><a class="opensection" href="#delete_contact">Deleting a Person</a></li>
- <li><a class="opensection" href="#link_contact">Linking and Unlinking Contacts</a></li>
- <li><a class="opensection" href="#manage_contact">Managing Favorites</a></li>
- <li><a class="opensection" href="#monitor_contact">Monitoring Person Changes</a></li>
+ <li><a href="#create_contact">Creating a Contact</a></li>
+ <li><a href="#set_contact">Setting Contact Properties</a></li>
+ <li><a href="#insert_contact">Inserting a Contact to the Database</a></li>
+ <li><a href="#get_contact">Getting Contacts</a></li>
+ <li><a href="#update_contact">Updating a Contact</a></li>
+ <li><a href="#delete_contact">Deleting a Person</a></li>
+ <li><a href="#link_contact">Linking and Unlinking Contacts</a></li>
+ <li><a href="#manage_contact">Managing Favorites</a></li>
+ <li><a href="#monitor_contact">Monitoring Person Changes</a></li>
</ul></li>
<li>Groups
<ul class="toc">
- <li><a class="opensection" href="#create">Creating a Group</a></li>
- <li><a class="opensection" href="#set">Setting Group Properties</a></li>
- <li><a class="opensection" href="#insert">Inserting a Group to the Database</a></li>
- <li><a class="opensection" href="#get">Getting Groups</a></li>
- <li><a class="opensection" href="#update">Updating a Group</a></li>
- <li><a class="opensection" href="#delete">Deleting a Group</a></li>
- <li><a class="opensection" href="#manage">Managing Group Members</a></li>
- <li><a class="opensection" href="#monitor">Monitoring Group Changes</a></li>
+ <li><a href="#create">Creating a Group</a></li>
+ <li><a href="#set">Setting Group Properties</a></li>
+ <li><a href="#insert">Inserting a Group to the Database</a></li>
+ <li><a href="#get">Getting Groups</a></li>
+ <li><a href="#update">Updating a Group</a></li>
+ <li><a href="#delete">Deleting a Group</a></li>
+ <li><a href="#manage">Managing Group Members</a></li>
+ <li><a href="#monitor">Monitoring Group Changes</a></li>
</ul></li>
<li>vCards
<ul class="toc">
- <li><a class="opensection" href="#make">Making a vCard</a></li>
- <li><a class="opensection" href="#parse">Parsing a vCard</a></li>
+ <li><a href="#make">Making a vCard</a></li>
+ <li><a href="#parse">Parsing a vCard</a></li>
</ul></li>
<li>Speed dials
<ul class="toc">
- <li><a class="opensection" href="#sd_create">Creating a Speed Dial</a></li>
- <li><a class="opensection" href="#sd_set">Setting Speed Dial Properties</a></li>
- <li><a class="opensection" href="#sd_insert">Inserting a Speed Dial to the Database</a></li>
- <li><a class="opensection" href="#sd_get">Getting Speed Dials</a></li>
- <li><a class="opensection" href="#sd_update">Updating a Speed Dial</a></li>
- <li><a class="opensection" href="#sd_delete">Deleting a Speed Dial</a></li>
+ <li><a href="#sd_create">Creating a Speed Dial</a></li>
+ <li><a href="#sd_set">Setting Speed Dial Properties</a></li>
+ <li><a href="#sd_insert">Inserting a Speed Dial to the Database</a></li>
+ <li><a href="#sd_get">Getting Speed Dials</a></li>
+ <li><a href="#sd_update">Updating a Speed Dial</a></li>
+ <li><a href="#sd_delete">Deleting a Speed Dial</a></li>
</ul>
</li>
<li>Phone logs
<ul class="toc">
- <li><a class="opensection" href="#pl_create">Creating a Log</a></li>
- <li><a class="opensection" href="#pl_set">Setting Log Properties</a></li>
- <li><a class="opensection" href="#pl_insert">Inserting a Log to the Database</a></li>
- <li><a class="opensection" href="#pl_get">Getting Logs</a></li>
- <li><a class="opensection" href="#pl_delete">Deleting a Log</a></li>
+ <li><a href="#pl_create">Creating a Log</a></li>
+ <li><a href="#pl_set">Setting Log Properties</a></li>
+ <li><a href="#pl_insert">Inserting a Log to the Database</a></li>
+ <li><a href="#pl_get">Getting Logs</a></li>
+ <li><a href="#pl_delete">Deleting a Log</a></li>
</ul>
</li>
<li>Records
<ul class="toc">
- <li><a class="opensection" href="#insert2">Inserting New Records</a></li>
- <li><a class="opensection" href="#get2">Getting Record Details</a></li>
- <li><a class="opensection" href="#list2">Handling Lists</a></li>
- <li><a class="opensection" href="#delete2">Deleting Records</a></li>
- <li><a class="opensection" href="#link2">Linking Persons</a></li>
+ <li><a href="#insert2">Inserting New Records</a></li>
+ <li><a href="#get2">Getting Record Details</a></li>
+ <li><a href="#list2">Handling Lists</a></li>
+ <li><a href="#delete2">Deleting Records</a></li>
+ <li><a href="#link2">Linking Persons</a></li>
</ul></li>
<li>Contact settings
<ul class="toc">
- <li><a class="opensection" href="#settings">Managing Contact Settings</a></li>
- <li><a class="opensection" href="#sim">Managing Contacts on the SIM Card</a></li>
+ <li><a href="#settings">Managing Contact Settings</a></li>
+ <li><a href="#sim">Managing Contacts on the SIM Card</a></li>
</ul></li>
<li>vCard information
<ul class="toc">
- <li><a class="opensection" href="#import">Importing from vCard</a></li>
- <li><a class="opensection" href="#export">Exporting to vCard</a></li>
+ <li><a href="#import">Importing from vCard</a></li>
+ <li><a href="#export">Exporting to vCard</a></li>
</ul></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.guides/html/native/social/contact_n.htm">Contacts Guide</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__MODULE.html">Contacts API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__MODULE.html">Contacts API for Mobile Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Contacts: Managing Contacts and Groups, and Accessing the Contact Database</h1>
- <div class="cont"><div class="static-cont">
+
<p>This tutorial demonstrates how you can manage contacts and groups, and import them to or export them from the vCard format.</p>
+ <table class="note">
+<tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">This feature is supported in mobile applications only.</td>
+ </tr>
+ </tbody>
+ </table>
+
<h2>Warm-up</h2>
<p>Become familiar with the Contacts API basics by learning about:</p>
<ul>
- <li><a class="opensection" href="#init">Initializing Contacts</a>
+ <li><a href="#init">Initializing Contacts</a>
<p>Initialize the contacts for use.</p></li>
<li>Contacts
- <ul><li><a class="opensection" href="#create_contact">Creating a Contact</a>
+ <ul><li><a href="#create_contact">Creating a Contact</a>
<p>Create a new contact.</p></li>
- <li><a class="opensection" href="#set_contact">Setting Contact Properties</a>
+ <li><a href="#set_contact">Setting Contact Properties</a>
<p>Set contact properties, such as name and image.</p></li>
- <li><a class="opensection" href="#insert_contact">Inserting a Contact to the Database</a>
+ <li><a href="#insert_contact">Inserting a Contact to the Database</a>
<p>Insert a contact to the Contacts database.</p></li>
- <li><a class="opensection" href="#get_contact">Getting Contacts</a>
+ <li><a href="#get_contact">Getting Contacts</a>
<p>Retrieve single contacts or a list of contacts.</p></li>
- <li><a class="opensection" href="#update_contact">Updating a Contact</a>
+ <li><a href="#update_contact">Updating a Contact</a>
<p>Update contact details.</p></li>
- <li><a class="opensection" href="#delete_contact">Deleting a Person</a>
+ <li><a href="#delete_contact">Deleting a Person</a>
<p>Delete the person from the database.</p></li>
- <li><a class="opensection" href="#link_contact">Linking and Unlinking Contacts</a>
+ <li><a href="#link_contact">Linking and Unlinking Contacts</a>
<p>Link and unlink contacts to persons.</p></li>
- <li><a class="opensection" href="#manage_contact">Managing Favorites</a>
+ <li><a href="#manage_contact">Managing Favorites</a>
<p>Set or unset a person to be a favorite.</p></li>
- <li><a class="opensection" href="#monitor_contact">Monitoring Person Changes</a>
+ <li><a href="#monitor_contact">Monitoring Person Changes</a>
<p>Receive notifications when changes occur in persons.</p></li>
</ul></li>
<li>Groups
<ul><li><a href="#create">Creating a Group</a>
<p>Create a new group.</p></li>
- <li><a class="opensection" href="#set">Setting Group Properties</a>
+ <li><a href="#set">Setting Group Properties</a>
<p>Set group properties, such as name and image.</p></li>
- <li><a class="opensection" href="#insert">Inserting a Group to the Database</a>
+ <li><a href="#insert">Inserting a Group to the Database</a>
<p>Insert a group to the Contacts database.</p></li>
- <li><a class="opensection" href="#get">Getting Groups</a>
+ <li><a href="#get">Getting Groups</a>
<p>Retrieve single groups or a list of groups.</p></li>
- <li><a class="opensection" href="#update">Updating a Group</a>
+ <li><a href="#update">Updating a Group</a>
<p>Update group details.</p></li>
- <li><a class="opensection" href="#delete">Deleting a Group</a>
+ <li><a href="#delete">Deleting a Group</a>
<p>Delete the group from the database.</p></li>
- <li><a class="opensection" href="#manage">Managing Group Members</a>
+ <li><a href="#manage">Managing Group Members</a>
<p>Add, remove, and retrieve group members.</p></li>
- <li><a class="opensection" href="#monitor">Monitoring Group Changes</a>
+ <li><a href="#monitor">Monitoring Group Changes</a>
<p>Receive notifications when changes occur in groups.</p></li>
</ul></li>
<li>vCards
<ul>
- <li><a class="opensection" href="#make">Making a vCard</a>
+ <li><a href="#make">Making a vCard</a>
<p>Make a vCard stream from a person record.</p></li>
- <li><a class="opensection" href="#parse">Parsing a vCard</a>
+ <li><a href="#parse">Parsing a vCard</a>
<p>Parse a vCard from a file and insert to the database.</p></li>
</ul></li>
<li>Speed dials
<ul>
- <li><a class="opensection" href="#sd_create">Creating a Speed Dial</a>
+ <li><a href="#sd_create">Creating a Speed Dial</a>
<p>Create a new speed dial.</p></li>
- <li><a class="opensection" href="#sd_set">Setting Speed Dial Properties</a>
+ <li><a href="#sd_set">Setting Speed Dial Properties</a>
<p>Set speed dial properties, such as speed dial number and number ID.</p></li>
- <li><a class="opensection" href="#sd_insert">Inserting a Speed Dial to the Database</a>
+ <li><a href="#sd_insert">Inserting a Speed Dial to the Database</a>
<p>Insert a speed dial to the database.</p></li>
- <li><a class="opensection" href="#sd_get">Getting Speed Dials</a>
+ <li><a href="#sd_get">Getting Speed Dials</a>
<p>Retrieve a single speed dial or a list of speed dials.</p></li>
- <li><a class="opensection" href="#sd_update">Updating a Speed Dial</a>
+ <li><a href="#sd_update">Updating a Speed Dial</a>
<p>Update speed dial details.</p></li>
- <li><a class="opensection" href="#sd_delete">Deleting a Speed Dial</a>
+ <li><a href="#sd_delete">Deleting a Speed Dial</a>
<p>Delete the speed dial from the database.</p></li>
</ul></li>
<li>Phone logs
<ul>
- <li><a class="opensection" href="#pl_create">Creating a Log</a>
+ <li><a href="#pl_create">Creating a Log</a>
<p>Create a new log.</p></li>
- <li><a class="opensection" href="#pl_set">Setting Log Properties</a>
+ <li><a href="#pl_set">Setting Log Properties</a>
<p>Set log properties, such as type, time, and address.</p></li>
- <li><a class="opensection" href="#pl_insert">Inserting a Log to the Database</a>
+ <li><a href="#pl_insert">Inserting a Log to the Database</a>
<p>Insert a log to the database.</p></li>
- <li><a class="opensection" href="#pl_get">Getting Logs</a>
+ <li><a href="#pl_get">Getting Logs</a>
<p>Retrieve single log or a list of logs.</p></li>
- <li><a class="opensection" href="#pl_delete">Deleting a Log</a>
+ <li><a href="#pl_delete">Deleting a Log</a>
<p>Delete the log from the database.</p></li>
</ul>
</li></ul>
<ul>
<li>Records
<ul>
- <li><a class="opensection" href="#insert2">Inserting New Records</a>
+ <li><a href="#insert2">Inserting New Records</a>
<p>Add new records to the database.</p></li>
- <li><a class="opensection" href="#get2">Getting Record Details</a>
+ <li><a href="#get2">Getting Record Details</a>
<p>Get information from existing records.</p></li>
- <li><a class="opensection" href="#list2">Handling Lists</a>
+ <li><a href="#list2">Handling Lists</a>
<p>Iterate, filter, and sort record lists.</p></li>
- <li><a class="opensection" href="#delete2">Deleting Records</a>
+ <li><a href="#delete2">Deleting Records</a>
<p>Remove records from the database.</p></li>
- <li><a class="opensection" href="#link2">Linking Persons</a>
+ <li><a href="#link2">Linking Persons</a>
<p>Assign several contacts to one person.</p></li>
</ul></li>
<li>Contact settings
<ul>
- <li><a class="opensection" href="#settings">Managing Contact Settings</a>
+ <li><a href="#settings">Managing Contact Settings</a>
<p>Change the display settings of contacts.</p></li>
- <li><a class="opensection" href="#sim">Managing Contacts on the SIM Card</a>
+ <li><a href="#sim">Managing Contacts on the SIM Card</a>
<p>Check that the SIM card is initialized and import contacts from the SIM card.</p></li>
</ul></li>
<li>vCard information
<ul>
- <li><a class="opensection" href="#import">Importing from vCard</a>
+ <li><a href="#import">Importing from vCard</a>
<p>Import contacts from vCard files.</p></li>
- <li><a class="opensection" href="#export">Exporting to vCard</a>
+ <li><a href="#export">Exporting to vCard</a>
<p>Export contacts to vCard files.</p></li>
</ul></li>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
-
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="init" name="init" class="items-tit-h2">Initializing Contacts</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="init" name="init">Initializing Contacts</h2>
+
<p>To start with the Contact Service:</p>
<ol><li>
<p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__MODULE.html">Contacts</a> API, include the <span style="font-family: Courier New,Courier,monospace"><contacts.h></span> header file in your application:</p>
<li>When the Contacts APIs are not needed anymore, you have to disconnect from the service using the <span style="font-family: Courier New,Courier,monospace">contacts_disconnect()</span> function:
<pre class="prettyprint">error_code = contacts_disconnect();
</pre></li></ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="create_contact" name="create_contact" class="items-tit-h2">Creating a Contact</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="create_contact" name="create_contact">Creating a Contact</h2>
+
<p>Before you insert a record, you need to create a record handle. To create it and assign a new record:</p>
<pre class="prettyprint">contacts_record_h contact;
<p>The first argument determines the type of the created record. Use <span style="font-family: Courier New,Courier,monospace">_contacts_contact._uri</span> to create contact type records.</p>
<p>This record, however, contains no additional information, like a name or phone number. To add them, you must set contact properties by creating additional records and setting them as child records of the contact record. Note that records created this way are objects in the memory, with <span style="font-family: Courier New,Courier,monospace">contacts_record_h</span> type variables as their handles. Changes made to these objects are not reflected in the database until your explicit request, using <span style="font-family: Courier New,Courier,monospace">contacts_db_insert_record()</span> or <span style="font-family: Courier New,Courier,monospace">contacts_db_update_record()</span>.</p>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="set_contact" name="set_contact" class="items-tit-h2">Setting Contact Properties</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="set_contact" name="set_contact">Setting Contact Properties</h2>
+
<p>To set the contact name, birthday, and phone number:</p>
<ol><li>Add the contact name.
-<ol><li>Create a name record:
+<ol type="a"><li>Create a name record:
<pre class="prettyprint">contacts_record_h name;
error_code = contacts_record_create(_contacts_name._uri, &name);
</pre>
<p>The second argument (<span style="font-family: Courier New,Courier,monospace">_contacts_contact.name</span>) is the parent property to which the child record is assigned. See <span style="font-family: Courier New,Courier,monospace">_contacts_contact</span> view description in the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__VIEW__MODULE.html">Contacts</a> API. In the API, the <span style="font-family: Courier New,Courier,monospace">name</span> property is listed as one of the <span style="font-family: Courier New,Courier,monospace">record</span> type properties, which means that other records can be assigned to this property as child records ("single" means that only 1 <span style="font-family: Courier New,Courier,monospace">_contacts_name</span> type child record is allowed). The required type of the child record is specified in the API. </p></li></ol></li>
<li>Add an image.
-<ol><li>Create an image record:
+<ol type="a"><li>Create an image record:
<pre class="prettyprint">contacts_record_h image;
error_code = contacts_record_create(_contacts_image._uri, &image);
</pre></li></ol></li>
<li>Add an event.
<p>You can add a birthday event associated with the contact. An event contains the date and the event type, among other properties.</p>
-<ol><li>Create an event record:
+<ol type="a"><li>Create an event record:
<pre class="prettyprint">contacts_record_h event;
error_code = contacts_record_create(_contacts_event._uri, &event);
</pre></li></ol></li>
<li>Add a phone number.
<p>The phone number is added to a parent record using an alternative method.</p>
-<ol><li>Create a phone number record and set the <span style="font-family: Courier New,Courier,monospace">number</span> property:
+<ol type="a"><li>Create a phone number record and set the <span style="font-family: Courier New,Courier,monospace">number</span> property:
<pre class="prettyprint">contacts_record_h number;
error_code = contacts_record_create(_contacts_number._uri, &number);
<li>Set the number record as the contact's child record:
<pre class="prettyprint">error_code = contacts_record_add_child_record(contact, _contacts_contact.number, number);
</pre></li></ol></li></ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="insert_contact" name="insert_contact" class="items-tit-h2">Inserting a Contact to the Database</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="insert_contact" name="insert_contact">Inserting a Contact to the Database</h2>
<p>To insert a contact:</p>
<li>When the records are in the database, the objects representing them in the memory are no longer needed and must be destroyed.
<pre class="prettyprint">contacts_record_destroy(contact, true);</pre>
<p>If the second parameter is <span style="font-family: Courier New,Courier,monospace">true</span>, child records of the given record (objects representing them in the memory) are also destroyed. This does not depend on the way the child records were added.</p></li></ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="get_contact" name="get_contact" class="items-tit-h2">Getting Contacts</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="get_contact" name="get_contact">Getting Contacts</h2>
<p>To retrieve contact records:</p>
<ol><li><p>A person is an aggregation of one or more contacts associated with the same person. The person is created automatically when inserting a contact record. To use the contact information in your application, you must learn to print basic person information.</p>
<p>To get a single person record:</p>
-<ol><li>
+<ol type="a"><li>
<p>Use the <span style="font-family: Courier New,Courier,monospace">contacts_db_get_record()</span> function with the appropriate <span style="font-family: Courier New,Courier,monospace">person_id</span>:</p>
<pre class="prettyprint">contacts_record_h person = NULL;
const int person_id = ... // Acquire person ID
</pre></li></ol></li>
<li>To get the total person record list:
-<ol><li><p>Use the <span style="font-family: Courier New,Courier,monospace">contacts_db_get_all_records()</span> function:</p>
+<ol
type="a"><li><p>Use the <span style="font-family: Courier New,Courier,monospace">contacts_db_get_all_records()</span> function:</p>
<pre class="prettyprint">contacts_list_h list = NULL;
error_code = contacts_db_get_all_records(_contacts_person._uri, 0, 0, &list);
</tbody>
</table>
-<ol><li><p>To get the records from the list, use the <span style="font-family: Courier New,Courier,monospace">contacts_list_get_current_record_p()</span>, and <span style="font-family: Courier New,Courier,monospace">contacts_list_next()</span> or <span style="font-family: Courier New,Courier,monospace">contacts_list_prev()</span> functions. Get the details of each record in the loop.</p>
+<ol
type="a"><li><p>To get the records from the list, use the <span style="font-family: Courier New,Courier,monospace">contacts_list_get_current_record_p()</span>, and <span style="font-family: Courier New,Courier,monospace">contacts_list_next()</span> or <span style="font-family: Courier New,Courier,monospace">contacts_list_prev()</span> functions. Get the details of each record in the loop.</p>
<pre class="prettyprint">contacts_record_h record;
while (contacts_list_get_current_record_p(list, &record) == CONTACTS_ERROR_NONE)
return gl_person_data;
}</pre></li>
<li>Get person details.
-<ul class="ul">
+<ul>
<li>Get the display name.
<p>Assuming that you have the person record handle (<span style="font-family: Courier New,Courier,monospace">contacts_record_h</span>), you can access the <span style="font-family: Courier New,Courier,monospace">display_name</span> property. You can read the display name property and print it:</p>
<pre class="prettyprint">static bool _get_display_name(contacts_record_h record, char **display_name)
contacts_list_destroy(list, true);</pre>
</li></ol></li>
<li>To get the filtered person record list:
- <ol>
+ <ol type="a">
<li>Use the <span style="font-family: Courier New,Courier,monospace">contacts_db_get_records_with_query()</span> function to filter the list with parameters:
- <ol>
+ <ol type="a">
<li>To get a person list with filtering, create a record list and a query:
<pre class="prettyprint">
contacts_list_h list = NULL;
</ol>
</li>
<li>To get the searched person record list:
- <ol>
+ <ol type="a">
<li>Use the <span style="font-family: Courier New,Courier,monospace">contacts_db_search_records()</span> function.
<p>The Contact Service provides an API for the contact search. The <span style="font-family: Courier New,Courier,monospace">contacts_db_search_records()</span> function provides an easy way to find records based on a given keyword. The following example shows how to find the contact records which contain the "John" keyword:</p>
</li>
</ol>
+ <h2 id="update_contact" name="update_contact">Updating a Contact</h2>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="update_contact" name="update_contact" class="items-tit-h2">Updating a Contact</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
<p>To change the name, birthday, and phone number of an existing contact:</p>
<ol><li>Get the contact.
<p>To modify a record, you need to have a handle (<span style="font-family: Courier New,Courier,monospace">contacts_record_h</span> type variable) to a memory object representing the record in the database. One of the ways to acquire it is to use the contact ID:</p>
</pre>
<p>Such handles are also provided by search functions, such as <span style="font-family: Courier New,Courier,monospace">contacts_db_get_records_with_query()</span>.</p></li>
<li>Change the name.
-<ol><li><p>To modify the contact name, get the name record with the <span style="font-family: Courier New,Courier,monospace">contacts_record_get_child_record_at_p()</span> function, which provides a list of the child records of a given type.</p>
+<ol
type="a"><li><p>To modify the contact name, get the name record with the <span style="font-family: Courier New,Courier,monospace">contacts_record_get_child_record_at_p()</span> function, which provides a list of the child records of a given type.</p>
<pre class="prettyprint">contacts_record_h name = NULL;
error_code = contacts_record_get_child_record_at_p(contact, _contacts_contact.name, 0, &name);
</pre>
<p>This only changes the data in the memory object, not in the database. To insert the new value, the <span style="font-family: Courier New,Courier,monospace">name</span> record must be inserted. However, if you acquire this record using <span style="font-family: Courier New,Courier,monospace">contacts_record_get_child_record_at_p()</span> (as in this example), you only need to update the parent record.</p></li></ol></li>
<li>Change the birthday event.
-<ol><li>If only 1 event is set for the contact, you can call <span style="font-family: Courier New,Courier,monospace">contacts_record_get_child_record_at_p()</span> to get the event record. If there are more events, you must iterate over the child records.
+<ol type="a"><li>If only 1 event is set for the contact, you can call <span style="font-family: Courier New,Courier,monospace">contacts_record_get_child_record_at_p()</span> to get the event record. If there are more events, you must iterate over the child records.
<pre class="prettyprint">contacts_record_h event = NULL;
error_code = contacts_record_get_child_record_at_p(contact, _contacts_contact.event, 0, &event);
</pre></li>
</pre></li>
<li>When the record handle is no more needed, use the <span style="font-family: Courier New,Courier,monospace">contacts_record_destroy()</span> function to destroy the record handle and free the allocated memory:
<pre class="prettyprint">contacts_record_destroy(contact, true);</pre></li></ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="delete_contact" name="delete_contact" class="items-tit-h2">Deleting a Person</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="delete_contact" name="delete_contact">Deleting a Person</h2>
+
<p>To delete a person, call the <span style="font-family: Courier New,Courier,monospace">contacts_db_delete_record()</span> function with <span style="font-family: Courier New,Courier,monospace">_contacts_person._uri</span> as the first parameter and the person ID as the second one:</p>
<pre class="prettyprint">int person_id = ... // Acquire person ID
error_code = contacts_db_delete_record(_contacts_person._uri, person_id);
</pre>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="link_contact" name="link_contact" class="items-tit-h2">Linking and Unlinking Contacts</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="link_contact" name="link_contact">Linking and Unlinking Contacts</h2>
+
<p>To link and unlink contacts (manually and automatically):</p>
-<ul class="ul"><li>To link a person to another person manually, call the <span style="font-family: Courier New,Courier,monospace">contacts_person_link_person()</span> function with base person ID as the first parameter and another person ID as the second one.
+<ul><li>To link a person to another person manually, call the <span style="font-family: Courier New,Courier,monospace">contacts_person_link_person()</span> function with base person ID as the first parameter and another person ID as the second one.
<pre class="prettyprint">int person_id1 = ... // Acquire base person ID
int person_id2 = ... // Acquire another person ID
error_code = contacts_person_unlink_contact(person_id, contact_id, &unlinked_person_id);
</pre></li></ul>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="manage_contact" name="manage_contact" class="items-tit-h2">Managing Favorites</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="manage_contact" name="manage_contact">Managing Favorites</h2>
+
<p>To manage person favorites:</p>
-<ul class="ul"><li>To set a person as favorite when creating a contact, use the <span style="font-family: Courier New,Courier,monospace">is_favorite</span> property of the <span style="font-family: Courier New,Courier,monospace">person</span> record. If the property is set to <span style="font-family: Courier New,Courier,monospace">true</span> when creating a contact, the person is set as favorite:
+<ul><li>To set a person as favorite when creating a contact, use the <span style="font-family: Courier New,Courier,monospace">is_favorite</span> property of the <span style="font-family: Courier New,Courier,monospace">person</span> record. If the property is set to <span style="font-family: Courier New,Courier,monospace">true</span> when creating a contact, the person is set as favorite:
<pre class="prettyprint">contacts_record_h contact = NULL;
error_code = CONTACTS_ERROR_NONE;
error_code = contacts_db_update_record(person);
contacts_record_destroy(person, true);</pre></li></ul>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="monitor_contact" name="monitor_contact" class="items-tit-h2">Monitoring Person Changes</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="monitor_contact" name="monitor_contact">Monitoring Person Changes</h2>
+
<p>To register a callback function to listen for person changes:</p>
<ol><li>Register the callback function.
<pre class="prettyprint">error_code = contacts_db_add_changed_cb(_contacts_person._uri, _person_changed_callback, NULL);
contacts_record_destroy(record, true);
}</pre></li></ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="create" name="create" class="items-tit-h2">Creating a Group</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="create" name="create">Creating a Group</h2>
+
<p>To create a new group record:</p>
<pre class="prettyprint">contacts_record_h group = NULL;
error_code = contacts_record_create(_contacts_group._uri, &group);
</pre>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="set" name="set" class="items-tit-h2">Setting Group Properties</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="set" name="set">Setting Group Properties</h2>
+
<p>To set group properties:</p>
<ol><li>Set the group name.
free(resource_path);
error_code = contacts_record_set_str(group, _contacts_group.ringtone_path, temp_path);
</pre></li></ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="insert" name="insert" class="items-tit-h2">Inserting a Group to the Database</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="insert" name="insert">Inserting a Group to the Database</h2>
+
<p>To insert a group record:</p>
<ol><li>Use the <span style="font-family: Courier New,Courier,monospace">contacts_db_insert_record()</span> function to insert a newly created group into the Contacts database.
<p> The first argument is the group record handle, the second is the record ID. A unique ID is assigned to the record your are adding, and is returned as the third argument of the called function. If the group is inserted successfully, the function returns <span style="font-family: Courier New,Courier,monospace">CONTACTS_ERROR_NONE</span>.</p>
</pre></li>
<li>After inserting, the used structures have to be destroyed:
<pre class="prettyprint">contacts_record_destroy(group, true);</pre></li></ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="get" name="get" class="items-tit-h2">Getting Groups</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="get" name="get">Getting Groups</h2>
+
<p>To get all of the group records one by one, or to filter them by one of the properties:</p>
<ol><li>To get a single group record:
-<ol><li><p>Use the <span style="font-family: Courier New,Courier,monospace">contacts_db_get_record()</span> function with the appropriate <span style="font-family: Courier New,Courier,monospace">group_id</span>:</p>
+<ol
type="a"><li><p>Use the <span style="font-family: Courier New,Courier,monospace">contacts_db_get_record()</span> function with the appropriate <span style="font-family: Courier New,Courier,monospace">group_id</span>:</p>
<pre class="prettyprint">contacts_record_h group;
int group_id = ... // Acquire group ID
error_code = contacts_db_get_record(_contacts_group._uri, group_id, &group);
<pre class="prettyprint">contacts_record_destroy(group, true);</pre></li></ol></li>
<li>To get the total group record list:
-<ol><li>
+<ol type="a"><li>
<p>Use the <span style="font-family: Courier New,Courier,monospace">contacts_db_get_all_records()</span> function:</p>
<pre class="prettyprint">contacts_list_h list = NULL;
error_code = contacts_db_get_all_records(_contacts_group._uri, 0, 0, &list);
</tr>
</tbody>
</table>
- <ol>
+ <ol type="a">
<li>
<p>To get the records from the list, use the <span style="font-family: Courier New,Courier,monospace">contacts_list_get_current_record_p()</span>, and <span style="font-family: Courier New,Courier,monospace">contacts_list_next()</span> or <span style="font-family: Courier New,Courier,monospace">contacts_list_prev()</span> functions. Get the details of each record in the loop.</p>
</ol>
</li>
<li>To get the filtered group record list:
- <ol>
+ <ol type="a">
<li>Use the <span style="font-family: Courier New,Courier,monospace">contacts_db_get_records_with_query()</span> function to filter the list with parameters:
- <ol>
+ <ol type="a">
<li>To get groups with filtering, you need a record list and a query:
<pre class="prettyprint">contacts_list_h list = NULL;
contacts_query_h query = NULL;
</tbody>
</table>
-<ol><li><p>To get the records from the list, use the <span style="font-family: Courier New,Courier,monospace">contacts_list_get_current_record_p()</span>, and <span style="font-family: Courier New,Courier,monospace">contacts_list_next()</span> or <span style="font-family: Courier New,Courier,monospace">contacts_list_prev()</span> functions. Get the details of each record in the loop.</p>
+<ol
type="a"><li><p>To get the records from the list, use the <span style="font-family: Courier New,Courier,monospace">contacts_list_get_current_record_p()</span>, and <span style="font-family: Courier New,Courier,monospace">contacts_list_next()</span> or <span style="font-family: Courier New,Courier,monospace">contacts_list_prev()</span> functions. Get the details of each record in the loop.</p>
<pre class="prettyprint">contacts_record_h record;
while (contacts_list_get_current_record_p(list, &record) == CONTACTS_ERROR_NONE)
<pre class="prettyprint">
contacts_list_destroy(list, true);</pre>
</li></ol></li></ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="update" name="update" class="items-tit-h2">Updating a Group</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="update" name="update">Updating a Group</h2>
+
<p>To change the name and image of an existing person:</p>
<ol><li>Get the group.
<p>To modify a record, you need to have a handle (<span style="font-family: Courier New,Courier,monospace">contacts_record_h type</span> variable) to a memory object representing the record in the database. One of the ways to acquire it is to use the group ID:</p>
<li>Clean up.
<p>When the record handle is no longer needed, use the <span style="font-family: Courier New,Courier,monospace">contacts_record_destroy()</span> function to destroy the record handle and free the allocated memory.</p>
<pre class="prettyprint">contacts_record_destroy(group, true);</pre></li></ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="delete" name="delete" class="items-tit-h2">Deleting a Group</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="delete" name="delete">Deleting a Group</h2>
+
<p>To delete a group, call the <span style="font-family: Courier New,Courier,monospace">contacts_db_delete_record()</span> function with <span style="font-family: Courier New,Courier,monospace">_contacts_group._uri</span> as the first parameter and group ID as the second one;</p>
<pre class="prettyprint">int group_id = ... // Acquire group ID
error_code = contacts_db_delete_record(_contacts_group._uri, group_id);
</pre>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="manage" name="manage" class="items-tit-h2">Managing Group Members</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="manage" name="manage">Managing Group Members</h2>
+
<p>To manage group members:</p>
-<ul class="ul"><li>To add a group member, you need to know the contact ID and the group ID. Then you need to call <span style="font-family: Courier New,Courier,monospace">contacts_group_add_contact()</span>.
+<ul><li>To add a group member, you need to know the contact ID and the group ID. Then you need to call <span style="font-family: Courier New,Courier,monospace">contacts_group_add_contact()</span>.
<pre class="prettyprint">int contact_id = ... // Acquire contact ID
int group_id = ... // Acquire group ID
<pre class="prettyprint">contacts_list_destroy(list, true);
contacts_filter_destroy(filter);
contacts_query_destroy(query);</pre></li></ol></li></ul>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="monitor" name="monitor" class="items-tit-h2">Monitoring Group Changes</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="monitor" name="monitor">Monitoring Group Changes</h2>
+
<p>To register a callback function to listen for group changes:</p>
<ol><li>Register the callback function.
<p>The code below shows how to register a callback function to listen for group changes.</p>
contacts_record_destroy(record, true);
}</pre></li></ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="make" name="make" class="items-tit-h2">Making a vCard</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="make" name="make">Making a vCard</h2>
+
<p>To make a vCard stream from a person record:</p>
<ol><li>Get the person record by the person ID.
<pre class="prettyprint">int person_id = ... // Acquire person ID
<pre class="prettyprint">free(vcard_stream);
contacts_record_destroy(record, true);</pre>
</li> </ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="parse" name="parse" class="items-tit-h2">Parsing a vCard</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="parse" name="parse">Parsing a vCard</h2>
<p>To parse a vCard from a file and insert to the database:</p>
<pre class="prettyprint">
return true;
}</pre>
- </div>
- </li>
-<li>
- <div class="devicespec-tit">
- <h2 id="sd_create" name="sd_create" class="items-tit-h2">Creating a Speed Dial</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="sd_create" name="sd_create">Creating a Speed Dial</h2>
+
<p>To create a speed dial record:</p>
<pre class="prettyprint">
contacts_record_h speeddial;
error_code = contacts_record_create(_contacts_speeddial._uri, &speeddial);
</pre>
<p>The first argument determines the type of the created record. Use <span style="font-family: Courier New,Courier,monospace">_contacts_speeddial._uri</span> to create speed dial type records.</p>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="sd_set" name="sd_set" class="items-tit-h2">Setting Speed Dial Properties</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="sd_set" name="sd_set">Setting Speed Dial Properties</h2>
+
<p>To set speed dial properties:</p>
<ol>
<li>Set the speed dial number.
</tbody>
</table>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="sd_insert" name="sd_insert" class="items-tit-h2">Inserting a Speed Dial to the Database</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="sd_insert" name="sd_insert">Inserting a Speed Dial to the Database</h2>
+
<p>To insert a speed dial record:</p>
<ol><li>Use the <span style="font-family: Courier New,Courier,monospace">contacts_db_insert_record()</span> function to insert a newly created speed dial into the Contacts database. The first argument is the speed dial record handle, the second is the speed dial number. If the speed dial is inserted successfully, the function returns <span style="font-family: Courier New,Courier,monospace">CONTACTS_ERROR_NONE</span>.
<pre class="prettyprint">
</pre>
</li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="sd_get" name="sd_get" class="items-tit-h2">Getting Speed Dials</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="sd_get" name="sd_get">Getting Speed Dials</h2>
+
<p>To get all of the speed dial records one by one, or to filter them by one of the properties:</p>
<ol>
<li>To get a single speed dial record:
-<ol>
+<ol type="a">
<li><p>Use the <span style="font-family: Courier New,Courier,monospace">contacts_db_get_record()</span> function with the appropriate <span style="font-family: Courier New,Courier,monospace">speeddial_id</span>:</p>
<pre class="prettyprint">
contacts_record_h speeddial;
<pre class="prettyprint">contacts_record_destroy(speeddial, true);</pre></li></ol></li>
<li>To get the total speed dial record list:
-<ol><li>Use the <span style="font-family: Courier New,Courier,monospace">contacts_db_get_all_records()</span> function:
+<ol type="a"><li>Use the <span style="font-family: Courier New,Courier,monospace">contacts_db_get_all_records()</span> function:
<pre class="prettyprint">
contacts_list_h list = NULL;
error_code = contacts_db_get_all_records(_contacts_speeddial._uri, 0, 0, &list);
</ol>
</li>
<li>To get the filtered speed dial record list:
- <ol>
+ <ol type="a">
<li>Use the <span style="font-family: Courier New,Courier,monospace">contacts_db_get_records_with_query()</span> function.
- <ol>
+ <ol type="a">
<li>Create a record list and query:
<pre class="prettyprint">
<pre class="prettyprint">
contacts_list_destroy(list, true);</pre></li>
</ol></li></ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="sd_update" name="sd_update" class="items-tit-h2">Updating a Speed Dial</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="sd_update" name="sd_update">Updating a Speed Dial</h2>
+
<p>To change the number ID of an existing speed dial:</p>
<ol>
<li>Get the speed dial.
</pre>
</li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="sd_delete" name="sd_delete" class="items-tit-h2">Deleting a Speed Dial</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="sd_delete" name="sd_delete">Deleting a Speed Dial</h2>
+
<p>To delete a speed dial, call the <span style="font-family: Courier New,Courier,monospace">contacts_db_delete_record()</span> function with <span style="font-family: Courier New,Courier,monospace">_contacts_speeddial._uri</span> as the first parameter and speed dial number as the second one;</p>
<pre class="prettyprint">
int speeddial_number = ... // Acquire speed dial number
error_code = contacts_db_delete_record(_contacts_speeddial._uri, speeddial_number);
</pre>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="pl_create" name="pl_create" class="items-tit-h2">Creating a Log</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="pl_create" name="pl_create">Creating a Log</h2>
+
<p>To create a log record:</p>
<pre class="prettyprint">
contacts_record_h log;
dlog_print(DLOG_ERROR, LOG_TAG, "contacts record create failed: %x", error_code);
</pre>
<p>The first argument determines the type of the created record. Use <span style="font-family: Courier New,Courier,monospace">_contacts_phone_log._uri</span> to create log type records.</p>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="pl_set" name="pl_set" class="items-tit-h2">Setting Log Properties</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="pl_set" name="pl_set">Setting Log Properties</h2>
+
<p>To set log properties:</p>
<ol>
<li>Set the log type.
<p>Log time means the number of seconds since 1970-01-01 00:00:00 (UTC). The <span style="font-family: Courier New,Courier,monospace">extra_data1</span> property means the <span style="font-family: Courier New,Courier,monospace">message_id</span>, <span style="font-family: Courier New,Courier,monospace">email_id</span>, or duration (seconds) of a call. The address property means a number or an email.</p>
</li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="pl_insert" name="pl_insert" class="items-tit-h2">Inserting a Log to the Database</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="pl_insert" name="pl_insert">Inserting a Log to the Database</h2>
+
<p>To insert a log record:</p>
<ol>
<li>Use the <span style="font-family: Courier New,Courier,monospace">contacts_db_insert_record()</span> function to insert a newly created log into the Contacts database. The first argument is the log record handle, the second is the record ID. If the log is inserted successfully, the function returns <span style="font-family: Courier New,Courier,monospace">CONTACTS_ERROR_NONE</span>.
<pre class="prettyprint">contacts_record_destroy(log, true);</pre>
</li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="pl_get" name="pl_get" class="items-tit-h2">Getting Logs</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="pl_get" name="pl_get">Getting Logs</h2>
+
<p>To get all log records one by one, or to filter them by one of the properties:</p>
<ol>
<li>To get a single log record:
-<ol><li><p>Use the <span style="font-family: Courier New,Courier,monospace">contacts_db_get_record()</span> function with the appropriate <span style="font-family: Courier New,Courier,monospace">log_id</span>:</p>
+<ol
type="a"><li><p>Use the <span style="font-family: Courier New,Courier,monospace">contacts_db_get_record()</span> function with the appropriate <span style="font-family: Courier New,Courier,monospace">log_id</span>:</p>
<pre class="prettyprint">contacts_record_h log;
int log_id = ... // Acquire log ID
error_code = contacts_db_get_record(_contacts_phone_log._uri, log_id, &log);
<pre class="prettyprint">contacts_record_destroy(log, true);</pre></li></ol>
</li>
<li>To get the total log record list:
-<ol><li><p>Use the <span style="font-family: Courier New,Courier,monospace">contacts_db_get_all_records()</span> function:</p>
+<ol
type="a"><li><p>Use the <span style="font-family: Courier New,Courier,monospace">contacts_db_get_all_records()</span> function:</p>
<pre class="prettyprint">
contacts_list_h list = NULL;
error_code = contacts_db_get_all_records(_contacts_phone_log._uri, 0, 0, &list);
</ol>
</li>
<li>To get the filtered log record list:
- <ol>
+ <ol type="a">
<li>Use the <span style="font-family: Courier New,Courier,monospace">contacts_db_get_records_with_query()</span> function.
- <ol>
+ <ol type="a">
<li>Create a record list and query:
<pre class="prettyprint">
contacts_list_h list = NULL;
contacts_list_destroy(list, true);</pre></li>
</ol></li></ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="pl_delete" name="pl_delete" class="items-tit-h2">Deleting a Log</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="pl_delete" name="pl_delete">Deleting a Log</h2>
+
<p>To delete a log, use the <span style="font-family: Courier New,Courier,monospace">contacts_db_delete_record()</span> function with <span style="font-family: Courier New,Courier,monospace">_contacts_phone_log._uri</span> as the first parameter and log ID as the second one:</p>
<pre class="prettyprint">
int log_id = ... // Acquire log ID
if (error_code != CONTACTS_ERROR_NONE)
dlog_print(DLOG_ERROR, LOG_TAG, "contacts db delete record failed: %x", error_code);
</pre>
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="insert2" name="insert2" class="items-tit-h2">Inserting New Records</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="insert2" name="insert2">Inserting New Records</h2>
+
<p>To insert a new record:</p>
<ol>
<li>Set properties.
<p>Set the properties of the newly created record. Almost every property in the contact view is a record itself, so create more records, as needed. The following example shows how to add an address record to a contact.</p>
-<ol>
+<ol type="a">
<li>Create a new record.
<p>Use the address view because the added record is an address:</p>
</li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="get2" name="get2" class="items-tit-h2">Getting Record Details</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="get2" name="get2">Getting Record Details</h2>
+
<p>To find all records and get their details:</p>
<ol>
</li>
<li>Get details through a structure.
-<ol><li><p>For more record details, use a structure to get them.</p>
+<ol
type="a"><li><p>For more record details, use a structure to get them.</p>
<p>The memory for the record data is allocated and the data is copied from the record by functions listed in the following step.</p>
<pre class="prettyprint">
<li>Retrieve record data into the structure.
<p>Contacts are organized in a parent-child structure. To access specified data from a record, get the child responsible for the requested type using the <span style="font-family: Courier New,Courier,monospace;">contacts_record_get_child_record_at_p()</span> function (for the property lists, see <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__VIEW__MODULE.html">View/Property</a>). Do not pass any data returned by a function with the <span style="font-family: Courier New,Courier,monospace;">_p</span> suffix to the <span style="font-family: Courier New,Courier,monospace;">free()</span> function.</p>
-<ul
class="ul"><li><p>To get the name details, get the <span style="font-family: Courier New,Courier,monospace;">_contacts_contact.name</span> (representing the child) from the <span style="font-family: Courier New,Courier,monospace;">r_contact</span> parent. Both structures have the <span style="font-family: Courier New,Courier,monospace;">contacts_record_h</span> type. After obtaining a child record, get the desired data from it using the <span style="font-family: Courier New,Courier,monospace;">contacts_record_get_str()</span> function.</p>
+<ul><li><p>To get the name details, get the <span style="font-family: Courier New,Courier,monospace;">_contacts_contact.name</span> (representing the child) from the <span style="font-family: Courier New,Courier,monospace;">r_contact</span> parent. Both structures have the <span style="font-family: Courier New,Courier,monospace;">contacts_record_h</span> type. After obtaining a child record, get the desired data from it using the <span style="font-family: Courier New,Courier,monospace;">contacts_record_get_str()</span> function.</p>
<pre class="prettyprint">
static bool _get_contact_last(contacts_record_h r_contact, char **last)
</pre></li>
<li><p>To get a contact number, check whether it exists using the <span style="font-family: Courier New,Courier,monospace;">contacts_record_get_bool()</span> function. If it exists, use the various <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__QUERY__MODULE.html">Query</a> and <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__FILTER__MODULE.html">Filter</a> functions from the Contacts API to make a query to get a list. At the end, free any data returned by a function not containing the <span style="font-family: Courier New,Courier,monospace;">_p</span> suffix.</p>
-<ul class="ul"><li>Get a list of all numbers and filter the list to get the default:
+<ul><li>Get a list of all numbers and filter the list to get the default:
<pre class="prettyprint">
static bool _get_contact_number(contacts_record_h r_contact, char **number)
{
</li></ol></li>
<li>Clean up.
-<ol><li><p>Destroy the <span style="font-family: Courier New,Courier,monospace;">contacts_list_h</span> list.</p>
+<ol
type="a"><li><p>Destroy the <span style="font-family: Courier New,Courier,monospace;">contacts_list_h</span> list.</p>
<p>When the access to the database is no longer needed, disconnect from the service using the <span style="font-family: Courier New,Courier,monospace;">contact_disconnect()</span> function.</p>
<pre class="prettyprint">
</pre></li></ol>
</li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="list2" name="list2" class="items-tit-h2">Handling Lists</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="list2" name="list2">Handling Lists</h2>
<p>To access multiple records using lists and contact property filters, and to sort records:</p>
<ol>
<li>Get a record list.
-<ul class="ul"><li>To get all records:
+<ul><li>To get all records:
<p>The following function retrieves all records and returns the result list. After all operations, the list must be released with the <span style="font-family: Courier New,Courier,monospace;">contacts_list_destroy()</span> function.</p>
<pre class="prettyprint">
</pre>
</li>
<li>To filter and get specific records:
-<ol>
+<ol type="a">
<li>Create a query for a list.
<p>To filter or sort records, you need a record list and query:</p>
<p>To read records:</p>
-<ul class="ul"><li>To get only a few details:
+<ul><li>To get only a few details:
<pre class="prettyprint">
contacts_record_h record;
<li>Insert the list to the database.
<p>You can insert a whole list to the database. This can be useful when you have several records to create and you want to insert them all at once.</p>
-<ol>
+<ol type="a">
<li>If you have a list, use it or create a new one:
<pre class="prettyprint">
</li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="delete2" name="delete2" class="items-tit-h2">Deleting Records</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="delete2" name="delete2">Deleting Records</h2>
+
<p>To delete records from the contact database, you need to know their ID:</p>
<pre class="prettyprint">
<pre class="prettyprint">
contacts_record_get_int(record, _contacts_contact.id, &id);
</pre>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="link2" name="link2" class="items-tit-h2">Linking Persons</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="link2" name="link2">Linking Persons</h2>
<p>To link persons (a useful joining method if there are several contacts assigned to one person):</p>
<li>Get default properties.
<p>Get the default property values of a person with the <span style="font-family: Courier New,Courier,monospace;">contacts_person_get_default_property()</span> function:</p>
-<ol><li><p>Get the ID of the default email details:</p>
+<ol
type="a"><li><p>Get the ID of the default email details:</p>
<pre class="prettyprint">
int person_email_number;
<li>Unlink persons.
<p>To unlink a contact using the <span style="font-family: Courier New,Courier,monospace;">contacts_person_unlink_contact()</span> function:</p>
-<ol><li><p>If you have the record handle, get the contact ID: </p>
+<ol
type="a"><li><p>If you have the record handle, get the contact ID: </p>
<pre class="prettyprint">
int person_id;
</pre></li></ol>
</li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="settings" name="settings" class="items-tit-h2">Managing Contact Settings</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="settings" name="settings">Managing Contact Settings</h2>
+
<p>To manage the display settings of contacts:</p>
<ol>
<li>Track the order changes with callbacks.
<p>To track changes in the display and sorting orders:</p>
-<ol><li>Register callbacks with the <span style="font-family: Courier New,Courier,monospace;">contacts_setting_add_name_display_order_changed_cb()</span> and <span style="font-family: Courier New,Courier,monospace;">contacts_setting_add_name_sorting_order_changed_cb()</span> functions. </li>
+<ol type="a"><li>Register callbacks with the <span style="font-family: Courier New,Courier,monospace;">contacts_setting_add_name_display_order_changed_cb()</span> and <span style="font-family: Courier New,Courier,monospace;">contacts_setting_add_name_sorting_order_changed_cb()</span> functions. </li>
<li>Define the callbacks themselves:
<pre class="prettyprint">
static void display_changed_cb(contacts_name_display_order_e name_display_order, void *user_data)
</li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="sim" name="sim" class="items-tit-h2">Managing Contacts on the SIM Card</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="sim" name="sim">Managing Contacts on the SIM Card</h2>
+
<p>To check whether the SIM card is initialized and then import contacts from the SIM card:</p>
<ol>
<li>Check whether the SIM card is initialized.
</li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="import" name="import" class="items-tit-h2">Importing from vCard</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="import" name="import">Importing from vCard</h2>
+
<p>To import contacts from all vCard files from a specified directory:</p>
-<ul class="ul">
+<ul>
<li>Get contact records from a stream.
<p>To receive a records list from the vCard stream, use the <span style="font-family: Courier New,Courier,monospace;">contacts_vcard_parse_to_contacts()</span> function. Afterwards, the received list is ready to use and you can perform the iteration on the list.</p>
</li>
<li>Import the vCard stream.
-<ul
class="ul"><li><p>Get all the files with a .vcf extension from the directory. It can be done through dirent structures available in the <span style="font-family: Courier New,Courier,monospace;"><dirent.h></span> header. The following example gets the path to every file in a directory:</p>
+<ul><li><p>Get all the files with a .vcf extension from the directory. It can be done through dirent structures available in the <span style="font-family: Courier New,Courier,monospace;"><dirent.h></span> header. The following example gets the path to every file in a directory:</p>
<pre class="prettyprint">
char folder[] = "/tmp";
</pre>
</li>
</ul>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="export" name="export" class="items-tit-h2">Exporting to vCard</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="export" name="export">Exporting to vCard</h2>
+
<p>To export your contacts to a vCard file:</p>
<ol>
<li>Export contacts to a file.
-<ul
class="ul"><li><p>To export a contact from the <span style="font-family: Courier New,Courier,monospace;">_contacts_contact</span> view to the vCard format, use the <span style="font-family: Courier New,Courier,monospace;">contacts_vcard_make_from_contact()</span> function.</p></li>
+<ul><li><p>To export a contact from the <span style="font-family: Courier New,Courier,monospace;">_contacts_contact</span> view to the vCard format, use the <span style="font-family: Courier New,Courier,monospace;">contacts_vcard_make_from_contact()</span> function.</p></li>
<li><p>To export details from the <span style="font-family: Courier New,Courier,monospace;">_contacts_person</span> view, use the <span style="font-family: Courier New,Courier,monospace;">contacts_vcard_make_from_person()</span> function. If you need to export details from the <span style="font-family: Courier New,Courier,monospace;">_contacts_my_profile</span> view, use the <span style="font-family: Courier New,Courier,monospace;">contacts_vcard_make_from_my_profile()</span> function.</p></li></ul>
contacts_list_destroy(list, true);
</pre>
- </div>
- </li>
-
- </ul>
-</div>
-</div>
-
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
</script>
</body>
-</html>
+</html>
\ No newline at end of file
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a href="../../../../org.tizen.guides/html/native/phonenumber_util_n.htm">Phonenumber-utils Guide</a></li>
+ <li><a href="../../../../org.tizen.guides/html/native/social/phonenumber_util_n.htm">Phonenumber-utils Guide</a></li>
<li><a href="../../../../org.tizen.native.mobile.apireference/XX.html">Phonenumber-utils API for Mobile Native</a></li>
<li><a href="../../../../org.tizen.native.wearable.apireference/XX.html">Phonenumber-utils API for Wearable Native</a></li>
</ul>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.guides/html/native/social/social_guide_n.htm">Social Guides</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__FRAMEWORK.html">Social API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__FRAMEWORK.html">Social API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SOCIAL__FRAMEWORK.html">Social API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<h1>Social: Managing Personal Data</h1>
- <p>The social tutorials demonstrate how to use the following features in creating Tizen mobile native applications:</p>
+ <p>The social tutorials demonstrate how to use the following features in creating Tizen native applications:</p>
+ <ul>
+ <li><a href="phonenumber_util_tutorial_n.htm">Phonenumber-utils: Parsing and Formatting Phone Numbers</a>
+ <p>Demonstrates how you can parse and format phone numbers.</p></li>
+ </ul>
+
+ <p>The following tutorials apply in <span style="color: red">mobile applications only</span>:</p>
<ul>
<li><a href="account_tutorial_n.htm">Account Manager: Managing Account Information on the Device</a> <p>Demonstrates how you can connect to and disconnect from the Account Service, create, delete, and update accounts in the account database, and manage account information.</p></li>
<li><a href="calendar_tutorial_n.htm">Calendar: Managing Calendar Events and Accessing the Calendar Database</a> <p> Demonstrates how you can manage calendars, events, and tasks.</p> </li>
<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>Sync Adapter: Making sync mechanism implementation easy</title>
+ <title>Sync Adapter: Implementing the Sync Mechanism</title>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a href="#set_callback">Set Callback Functions</a></li>
+ <li><a href="#set_callback">Setting the Callback Functions</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a href="../../../../org.tizen.guides/html/native/sync/sync_guide_n.htm">Sync Guides</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYNC__ADAPTER__MODULE.html">Sync Adapter API</a></li>
+ <li><a href="../../../../org.tizen.guides/html/native/sync/sync_guide_n.htm">Sync Guide</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYNC__ADAPTER__MODULE.html">Sync Adapter API for Mobile Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
-<h1>Sync Adapter: Making sync mechanism implementation easy</h1>
-<div class="cont"><div class="static-cont">
-
- <p>This tutorial demonstrates how you can set callbacks which will perform start or cancel sync operation. The Sync Adapter API provides function which sets callback functions to be called by Sync Manager for starting or canceling sync operation:</p>
-
+<h1>Sync Adapter: Implementing the Sync Mechanism</h1>
+
+ <p>This tutorial demonstrates how you can set callbacks to start or cancel a sync operation.</p>
+
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">This feature is supported in mobile applications only.</td>
+ </tr>
+ </tbody>
+ </table>
+
<h2>Warm-up</h2>
<p>Become familiar with the Sync Adapter API basics by learning about:</p>
<ul>
- <li><a href="#set_callback">Set Callback Functions</a>
- <p>Set client callback functions for starting or canceling sync operation.</p></li>
+ <li><a href="#set_callback">Setting the Callback Functions</a>
+ <p>Set the client callback functions for starting or canceling sync operations.</p></li>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
- <!-- Folds -->
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="set_callback" name="set_callback" class="items-tit-h2">Set Callback Functions</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+<h2 id="set_callback" name="set_callback">Setting the Callback Functions</h2>
- <p> To set callbacks to receive notification for a time to sync operation.
+<p>To set callbacks to receive notifications about sync operations:</p>
<ol>
-<li>To use the features of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYNC__ADAPTER__MODULE.html">Sync Adapter</a> API, include the <sync_adapter.h> header file in your application:
+<li>To use the features of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYNC__ADAPTER__MODULE.html">Sync Adapter</a> API, include the <span style="font-family: Courier New,Courier,monospace"><sync_adapter.h></span> header file in your application:
<pre class="prettyprint">
#include <sync_adapter.h>
</pre>
</li>
-<li>Initialize Sync Adapter's instance using the sync_adapter_init() function:
+<li>Initialize the sync adapter instance using the <span style="font-family: Courier New,Courier,monospace">sync_adapter_init()</span> function:
<pre class="prettyprint">
int result;
-const char* capability = "http://tizen.org/account/capability/calendar";
+const char* capability = "http://tizen.org/account/capability/calendar";
result = sync_adapter_init(capability);
</pre>
-In the case of accountless, as follows:
+<p>If no capabilities are defined (you do not want to receive notifications about calendar or contact data changes on the device):</p>
<pre class="prettyprint">
result = sync_adapter_init(NULL);
</pre>
</li>
-<li>Using below API is required for sync operation subscribe to notifications about specific rule for synchronization scheduling, use the sync_adapter_set_callbacks() function to set a callback functions. When specific event is detected, the sync_adapter_start_sync_cb or sync_adapter_cancel_sync_cb is invoked.
-The following example subscribes the callback functions to receive notifications when the specific event or condition is detected on device. Then, the callback functions to be invoked by Sync Manager for sync operation:
+<li>Subscribe to the callback functions to receive notifications for the sync operation when a specific event or condition is detected on the device:
<pre class="prettyprint">
result = sync_adapter_set_callbacks(on_start_cb, on_cancel_cb);
</pre>
+<p>When a specific event is detected, the <span style="font-family: Courier New,Courier,monospace">sync_adapter_start_sync_cb</span> or <span style="font-family: Courier New,Courier,monospace">sync_adapter_cancel_sync_cb</span> callback is invoked.</p>
</li>
-<li>When the on_start_cb() callback is invoked, sync process predefined is performed inside the callback function. in the case of on_cancel_cb() is same.<pre class="prettyprint">
+<li>When the <span style="font-family: Courier New,Courier,monospace">on_start_cb()</span> callback is invoked, the predefined sync process is performed inside the callback function. The <span style="font-family: Courier New,Courier,monospace">on_cancel_cb()</span> callback works in a similar way and cancels the sync operation.
+<pre class="prettyprint">
int on_start_cb(account_h account, bundle *extras, const char *capability)
{
- //process for starting sync operation.
+ // Start the sync operation
}
int on_cancel_cb(account_h account, const char *capability)
{
- //process for canceling sync operation.
+ // Cancel the sync operation
}
</pre>
</li>
-<li>When sync operation is no longer used, destroy the instance of Sync Adapter:
+<li>When the sync operation is no longer needed, destroy the sync adapter instance:
<pre class="prettyprint">
result = sync_adapter_unset_callbacks();
sync_adapter_destroy();
</pre>
</li>
-</li>
</ol>
- </div>
- </li>
-
- </ul>
-</div>
-</div>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></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>Sync Manager: Managing all sync related activities</title>
+ <title>Sync Manager: Managing Sync-related Activities</title>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a href="#on_demand_sync">On Demand Sync</a></li>
- <li><a href="#periodic_sync">Periodic Sync</a></li>
+ <li><a href="#on_demand_sync">Initializing the On-demand Sync</a></li>
+ <li><a href="#periodic_sync">Initializing the Periodic Sync</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.guides/html/native/sync/sync_guide_n.htm">Sync Guide</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYNC__MANAGER__MODULE.html">Sync Manager API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYNC__MANAGER__MODULE.html">Sync Manager API for Mobile Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
-<h1>Sync Manager: Managing all sync related activities</h1>
-<div class="cont"><div class="static-cont">
+<h1>Sync Manager: Managing Sync-related Activities</h1>
- <p>This tutorial demonstrates how you can manage the schedule of time to synchronize data. The Sync Manager API provides function which can control sync operation manually or periodically:</p>
+ <p>This tutorial demonstrates how you can manage the data synchronizing schedule and control the sync operations manually or periodically.</p>
+
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">This feature is supported in mobile applications only.</td>
+ </tr>
+ </tbody>
+ </table>
<h2>Warm-up</h2>
<p>Become familiar with the Sync Manager API basics by learning about:</p>
<ul>
- <li><a href="#on_demand_sync">On Demand Sync</a>
- <p>Add on demand sync job scheduling for one time operation.</p></li>
- <li><a href="#periodic_sync">Periodic Sync</a>
- <p>Add periodic sync job scheduling with a cycle.</p></li>
+ <li><a href="#on_demand_sync">Initializing the On-demand Sync</a>
+ <p>Add an on-demand sync job scheduling for a one-time operation.</p></li>
+ <li><a href="#periodic_sync">Initializing the Periodic Sync</a>
+ <p>Add a periodic sync job scheduling with a recurring cycle.</p></li>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
- <!-- Folds -->
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="on_demand_sync" name="on_demand_sync" class="items-tit-h2">On Demand Sync</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+<h2 id="on_demand_sync" name="on_demand_sync">Initializing the On-demand Sync</h2>
-<p>To inform explicitly service app of a time to sync operation once.</p>
+<p>To inform the service application of a one-time sync operation:</p>
<ol>
-<li>To use the features of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYNC__MANAGER__MODULE.html">Sync Manager</a> API, include the <sync_manager.h> header file in your application:
+<li>To use the features of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYNC__MANAGER__MODULE.html">Sync Manager</a> API, include the <span style="font-family: Courier New,Courier,monospace"><sync_manager.h></span> header file in your application:
<pre class="prettyprint">
#include <sync_manager.h>
</pre>
</li>
-<li>Sync Adapter callbacks should be set first. Setting Sync Adapter callbacks can be verified at <a href="sync_adapter_tutorial_n.htm">Sync Adapter</a>. To set callbacks, as follows:
+<li><a href="sync_adapter_tutorial_n.htm">Set the sync adapter callbacks</a>:
<pre class="prettyprint">
#include <sync_adapter.h>
-const char* capability = "http://tizen.org/account/capability/contact";
+const char* capability = "http://tizen.org/account/capability/contact";
int result;
result = sync_adapter_init(capability);
result = sync_adapter_set_callbacks(on_start_cb, on_cancel_cb);
</pre>
-In the case of accountless, as follows:
+<p>If no capabilities are defined (you do not want to receive notifications about calendar or contact data changes on the device):</p>
<pre class="prettyprint">
result = sync_adapter_init(NULL);
result = sync_adapter_set_callbacks(on_start_cb, on_cancel_cb);
</pre>
</li>
-<li>Connect to Sync Manager service using the sync_manager_connect() function:
+<li>Connect to the sync manager service using the <span style="font-family: Courier New,Courier,monospace">sync_manager_connect()</span> function:
<pre class="prettyprint">
result = sync_manager_connect();
</pre>
</li>
-<li>In the case of using Account, Account and bundle creation should be performed previously for sync_manager_add_sync_job()'s parameters. But, Account handle is not a mandatory parameter. Because, that is for an application which want to use the Sync Manager without Account. See the <a href="../social/account_tutorial_n.htm">Creating and Managing an Account</a> part for Account creation in Account Tutorial. Also, see the <a href="../app_framework/bundle_tutorial_n.htm">Managing and Using the Bundle Content</a> part for Bundle creation in Bundle Tutorial. For example,:
+<li>If you want to use an account (track calendar or contact data changes on the device), create the account and the bundle to obtain the parameters for the <span style="font-family: Courier New,Courier,monospace">sync_manager_add_sync_job()</span> function you need later on.
+<p>The account handle is not a mandatory parameter, because it is meant for an application that uses the sync manager without an account. For more information, see <a href="../social/account_tutorial_n.htm">Creating and Managing an Account</a> and <a href="../app_framework/bundle_tutorial_n.htm">Managing and Using the Bundle Content</a>.</p>
+
<pre class="prettyprint">
account_h account = NULL;
int account_id = -1;
account_connect();
account_create(&account);
-account_set_user_name(account, "test_name");
-account_set_email_address(account, "test_email@samsung.com");
-account_set_package_name(account, "data-sync-module");
+account_set_user_name(account, "test_name");
+account_set_email_address(account, "test_email@samsung.com");
+account_set_package_name(account, "data-sync-module");
account_set_sync_support(account, ACCOUNT_SUPPORTS_SYNC);
account_insert_to_db(account, &account_id);
account_disconnect();
extra = bundle_create();
-bundle_add(extra, SYNC_OPTION_NO_RETRY, "true");
-bundle_add(extra, SYNC_OPTION_EXPEDITED, "false");
+bundle_add(extra, SYNC_OPTION_NO_RETRY, "true");
+bundle_add(extra, SYNC_OPTION_EXPEDITED, "false");
</pre>
-The above example creates bundle and adds option for sync related information. If the SYNC_OPTION_NO_RETRY is set as true, sync service will not retry operation when sync operation is failed.
+<p>This example creates a bundle and adds options for sync-related information. Since the <span style="font-family: Courier New,Courier,monospace">SYNC_OPTION_NO_RETRY</span> is set to <span style="font-family: Courier New,Courier,monospace">true</span>, the sync service does not retry the operation if the sync operation fails.</p>
</li>
-<li>To add on demand sync job, as follows:
+<li>To add an on-demand sync job:
<pre class="prettyprint">
result = sync_manager_add_sync_job(account, capability, extra);
</pre>
-In the case of accountless, as follows:
+<p>If no account is used:</p>
<pre class="prettyprint">
result = sync_manager_add_sync_job(NULL, NULL, extra);
</pre>
-If sync job process had been made well, returns value SYNC_ERROR_NONE.
+<p>If the sync job addition process succeeds, the <span style="font-family: Courier New,Courier,monospace">SYNC_ERROR_NONE</span> value is returned.</p>
</li>
-<li>When on demand sync is no longer used, remove the sync job with the sync_manager_remove_sync_job() function. If you want to stop using account, should not forget clean-up account handle. Also, disconnect from Sync Manager and release the resources with the sync_manager_disconnect() function:
+<li>When the on-demand sync is no longer needed, remove it with the <span style="font-family: Courier New,Courier,monospace">sync_manager_remove_sync_job()</span> function. If you want to stop using the account too, clean up the account handle.
+<p>At the end, disconnect from the sync manager and release the resources with the <span style="font-family: Courier New,Courier,monospace">sync_manager_disconnect()</span> function.</p>
<pre class="prettyprint">
result = sync_manager_remove_sync_job(account, capability);
sync_adapter_unset_callbacks();
sync_adapter_destroy();
</pre>
-In the case of accountless, as follows:
+<p>If no account is used:</p>
<pre class="prettyprint">
result = sync_manager_remove_sync_job(NULL, NULL);
sync_adapter_unset_callbacks();
sync_adapter_destroy();
</pre>
-</li></li>
+</li>
</ol>
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="periodic_sync" name="periodic_sync" class="items-tit-h2">Periodic Sync</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+<h2 id="periodic_sync" name="periodic_sync">Initializing the Periodic Sync</h2>
-<p>To inform regularly service app of times to sync operation with an interval.</p>
+<p>To inform the service application of a periodical sync operation and its sync interval:</p>
<ol>
-<li>To use the features of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYNC__MANAGER__MODULE.html">Sync Manager</a> API, include the <sync_manager.h> header file in your application:
+<li>To use the features of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYNC__MANAGER__MODULE.html">Sync Manager</a> API, include the <span style="font-family: Courier New,Courier,monospace"><sync_manager.h></span> header file in your application:
<pre class="prettyprint">
#include <sync_manager.h>
</pre>
</li>
-<li>Sync Adapter callbacks should be set first. Setting Sync Adapter callbacks can be verified at <a href="sync_adapter_tutorial_n.htm">Sync Adapter</a>. To set callbacks, as follows:
+<li><a href="sync_adapter_tutorial_n.htm">Set the sync adapter callbacks</a>:
<pre class="prettyprint">
#include <sync_adapter.h>
-const char* capability = "http://tizen.org/account/capability/contact";
+const char* capability = "http://tizen.org/account/capability/contact";
int result;
result = sync_adapter_init(capability);
result = sync_adapter_set_callbacks(on_start_cb, on_cancel_cb);
</pre>
-In the case of accountless, as follows:
+<p>If no capabilities are defined (you do not want to receive notifications about calendar or contact data changes on the device):</p>
<pre class="prettyprint">
result = sync_adapter_init(NULL);
result = sync_adapter_set_callbacks(on_start_cb, on_cancel_cb);
</pre>
</li>
-<li>Connect to Sync Manager service using the sync_manager_connect() function:
+<li>Connect to the sync manager service using the <span style="font-family: Courier New,Courier,monospace">sync_manager_connect()</span> function:
<pre class="prettyprint">
-int result;
result = sync_manager_connect();
</pre>
</li>
-<li>In the case of using Account, Account and bundle creation should be performed previously for sync_manager_add_sync_job()'s parameters. But, Account handle is not a mandatory parameter. Because, an application is not using the Account in order to use the Sync Manager. See the <a href="../social/account_tutorial_n.htm">Creating and Managing an Account</a> part for Account creation in Account Tutorial or above On Demand Turorial. Also, see the <a href="../app_framework/bundle_tutorial_n.htm">Managing and Using the Bundle Content</a> part for Bundle creation in Bundle Tutorial. For example,:
+<li>If you want to use an account (track calendar or contact data changes on the device), create the account and the bundle to obtain the parameters for the <span style="font-family: Courier New,Courier,monospace">sync_manager_add_sync_job()</span> function you need later on.
+<p>The account handle is not a mandatory parameter, because it is meant for an application that uses the sync manager without an account. For more information, see <a href="../social/account_tutorial_n.htm">Creating and Managing an Account</a> and <a href="../app_framework/bundle_tutorial_n.htm">Managing and Using the Bundle Content</a>.</p>
+
<pre class="prettyprint">
bundle *extra = NULL;
extra = bundle_create();
-bundle_add(extra, SYNC_OPTION_NO_RETRY, "false");
-bundle_add(extra, SYNC_OPTION_EXPEDITED, "false");
+bundle_add(extra, SYNC_OPTION_NO_RETRY, "false");
+bundle_add(extra, SYNC_OPTION_EXPEDITED, "false");
</pre>
-The above example creates bundle and adds option for sync related information. All of the sync option is false for periodic sync request. The sync option will retry when sync operation is failed and doesn't grant priority for sync operation.
+<p>This example creates a bundle and adds options for sync-related information. All the sync options are set to <span style="font-family: Courier New,Courier,monospace">false</span> for a periodic sync request. The sync service tries again when the sync operation has failed and does not grant priority for the sync operation.</p>
</li>
-<li>To add periodic sync job, as follows:
+<li>To add a periodic sync job:
<pre class="prettyprint">
sync_period_e sync_period = SYNC_PERIOD_INTERVAL_30MIN;
result = sync_manager_add_periodic_sync_job(account, capability, extra, sync_period);
</pre>
-In the case of accountless, as follows:
+<p>If no account is used:</p>
<pre class="prettyprint">
result = sync_manager_add_periodic_sync_job(NULL, NULL, extra, sync_period);
</pre>
-If sync job process had been made well, returns value SYNC_ERROR_NONE. Last parameter means time interval of periodic sync.
+<p>If the sync job addition process succeeds, the <span style="font-family: Courier New,Courier,monospace">SYNC_ERROR_NONE</span> value is returned. The last parameter stands for the time interval of the periodic sync.</p>
</li>
-<li>When periodic sync is no longer used, remove the sync job with the sync_manager_remove_periodic_sync_job() function. If you want to stop using account, should not forget clean-up account handle. That can be verified above On Demand Tutorial. Also, disconnect from Sync Manager and release the resources with the sync_manager_disconnect() function:
+<li>When the periodic sync is no longer needed, remove it with the <span style="font-family: Courier New,Courier,monospace">sync_manager_remove_periodic_sync_job()</span> function. If you want to stop using the account too, clean up the account handle, as shown in the <a href="#on_demand_sync">Initializing the On-demand Sync</a> use case.
+
+<p>At the end, disconnect from the sync manager and release the resources with the <span style="font-family: Courier New,Courier,monospace">sync_manager_disconnect()</span> function.</p>
<pre class="prettyprint">
result = sync_manager_remove_periodic_sync_job(account, capability);
sync_adapter_unset_callbacks();
sync_adapter_destroy();
</pre>
-In the case of accountless, as follows:
+<p>If no account is used:</p>
<pre class="prettyprint">
result = sync_manager_remove_periodic_sync_job(NULL, NULL);
</pre>
</li>
</ol>
- </div>
- </li>
- </ul>
-</div>
-</div>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></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>Sync: Scheduling for Syncing of Application's Data</title>
+ <title>Sync: Scheduling for Application Data Syncing</title>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a href="../../../../org.tizen.guides/html/native/sync/sync_guide_n.htm">Sync Guides</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYNC__ADAPTER__FRAMEWORK.html">Sync Adapter API</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYNC__MANAGER__FRAMEWORK.html">Sync Manager API</a></li>
+ <li><a href="../../../../org.tizen.guides/html/native/sync/sync_guide_n.htm">Sync Guide</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYNC__FRAMEWORK.html">Sync API for Mobile Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
-<h1>Sync: Scheduling for Syncing of Application's Data</h1>
- <p>The sync tutorials demonstrate how you can synchronize data between mobile device and server:</p>
+<h1>Sync: Scheduling for Application Data Syncing</h1>
+
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">The Sync API domain is supported in mobile applications only.</td>
+ </tr>
+ </tbody>
+ </table>
+
+ <p>The sync tutorials demonstrate how to use the following features in creating Tizen native applications:</p>
<ul>
<li>
- <a href="sync_adapter_tutorial_n.htm">Sync Adapter: Making sync mechanism implementation easy</a>
- <p>Demonstrates how you can receive the notification of a sync operation.</p>
+ <a href="sync_adapter_tutorial_n.htm">Sync Adapter: Implementing the Sync Mechanism</a>
+ <p>Demonstrates how you can receive notifications of a sync operation.</p>
</li>
<li>
- <a href="sync_manager_tutorial_n.htm">Sync Manager: Managing all sync related activities</a>
- <p>Demonstrates how you can manage the schedule of time to synchronize data.</p>
+ <a href="sync_manager_tutorial_n.htm">Sync Manager: Managing Sync-related Activities</a>
+ <p>Demonstrates how you can manage the data synchronizing schedule.</p>
</li>
</ul>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a href="#battery" class="opensection">Retrieving Battery Information</a></li>
+ <li><a href="#battery">Retrieving Battery Information</a></li>
<li>Device control
<ul class="toc">
- <li><a href="#display" class="opensection">Controlling the Display</a></li>
- <li><a href="#haptic" class="opensection">Controlling Haptic Devices</a></li>
- <li><a href="#led" class="opensection">Controlling LED Devices</a></li>
- <li><a href="#power" class="opensection">Controlling the Power State</a></li>
+ <li><a href="#display">Controlling the Display</a></li>
+ <li><a href="#haptic">Controlling Haptic Devices</a></li>
+ <li><a href="#led">Controlling LED Devices</a></li>
+ <li><a href="#power">Controlling the Power State</a></li>
</ul></li>
- <li><a href="#changes" class="opensection">Monitoring Device Changes</a></li>
+ <li><a href="#changes">Monitoring Device Changes</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.guides/html/native/system/device_n.htm">Device Guide</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__MODULE.html">Device API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__MODULE.html">Device API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__DEVICE__MODULE.html">Device API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Device: Accessing Devices, Such as SB, MMC, Battery, CPU, and Display</h1>
-<div class="cont"><div class="static-cont">
- <p>This tutorial demonstrates how to manage the display, battery, LED, haptic, and power functions.</p>
+
+ <p>This tutorial demonstrates how you can manage the display, battery, LED, haptic, and power functions.</p>
<h2>Warm-up</h2>
<p>Become familiar with the Device API basics by learning about:</p>
<ul>
- <li><a href="#battery" class="opensection">Retrieving Battery Information</a>
+ <li><a href="#battery">Retrieving Battery Information</a>
<p>Get battery information.</p></li>
<li>Device control
<ul>
- <li><a href="#display" class="opensection">Controlling the Display</a>
+ <li><a href="#display">Controlling the Display</a>
<p>Control display devices.</p></li>
- <li><a href="#haptic" class="opensection">Controlling Haptic Devices</a>
+ <li><a href="#haptic">Controlling Haptic Devices</a>
<p>Control haptic devices.</p></li>
- <li><a href="#led" class="opensection">Controlling LED Devices</a>
+ <li><a href="#led">Controlling LED Devices</a>
<p>Control LED devices.</p></li>
- <li><a href="#power" class="opensection">Controlling the Power State</a>
+ <li><a href="#power">Controlling the Power State</a>
<p>Control the device power state.</p></li>
</ul></li>
- <li><a href="#changes" class="opensection">Monitoring Device Changes</a>
+ <li><a href="#changes">Monitoring Device Changes</a>
<p>Register a changed device event to monitor device changes.</p></li>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
- <!-- Folds -->
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="battery" name="battery" class="items-tit-h2">Retrieving Battery Information</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+<h2 id="battery" name="battery">Retrieving Battery Information</h2>
+
<p>To retrieve battery information:</p>
<ol>
<li>
- <p>To use the battery-related features of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__MODULE.html">Device</a> API, include the <span style="font-family: Courier New,Courier,monospace;"><device/battery.h></span> header file in your application:</p>
+ <p>To use the battery-related features of the Device API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__DEVICE__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace;"><device/battery.h></span> header file in your application:</p>
<pre class="prettyprint">
#include <device/battery.h></pre>
</li>
<li>Get the battery details:
- <ul class="ul">
+ <ul>
<li>Get the battery percentage with the <span style="font-family: Courier New,Courier,monospace;">device_battery_get_percent()</span> function.
<p>The function returns the current battery percentage as an integer value from 0 to 100 that indicates the remaining battery charge as a percentage of the maximum level.</p>
</li>
<li>Get the current battery level state with the <span style="font-family: Courier New,Courier,monospace;">device_battery_get_level_status()</span> function.
- <p>The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__BATTERY__MODULE.html#ga63913a4983cc34e35dcdd670e8fe99e4">device_battery_level_e</a> enumerator defines the available battery levels.</p>
+ <p>The <span style="font-family: Courier New,Courier,monospace;">device_battery_level_e</span> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__BATTERY__MODULE.html#ga63913a4983cc34e35dcdd670e8fe99e4">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__DEVICE__BATTERY__MODULE.html#ga63913a4983cc34e35dcdd670e8fe99e4">wearable</a> applications) defines the available battery levels.</p>
<pre class="prettyprint">
int error;
device_battery_level_e level;
</li>
</ul></li>
</ol>
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="display" name="display" class="items-tit-h2">Controlling the Display</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="display" name="display">Controlling the Display</h2>
+
<p>To control the display:</p>
<ol>
<li>
- <p>To use the display-related features of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__MODULE.html">Device</a> API, include the <span style="font-family: Courier New,Courier,monospace;"><device/display.h></span> header file in your application:</p>
+ <p>To use the display-related features of the Device API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__DEVICE__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace;"><device/display.h></span> header file in your application:</p>
<pre class="prettyprint">
#include <device/display.h></pre>
</li>
<li>Retrieve and set display properties:
- <ul class="ul">
+ <ul>
<li>Get the number of display devices with the <span style="font-family: Courier New,Courier,monospace;">device_display_get_numbers()</span> function:
<pre class="prettyprint">
int error, num;
error = device_display_change_state(DISPLAY_STATE_NORMAL);
</pre>
- <p>The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__DISPLAY__MODULE.html#ga93a9434f07b3db52ec85fe58b79c529f">display_state_e</a> enumerator defines the available display states.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace;">display_state_e</span> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__DISPLAY__MODULE.html#ga93a9434f07b3db52ec85fe58b79c529f">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__DEVICE__DISPLAY__MODULE.html#ga93a9434f07b3db52ec85fe58b79c529f">wearable</a> applications) defines the available display states.</p>
</li>
- </ul></li></ol></div></li>
+ </ul></li></ol>
- <li>
- <div class="devicespec-tit">
- <h2 id="haptic" name="haptic" class="items-tit-h2">Controlling Haptic Devices</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
- <p>To control haptic devices:</p>
+<h2 id="haptic" name="haptic">Controlling Haptic Devices</h2>
+
+<p>To control haptic devices:</p>
<ol>
<li>
-<p>To use the haptic-related features of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__MODULE.html">Device</a> API, include the <span style="font-family: Courier New,Courier,monospace;"><device/haptic.h></span> header file in your application:</p>
+<p>To use the haptic-related features of the Device API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__DEVICE__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace;"><device/haptic.h></span> header file in your application:</p>
<pre class="prettyprint">
#include <device/haptic.h></pre>
</li>
error = device_haptic_close(0, handle);
</pre>
</li>
-</ol></div></li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="led" name="led" class="items-tit-h2">Controlling LED Devices</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
- <p>To control LED devices:</p>
+</ol>
+
+<h2 id="led" name="led">Controlling LED Devices</h2>
+
+<p>To control LED devices:</p>
<ol>
<li>
-<p>To use the LED-related features of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__MODULE.html">Device</a> API, include the <span style="font-family: Courier New,Courier,monospace;"><device/led.h></span> header file in your application:</p>
+<p>To use the LED-related features of the Device API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__DEVICE__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace;"><device/led.h></span> header file in your application:</p>
<pre class="prettyprint">
#include <device/led.h></pre>
</li>
error = device_led_stop_custom();
</pre>
-<p>The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__LED__MODULE.html#ga2065bc82e5ecf7e2acba8629c0d75e3b">led_custom_flags</a> enumerator defines the available custom effects.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace;">led_custom_flags</span> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__LED__MODULE.html#ga2065bc82e5ecf7e2acba8629c0d75e3b">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__DEVICE__LED__MODULE.html#ga2065bc82e5ecf7e2acba8629c0d75e3b">wearable</a> applications) defines the available custom effects.</p>
</li>
-</ol></div></li>
+</ol>
- <li>
- <div class="devicespec-tit">
- <h2 id="power" name="power" class="items-tit-h2">Controlling the Power State</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
- <p>To control the device power state:</p>
+<h2 id="power" name="power">Controlling the Power State</h2>
+
+<p>To control the device power state:</p>
<ol>
<li>
-<p>To use the power-related features of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__MODULE.html">Device</a> API, include the <span style="font-family: Courier New,Courier,monospace;"><device/power.h></span> header file in your application:</p>
+<p>To use the power-related features of the Device API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__DEVICE__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace;"><device/power.h></span> header file in your application:</p>
<pre class="prettyprint">
#include <device/power.h></pre>
</li>
<li>Lock the power state with the <span style="font-family: Courier New,Courier,monospace;">device_power_request_lock()</span> function.
<p>The function locks the given lock state for a specified time. After the given timeout, the given lock state is unlocked automatically. If the process is destroyed, every lock is removed.</p>
-<p>The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__POWER__MODULE.html#gabc47c58cfcfdaaba177f6004d6395af2">power_lock_e</a> enumerator defines the available lock types.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace;">power_lock_e</span> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__POWER__MODULE.html#gabc47c58cfcfdaaba177f6004d6395af2">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__DEVICE__POWER__MODULE.html#gabc47c58cfcfdaaba177f6004d6395af2">wearable</a> applications) defines the available lock types.</p>
<pre class="prettyprint">
int error;
error = device_power_wakeup(true);
</pre>
</li>
-</ol></div></li>
+</ol>
- <li>
- <div class="devicespec-tit">
- <h2 id="changes" name="changes" class="items-tit-h2">Monitoring Device Changes</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
- <p>To monitor device changes:</p>
+<h2 id="changes" name="changes">Monitoring Device Changes</h2>
+
+<p>To monitor device changes:</p>
<ol>
<li>
-<p>To use the device change-related features of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__MODULE.html">Device</a> API, include the <span style="font-family: Courier New,Courier,monospace;"><device/callback.h></span> header file in your application:</p>
+<p>To use the device change-related features of the Device API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__DEVICE__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace;"><device/callback.h></span> header file in your application:</p>
<pre class="prettyprint">
#include <device/callback.h></pre>
</li>
<li>Define the device changed callback, which is called when a device status changes.
-<p>The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__CALLBACK__MODULE.html#gaa55ba4e8bf4d8877b500686e1d78f2d7">device_callback_e</a> enumerator defines the available callback types.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace;">device_callback_e</span> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__CALLBACK__MODULE.html#gaa55ba4e8bf4d8877b500686e1d78f2d7">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__DEVICE__CALLBACK__MODULE.html#gaa55ba4e8bf4d8877b500686e1d78f2d7">wearable</a> applications) defines the available callback types.</p>
<pre class="prettyprint">
static void changed_cb(device_callback_e type, void *value, void *user_data)
error = device_remove_callback(DEVICE_CALLBACK_DISPLAY_STATE, changed_cb);
</pre>
</li>
-</ol></div></li>
-
- </ul>
-</div>
-</div>
+</ol>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a class="opensection" href="#init">Initializing dlog</a>
+ <li><a href="#init">Initializing dlog</a>
</li>
- <li><a class="opensection" href="#send">Sending a Log Message</a>
+ <li><a href="#send">Sending a Log Message</a>
</li>
- <li><a class="opensection" href="#check">Checking the Output Logs</a>
+ <li><a href="#check">Checking the Output Logs</a>
</li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.guides/html/native/system/dlog_n.htm">dlog Guide</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DLOG.html">dlog API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DLOG.html">dlog API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__DLOG.html">dlog API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>dlog: Sending Log Output for Debug Activities</h1>
- <div class="cont"><div class="static-cont">
+
-<p>This tutorial demonstrates how to send log messages to a circular log device and check them.</p>
+<p>This tutorial demonstrates how you can send log messages to a circular log device and check them.</p>
<h2>Warm-up</h2>
<p>Become familiar with the dlog API basics by learning about:</p>
<p>Check the output.</p></li>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
-
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="init" name="init" class="items-tit-h2">Initializing dlog</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="init" name="init">Initializing dlog</h2>
<p>To initialize dlog:</p>
-<ol><li><p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DLOG.html">dlog</a> API, include the <span style="font-family: Courier New,Courier,monospace"><dlog.h></span> header file in your application:</p>
+<ol><li><p>To use the functions and data types of the dlog API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DLOG.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__DLOG.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><dlog.h></span> header file in your application:</p>
<pre class="prettyprint">
#include <dlog.h>
</pre></li>
<li>Make sure you have the necessary tools:
- <ul class="ul">
+ <ul>
<li>dlog library: <span style="font-family: Courier New,Courier,monospace">libdlog.so</span>
<p>The dlog library provides a logging function to send log messages to the kernel log device.</p></li>
<li>dlogutil: <span style="font-family: Courier New,Courier,monospace">dlogutil</span>
<p>dlogutil enables you to view log messages in the log device, and provides filtered message output.</p></li>
<li>Requirement: linux-2.6.32 kernel</li>
</ul></li></ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="send" name="send" class="items-tit-h2">Sending a Log Message</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="send" name="send">Sending a Log Message</h2>
+
<p>Send a log message with the <span style="font-family: Courier New,Courier,monospace">MY_APP</span> tag with various priorities.</p>
<pre class="prettyprint">
return 0;
}
</pre>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="check" name="check" class="items-tit-h2">Checking the Output Logs</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="check" name="check">Checking the Output Logs</h2>
+
<p>Execute dlogutil on the device sdb shell to check the out log.</p>
<p>Check the sdb guide to connect to a target and use it.</p>
E/MY_APP (11097): error message
I/MY_APP (11097): test dlog, 21
</pre>
- </div>
- </li>
- </ul>
-</div>
-</div>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a href="#get" class="opensection">Getting Runtime Information</a></li>
- <li><a href="#monitor" class="opensection">Monitoring Runtime Information Changes</a>
+ <li><a href="#get">Getting Runtime Information</a></li>
+ <li><a href="#monitor">Monitoring Runtime Information Changes</a>
</li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.guides/html/native/system/runtime_info_n.htm">Runtime information Guide</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__RUNTIME__INFO__MODULE.html">Runtime information API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__RUNTIME__INFO__MODULE.html">Runtime information API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__RUNTIME__INFO__MODULE.html">Runtime information API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Runtime information: Receiving and Monitoring Runtime Information</h1>
-<div class="cont"><div class="static-cont">
+
<p>This tutorial demonstrates how you can obtain runtime information, such as system preferences.</p>
<p>Register a callback function for a specific change in the runtime information.</p>
</li></ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
- <!-- Folds -->
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="get" name="get" class="items-tit-h2">Getting Runtime Information</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+<h2 id="get" name="get">Getting Runtime Information</h2>
+
<p>To get runtime information, which consists of key, value pairs:</p>
<ol>
-<li><p>To use the runtime information-related features of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__RUNTIME__INFO__MODULE.html">Runtime information</a> API, include the <span style="font-family: Courier New,Courier,monospace"><runtime_info.h></span> header file in your application:</p>
+<li><p>To use the runtime information-related features of the Runtime information API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__RUNTIME__INFO__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__RUNTIME__INFO__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><runtime_info.h></span> header file in your application:</p>
<pre class="prettyprint">
#include <runtime_info.h>
</pre></li>
}
}
</pre></li></ol>
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="monitor" name="monitor" class="items-tit-h2">Monitoring Runtime Information Changes</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+<h2 id="monitor" name="monitor">Monitoring Runtime Information Changes</h2>
+
<p>To monitor runtime information changes:</p>
<ol>
-<li><p>To use the runtime information-related features of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__RUNTIME__INFO__MODULE.html">Runtime information</a> API, include the <span style="font-family: Courier New,Courier,monospace"><runtime_info.h></span> header file in your application:</p>
+<li><p>To use the runtime information-related features of the Runtime information API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__RUNTIME__INFO__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__RUNTIME__INFO__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><runtime_info.h></span> header file in your application:</p>
<pre class="prettyprint">
#include <runtime_info.h>
</pre></li>
}
}
</pre></li></ol>
- </div>
- </li>
-
- </ul>
-</div>
-</div>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.guides/html/native/system/sensors_n.htm">Sensor Guide</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__SENSOR__MODULE.html">Sensor API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__SENSOR__MODULE.html">Sensor API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__SENSOR__MODULE.html">Sensor API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Sensor: Using Sensors and Managing Sensor Events</h1>
-<div class="cont"><div class="static-cont">
+
<p>This tutorial demonstrates how you can manage sensors, retrieve information from and about them, and set intervals for sensor events.</p>
<p>Create an event which is called when the accuracy is changed.</p>
</li></ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
- <!-- Folds -->
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="retrieve" name="retrieve" class="items-tit-h2">Retrieving a Sensor</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+<h2 id="retrieve" name="retrieve">Retrieving a Sensor</h2>
+
<p>To declare the variables and get a sensor handle:</p>
<ol>
-<li>To use the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__SENSOR__MODULE.html">Sensor</a> API, include the following header file:
+<li>To use the Sensor API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__SENSOR__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__SENSOR__MODULE.html">wearable</a> applications), include the following header file:
<pre class="prettyprint">
#include <sensor.h>
</pre>
</pre>
</li>
</ol>
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="event" name="event" class="items-tit-h2">Registering a Sensor Event</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+<h2 id="event" name="event">Registering a Sensor Event</h2>
+
<p>To set and unset callback functions for sensor events:</p>
<ol>
-<li>To use the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__SENSOR__MODULE.html">Sensor</a> API, include the following header file:
+<li>To use the Sensor API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__SENSOR__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__SENSOR__MODULE.html">wearable</a> applications), include the following header file:
<pre class="prettyprint">
#include <sensor.h>
</pre>
</pre>
</li>
-<li>Set the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__SENSOR__MODULE.html#gaf517b61e58b872f985fc2fc2a26aa56a">sensor option</a> (optional):
+<li>Set the optional sensor option (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__SENSOR__MODULE.html#gaf517b61e58b872f985fc2fc2a26aa56a">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__SENSOR__MODULE.html#gaf517b61e58b872f985fc2fc2a26aa56a">wearable</a> applications):
<pre class="prettyprint">
error = sensor_listener_set_option(listener, SENSOR_OPTION_ALWAYS_ON);
</pre>
</li>
</ol>
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="accuracy" name="accuracy" class="items-tit-h2">Registering the Accuracy Changed Callback</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+<h2 id="accuracy" name="accuracy">Registering the Accuracy Changed Callback</h2>
+
<p>To register the accuracy changed callback:</p>
<ol>
}</pre>
</li>
</ol>
- </div>
- </li>
-
- </ul>
-</div>
-</div>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a href="#statvfs" class="opensection">Using Statvfs Wrapper</a></li>
- <li><a href="#storage" class="opensection">Retrieving Storage Information</a></li>
- <li><a href="#state" class="opensection">Monitoring Storage State Changes</a></li>
- <li><a href="#space" class="opensection">Retrieving Storage Space Information</a></li>
+ <li><a href="#statvfs">Using Statvfs Wrapper</a></li>
+ <li><a href="#storage">Retrieving Storage Information</a></li>
+ <li><a href="#state">Monitoring Storage State Changes</a></li>
+ <li><a href="#space">Retrieving Storage Space Information</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.guides/html/native/system/storage_n.htm">Storage Guide</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__STORAGE__MODULE.html">Storage API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__STORAGE__MODULE.html">Storage API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__STORAGE__MODULE.html">Storage API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Storage: Getting Information about Storages</h1>
-<div class="cont"><div class="static-cont">
+
<p>This tutorial demonstrates how you can obtain detailed information from the internal and external storage.</p>
<p>Retrieve information about the storage space.</p></li>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
- <!-- Folds -->
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="statvfs" name="statvfs" class="items-tit-h2">Using Statvfs Wrapper</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+<h2 id="statvfs" name="statvfs">Using Statvfs Wrapper</h2>
+
<p>Use the statvfs wrapper to get memory sizes:</p>
<ol>
-<li><p>To use the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__STORAGE__MODULE.html">Storage</a> API features, include the <span style="font-family: Courier New,Courier,monospace;"><storage.h></span> header file in your application:</p>
+<li><p>To use the Storage API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__STORAGE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__STORAGE__MODULE.html">wearable</a> applications) features, include the <span style="font-family: Courier New,Courier,monospace;"><storage.h></span> header file in your application:</p>
<pre class="prettyprint">
#include <storage.h>
</pre></li>
<li><p>Get memory sizes:</p>
-<ul class="ul">
+<ul>
<li>Get internal memory size with the <span style="font-family: Courier New,Courier,monospace;">storage_get_internal_memory_size()</span> function.
<p>The function returns the internal memory size. Use it instead of the statvfs function when you need the internal memory size.</p>
<p>At least a low memory pop-up is launched in case the memory is low, and to do that, a minimum memory is reserved. To allow memory for the pop-up, the function returns a memory size except for a minimum memory size. The minimum memory size depends on the device storage size.</p>
</ul>
</li>
</ol>
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="storage" name="storage" class="items-tit-h2">Retrieving Storage Information</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+<h2 id="storage" name="storage">Retrieving Storage Information</h2>
<p>To retrieve storage information:</p>
<ol>
-<li><p>To use the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__STORAGE__MODULE.html">Storage</a> API features, include the <span style="font-family: Courier New,Courier,monospace;"><storage.h></span> header file in your application:</p>
+<li><p>To use the Storage API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__STORAGE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__STORAGE__MODULE.html">wearable</a> applications) features, include the <span style="font-family: Courier New,Courier,monospace;"><storage.h></span> header file in your application:</p>
<pre class="prettyprint">
#include <storage.h>
</pre></li>
<li><p>Retrieve storage information:</p>
-<ul class="ul">
+<ul>
<li>Check for supported storages.
<p>Call the <span style="font-family: Courier New,Courier,monospace;">storage_device_supported_cb</span> callback function to get information once for each supported storage. If this function returns <span style="font-family: Courier New,Courier,monospace;">false</span>, the iteration is finished.</p>
<p>Call the <span style="font-family: Courier New,Courier,monospace;">storage_get_directory()</span> function to get the absolute path to each directory of the given storage. Files saved on the internal or external storage are readable or writeable by all applications. When an application is uninstalled, the files written by that application are not removed from the internal or external storage.</p>
<p>The second parameter defines the directory type based on the <span style="font-family: Courier New,Courier,monospace;">storage_directory_e</span> enum:</p>
-<ul class="ul">
+<ul>
<li><span style="font-family: Courier New,Courier,monospace;">STORAGE_DIRECTORY_IMAGES</span></li>
<li><span style="font-family: Courier New,Courier,monospace;">STORAGE_DIRECTORY_SOUNDS</span></li>
<li><span style="font-family: Courier New,Courier,monospace;">STORAGE_DIRECTORY_VIDEOS</span></li>
<li>Get the storage type.
<p>Call the <span style="font-family: Courier New,Courier,monospace;">storage_get_type()</span> function to get the type of the given storage.</p>
-<p>The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__STORAGE__MODULE.html#gabdf32571260b6c253da5bfcdecaa2f1f">storage_type_e</a> enumerator defines the available storage types.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace;">storage_type_e</span> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__STORAGE__MODULE.html#gabdf32571260b6c253da5bfcdecaa2f1f">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__STORAGE__MODULE.html#gabdf32571260b6c253da5bfcdecaa2f1f">wearable</a> applications)defines the available storage types.</p>
<pre class="prettyprint">
int error;
<li>Get the storage mount state.
<p>Call the <span style="font-family: Courier New,Courier,monospace;">storage_get_state()</span> function to get the current state of the given storage.</p>
-<p>The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__STORAGE__MODULE.html#gac72d0e57e790d888dfd7bd57d52fbfee">storage_state_e</a> enumerator defines the available storage states.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace;">storage_state_e</span> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__STORAGE__MODULE.html#gac72d0e57e790d888dfd7bd57d52fbfee">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__STORAGE__MODULE.html#gac72d0e57e790d888dfd7bd57d52fbfee">wearable</a> applications)defines the available storage states.</p>
<pre class="prettyprint">
int error;
storage_state_e state;
error = storage_get_state(internal_storage_id, &state);</pre></li></ul>
-</li></ol></div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="state" name="state" class="items-tit-h2">Monitoring Storage State Changes</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+</li></ol>
+
+<h2 id="state" name="state">Monitoring Storage State Changes</h2>
<p>To monitor storage state changes:</p>
<ol>
-<li><p>To use the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__STORAGE__MODULE.html">Storage</a> API features, include the <span style="font-family: Courier New,Courier,monospace;"><storage.h></span> header file in your application:</p>
+<li><p>To use the Storage API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__STORAGE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__STORAGE__MODULE.html">wearable</a> applications) features, include the <span style="font-family: Courier New,Courier,monospace;"><storage.h></span> header file in your application:</p>
<pre class="prettyprint">
#include <storage.h>
</pre></li>
error = storage_unset_state_changed_cb(internal_storage_id, storage_changed_cb);
</pre>
</li></ol>
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="space" name="space" class="items-tit-h2">Retrieving Storage Space Information</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+<h2 id="space" name="space">Retrieving Storage Space Information</h2>
+
<p>To retrieve storage space information:</p>
<ol>
-<li><p>To use the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__STORAGE__MODULE.html">Storage</a> API features, include the <span style="font-family: Courier New,Courier,monospace;"><storage.h></span> header file in your application:</p>
+<li><p>To use the Storage API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__STORAGE__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__STORAGE__MODULE.html">wearable</a> applications) features, include the <span style="font-family: Courier New,Courier,monospace;"><storage.h></span> header file in your application:</p>
<pre class="prettyprint">
#include <storage.h>
</pre></li>
<li><p>Retrieve storage space:</p>
-<ul class="ul">
+<ul>
<li>Get the total space of the storage using the <span style="font-family: Courier New,Courier,monospace;">storage_get_total_space()</span> function.
<p>The function returns the total space of the given storage in bytes. It invokes the <span style="font-family: Courier New,Courier,monospace;">storage_get_internal_memory_size()</span> or <span style="font-family: Courier New,Courier,monospace;">storage_get_external_memory_size()</span> internally.</p>
</pre></li>
</ul></li>
</ol>
- </div>
- </li>
- </ul>
-</div>
-</div>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.guides/html/native/system/sysinfo_n.htm">System Information Guide</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__SYSTEM__INFO__MODULE.html">System Information API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__SYSTEM__INFO__MODULE.html">System Information API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__SYSTEM__INFO__MODULE.html">System Information API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>System Information: Obtaining Device Information</h1>
-<div class="cont"><div class="static-cont">
+
<p>This tutorial demonstrates how you can obtain device information, such as platform version, device model, and supported device features.</p>
<p>Check whether the device provides a camera.</p></li>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
- <!-- Folds -->
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="model" name="model" class="items-tit-h2">Getting the Device Model Name</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+<h2 id="model" name="model">Getting the Device Model Name</h2>
+
<p>To get the device model name:</p><ol>
-<li><p>To use the device-specific information-related features of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__SYSTEM__INFO__MODULE.html">System Information</a> API, include the <span style="font-family: Courier New,Courier,monospace;"><system_info.h></span> header file in your application:</p>
+<li><p>To use the device-specific information-related features of the System Information API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__SYSTEM__INFO__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__SYSTEM__INFO__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace;"><system_info.h></span> header file in your application:</p>
<pre class="prettyprint">
#include <system_info.h>
</pre></li>
free(value); // Release after use
}
</pre></li></ol>
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="camera" name="camera" class="items-tit-h2">Checking Whether a Camera is Provided</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+<h2 id="camera" name="camera">Checking Whether a Camera is Provided</h2>
<p>To check whether a camera is provided:</p>
<ol>
-<li><p>To use the device-specific information-related features of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__SYSTEM__INFO__MODULE.html">System Information</a> API, include the <span style="font-family: Courier New,Courier,monospace;"><system_info.h></span> header file in your application:</p>
+<li><p>To use the device-specific information-related features of the System Information API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__SYSTEM__INFO__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__SYSTEM__INFO__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace;"><system_info.h></span> header file in your application:</p>
<pre class="prettyprint">
#include <system_info.h>
</pre></li>
dlog_print(DLOG_INFO, LOG_TAG, "Camera: %s", value ? "Supported" : "Not supported");
}
</pre></li></ol>
- </div>
- </li>
-
- </ul>
-</div>
-</div>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a href="#settings" class="opensection">Managing System Settings</a>
+ <li><a href="#settings">Managing System Settings</a>
</li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.guides/html/native/system/settings_n.htm">System Settings Guide</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__SYSTEM__SETTINGS__MODULE.html">System Settings API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__SYSTEM__SETTINGS__MODULE.html">System Settings API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__SYSTEM__SETTINGS__MODULE.html">System Settings API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>System Settings: Getting Miscellaneous System Settings and Preferences</h1>
-<div class="cont"><div class="static-cont">
+
<p>This tutorial demonstrates how you can manage and monitor system settings.</p>
</li>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
- <!-- Folds -->
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="settings" name="settings" class="items-tit-h2">Managing System Settings</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+<h2 id="settings" name="settings">Managing System Settings</h2>
<p>To manage system settings, which provide access to system variables:</p>
<ol>
-<li><p>To use the system settings-related features of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__SYSTEM__SETTINGS__MODULE.html">System Settings</a> API, include the <span style="font-family: Courier New,Courier,monospace"><system_settings.h></span> header file in your application:</p>
+<li><p>To use the system settings-related features of the System Settings API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__SYSTEM__SETTINGS__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__SYSTEM__SETTINGS__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><system_settings.h></span> header file in your application:</p>
<pre class="prettyprint">
#include <system_settings.h>
</pre></li>
</li>
<li><p>Get the setting data.</p>
-<p>The available settings are defined in the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__SYSTEM__SETTINGS__MODULE.html#ga56c8fa435516884c5648efecdd871eaa">system_settings_key_e</a> enumerator.</p>
+<p>The available settings are defined in the <span style="font-family: Courier New,Courier,monospace">system_settings_key_e</span> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__SYSTEM__SETTINGS__MODULE.html#ga56c8fa435516884c5648efecdd871eaa">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__SYSTEM__SETTINGS__MODULE.html#ga56c8fa435516884c5648efecdd871eaa">wearable</a> applications).</p>
<p>Read the data using the following functions, according to the data type of the value you want to read:</p>
-<ul class="ul"><li><span style="font-family: Courier New,Courier,monospace">int system_settings_get_value_int (system_settings_key_e key, int *value)</span></li>
+<ul><li><span style="font-family: Courier New,Courier,monospace">int system_settings_get_value_int (system_settings_key_e key, int *value)</span></li>
<li><span style="font-family: Courier New,Courier,monospace">int system_settings_get_value_bool (system_settings_key_e key, bool *value)</span></li>
<li><span style="font-family: Courier New,Courier,monospace">int system_settings_get_value_double (system_settings_key_e key, double *value)</span></li>
<li><span style="font-family: Courier New,Courier,monospace">int system_settings_get_value_string (system_settings_key_e key, char **value)</span></li>
<li><p>Track changes in the settings.</p>
-<ol><li><p>To track changes in the value of any system setting, set a callback function with the proper key.</p>
+<ol
type="a"><li><p>To track changes in the value of any system setting, set a callback function with the proper key.</p>
<p>The <span style="font-family: Courier New,Courier,monospace">SYSTEM_SETTINGS_KEY_DEFAULT_FONT_TYPE</span> setting does not support the callback function, so you must iterate through the <span style="font-family: Courier New,Courier,monospace">SYS_INFO_COUNT-1</span> records.</p>
</li>
</ol>
- </div>
- </li>
-
- </ul>
-</div>
-</div>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.guides/html/native/system/system_guide_n.htm">System Guides</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__FRAMEWORK.html">System API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__FRAMEWORK.html">System API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__FRAMEWORK.html">System API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>System: Getting System Information and Managing Devices</h1>
- <p>The system tutorials demonstrate how to use the following features in creating Tizen mobile native applications:</p>
+ <p>The system tutorials demonstrate how to use the following features in creating Tizen native applications:</p>
<ul>
<li><a href="device_tutorial_n.htm">Device: Accessing Devices, Such as SB, MMC, Battery, CPU, and Display</a>
+++ /dev/null
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
- <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
- <meta http-equiv="X-UA-Compatible" content="IE=9" />
- <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
- <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
- <script type="text/javascript" src="../../scripts/snippet.js"></script>
- <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
- <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
- <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
- <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
- <title>Phonenumber-utils</title>
- </head>
- <body onload="prettyPrint()" style="overflow: auto;">
-
- <div id="toc-navigation">
- <div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
- </div>
-
- <div id="toc_border"><div id="toc">
- <p class="toc-title">Related Info</p>
- <ul class="toc">
- <li><a href="../../../../org.tizen.tutorials/html/native/phonenumber_util_tutorial_n.htm">Phonenumber-utils Tutorial</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/XX.html">Phonenumber-utils API for Mobile Native</a></li>
- <li><a href="../../../../org.tizen.native.wearable.apireference/XX.html">Phonenumber-utils API for Wearable Native</a></li>
- </ul>
- </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Phonenumber-utils</h1>
-
-<p>Tizen enables you to parse and format phone numbers. The Phonenumber-utils APIs are implemented with the libphonenumber opensource library.</p>
-
-<p>The main features of the Phonenumber-utils API include:</p>
-
-<ul><li>Retrieving the location information
-<p>You can get the location based on the phone number, region, and language using the <span style="font-family: Courier New,Courier,monospace">phone_number_get_location_from_number()</span> function. If the function cannot provide the location with the passed language, it uses English.</p></li>
-
-<li>Formatting the phone number
-<p>You can format the phone number string based on the region using the dash ("-") and space (" ") characters using the <span style="font-family: Courier New,Courier,monospace">phone_number_get_formatted_number()</span> function.</p></li>
-</ul>
-
-<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
</script>
</body>
-</html>
\ No newline at end of file
+</html>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../images/mn_icon.png"/> <img alt="Wearable native" src="../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../org.tizen.guides/html/native/guides_n.htm">Tizen Native Guides</a></li>
- <li><a href="../../../org.tizen.native.mobile.apireference/index.html">Native API Reference</a></li>
+ <li><a href="../../../org.tizen.native.mobile.apireference/index.html">Native API References</a></li>
</ul>
</div></div>
</div>
<ul>
<li><a href="app_framework/app_framework_tutorials_n.htm">Application Framework: Controlling Your Application</a>
- <p>Demonstrate how you can configure application properties and manage application data.</p></li>
+ <p>Demonstrates how you can configure application properties and manage application data.</p></li>
<li><a href="base/base_tutorials_n.htm">Base: Using Fundamental Libraries</a>
- <p>Demonstrate how you can manage locale-sensitive information and use SQL databases in your application.</p></li>
+ <p>Demonstrates how you can manage locale-sensitive information and use SQL databases in your application.</p></li>
<li><a href="content/content_tutorials_n.htm">Content: Getting and Handling Media Content</a>
- <p>Demonstrate how you can manage and store a variety of data types, input and output data, and device content.</p></li>
+ <p>Demonstrates how you can manage and store a variety of data types, input and output data, and device content.</p></li>
<li><a href="context/context_tutorials_n.htm">Context: Detecting and Exploiting Contextual Information</a>
- <p>Demonstrate how you can detect user activities and gestures.</p></li>
+ <p>Demonstrates how you can detect user activities and gestures.</p></li>
<li><a href="graphics/graphics_tutorials_n.htm">Graphics: Creating and Managing Graphics</a>
- <p>Demonstrate how you can create and edit various kinds of images, shapes, text, and elements, and recognize specific elements from images and video.</p></li>
+ <p>Demonstrates how you can create and edit various kinds of images, shapes, text, and elements, and recognize specific elements from images and video.</p></li>
<li><a href="location/location_tutorials_n.htm">Location: Using Location Information and Service</a>
- <p>Demonstrate how you can manage location data.</p></li>
+ <p>Demonstrates how you can manage location data.</p></li>
<li><a href="messaging/messaging_tutorials_n.htm">Messaging: Sending SMS, MMS, Email, and Push Messages</a>
- <p>Demonstrate how you can send and receive SMS, MMS, email, and push messages.</p></li>
+ <p>Demonstrates how you can send and receive SMS, MMS, email, and push messages.</p></li>
<li><a href="multimedia/multimedia_tutorials_n.htm">Multimedia: Handling Audio, Video, Camera, and Images</a>
- <p>Demonstrate how you can capture and play various media.</p></li>
+ <p>Demonstrates how you can capture and play various media.</p></li>
<li><a href="network/network_tutorials_n.htm">Network: Managing Connections and Communication</a>
- <p>Demonstrate how you can send data to networks and other applications, and receive data back from them.</p></li>
- <li><a href="oauth2/oauth2_tutorials_n.htm">OAuth2: Authorization Framework</a>
- <p>Demonstrate how you can obtain access tokens using oauth2 authorization.</p></li>
+ <p>Demonstrates how you can send data to networks and other applications, and receive data back from them.</p></li>
+ <li><a href="oauth2/oauth2_tutorials_n.htm">OAuth2: Using the Authorization Framework</a>
+ <p>Demonstrates how you can obtain access tokens using oauth2 authorization.</p></li>
<li><a href="security/security_tutorials_n.htm">Security: Handling Keys and Cryptographic Operations</a>
- <p>Demonstrate how you can increase the security of your application through cryptography and request control.</p></li>
+ <p>Demonstrates how you can increase the security of your application through cryptography and request control.</p></li>
<li><a href="social/social_tutorials_n.htm">Social: Managing Personal Data</a>
- <p>Demonstrate how you can manage the user's personal data, such as contacts, calendars, and call history, on the device.</p></li>
- <li><a href="sync/sync_tutorials_n.htm">Sync: Scheduling for Syncing of Application's Data</a>
- <p>Demonstrate how you can manage your application with notification for syncing operation between server and device.</p></li>
+ <p>Demonstrates how you can manage the user's personal data, such as contacts, calendars, and call history, on the device.</p></li>
<li><a href="system/system_tutorials_n.htm">System: Getting System Information and Managing Devices</a>
- <p>Demonstrate how you can manage data related to or provided by the device.</p></li>
+ <p>Demonstrates how you can manage data related to or provided by the device.</p></li>
<li><a href="telephony/telephony_tutorials_n.htm">Telephony: Handling Phone Call, SIM Card, and Network Information</a>
<p>Demonstrates how you can retrieve call status, extract information stored on a SIM card, and get information about the current cellular network and telephony service.</p></li>
- <li><a href="ui/ui_tutorials_n.htm">UI: Creating the Application UI</a>
- <p>Demonstrate how you can create a visual outlook for your application to ensure the best possible user experience.</p></li>
+ <li><a href="ui/ui_tutorials_n.htm">UI Framework: Creating the Application UI</a>
+ <p>Demonstrates how you can create a visual outlook for your application to ensure the best possible user experience.</p></li>
<li><a href="uix/uix_tutorials_n.htm">UIX: Taking Advantage of UI Extensions</a>
- <p>Demonstrate how you can recognize and synthesize speech.</p></li>
+ <p>Demonstrates how you can recognize and synthesize speech.</p></li>
<li><a href="web/web_tutorials_n.htm">Web: Managing Web Pages and Web Content</a>
- <p>Demonstrate how you can create a simple web browser</p></li>
+ <p>Demonstrates how you can create a simple web browser</p></li>
+ <li><a href="sync/sync_tutorials_n.htm">Sync: Scheduling for Application Data Syncing</a> <span style="color: red">in mobile applications only</span>
+ <p>Demonstrates how you can receive notifications about syncing operations between a server and the device.</p></li>
</ul>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.guides/html/native/ui/animations_effects_n.htm">Animation and Effect Types Guide</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UI__FRAMEWORK.html">UI API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Ecore__Group.html">Ecore API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje__Group.html">Edje API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Ecore__Group.html">Ecore API for Wearable Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje__Group.html">Edje API for Wearable Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Animation and Effect Types: Using Various Effect and Effect Types</h1>
-<p>The animation and effect tutorials demonstrate how to create and implement a variety of animation effects in Tizen mobile native applications:</p>
+<p>The animation and effect tutorials demonstrate how to create and implement a variety of animation effects in Tizen native applications:</p>
<ul>
<li><a href="ecore_effects_tutorial_n.htm">Ecore Animator: Creating Ecore Animations</a> <p>Demonstrates how you can create an animation by changing and manipulating the Evas object attributes.</p></li>
<li><a href="edje_effects_tutorial_n.htm">Edje Animation: Using the Edje Library to Create Animations</a> <p>Demonstrates how you can use the Edje library to create your own animations.</p></li>
+++ /dev/null
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
- <meta http-equiv="content-type" content="text/html; charset=utf-8" />
- <meta http-equiv="X-UA-Compatible" content="IE=9" />
- <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
- <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
- <script type="text/javascript" src="../../scripts/snippet.js"></script>
- <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
- <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
- <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
- <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-
- <title>Application Framework: Managing the Application Framework</title>
-</head>
-
-<body onload="prettyPrint()" style="overflow: auto;">
-
-<div id="navigation">
- <div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
- </div>
- <div id="toc_border"><div id="toc">
- <p class="toc-title">Content</p>
- <ul class="toc">
- <li><a class="opensection" href="#framework">Handling the Application Framework</a>
- </li>
- </ul>
- <p class="toc-title">Related Info</p>
- <ul class="toc">
- <li><a href="../../../../org.tizen.guides/html/native/ui/ui_guide_n.htm">UI Guides</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__EFL__Group.html">EFL API</a></li>
- </ul>
- </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-
- <h1>Application Framework: Managing the Application Framework</h1>
-<div class="cont"><div class="static-cont">
-
-<p>This tutorial demonstrates how you can manage the application framework.</p>
-
-
-<h2>Warm-up</h2>
-<p>Become familiar with the EFL API basics by learning about:</p>
-
- <ul>
- <li><a class="opensection" href="#framework">Handling the Application Framework</a> <p>Start the application and manage its interactions with the operating system.</p></li>
- </ul>
-
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
- <!-- Folds -->
- <ul class="devicespecifications">
-
- <li>
- <div class="devicespec-tit">
- <h2 id="framework" name="framework" class="items-tit-h2">Handling the Application Framework</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
-<p>Appcore is the framework all Tizen applications are based on. It is simple and only handles interactions between applications and the operating system.</p>
-<p>An application starts with the <span style="font-family: Courier New,Courier,monospace;">main()</span> function. It initializes the appcore and starts it.</p>
-<p>The code below is the minimal application using appcore. It only builds and runs.</p>
-<pre class="prettyprint">
-// Add this include to be able to use the functions from appcore.
-#include <app.h>
-
-int
-main(int argc, char *argv[])
-{
- // Create and ui_app_lifecycle_callback_s object and initialize its contents to 0
- ui_app_lifecycle_callback_s event_callback = {0,};
-
- // Run the application
- return ui_app_main(&argc, &argv, &event_callback, NULL);
-}
-</pre>
-
-<p>Appcore is based on callbacks. There are two classes of callbacks: those about the application's life-cycle and those about the system.</p>
-<p>The application's life-cycle callbacks are:</p>
-<ul class="ul">
-<li><span style="font-family: Courier New,Courier,monospace;">create</span>: first initialization, comes after <span style="font-family: Courier New,Courier,monospace;">app_main()</span> has been called and initializes UI.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">control</span>: triggered when the application is started to do something. It can be called several times during the lifespan of an application, it shows the screen for the action requested. It requires specific information given to the callback.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">terminate</span>: saves work, releases resources, and exits.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">pause</span>: sets the application's window not visible and switches to a mode which uses less resources.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">resume</span>: sets the application's window to be visible again.</li>
-</ul>
-
-<p>Then, system-related callbacks:</p>
-<ul class="ul">
-<li><span style="font-family: Courier New,Courier,monospace;">low_memory</span>: the system is running low on memory, saves work, and releases resources; if this is not enough are freed, some applications will be killed.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">low_battery</span>: the system is running low on battery (less than 5%), saves work and avoids battery-draining workloads.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">device_orientation</span>: the screen orientation changed between vertical and horizontal, orientation information is given to the callback.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">language_changed</span>: language of the system is changed and messages are translated.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">region_format_changed</span>: time zone has changed.</li>
-</ul>
-
-<p>A basic implementation is shown below:</p>
-<pre class="prettyprint">
-#include <app.h>
-
-// Structure to store the data for application's logic; it is given
-// to each callback invoked through appcore
-typedef struct appdata {
- char *several;
- char *fields;
-} appdata_s;
-
-static bool
-app_create(void *data)
-{
- // Hook to take necessary actions before main event loop starts; this
- // usually means initializing UI and application's data (the "data"
- // parameter to this function)
-
- appdata_s *ad = data;
- create_gui(ad);
-
- // If this function returns true, the main loop of application starts
- // If this function returns false, the application is terminated
- return true;
-}
-
-static void
-app_control(app_control_h app_control, void *data)
-{
- // Handles the launch request, show the user the task requested through the
- // "app_control" parameter (detailed in the next section)
-}
-
-static void
-app_pause(void *data)
-{
- // Takes necessary actions when application becomes invisible
-}
-
-static void
-app_resume(void *data)
-{
- // Takes necessary actions when application becomes visible
-}
-
-static void
-app_terminate(void *data)
-{
- // Releases all resources
- appdata_s *ad = data;
-
- if (!ad) {
- return;
- }
-
- // If specific steps are needed:
- // destroy_gui(ad);
-}
-
-static void
-app_device_orientation(void *data)
-{
- // Takes necessary actions when device orientation changes
-}
-
-int
-main(int argc, char *argv[])
-{
- appdata_s ad = {0,};
- ui_app_lifecycle_callback_s event_callback = {0,};
-
- // Sets the callbacks for the application's logic; explanation on the
- // implementation below
- event_callback.create = app_create;
- event_callback.terminate = app_terminate;
- event_callback.pause = app_pause;
- event_callback.resume = app_resume;
- event_callback.app_control = app_control;
-
- // Note the &ad below; this is how the struct is given to callbacks
- return ui_app_main(argc, argv, &event_callback, &ad);
-}
-</pre>
-
-<p> The last section of this tutorial describes app control. It is a mechanism through which an application receives additional information about why it was started and with which parameters.</p>
-<p>An application receives a handle to an app control object in the <span style="font-family: Courier New,Courier,monospace;">app_control callback</span>. A definition for that callback is: </p>
-<pre class="prettyprint">app_control_cb(app_control_h app_control, void *user_data);
-</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace;">app_control_h</span> type is opaque and information can only be extracted from it through functions from the SDK.</p>
-<p>The most interesting ones are:</p>
-<ul class="ul">
-<li><span style="font-family: Courier New,Courier,monospace;">app_control_get_operation()</span>: retrieves a string describing which operation the application was started for.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">app_control_get_mime()</span>: retrieves the MIME type of the data (e.g. image/jpg).</li>
-<li><span style="font-family: Courier New,Courier,monospace;">app_control_get_app_extra_data()</span>: gets the string value associated with the given key.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">app_control_get_app_extra_data_array()</span>: gets the string array associated with the given key (first check with <span style="font-family: Courier New,Courier,monospace;">app_control_is_extra_data_array()</span> whether the data associated with a key is an array).</li>
-</ul>
-<p>If other functions are needed, check the <span style="font-family: Courier New,Courier,monospace;">app.h</span> header.</p>
- </div>
- </li>
-
- </ul>
-</div>
-</div>
-
-<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>
<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>Basic: Using Basic Interactions</title>
+ <title>Basic: Using Basic Interactions</title>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a class="opensection" href="#button">Using Buttons</a></li>
- <li><a class="opensection" href="#simple_text">Using Simple Text</a></li>
- <li><a class="opensection" href="#simple_list">Using Simple Lists</a></li>
+ <li><a href="#button">Using Buttons</a></li>
+ <li><a href="#simple_text">Using Simple Text</a></li>
+ <li><a href="#simple_list">Using Simple Lists</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a href="../../../../org.tizen.guides/html/native/ui/ui_widgets_n.htm">UI Widgets Guide</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__elm__widget__group.html">Elementary Widgets API</a></li>
+ <li><a href="../../../../org.tizen.guides/html/native/ui/components_mn.htm">Components Guide for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
-<h1>Basic: Using Basic Interactions</h1>
- <div class="cont"><div class="static-cont">
+<h1>Basic: Using Basic Interactions</h1>
+
-<p>This tutorial teaches the basics of widgets interactions. It builds upon the <a class="opensection" href="../../../../org.tizen.gettingstarted/html/first_app/first_app.htm#nativeapp">EFL Hello World Tutorial</a>.</p>
+<p>This tutorial teaches the basics of UI components interactions. It builds upon the <a href="../../../../org.tizen.gettingstarted/html/native/first_app/first_app_n.htm">Hello World example</a>.</p>
+
+ <table class="note">
+<tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">This feature is supported in mobile applications only.</td>
+ </tr>
+ </tbody>
+ </table>
<h2>Warm-up</h2>
-<p>Become familiar with the Elementary Widgets API by learning about:</p>
+<p>Become familiar with the Elementary and Evas API basics by learning about:</p>
<ul>
- <li><a class="opensection" href="#button">Using Buttons</a>
+ <li><a href="#button">Using Buttons</a>
<p>Use buttons in your application.</p></li>
- <li><a class="opensection" href="#simple_text">Using Simple Text</a>
+ <li><a href="#simple_text">Using Simple Text</a>
<p>Use simple text and text styles in your application.</p></li>
- <li><a class="opensection" href="#simple_list">Using Simple Lists</a>
+ <li><a href="#simple_list">Using Simple Lists</a>
<p>Use different kinds of lists in your application.</p></li>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
+ <h2 id="button" name="button">Using Buttons</h2>
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="button" name="button" class="items-tit-h2">Using Buttons</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
-<p>The basic application code is the same as in the <a class="opensection" href="../../../../org.tizen.gettingstarted/html/first_app/first_app.htm#nativeapp">EFL Hello World Tutorial</a>.</p>
+<p>The basic application code is the same as in the <a href="../../../../org.tizen.gettingstarted/html/native/first_app/first_app_n.htm">Hello World example</a>.</p>
<h3>Button Styles </h3>
<h4>Basic Text Button</h4>
</pre>
<h4>Basic Icon Button</h4>
-<p>Instead of a button with text, create a button with icon.</p>
+<p>Instead of a button with text, create a button with an icon.</p>
<pre class="prettyprint">Evas_Object* button2;
Evas_Object* icon2;
</pre>
<h4>Icon and Text Button</h4>
-<p>Create buttons with both an icon and a label.</p>
+<p>Create buttons with both an icon and a text label.</p>
<pre class="prettyprint">Evas_Object* button3;
Evas_Object* icon3;
button3 = elm_button_add(box);
</pre>
<h4>Press/Unpress Events</h4>
-<p>The button may also respond to the press and unpress events instead of the whole click.</p>
+<p>The button can respond to the press and unpress events instead of the entire click event.</p>
<pre class="prettyprint">static void _button_press_cb(void *data, Evas_Object *button, void *ev)
{
elm_object_text_set(button, "Pressed!");
</pre>
<h4>Repeated Events</h4>
-<p>The button may also receive several events in case it is being held by the user. Timings, such as the initial timeout and the repeat interval, may be set. In this example, the initial timeout is set to one second, and the repeat interval to half a second.</p>
+<p>The button can receive several events in case it is being held by the user. Timings, such as the initial timeout and the repeat interval, can be set. In this example, the initial timeout is set to 1 second, and the repeat interval to half a second.</p>
<pre class="prettyprint">static void _button_repeat_cb(void *data, Evas_Object *button, void *ev)
{
- static int count = 0;
- char buf[16];
+ static int count = 0;
+ char buf[16];
- snprintf(buf, sizeof(buf), "Repeat %d", count++);
+ snprintf(buf, sizeof(buf), "Repeat %d", count++);
- elm_object_text_set(button, buf);
+ elm_object_text_set(button, buf);
}
elm_button_autorepeat_set(button3, EINA_TRUE);
elm_button_autorepeat_gap_timeout_set(button3, 0.5);
evas_object_smart_callback_add(button3, "repeated", _button_repeat_cb, NULL);
</pre>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="simple_text" name="simple_text" class="items-tit-h2">Using Simple Text</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="simple_text" name="simple_text">Using Simple Text</h2>
+
<h3>Basic Text</h3>
<p>To create a label object, use the following code.</p>
<pre class="prettyprint">label = elm_label_add(ad->win);
<h3>Sliding Text</h3>
<p>If your text is too long, set it to slide. The duration of the slide is set to five seconds in the following example. There are several styles available:</p>
-<ul class="ul">
+<ul>
<li><span style="font-family: Courier New,Courier,monospace">slide_short</span>: The text stops at an edge, reverts to its initial position and slides again.</li>
<li><span style="font-family: Courier New,Courier,monospace">slide_long</span>: The text is originally empty. It slides in, all the way to the edge, continues sliding until the label is empty, and loops.</li>
<li><span style="font-family: Courier New,Courier,monospace">slide_bounce</span>: The text moves backwards after stopping at the edge. In the example, it is set to bounce.</li>
<p>You can apply basic styles to the text. For a bolded text, do as follows.</p>
<pre class="prettyprint">elm_object_text_set(label, "<b>This text is bold.</b>");
</pre>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="simple_list" name="simple_list" class="items-tit-h2">Using Simple Lists</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="simple_list" name="simple_list">Using Simple Lists</h2>
+
<h3>Basic List</h3>
<p>A list is a scrollable container, whose children are selected.</p>
<pre class="prettyprint">Evas_Object* list;
<h3>List Mode</h3>
<p>There are several modes for the list item dimensions.</p>
-<ul class="ul">
+<ul>
<li><span style="font-family: Courier New,Courier,monospace">ELM_LIST_COMPRESS</span>: The list does not set any size measures to inform the container how to resize it. If the list is not created as a "resize object", its dimensions are zeroed. The list respects the container's geometry and if any of the list items do not fit into the container transverse axis, the list does not scroll in that direction.</li>
<li><span style="font-family: Courier New,Courier,monospace">ELM_LIST_SCROLL</span>: This is the default value. This list is the same as ELM_LIST_COMPRESS, with the exception that if any of the list items do not fit into the container transverse axis, the list still scrolls in that direction.</li>
<li><span style="font-family: Courier New,Courier,monospace">ELM_LIST_LIMIT</span>: This list sets a minimum size measure on the list object, so that containers may respect it (and resize themselves to fit the child properly). More specifically, a minimum size measure is set for its transverse axis, so that the largest item in that direction fits well. This feature is bound by the list object's maximum size measures that are set externally.</li>
</pre>
<p>As for the bounce preference, the second argument is for the horizontal axis, the third one for the vertical axis.</p>
-<ul class="ul">
+<ul>
<li><span style="font-family: Courier New,Courier,monospace">ELM_SCROLLER_POLICY_OFF</span> hides the scrollbar</li>
<li><span style="font-family: Courier New,Courier,monospace">ELM_SCROLLER_POLICY_ON</span> shows the scrollbar</li>
<li><span style="font-family: Courier New,Courier,monospace">ELM_SCROLLER_POLICY_AUTO</span> the scrollbar is shown only when needed and stays hidden at other times</li>
<h3>Events</h3>
<p>A list responds to several events:</p>
-<ul class="ul">
+<ul>
<li><span style="font-family: Courier New,Courier,monospace">activated</span>: The user clicks or presses an item.</li>
<li><span style="font-family: Courier New,Courier,monospace">selected</span>: The user selects an item.</li>
<li><span style="font-family: Courier New,Courier,monospace">unselected</span>: The user unselects an item.</li>
<li><span style="font-family: Courier New,Courier,monospace">highlighted</span>: An item is pressed and highlighted.</li>
<li><span style="font-family: Courier New,Courier,monospace">unhighlighted</span>: The press and highlight is removed on an item.</li>
</ul>
- </div>
- </li>
- </ul>
-</div>
-</div>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
--- /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>Button: Using Buttons</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+ <div id="profile">
+ <p><img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+ </div>
+ <div id="toc_border"><div id="toc">
+ <p class="toc-title">Content</p>
+ <ul class="toc">
+ <li><a href="#init">Initializing the Button Application</a></li>
+ <li><a href="#style">Using Button Styles</a></li>
+ <li><a href="#event">Managing Button Events</a></li>
+ </ul>
+ <p class="toc-title">Related Info</p>
+ <ul class="toc">
+ <li><a href="../../../../org.tizen.guides/html/native/ui/components_wn.htm#button">Button Guide for Wearable Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Button.html">Button API for Wearable Native</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Button: Using Buttons</h1>
+
+
+<p>This tutorial teaches the basics of the button component interactions.</p>
+
+ <table class="note">
+<tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">This feature is supported in wearable applications only.</td>
+ </tr>
+ </tbody>
+ </table>
+
+<h2>Warm-up</h2>
+<p>Become familiar with the Button API basics by learning about:</p>
+ <ul>
+ <li><a href="#init">Initializing the Button Application</a>
+ <p>Create a base application where buttons can be used.</p></li>
+ <li><a href="#style">Using Button Styles</a>
+ <p>Create various button styles.</p></li>
+ <li><a href="#event">Managing Button Events</a>
+ <p>Handle various button events.</p></li>
+ </ul>
+
+<h2 id="init" name="init">Initializing the Button Application</h2>
+
+<p>This use case creates an application with a window entitled "Button Basic Tutorial". The window consists of a box component, and a button is placed inside the box.</p>
+
+<p>To create a typical elementary application:</p>
+<pre class="prettyprint">
+static void
+create_base_gui(appdata_s *ad)
+{
+ // Window
+ Evas_Object *btn1, *btn2, *btn3;
+
+ ad->win = elm_win_util_standard_add("main", "Button Basic Tutorial");
+ elm_win_autodel_set(ad->win, EINA_TRUE);
+
+ evas_object_smart_callback_add(ad->win, "delete,request", win_delete_request_cb, NULL);
+ eext_object_event_callback_add(ad->win, EEXT_CALLBACK_BACK, win_back_cb, ad);
+
+ ad->box = elm_box_add(ad->win);
+ evas_object_size_hint_weight_set(ad->box, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+ evas_object_show(ad->box);
+ elm_win_resize_object_add(ad->win, ad->box);
+
+ create_button(ad->box);
+
+ // Show the window after the base GUI is set up
+ evas_object_show(ad->win);
+}
+
+static bool
+app_create(void *data)
+{
+ appdata_s *ad = data;
+ create_base_gui(ad);
+
+ return true;
+}
+
+int
+main(int argc, char **argv)
+{
+ struct app_data ad = {0,};
+ ui_app_lifecycle_callback_s event_callback = {0,};
+
+ event_callback.create = app_create;
+
+ return ui_app_main(&argc, &argv, &event_callback, &ad);
+}</pre>
+
+
+ <h2 id="style" name="style">Using Button Styles</h2>
+
+<p>The basic application code is the same as in the <a href="../../../../org.tizen.gettingstarted/html/native/first_app/first_app_n.htm">Hello World example</a>.</p>
+
+<p>To use various button styles:</p>
+
+<ol><li><p>To create buttons using various styles:</p>
+
+<ul><li>Create a basic text-only button:
+
+<pre class="prettyprint">Evas_Object* button;
+
+button = elm_button_add(box);
+elm_object_text_set(button, "Click me");
+evas_object_size_hint_weight_set(button, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+evas_object_size_hint_align_set(button, EVAS_HINT_FILL, 0.5);
+elm_box_pack_end(box, button);
+evas_object_show(button);
+</pre></li>
+
+<li>Create a basic icon button (no text, just an icon):
+<pre class="prettyprint">Evas_Object* button2;
+Evas_Object* icon2;
+
+button2 = elm_button_add(box);
+icon2 = elm_icon_add(box);
+elm_image_file_set(icon2, "icon.png", NULL);
+elm_object_content_set(button2, icon2);
+evas_object_size_hint_weight_set(button2, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+evas_object_size_hint_align_set(button2, EVAS_HINT_FILL, 0.5);
+elm_box_pack_end(box, button2);
+evas_object_show(button2);
+</pre></li>
+
+<li>Create a button with both an icon and a text label:
+<pre class="prettyprint">Evas_Object* button3;
+Evas_Object* icon3;
+button3 = elm_button_add(box);
+icon3 = elm_icon_add(box);
+elm_image_file_set(icon3, "icon.png", NULL);
+elm_object_content_set(button3, icon3);
+elm_object_text_set(button3, "Press me");
+evas_object_size_hint_weight_set(button3, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+evas_object_size_hint_align_set(button3, EVAS_HINT_FILL, 0.5);
+elm_box_pack_end(box, button3);
+evas_object_show(button3);
+</pre></li>
+</ul></li>
+<li><p>To disable a button so that it is not in use, only shown:</p>
+<pre class="prettyprint">elm_object_disabled_set(button2, EINA_TRUE);
+</pre></li></ol>
+
+ <h2 id="event" name="event">Managing Button Events</h2>
+<p>The Elementary buttons respond to user interactions with several events.</p>
+<p>To manage button events:</p>
+
+<ul>
+<li>Handle click events:
+<p>The "click" event is the most basic and well-known one. The following code snippet changes the text of a button upon a click event: a press followed by an unpress.</p>
+<pre class="prettyprint">
+static void _button_click_cb(void *data, Evas_Object *button, void *ev)
+{
+ elm_object_text_set(button, "Clicked!");
+}
+evas_object_smart_callback_add(button, "clicked", _button_click_cb, NULL);
+</pre></li>
+
+<li>Handle press and unpress events:
+<p>The button can respond to the separate press and unpress events instead of the entire click event.</p>
+<pre class="prettyprint">static void _button_press_cb(void *data, Evas_Object *button, void *ev)
+{
+ elm_object_text_set(button, "Pressed!");
+}
+static void _button_unpress_cb(void *data, Evas_Object *button, void *ev)
+{
+ elm_object_text_set(button, "Unpressed!");
+}
+
+evas_object_smart_callback_add(button3, "pressed", _button_press_cb, NULL);
+evas_object_smart_callback_add(button3, "unpressed", _button_unpress_cb, NULL);
+</pre></li>
+
+<li>Handle repeated events:
+<p>The button can receive several events in case it is being held by the user. Timings, such as the initial timeout and the repeat interval, can be set. In this example, the initial timeout is set to 1 second, and the repeat interval to half a second.</p>
+<pre class="prettyprint">static void _button_repeat_cb(void *data, Evas_Object *button, void *ev)
+{
+ static int count = 0;
+ char buf[16];
+
+ snprintf(buf, sizeof(buf), "Repeat %d", count++);
+
+ elm_object_text_set(button, buf);
+}
+
+elm_button_autorepeat_set(button3, EINA_TRUE);
+elm_button_autorepeat_initial_timeout_set(button3, 1.0);
+elm_button_autorepeat_gap_timeout_set(button3, 0.5);
+evas_object_smart_callback_add(button3, "repeated", _button_repeat_cb, NULL);
+</pre></li></ul>
+
+
+<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>Circle Components: Creating a Circular View</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+ <div id="profile">
+ <p><img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+ </div>
+ <div id="toc_border"><div id="toc">
+ <p class="toc-title">Content</p>
+ <ul class="toc">
+ <li><a href="#create">Creating the Circle Surface</a></li>
+ <li><a href="#components">Creating the Circle Components</a></li>
+ </ul>
+ <p class="toc-title">Related Info</p>
+ <ul class="toc">
+ <li><a href="../../../../org.tizen.guides/html/native/ui/circle_components_wn.htm">Circle Components Guide</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+<h1>Circle Components: Creating a Circular View</h1>
+
+
+<p>This tutorial demonstrates how you can create a circular view with circle UI components, or circle components, which are supported by EFL Extension library. Additionally, you learn how to make your application to operate with rotary events. You need to test your application with a circular device or an emulator with circular display which has a rotary device in it.</p>
+ <table class="note">
+<tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">This feature is supported in wearable applications only.</td>
+ </tr>
+ </tbody>
+ </table>
+
+<h2>Warm-up</h2>
+<p>Become familiar with the Efl Extension circle component basics by learning about:</p>
+<ul>
+ <li><a href="#create">Creating the Circle Surface</a>
+ <p>Create a surface to show the circular UI of your application.</p></li>
+ <li><a href="#components">Creating the Circle Components</a>
+ <p>Use circular UI components which operate with rotary events.</p></li>
+</ul>
+
+ <h2 id="create" name="create">Creating the Circle Surface</h2>
+
+ <p class="figure">Figure: An application view with Circle Slider</p>
+<p align="center"><img alt="Circle Slider" src="../../images/circle_slider.png" /></p>
+
+<p>To show the circular UI of circle components, circle surface (<span style="font-family: Courier New,Courier,monospace">Eext_Circle_Surface</span> type) object is needed. The surface object can be connected with several circle components to manage the display. The following code shows how to create a surface object in an elementary naviframe component.</p>
+<pre class="prettyprint">
+Evas_Object *naviframe;
+Eext_Circle_Surface * surface;
+
+naviframe = elm_naviframe_add(parent);
+evas_object_show(naviframe);
+
+surface = eext_circle_surface_naviframe_add(naviframe);
+</pre>
+
+<h2 id="components">Creating the Circle Components</h2>
+<p>EFL Extension supports several circle components which operate with rotary events. There circle components are responsible for circular UI which fits with circular display.</p>
+<p>To create the circle components:</p>
+<ul>
+<li>Create the circle slider.
+<p>The circle slider provides a circular UI and operates with rotary events to change its value. After calling <span style="font-family: Courier New,Courier,monospace">eext_rotary_object_event_activated_set</span> to the circle slider, every rotary event changes its value with step 0.5.</p>
+<pre class="prettyprint">
+Evas_Object* slider;
+
+slider = eext_circle_object_slider_add(parent, surface);
+eext_circle_object_slider_step_set(slider, 0.5);
+eext_rotary_object_event_activated_set(slider, EINA_TRUE);
+</pre>
+</li>
+
+<li>Create the circle progressbar.
+<p>The circle progressbar provides a circular UI only. Its design can be changed by <span style="font-family: Courier New,Courier,monospace">eext_circle_object</span> APIs.</p>
+<pre class="prettyprint">
+Evas_Object* progressbar;
+
+progressbar = eext_circle_object_progressbar_add(parent, surface);
+eext_circle_object_value_min_max_set(progressbar, 0.0, 100.0);
+eext_circle_object_value_set(progressbar, 50);
+evas_object_show(progressbar);
+</pre>
+</li>
+
+<li>Create the circle scroller.
+<p>The circle scroller provides a circular scroll bar UI to an elementary scroller and operates with rotary events to scroll its content. After calling <span style="font-family: Courier New,Courier,monospace">eext_rotary_object_event_activated_set</span> to the circle scroller, every rotary event moves its content following the scroll direction.</p>
+<pre class="prettyprint">
+Evas_Object* scroller;
+Evas_Object* circle_scroller;
+
+scroller = elm_scroller_add(parent);
+elm_object_content_set(parent, scroller);
+
+circle_scroller = eext_circle_object_scroller_add(scroller, surface);
+eext_circle_object_scroller_policy_set(circle_scroller, ELM_SCROLLER_POLICY_OFF, ELM_SCROLLER_POLICY_AUTO);
+eext_rotary_object_event_activated_set(circle_scroller, EINA_TRUE);
+</pre>
+</li>
+
+<li>Create the circle genlist.
+<p>The circle genlist provides circular scroll bar UI to an elementary genlist and operates with rotary events to move to the next or the previous item. After calling <span style="font-family: Courier New,Courier,monospace">eext_rotary_object_event_activated_set</span> to the circle genlist, every rotary event shows the next or the previous item.</p>
+<pre class="prettyprint">
+Evas_Object* genlist;
+Evas_Object* circle_genlist;
+
+genlist = elm_genlist_add(parent);
+elm_object_content_set(parent, genlist);
+
+circle_genlist = eext_circle_object_genlist_add(genlist, surface);
+eext_circle_object_genlist_scroller_policy_set(circle_genlist, ELM_SCROLLER_POLICY_OFF, ELM_SCROLLER_POLICY_AUTO);
+eext_rotary_object_event_activated_set(circle_genlist, EINA_TRUE);
+</pre>
+</li>
+
+<li>Create the circle datetime.
+<p>The circle datetime provides a circular UI which is proper to each date or time field of the elementary datetime and operates with rotary events to change its value. After calling <span style="font-family: Courier New,Courier,monospace">eext_rotary_object_event_activated_set</span> to circle datetime, every rotary event changes the value of each date or time field.</p>
+<pre class="prettyprint">
+Evas_Object* datetime;
+Evas_Object* circle_datetime;
+
+datetime = elm_datetime_add(parent);
+elm_datetime_format_set(datetime, "%d/%b/%Y%I:%M%p");
+elm_object_content_set(parent, datetime);
+
+circle_datetime = eext_circle_object_datetime_add(datetime, surface);
+eext_rotary_object_event_activated_set(circle_datetime, EINA_TRUE);
+</pre>
+</li>
+</ul>
+
+
+<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>Datetime: Using Datetime</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+ <div id="profile">
+ <p><img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+ </div>
+ <div id="toc_border"><div id="toc">
+ <p class="toc-title">Content</p>
+ <ul class="toc">
+ <li><a href="#date">Creating a Date Picker</a></li>
+ <li><a href="#time">Creating a Time Picker</a></li>
+ </ul>
+ <p class="toc-title">Related Info</p>
+ <ul class="toc">
+ <li><a href="../../../../org.tizen.guides/html/native/ui/components_wn.htm#datetime">Datetime Guide for Wearable Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Datetime.html">Datetime API for Wearable Native</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Datetime: Using Datetime</h1>
+
+
+<p>This tutorial explains how you can create UI components that allow the user to select a date or time.</p>
+
+ <table class="note">
+<tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">This feature is supported in wearable applications only.</td>
+ </tr>
+ </tbody>
+ </table>
+
+<h2>Warm-up</h2>
+<p>Become familiar with the Datetime API basics by learning about:</p>
+ <ul>
+ <li><a href="#date">Creating a Date Picker</a>
+ <p>Create a datetime component with the datepicker style.</p></li>
+ <li><a href="#time">Creating a Time Picker</a>
+ <p>Create a datetime component with the timepicker style.</p></li>
+ </ul>
+
+ <h2 id="date" name="date">Creating a Date Picker</h2>
+
+<p>Use the <span style="font-family: Courier New,Courier,monospace">elm_datetime</span> component to add a date picker style (Year : Month : Day).</p>
+<p>The following example creates the datepicker-styled Datetime and adds it in the conform.</p>
+
+<pre class="prettyprint">
+// Add a datepicker style Datetime component
+datetime = elm_datetime_add(ad->win);
+evas_object_size_hint_align_set(datetime, EVAS_HINT_FILL, 0.5);
+evas_object_size_hint_weight_set(datetime, EVAS_HINT_EXPAND, 1.0);
+elm_object_style_set(datetime, "datepicker_layout");
+evas_object_show(datetime);
+
+elm_object_content_set(ad->conform, datetime);
+</pre>
+
+ <h2 id="time" name="time">Creating a Time Picker</h2>
+<p>Use the <span style="font-family: Courier New,Courier,monospace">elm_datetime</span> component to add a time picker style (Hour(12) : Min : AM/PM, or Hour(24) : Min).</p>
+<p>The following example creates the timepicker-styled Datetime and adds it in the conform.</p>
+
+<pre class="prettyprint">
+// Add a timepicker style Datetime component
+datetime = elm_datetime_add(ad->win);
+evas_object_size_hint_align_set(datetime, EVAS_HINT_FILL, 0.5);
+evas_object_size_hint_weight_set(datetime, EVAS_HINT_EXPAND, 1.0);
+elm_object_style_set(datetime, "timepicker_layout");
+evas_object_show(datetime);
+
+elm_object_content_set(ad->conform, datetime);
+</pre>
+
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a class="opensection" href="#setup">Setting Up the Application</a></li>
- <li><a class="opensection" href="#rotate">Creating a Rotation Effect</a></li>
- <li><a class="opensection" href="#zoom">Creating a Zoom Effect</a></li>
- <li><a class="opensection" href="#3d_rotate">Creating a 3D Rotation Effect</a></li>
- <li><a class="opensection" href="#drop_bounce">Creating Drop and Bounce Effects</a></li>
+ <li><a href="#setup">Setting Up the Application</a></li>
+ <li><a href="#rotate">Creating a Rotation Effect</a></li>
+ <li><a href="#zoom">Creating a Zoom Effect</a></li>
+ <li><a href="#3d_rotate">Creating a 3D Rotation Effect</a></li>
+ <li><a href="#drop_bounce">Creating Drop and Bounce Effects</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.guides/html/native/ui/animations_effects_n.htm#ecore_animation">Ecore Animator Guide</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__Ecore__Animator__Group.html">Ecore Animator API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Ecore__Group.html">Ecore API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Ecore__Group.html">Ecore API for Wearable Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Ecore Animator: Creating Ecore Animations</h1>
- <div class="cont"><div class="static-cont">
+
<p>This tutorial demonstrates how you can use Ecore animators to simplify the creation of animations. Using Ecore animators, you can manually create your own animations by changing and manipulating Evas object attributes. Ecore animators work like timers, running callback functions over a given duration (an animation timeline).</p>
<h2>Warm-up</h2>
-<p>Become familiar with the Ecore Animator API basics by learning about:</p>
+<p>Become familiar with the Ecore, Elementary, and Evas API basics by learning about:</p>
<ul>
- <li><a class="opensection" href="#setup">Setting Up the Application</a>
+ <li><a href="#setup">Setting Up the Application</a>
<p>Prepare the application for use.</p> </li>
- <li><a class="opensection" href="#rotate">Creating a Rotation Effect</a>
+ <li><a href="#rotate">Creating a Rotation Effect</a>
<p>Create rotation animation effects.</p> </li>
- <li><a class="opensection" href="#zoom">Creating a Zoom Effect</a>
+ <li><a href="#zoom">Creating a Zoom Effect</a>
<p>Create zoom animation effects.</p></li>
- <li><a class="opensection" href="#3d_rotate">Creating a 3D Rotation Effect</a>
+ <li><a href="#3d_rotate">Creating a 3D Rotation Effect</a>
<p>Create 3D rotation effects.</p></li>
- <li><a class="opensection" href="#drop_bounce">Creating Drop and Bounce Effects</a>
+ <li><a href="#drop_bounce">Creating Drop and Bounce Effects</a>
<p>Create drop and bounce effects.</p></li>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
+ <h2 id="setup" name="setup">Setting Up the Application</h2>
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="setup" name="setup" class="items-tit-h2">Setting Up the Application</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
<p>In this part of the tutorial, we create a simple application that manipulates and animates an Evas object. We use a "Basic UI Application" as the basis for the application.</p>
-<p>First, we set up the widgets we are going to use in the application:</p>
+<p>First, we set up the UI components we are going to use in the application:</p>
<pre class="prettyprint">typedef struct appdata
{
} appdata_s;
</pre>
-<p>We then create the actual widgets in the <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function, starting with the main window and application title:</p>
+<p>We then create the actual UI components in the <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function, starting with the main window and application title:</p>
<pre class="prettyprint">// Main window
ad->win = elm_win_util_standard_add(PACKAGE, PACKAGE);
evas_object_show(ad->label);
</pre>
-<p>Next, we create the animation target, which is an Evas object of type <span style="font-family: Courier New,Courier,monospace">Elm_Image</span>. We store the image, which is used in the source code, in the <span style="font-family: Courier New,Courier,monospace">res/images</span> folder of the application. On the contrary, we store the image, which is used in the edc file, in the <span style="font-family: Courier New,Courier,monospace">edje/images</span> folder.</p>
+<p>Next, we create the animation target, which is an Evas object of type <span style="font-family: Courier New,Courier,monospace">Elm_Image</span>. The image that is used in the source code is stored in the <span style="font-family: Courier New,Courier,monospace">res/images</span> folder of the application. The image that is used in the EDC file is stored in the <span style="font-family: Courier New,Courier,monospace">edje/images</span> folder.</p>
<pre class="prettyprint">// Animation target
// Setting the image path
if (!elm_image_file_set(ad->target, buf, NULL))
printf("error: could not load image \"%s\"\n", buf);
evas_object_size_hint_weight_set(ad->target, EVAS_HINT_FILL, EVAS_HINT_FILL);
-//Moving the image
+// Moving the image
evas_object_move(ad->target, 130, 100);
-//Resizing the image
+// Resizing the image
evas_object_resize(ad->target, 200, 100);
-//Showing the image
+// Showing the image
evas_object_show(ad->target);
</pre>
evas_object_resize(ad->target, 200, 100);
//Showing the image
</pre>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="rotate" name="rotate" class="items-tit-h2">Creating a Rotation Effect</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="rotate" name="rotate">Creating a Rotation Effect</h2>
+
<p>After the animation target is created, we can create the first button and the associated rotation animation:</p>
<pre class="prettyprint">// Button 1
<pre class="prettyprint">// Free used memory
evas_map_free(m);
</pre>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="zoom" name="zoom" class="items-tit-h2">Creating a Zoom Effect</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="zoom" name="zoom">Creating a Zoom Effect</h2>
+
<p>The next animation is a zoom, for which we also use an Evas Map.</p>
<p>First, we create the button in the <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function:</p>
<p>The <span style="font-family: Courier New,Courier,monospace">evas_map_util_zoom()</span> function takes the following arguments:</p>
-<ul class="ul">
+<ul>
<li>The map to change</li>
<li>The horizontal zoom factor</li>
<li>The vertical zoom factor</li>
<p>Here, we use a horizontal and vertical zoom factor of 2, and the X and Y coordinates of the target as the horizontal and vertical center coordinates.</p>
<p>The <span style="font-family: Courier New,Courier,monospace">_do_zoom()</span> callback function is called at several points along the animation timeline, which is why we multiply the horizontal and vertical zoom factor values by the timeline position. Each call will zoom more than the previous one, thereby creating the animation effect.</p>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="3d_rotate" name="3d_rotate" class="items-tit-h2">Creating a 3D Rotation Effect</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="3d_rotate" name="3d_rotate">Creating a 3D Rotation Effect</h2>
+
<p>The last animation is a 3D rotation. For this one, we are going to rotate the Evas object on all three axes (X, Y, Z).</p>
<p>First, we create the button and its callback function:</p>
<p>The <span style="font-family: Courier New,Courier,monospace">evas_map_util_3d_rotate()</span> function takes the following arguments:</p>
-<ul class="ul">
+<ul>
<li>The map to change</li>
<li>The angle (0-360°) to rotate around the X axis</li>
<li>The angle (0-360°) to rotate around the Y axis</li>
<p>Here, we rotate 360 degrees around each axis. The horizontal (X) rotation center is the X position of the target plus its width divided by 2. The vertical (Y) rotation center is the Y position of the target plus 60. The Z rotation center is 0.</p>
<p>As with the rotation and zoom animations, we multiply the angles by the timeline position to gently rotate the target on each call to the <span style="font-family: Courier New,Courier,monospace">_do_3d()</span> callback function along the timeline.</p>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="drop_bounce" name="drop_bounce" class="items-tit-h2">Creating Drop and Bounce Effects</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="drop_bounce" name="drop_bounce">Creating Drop and Bounce Effects</h2>
+
<p>To finish, we add drop and bounce effects to our buttons at application start. To do this, we create one timeline per button after creating the buttons in the <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function:</p>
<pre class="prettyprint">ecore_animator_timeline_add(2, _do_drop, ad->bt1);
<p>To get the bounce effect, we use the <span style="font-family: Courier New,Courier,monospace">ecore_animator_pos_map()</span> function, which maps an input position from 0.0 to 1.0 along the timeline to a position on a different curve. The curve can be of different types, such as <span style="font-family: Courier New,Courier,monospace">LINEAR</span>, <span style="font-family: Courier New,Courier,monospace">SINUSOIDAL</span>, and <span style="font-family: Courier New,Courier,monospace">BOUNCE</span>. This function takes the following arguments:</p>
-<ul class="ul">
+<ul>
<li>The input position to map</li>
<li>The mapping to use (<span style="font-family: Courier New,Courier,monospace">LINEAR</span>, <span style="font-family: Courier New,Courier,monospace">SINUSOIDAL</span>, and so on)</li>
<li>v1, which is the first parameter used by the mapping</li>
</pre>
<p>This frame is used in the move function to create the animation. The value increases on each <span style="font-family: Courier New,Courier,monospace">_do_drop()</span> call along the timeline, which produces a nice drop of the buttons from their initial position to 600 pixels on the vertical axis.</p>
- </div>
- </li>
- </ul>
-</div>
-</div>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a class="opensection" href="#startup">Animating on Application Start-up</a>
+ <li><a href="#startup">Animating on Application Start-up</a>
</li>
- <li><a class="opensection" href="#click">Animating Object on Click</a>
+ <li><a href="#click">Animating Object on Click</a>
</li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.guides/html/native/ui/animations_effects_n.htm#edje_animation">Edje Animation Guide</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje__Animation.html">Edje Animation API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje__Group.html">Edje API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje__Group.html">Edje API for Wearable Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Edje Animation: Using the Edje Library to Create Animations</h1>
- <div class="cont"><div class="static-cont">
+
<p>One of the greatest strengths of EFL and Edje is the ability to create animations. This tutorial demonstrates how <span style="font-family: Courier New,Courier,monospace">Elm_Transit</span> can create pre-defined animations, but you can also use the Edje library to create your own animations.</p>
<h2>Warm-up</h2>
-<p>Become familiar with the Edje Animation API basics by learning about:</p>
+<p>Become familiar with the Edje, Elementary, and Evas API basics by learning about:</p>
<ul>
- <li><a class="opensection" href="#startup">Animating on Application Start-up</a>
+ <li><a href="#startup">Animating on Application Start-up</a>
<p>Run an animation on application start-up.</p></li>
- <li><a class="opensection" href="#click">Animating Object on Click</a>
+ <li><a href="#click">Animating Object on Click</a>
<p>Animate an object when clicking.</p></li>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
+ <h2 id="startup" name="startup">Animating on Application Start-up</h2>
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="startup" name="startup" class="items-tit-h2">Animating on Application Start-up</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
<p>The goal of this tutorial is to create an animation target and buttons to start animations, all this in an EDC (Edje Data Collection) file.</p>
<p>First create an application using Basic EDC UI Application. This model provides a simple application just like the one used in the previous chapter, but with one more element: an <span style="font-family: Courier New,Courier,monospace">.edc</span> file.</p>
<p>Animations can be run at application startup. By default the Basic EDC UI Application model produces an empty window with a title. In this example a Tizen logo is added to the window and the behavior of the window title is changed.</p>
-<p>The images used by the Edje file are stored in the <span style="font-family: Courier New,Courier,monospace">edje/images</span> directory of the application. Copy the Tizen logo available in <span style="font-family: Courier New,Courier,monospace">shared/res/<yourapplicationname>.png</span> into the Edje images directory <span style="font-family: Courier New,Courier,monospace">edje/images</span>. Add then the image to the Edje images collection.</p>
+<p>The images used by the Edje file are stored in the <span style="font-family: Courier New,Courier,monospace">edje/images</span> directory of the application. Copy the Tizen logo available in <span style="font-family: Courier New,Courier,monospace">shared/res/<yourapplicationname>.png</span> into the Edje image directory <span style="font-family: Courier New,Courier,monospace">edje/images</span>. Then add the image to the Edje images collection.</p>
<pre class="prettyprint">images
{
image: "edceffects.png" COMP;
}
}
</pre><p>The logo part has the <span style="font-family: Courier New,Courier,monospace">IMAGE</span> type. The default state contains in the first description of the part sets:</p>
-<ul class="ul">
+<ul>
<li>the maximum and minimum size using the <span style="font-family: Courier New,Courier,monospace">min</span> and <span style="font-family: Courier New,Courier,monospace">max</span> statements</li>
<li>the image to use in this <span style="font-family: Courier New,Courier,monospace">part</span></li>
<li>the default position.</li>
}
</pre>
<p>This program goes from the default state to the bigger state in five seconds with a <span style="font-family: Courier New,Courier,monospace">LINEAR</span> effect, automatically running on the application startup.</p>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="click" name="click" class="items-tit-h2">Animating Object on Click</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="click" name="click">Animating Object on Click</h2>
+
<p>All the previous animations are automatic and do not have any relation with the user's actions. Next animate a part by clicking on another one. Make the title restore its default aspect when clicking on the small logo.</p>
<p>The parts and the states are already defined. The animation goes back to the default state, there is no need to add any parts or states: only add a program which makes the transition when clicking on logo part.</p>
<pre class="prettyprint">// Make the title go back to normal
<p>When clicking any mouse button on the small logo, the title goes back to its original state.</p>
<h3>Rotating Parts</h3>
<p>Next add two more buttons to the application and create programs to animate a target.</p>
-<p>It is possible to create a button with Edje from scratch, but to save time, the <span style="font-family: Courier New,Courier,monospace">SWALLOW</span> part is used in this example to store Elementary widgets.</p>
-<p>First create the <span style="font-family: Courier New,Courier,monospace">SWALLOW</span> parts, and then the <span style="font-family: Courier New,Courier,monospace">Elementary</span> widgets in the <span style="font-family: Courier New,Courier,monospace">.c</span> file.</p>
+<p>It is possible to create a button with Edje from scratch, but to save time, the <span style="font-family: Courier New,Courier,monospace">SWALLOW</span> part is used in this example to store Elementary UI components.</p>
+<p>First create the <span style="font-family: Courier New,Courier,monospace">SWALLOW</span> parts, and then the <span style="font-family: Courier New,Courier,monospace">Elementary</span> UI components in the <span style="font-family: Courier New,Courier,monospace">.c</span> file.</p>
<pre class="prettyprint">// Container for the rotate button
part
{
}
}
</pre><p>This second <span style="font-family: Courier New,Courier,monospace">SWALLOW</span> part is very similar to the first one. It is placed relatively to <span style="font-family: Courier New,Courier,monospace">btn/rotate</span>, in order to remain next to it.</p>
-<p>Next create the actual widgets. This is done in the <span style="font-family: Courier New,Courier,monospace">.c</span> file and is very similar to what is done for the buttons in the first chapter.</p>
+<p>Next create the actual UI components. This is done in the <span style="font-family: Courier New,Courier,monospace">.c</span> file and is very similar to what is done for the buttons in the first chapter.</p>
<p>This code is added to the <span style="font-family: Courier New,Courier,monospace">create_base_ui</span> function.</p>
<pre class="prettyprint">// Creation button in the app window
ad->button = elm_button_add(ad->win);
elm_object_part_content_set(ad->layout, "btn/grow", ad->btn_up);
evas_object_show(ad->btn_up);
</pre><p>In the default Basic EDC UI Application, the Edje layout is loaded by default. Create two Elementary buttons and add them to the <span style="font-family: Courier New,Courier,monospace">SWALLOW</span> containers, without having to setup sizes or positions as this is done in the <span style="font-family: Courier New,Courier,monospace">SWALLOW</span> container.</p>
-<p>Note that the part name is very important because it is used to be merged the Elementary widget and the <span style="font-family: Courier New,Courier,monospace">SWALLOW</span> part.</p>
+<p>Note that the part name is very important because it is used to be merged the Elementary UI component and the <span style="font-family: Courier New,Courier,monospace">SWALLOW</span> part.</p>
<p>When the buttons placed and set, create the animation target. it is done in the EDC file.</p>
<p>Add the animation target part.</p>
<p>The part initialization and the default <span style="font-family: Courier New,Courier,monospace">state</span>:</p>
{
state: "default" 0.0;
image { normal: "tizen-logo.png"; }
- color: 255 0 0 255; /* red */
+ color: 255 0 0 255; // red
rel1 { relative: 0.3 0.3; }
rel2 { relative: 0.7 0.4; }
}
map
{
- //Enable Map on the part
+ // Enable Map on the part
on: 1;
- //Enable smooth rendering
+ // Enable smooth rendering
smooth: 1;
- //Enable perspective
+ // Enable perspective
perspective_on: 1;
- //Apply rotations on the part
+ // Apply rotations on the part
rotation.x: 0;
rotation.y: 0;
rotation.z: 0;
}
- color: 0 255 0 255; /* green */
+ color: 0 255 0 255; // green
}
</pre><p>This part changes the color to green and defines the <span style="font-family: Courier New,Courier,monospace">map</span>. This statement makes rotations possible on an Edje <span style="font-family: Courier New,Courier,monospace">part</span>. Rotations are done around the x, y or z axes. In this example, the map is enabled and a 0° rotation is applied around each axis.</p>
<p>Add a state with a rotation around the z axis of 360°.</p>
<pre class="prettyprint">// The grow state
description {
state: "grow" 0.0;
- color: 0 0 255 255; /* blue */
+ color: 0 0 255 255; //blue
rel1
{
relative: 0.2 0.2;
after: "rotate,end";
}
</pre><p>This program sets the part state to <span style="font-family: Courier New,Courier,monospace">rotate 1.0</span> in 0.7 seconds, and when done calls the next one <span style="font-family: Courier New,Courier,monospace">rotate,end</span>.</p>
-<pre class="prettyprint">// Go back to the normal.
+<pre class="prettyprint">// Go back to the normal
program
{
name: "rotate,end";
}
</pre>
- </div>
- </li>
- </ul>
-</div>
-</div>
-
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a class="opensection" href="#create">Creating Objects</a>
+ <li><a href="#init">Initializing the EFL Extension</a>
+ </li>
+ <li><a href="#hw">Managing Hardware Key Events</a>
+ </li>
+ <li><a href="#rotary">Managing Rotary Events</a>
</li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.guides/html/native/ui/efl_extension_n.htm">Efl Extension Guide</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__EFL__EXTENSION__GROUP.html">Efl Extension API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Efl Extension: Creating a Naviframe Window</h1>
- <div class="cont"><div class="static-cont">
-<p>This tutorial demonstrates how you can use the Efl Extension API to create an application with a window. The window contains a naviframe and registers the EFL Extension <strong>Menu</strong> and <strong>Back</strong> key events for the naviframe.</p>
-
- <p>When the <strong>Menu</strong> key is pressed, a popup is created and an EFL Extension <strong>Back</strong> key event for this popup is registered. If the popup is shown and the <strong>Back</strong> key is pressed, the popup is removed. Otherwise, if the <strong>Back</strong> key is pressed and there is no popup, the application is hidden.</p>
-
+
+<p>This tutorial demonstrates how you can handle hardware key and rotary events.</p>
<h2>Warm-up</h2>
-<p>Become familiar with the Efl Extension API basics by learning about:</p>
+<p>Become familiar with the Efl Extension, Elementary, and Evas API basics by learning about:</p>
<ul>
- <li><a href="#create">Creating Objects</a>
- <p>Create objects using the naviframe and window.</p></li>
+ <li><a href="#init">Initializing the EFL Extension</a>
+ <p>Initialize the EFL Extension for use.</p></li>
+ <li><a href="#hw">Managing Hardware Key Events</a>
+ <p>Use the <strong>Menu</strong> and <strong>Back</strong> keys in your application.</p></li>
+ <li><a href="#rotary">Managing Rotary Events</a>
+ <p>Manage rotary events on a circular device.</p></li>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
-
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="create" name="create" class="items-tit-h2">Creating Objects</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
-<p>To create objects:</p>
+ <h2 id="init" name="init">Initializing the EFL Extension</h2>
-<ol>
-<li><p>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__EFL__EXTENSION__GROUP.html">Efl Extension</a> API, include the <span style="font-family: Courier New,Courier,monospace"><efl_extension.h></span> header file in your application:</p>
+<p>To use the functions and data types of the Efl Extension API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><efl_extension.h></span> header file in your application:</p>
<pre class="prettyprint">
#include <efl_extension.h>
-</pre></li>
+</pre>
+
+<h2 id="hw" name="hw">Managing Hardware Key Events</h2>
+
+<table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">Hardware key events are only supported in mobile devices.</td>
+ </tr>
+ </tbody>
+ </table>
+
+<p>The application has a window that contains a naviframe and registers the EFL Extension <strong>Menu</strong> and <strong>Back</strong> key events for the naviframe.</p>
+<p>When the <strong>Menu</strong> key is pressed, a popup is created and an EFL Extension <strong>Back</strong> key event for this popup is registered. If the popup is shown and the <strong>Back</strong> key is pressed, the popup is removed. Otherwise, if the <strong>Back</strong> key is pressed and there is no popup, the application is hidden.</p>
+
+<p>To manage hardware key events:</p>
+<ol>
<li>Create objects using the window and naviframe:
<pre class="prettyprint">
static void
{
Evas_Object *win = NULL;
- // Create window
+ // Create the window
win = elm_win_util_standard_add(NULL, "extension sample");
evas_object_smart_callback_add(win, "delete,request", _win_del, NULL);
- // Create naviframe
+ // Create the naviframe
Evas_Object *nf = NULL;
nf = elm_naviframe_add(win);
evas_object_size_hint_weight_set(win, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
elm_object_text_set(label, "Press menu key to show popup,<br/>back key to exit.");
elm_naviframe_item_push(nf, "Efl Extension usage", NULL, NULL, label, NULL);
- // Show window
+ // Show the window
evas_object_show(win);
}
</pre>
static void
create_base_gui(appdata_s *ad)
{
- // Register EFL extension callbacks for Menu and Back key events
+ // Register the EFL extension callbacks for Menu and Back key events
eext_object_event_callback_add(nf, EEXT_CALLBACK_MORE, _create_popup, NULL);
eext_object_event_callback_add(nf, EEXT_CALLBACK_BACK, _nf_back_cb, win);
}
elm_object_text_set(content, "Press back key to remove popup.");
elm_object_content_set(popup, content);
- // Register extension callback for the Back key event
+ // Register the EFL extension callback for the Back key event
eext_object_event_callback_add(popup, EEXT_CALLBACK_BACK, eext_popup_back_cb, NULL);
evas_object_show(popup);
}
{
Evas_Object *win = data;
- // Hide window
+ // Hide the window
elm_win_lower(win);
}
</pre>
</li>
</ol>
- </div>
- </li>
-
- </ul>
-</div>
-</div>
+<h2 id="rotary">Managing Rotary Events</h2>
+
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">Rotary events are only supported in devices with a circular screen.</td>
+ </tr>
+ </tbody>
+ </table>
+
+<p>To manage rotary events:</p>
+<ol>
+<li>Create the rotary event handler:
+<ol type="a">
+<li>Create the window:
+<pre class="prettyprint">
+static void
+create_base_gui(appdata_s *ad)
+{
+Evas_Object *win = NULL;
+
+ // Window
+ win = elm_win_util_standard_add(NULL, "extension circle sample");
+ elm_win_autodel_set(win, EINA_TRUE);
+ evas_object_smart_callback_add(win, "delete,request", win_delete_request_cb, NULL);
+
+ // Show the window after base gui is set up
+ evas_object_show(win);
+}
+</pre>
+</li>
+
+<li>Register the rotary event handler:
+<pre class="prettyprint">
+static void
+create_base_gui(appdata_s *ad)
+{
+ // Register the rotary event handler
+ eext_rotary_event_handler_add(_rotary_handler_cb, NULL);
+}
+</pre></li>
+<li>Define the callback function:
+<pre class="prettyprint">
+Eina_Bool _rotary_handler_cb(void *data, Eext_Rotary_Event_Info *ev)
+{
+ if (ev->direction == EEXT_ROTARY_DIRECTION_CLOCKWISE)
+ {
+ LOGD("Rotary device rotated in clockwise direction");
+ }
+ else
+ {
+ LOGD("Rotary device rotated in counter clockwise direction");
+ }
+
+ return EINA_FALSE;
+}
+</pre>
+</li>
+
+<li>Remove the rotary event handler and release all resources when you do not need it anymore.
+<pre class="prettyprint">
+static void
+app_terminate(void *data)
+{
+ // Release all resources
+ eext_rotary_event_handler_del(_rotary_handler_cb);
+}
+</pre>
+</li>
+</ol>
+</li>
+<li>Create a rotary event callback for a normal Evas object.
+<p>When a rotary event occurs, the slider value is adjusted accordingly.</p>
+<ol type="a">
+<li>Create the objects.
+<p>The window and the slider are created using the Elementary APIs.</p>
+<pre class="prettyprint">
+static void
+create_base_gui(appdata_s *ad)
+{
+ Evas_Object *win = NULL, *slider = NULL;
+
+ // Window
+ win = elm_win_util_standard_add(NULL, "extension sample");
+ elm_win_autodel_set(win, EINA_TRUE);
+ evas_object_smart_callback_add(win, "delete,request", win_delete_request_cb, NULL);
+
+ // Slider
+ slider = elm_slider_add(win);
+ evas_object_size_hint_weight_set(slider, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+ elm_slider_min_max_set(slider, 0, 50);
+ elm_slider_step_set(slider, 1.0);
+ evas_object_show(slider);
+ elm_win_resize_object_add(win, slider);
+
+ // Show the window after the base GUI is set up
+ evas_object_show(win);
+}
+</pre>
+</li>
+<li>Register the rotary event callback.
+<p>To receive the rotary event, register the rotary event callback and set the activated object as the slider object.</p>
+<pre class="prettyprint">
+static void
+create_base_gui(appdata_s *ad)
+{
+ // Register rotary event callback
+ ext_rotary_object_event_callback_add(slider, _rotary_event_cb, NULL);
+ eext_rotary_object_event_activated_set(slider, EINA_TRUE);
+}
+</pre>
+<p>Define the rotary callback function:</p>
+<pre class="prettyprint">
+Eina_Bool _rotary_event_cb(void *data, Evas_Object *obj, Eext_Rotary_Event_Info *ev)
+{
+ Evas_Object *slider = obj;
+ int val = elm_slider_value_get(slider);
+ if (ev->direction == EEXT_ROTARY_DIRECTION_CLOCKWISE)
+ {
+ elm_slider_value_set(slider, val + 1);
+ }
+ else
+ {
+ elm_slider_value_set(slider, val - 1);
+ }
+
+ return EINA_FALSE;
+}
+</pre>
+</li>
+</ol>
+</li>
+<li>Create a rotary event callback for an EFL Extension object.
+<p>When a rotary event occurs, the slider value is adjusted accordingly.</p>
+<ol type="a">
+<li>Create the objects:
+<pre class="prettyprint">
+static void
+create_base_gui(appdata_s *ad)
+{
+ Evas_Object *win = NULL, *conform = NULL;
+ Eext_Circle_Surface *sur = NULL;
+
+ // Window
+ win = elm_win_util_standard_add(NULL, "extension circle sample");
+ elm_win_autodel_set(win, EINA_TRUE);
+ evas_object_smart_callback_add(win, "delete,request", win_delete_request_cb, NULL);
+
+ // Conformant
+ conform = elm_conformant_add(win);
+ elm_win_indicator_mode_set(win, ELM_WIN_INDICATOR_SHOW);
+ elm_win_indicator_opacity_set(win, ELM_WIN_INDICATOR_OPAQUE);
+ evas_object_size_hint_weight_set(conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+ elm_win_resize_object_add(win, conform);
+ evas_object_show(conform);
+
+ // Surface
+ sur = eext_circle_surface_conformant_add(conform);
+
+ // Slider
+ slider = eext_circle_object_slider_add(conform, sur);
+ eext_circle_object_value_min_max_set(slider, 0.0, 30.0);
+ eext_circle_object_value_set(slider, 0.0);
+
+ // Show the window after the base GUI is set up
+ evas_object_show(win);
+}
+</pre>
+</li>
+<li>Set the activated object.
+<p>Since the EFL Extension API is used to create the slider object, the created slider object already registers the rotary event callbacks internally. To receive a rotary event, you only need to set the activated object as the desired object (slider).</p>
+<pre class="prettyprint">
+static void
+create_base_gui(appdata_s *ad)
+{
+ // Activate circle slider's rotary object event
+ // Its value increases/decreases its value by 1.0 to clockwise or
+ // counter-clockwise rotary event
+ eext_rotary_object_event_activated_set(slider, EINA_TRUE);
+ eext_circle_object_slider_step_set(slider, 1.0);
+}
+</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>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a class="opensection" href="#edc">Optimizing EDC</a></li>
- <li><a class="opensection" href="#evas">Optimizing Evas</a></li>
+ <li><a href="#edc">Optimizing EDC</a></li>
+ <li><a href="#evas">Optimizing Evas</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a href="../../../../org.tizen.gettingstarted/html/process/performance_n.htm">Optimizing Application Performance</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__EFL__Group.html">EFL API</a></li>
- </ul>
+ <li><a href="../../../../org.tizen.gettingstarted/html/native/process/performance_n.htm">Optimizing Application Performance</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje__Group.html">Edje API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje__Group.html">Edje API for Wearable Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>
+ </ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>EFL Optimization: Optimizing Tizen Native Applications</h1>
-<div class="cont"><div class="static-cont">
+
<p>This tutorial demonstrates how you can optimize your Tizen native application.</p>
<h2>Warm-up</h2>
- <p>Become familiar with the EFL API basics by learning about:</p>
+ <p>Become familiar with the Edje, Elementary, and Evas API basics by learning about:</p>
<ul>
<li><a href="#edc">Optimizing EDC</a>
<p>Optimize the EDC code.</p></li>
<p>Optimize the Evas code.</p></li>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
-
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="edc" name="edc" class="items-tit-h2">Optimizing EDC</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
- </div>
- <div class="devicespec-con">
- <p>To optimize EDC:</p>
+<h2 id="edc" name="edc">Optimizing EDC</h2>
+
+<p>To optimize EDC:</p>
<ol>
<li>Remove unnecessary parts.
<p>When you create EDC, there can be obsolete and unnecessary parts. Since they have an effect on performance, remove them.</p>
</pre> </p> </td>
</tr>
<tr>
- <td rowspan="1" colspan="1"> <p
style="text-align:center;"><img alt="Image before" src="../../images/image_before.png" /></p> </td>
- <td rowspan="1" colspan="1" class="middle"><p
style="text-align:center;"><img alt="Image after" src="../../images/image_after.png" /></p> </td>
+ <td rowspan="1" colspan="1"> <p
align="center"><img alt="Image before" src="../../images/image_before.png" /></p> </td>
+ <td rowspan="1" colspan="1" class="middle"><p
align="center"><img alt="Image after" src="../../images/image_after.png" /></p> </td>
</tr>
</tbody>
</table>
</li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="evas" name="evas" class="items-tit-h2">Optimizing Evas</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+<h2 id="evas" name="evas">Optimizing Evas</h2>
+
<p>To optimize Evas:</p>
<ol>
<li>Use a rectangle object instead of using a solid color image.
</li>
</ol>
- </div>
- </li>
-
- </ul>
-</div>
-</div>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.guides/html/native/ui/efl_n.htm">EFL Guide</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__EFL__Group.html">EFL API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__EFL__Group.html">EFL API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__EFL__Group.html">EFL API for Wearable Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">Efl Extension API for Wearable Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>EFL: Using EFL Features for Designing the UI</h1>
- <div class="cont"><div class="static-cont">
-<p>This tutorial demonstrates how you can use EFL to create your application UI. EFL is an open-source toolkit that provides a set of libraries that offer useful features to applications. EFL covers a number of areas from data structures to widget sets. EFL is one of the Tizen native UI modules and is available in various Tizen profiles. In Tizen, EFL is commonly used for UI applications, although you can also use it for non-UI applications.</p>
+
+<p>This tutorial demonstrates how you can use EFL to create your application UI. EFL is an open-source toolkit that provides a set of libraries that offer useful features to applications. EFL covers a number of areas from data structures to UI component sets. EFL is one of the Tizen native UI modules and is available in various Tizen profiles. In Tizen, EFL is commonly used for UI applications, although you can also use it for non-UI applications.</p>
<h2>Warm-up</h2>
-<p>Become familiar with the EFL API basics by learning about:</p>
+<p>Become familiar with the Efl Extension and Elementary API basics by learning about:</p>
<ul>
<li><a href="#basic">Learning EFL Basics</a>
<li><a href="#layout">Using the Base Application Layout</a>
<p>Use the base layout with EFL for your application.</p> </li>
<li><a href="#ClockSimple">Creating a Simple Clock View</a>
- <p>Create a simple clock view using a box, container widget, and label to create a basic layout.</p> </li>
+ <p>Create a simple clock view using a box, container UI component, and label to create a basic layout.</p> </li>
<li><a href="#ClockComplex">Creating a Complex Clock View</a>
<p>Create a complex clock view by organizing a basic layout using boxes.</p> </li>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
+ <h2 id="basic" name="basic">Learning EFL Basics</h2>
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="basic" name="basic" class="items-tit-h2">Learning EFL Basics</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
<p>EFL stands for Enlightenment Foundation Libraries. Enlightenment is a project consisting of the Enlightenment window manager, EFL libraries, and various utilities and applications. The Enlightenment team needed powerful libraries to handle, among others, rendering, main loops, and events, so EFL was introduced during the development of the Enlightenment window manager to fill these gaps. EFL is now widely used outside of the Enlightenment window manager.</p>
<p>Currently, five EFL libraries are publicly available to Tizen native applications. These libraries provide the following features, among others:</p>
-<ul class="ul">
+<ul>
<li>Data structures</li>
<li>Optimized rendering</li>
<li>Thread pool</li>
<li>Events and callbacks</li>
<li>Fd handlers</li>
<li>Timers and animators</li>
- <li>Widgets</li>
+ <li>UI components</li>
<li>Layout scripts</li>
</ul>
<p>The key characteristics of EFL include:</p>
-<ul class="ul">
+<ul>
<li><strong>Performance</strong>
<p>The main reason Tizen adopted EFL as its native toolkit is its speed. EFL is highly optimized by using a scene graph and retained-mode rendering. EFL is fast even in software rendering.</p></li>
<li><strong>Small memory footprint</strong>
<li><strong>GUI and logic separation</strong>
<p>EFL supports GUI layout and logic separation by having the layout description in a plain text file and the logic code in the C or C++ source files.</p></li>
<li><strong>Themeable</strong>
- <p>An EFL theme can be changed at runtime without restarting the application. Widgets are customizable so that each application can create its own customized theme to overlay above the default theme, adding customized versions of widgets to achieve a specific look and feel.</p></li>
+ <p>An EFL theme can be changed at runtime without restarting the application. UI components are customizable so that each application can create its own customized theme to overlay above the default theme, adding customized versions of UI components to achieve a specific look and feel.</p></li>
<li><strong>Scalable</strong>
<p>EFL supports a scale factor that affects the size of objects in the application at runtime. By configuring the scale factor, applications can scale up and down as needed. The scale factor also supports a default setting that allows applications to scale nicely out-of-the-box.</p></li>
<li><strong>Animations</strong>
<h3 name="libraries" id="libraries">EFL Libraries</h3>
<p class="figure">Figure: EFL libraries</p>
-<p
style="text-align:center;"><img alt="EFL libraries" src="../../images/efl_libraries.png"/></p>
+<p
align="center"><img alt="EFL libraries" src="../../images/efl_libraries.png"/></p>
<p>Tizen supports the following EFL libraries:</p>
-<ul class="ul">
+<ul>
<li><strong>Ecore</strong>
<p>A clean and tiny event loop library with many convenience modules supporting operating system abstraction and integration. Ecore runs a main loop that is a key feature for event-driven applications and the rest of EFL. The Ecore main loop runs infinitely (or until requested to quit) and handles all registered events, such as touch, mouse, key, timers, animators, idlers, and fd handlers. Ecore also provides modules for handling network connections, files, input methods, and so on. EFL assumes that you run an Ecore main loop at all times (except at application startup and shutdown) and use the main loop to handle all callbacks (unless otherwise documented). ELF also assumes that threads use the Ecore infrastructure to return the results of their work back to the main loop for implementation.</p></li>
<li><strong>Edje</strong>
<li><strong>Eina</strong>
<p>A library for data types and other useful tools. Eina provides data types such as lists, in-line lists, arrays, in-line arrays, hash tables, compact lists, iterator functions, sparse matrices, red-black trees, string buffers, shared string tokens, rectangle regions, generic value storage, and data models. Eina also supports tools such as benchmarking infrastructure, converters, counters, error handlers, basic file handlers, lazy allocators, loggers, magic number handlers, memory pools, modules, rectangles, safety checks, and string handlers.</p></li>
<li><strong>Elementary</strong>
- <p>A widget set library. Elementary is composed of several common UI widgets, such as buttons, check boxes, entries, lists, pop-ups, and windows. Some infrastructure is shipped with Elementary, such as scale configuration handling, finger-size configuration for touch UIs, theme handling, focus handling, accessibility, UI mirroring, and profile handling.</p></li>
+ <p>A UI component set library. Elementary is composed of several common UI components, such as buttons, check boxes, entries, lists, pop-ups, and windows. Some infrastructure is shipped with Elementary, such as scale configuration handling, finger-size configuration for touch UIs, theme handling, focus handling, accessibility, UI mirroring, and profile handling.</p></li>
<li><strong>Evas</strong>
<p>A highly optimized scene graph and rendering library. Evas is a stateful canvas scene graph in which you can place objects such as rectangles, lines, polygons, text, text blocks, images, and smart objects. Evas uses a scene graph to keep track of the state of all objects. You do not need to worry about objects repainting or keeping their states. You only need to modify them for the new state and let Evas take care of the rest. Evas supports anti-aliased text, smooth super and sub-sampled scaled images, alpha-blended objects, and more.</p></li>
</ul>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="native" name="native" class="items-tit-h2">Using EFL in Tizen Native Applications</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="native" name="native">Using EFL in Tizen Native Applications</h2>
<p>To start the Ecore main loop and move your application into the running state, call the <span style="font-family: Courier New,Courier,monospace">ui_app_main()</span> function. The Ecore main loop handles all general events, such as touch, mouse, key, and network events.</p>
After your application is running:
<ol>
- <li>Create a window, and organize your widgets inside the window.</li>
+ <li>Create a window, and organize your UI components inside the window.</li>
<li>Create the application logic code to be called when callbacks or timed events occurs (for example, animators for animations, timers for timeouts).</li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="layout" name="layout" class="items-tit-h2">Using the Base Application Layout</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="layout" name="layout">Using the Base Application Layout</h2>
<p>This section provides how to use base layout with EFL for your application. Also, you can get some idea of sample layouts for applications.</p>
<h3>Using the Base Layout</h3>
-<p>When developing a Tizen native application, it is recommended that you base your application layout on the base layout. The base layout supports the indicator and view management. The following figure shows the wireframe and widget hierarchy of the base layout:</p>
+<p>When developing a Tizen native application, it is recommended that you base your application layout on the base layout. The base layout supports the indicator and view management. The following figure shows the wireframe and UI component hierarchy of the base layout:</p>
-<p class="figure">Figure: Base layout wireframe and widget hierarchy</p>
-<p style="text-align:center;"><img alt="Base layout wireframe and widget hierarchy" src="../../images/base_layout.png"/></p>
+<p class="figure">Figure: Base layout wireframe and UI component hierarchy</p>
+<p align="center"><img alt="Base layout wireframe and UI component hierarchy" src="../../images/base_layout.png"/></p>
-<p>The widgets have the following roles:</p>
+<p>The UI components have the following roles:</p>
-<ul class="ul">
- <li>Window (Elm_win): Every UI widget from Elementary is rendered in a Window.</li>
+<ul>
+ <li>Window (Elm_win): Every UI component from Elementary is rendered in a Window.</li>
<li>Conformant (Elm_Conformant): The Conformant supports the indicator area and resizing the application due to rotation or the ISF (keypad).</li>
<li>Naviframe (Elm_Naviframe): The Naviframe acts as a view manager and optionally provides the application title. The main layout of the application is added to the Naviframe's view area.</li>
</ul>
<p>The Setting application consists of a list to show as a menu. For organizing the application, create the application layout with a screen-size-list and place the layout into the Naviframe's view area.</p>
<p class="figure">Figure: Setting UI and layout</p>
-<p
style="text-align:center;"><img alt="Settings UI and layout" src="../../images/setting_sd.png"/></p>
+<p
align="center"><img alt="Settings UI and layout" src="../../images/setting_sd.png"/></p>
<p>For more information, see the Setting sample application.</p>
<p>You can use a list or grid if the same objects are shown repeatedly. In this sample application, however, the various items are shown in a layout.</p>
<p class="figure">Figure: Application Store UI and layout</p>
-<p
style="text-align:center;"><img alt="Application Store UI and layout" src="../../images/application_store_sd.png"/></p>
+<p
align="center"><img alt="Application Store UI and layout" src="../../images/application_store_sd.png"/></p>
<p>For more information, see the Application Store sample application.</p>
<p>The Calculator is a good example of an exception to the base layout. The application has no view changes and no application title. As these are the two reasons why you should use a Naviframe, you do not need to add a Naviframe to the Calculator.</p>
-<p>You can organize the application layout with container widgets. Container widgets are used for arranging widgets, both basic widgets and other container widgets.</p>
+<p>You can organize the application layout with container components. Container components are used for arranging UI components, both basic UI components and other container components.</p>
<p class="figure">Figure: Calculator UI and layout</p>
-<p
style="text-align:center;"><img alt="Calculator UI and layout" src="../../images/calculator_sd.png"/></p>
+<p
align="center"><img alt="Calculator UI and layout" src="../../images/calculator_sd.png"/></p>
<p>For more information, see the Calculator sample application.</p>
<p>The style includes parts for locating the Drawer and the main view. In the Drawer area, you can add a list to indicate the menu. In the main view, you can add a Naviframe to organize the view of the layout.</p>
<p class="figure">Figure: Email UI and layout</p>
-<p
style="text-align:center;"><img alt="Email UI and layout" src="../../images/email_sample.png"/></p>
+<p
align="center"><img alt="Email UI and layout" src="../../images/email_sample.png"/></p>
<p>For more information, see the Email sample application.</p>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="ClockSimple" name="ClockSimple" class="items-tit-h2">Creating a Simple Clock View</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
-<p>This sample creates a basic clock view that shows the time, current city, and date. This sample demonstrates how to use a box, container widget, and label to create a basic layout. The application includes the following widgets:</p>
-
-<ul class="ul">
+
+ <h2 id="ClockSimple" name="ClockSimple">Creating a Simple Clock View</h2>
+
+<p>This sample creates a basic clock view that shows the time, current city, and date. This sample demonstrates how to use a box, container component, and label to create a basic layout. The application includes the following UI components:</p>
+
+<ul>
<li><span style="font-family: Courier New,Courier,monospace">Elm_window</span>: Basic canvas for rendering the screen</li>
<li><span style="font-family: Courier New,Courier,monospace">Elm_conformant</span>: Support indicator area</li>
-<li><span style="font-family: Courier New,Courier,monospace">Elm_naviframe</span>: View manager widget</li>
-<li><span style="font-family: Courier New,Courier,monospace">Elm_box</span>: Container widget for layouting other widgets</li>
-<li><span style="font-family: Courier New,Courier,monospace">Elm_label</span>: Basic widget for showing text with a tag</li>
+<li><span style="font-family: Courier New,Courier,monospace">Elm_naviframe</span>: View manager component</li>
+<li><span style="font-family: Courier New,Courier,monospace">Elm_box</span>: Container component for layouting other UI components</li>
+<li><span style="font-family: Courier New,Courier,monospace">Elm_label</span>: Basic UI component for showing text with a tag</li>
</ul>
<p>The following figure illustrates the main view of the simple clock sample application and its wireframe structure.</p>
-
<p class="figure">Figure: Simple clock screen</p>
-<p
style="text-align:center;"><img alt="Simple clock screen" src="../../images/efl_simple_clock.png" /></p>
+<p class="figure">Figure: Simple clock screen</p>
+<p
align="center"><img alt="Simple clock screen" src="../../images/efl_simple_clock.png" /></p>
<p>The basic clock is implemented in the <span style="font-family: Courier New,Courier,monospace">world_clock.c</span> file. In this application, the data structure for application is following:</p>
<pre class="prettyprint">ad->win = elm_win_util_standard_add(PACKAGE, PACKAGE);
elm_win_autodel_set(ad->win, EINA_TRUE);
-/* Conformant */
+// Conformant
conform = elm_conformant_add(ad->win);
elm_win_conformant_set(ad->win, EINA_TRUE);
evas_object_size_hint_weight_set(conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
elm_win_resize_object_add(ad->win, conform);
evas_object_show(conform);
-/* Naviframe */
+// Naviframe
nf = elm_naviframe_add(conform);
elm_object_content_set(conform, nf);
evas_object_show(nf);
<pre class="prettyprint">elm_naviframe_item_push(nf, _("World Clock"), NULL, NULL, box, "basic");</pre>
-<p>The parameters include the title, the name of the widget added as a new view, and the naviframe style. The basic style is used for a simple view with normal title.</p>
+<p>The parameters include the title, the name of the UI component added as a new view, and the naviframe style. The basic style is used for a simple view with normal title.</p>
- <p>The following figure illustrates the widget hierarchy of the application.</p>
+ <p>The following figure illustrates the UI component hierarchy of the application.</p>
- <p class="figure">Figure: Simple clock widgets</p>
-<p style="text-align:center;"><img alt="Simple clock widgets" src="../../images/efl_simple_clock_tree.png" /></p>
+<p class="figure">Figure: Simple clock components</p>
+<p align="center"><img alt="Simple clock components" src="../../images/efl_simple_clock_tree.png" /></p>
<p>Set the HW key handler. The Tizen mobile environment supports the <strong>More</strong> and back keys, but only the back key is handled in this sample. </p>
<pre class="prettyprint">eext_object_event_callback_add(ad->win, EEXT_CALLBACK_BACK, win_back_cb, ad);
elm_win_lower(ad->win);
}
</pre>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="ClockComplex" name="ClockComplex" class="items-tit-h2">Creating a Complex Clock View</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="ClockComplex" name="ClockComplex">Creating a Complex Clock View</h2>
-<p>This sample creates a complex clock view. The sample demonstrates how to organize a basic layout using boxes. The application includes the following widgets:</p>
+<p>This sample creates a complex clock view. The sample demonstrates how to organize a basic layout using boxes. The application includes the following UI components:</p>
-<ul class="ul">
+<ul>
<li><span style="font-family: Courier New,Courier,monospace">Elm_window</span>: Basic canvas for rendering the screen</li>
<li><span style="font-family: Courier New,Courier,monospace">Elm_conformant</span>: Support indicator area</li>
-<li><span style="font-family: Courier New,Courier,monospace">Elm_naviframe</span>: View manager widget</li>
-<li><span style="font-family: Courier New,Courier,monospace">Elm_box</span>: Container widget for layouting other widgets</li>
-<li><span style="font-family: Courier New,Courier,monospace">Elm_label</span>: Basic widget for showing text with a tag</li>
-<li><span style="font-family: Courier New,Courier,monospace">Elm_genlist</span>: List widget</li>
+<li><span style="font-family: Courier New,Courier,monospace">Elm_naviframe</span>: View manager component</li>
+<li><span style="font-family: Courier New,Courier,monospace">Elm_box</span>: Container component for layouting other UI components</li>
+<li><span style="font-family: Courier New,Courier,monospace">Elm_label</span>: Basic UI component for showing text with a tag</li>
+<li><span style="font-family: Courier New,Courier,monospace">Elm_genlist</span>: List component</li>
<li><span style="font-family: Courier New,Courier,monospace">Elm_button</span>: Simple push button</li>
</ul>
<p>The following figure illustrates the main view of the complex clock sample application and its wireframe structure.</p>
-
<p class="figure">Figure: Complex clock screen</p>
-<p
style="text-align:center;"><img alt="Complex clock screen" src="../../images/efl_complex_clock.png" /></p>
+<p class="figure">Figure: Complex clock screen</p>
+<p
align="center"><img alt="Complex clock screen" src="../../images/efl_complex_clock.png" /></p>
<h3>Basic GUI</h3>
<p>The base GUI of the application contains the following elements:</p>
-<ul class="ul">
+<ul>
<li>Clock</li>
<li>List</li>
<li>Main layout with buttons</li>
<h3>Clock</h3>
- <p>The clock element contains 3 labels. The labels are packed as a single box widget, which is part of the main layout.</p>
+ <p>The clock element contains 3 labels. The labels are packed as a single box component, which is part of the main layout.</p>
<pre class="prettyprint">static Evas_Object *
create_clock(Evas_Object *nf)
{
<h3>List</h3>
-<p>This element contains a list of cities. The widget used is <span style="font-family: Courier New,Courier,monospace">genlist</span>, which is a complex list able to show information with various styles.</p>
+<p>This element contains a list of cities. The UI component used is <span style="font-family: Courier New,Courier,monospace">genlist</span>, which is a complex list able to show information with various styles.</p>
<pre class="prettyprint">static Evas_Object *
create_list(Evas_Object *nf)
{
}
</pre>
-<p>The box widget is used to organize the main layout. The box is expanded as much as possible to fill the entire view.</p>
+<p>The box component is used to organize the main layout. The box is expanded as much as possible to fill the entire view.</p>
<pre class="prettyprint"> // Box
box = elm_box_add(nf);
evas_object_size_hint_weight_set(box, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
<p>The box contains the following elements:</p>
-<ul class="ul">
+<ul>
<li><p>The clock element contains 3 labels. The parameter for the <span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_weight_set()</span> function is 0.1 meaning that the height of the clock box occupies 30% of the available area. </p>
<pre class="prettyprint"> clock = create_clock(nf);
</li>
</ul>
-<p>The following figure illustrates the widget hierarchy of the application.</p>
+<p>The following figure illustrates the UI component hierarchy of the application.</p>
- <p class="figure">Figure: Complex clock widgets</p>
-<p style="text-align:center;"><img alt="Complex clock widgets" src="../../images/efl_complex_clock_tree.png" /></p>
+<p class="figure">Figure: Complex clock components</p>
+<p align="center"><img alt="Complex clock components" src="../../images/efl_complex_clock_tree.png" /></p>
<p>Add the main layout to the naviframe, and set the HW key handler:</p>
<pre class="prettyprint">eext_object_event_callback_add(ad->win, EEXT_CALLBACK_BACK, win_back_cb, ad);
elm_win_lower(ad->win);
}
</pre>
- </div>
- </li>
- </ul>
-</div>
-</div>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
<p>To get a screenshot:</p>
-<ol><li>Initialize with the <span style="font-family: Courier New,Courier,monospace">efl_util_screenshot_initialize()</span> function:</p>
+<ol><li>Initialize with the <span style="font-family: Courier New,Courier,monospace">efl_util_screenshot_initialize()</span> function:
<pre class="prettyprint">
#include <tbm_surface.h>
#include <X11/Xlib.h>
}
</pre></li>
-<li>Free resources with the <span style="font-family: Courier New,Courier,monospace">efl_util_screenshot_deinitialize()</span> function:</p>
+<li>Free the resources with the <span style="font-family: Courier New,Courier,monospace">efl_util_screenshot_deinitialize()</span> function:
<pre class="prettyprint">
efl_util_screenshot_deinitialize(screenshot);
}
return;
}
</pre></li>
- <li>Free resources with the <span style="font-family: Courier New,Courier,monospace">efl_util_input_deinitialize_generator()</span> function:
+ <li>Free the resources with the <span style="font-family: Courier New,Courier,monospace">efl_util_input_deinitialize_generator()</span> function:
<pre class="prettyprint">
efl_util_input_deinitialize_generator();
}</pre></li></ol>
return;
}
</pre></li>
- <li>Free resources with the <span style="font-family: Courier New,Courier,monospace">efl_util_input_deinitialize_generator()</span> function:
+ <li>Free the resources with the <span style="font-family: Courier New,Courier,monospace">efl_util_input_deinitialize_generator()</span> function:
<pre class="prettyprint">
efl_util_input_deinitialize_generator();
}</pre></li></ol>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a class="opensection" href="#setup">Setting Up the Application</a>
- </li>
- <li><a class="opensection" href="#rotate">Creating a Rotation Effect</a>
- </li>
- <li><a class="opensection" href="#zoom">Creating a Zoom Effect</a>
- </li>
- <li><a class="opensection" href="#flip">Creating a Flip Effect</a>
- </li>
- <li><a class="opensection" href="#blend">Creating a Blend Transition</a>
- </li>
- <li><a class="opensection" href="#fade">Creating a Fade Effect</a>
- </li>
- <li><a class="opensection" href="#flip_y">Creating a Flip on y Axis</a>
- </li>
- <li><a class="opensection" href="#wipe">Creating a Wipe Effect</a>
- </li>
+ <li><a href="#setup">Setting Up the Application</a></li>
+ <li><a href="#rotate">Creating a Rotation Effect</a></li>
+ <li><a href="#zoom">Creating a Zoom Effect</a></li>
+ <li><a href="#flip">Creating a Flip Effect</a></li>
+ <li><a href="#blend">Creating a Blend Transition</a></li>
+ <li><a href="#fade">Creating a Fade Effect</a></li>
+ <li><a href="#flip_y">Creating a Flip on y Axis</a></li>
+ <li><a href="#wipe">Creating a Wipe Effect</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.guides/html/native/ui/animations_effects_n.htm#elm_transit">Elementary Animations Guide</a> </li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__Transit.html">Transit API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Ecore__Group.html">Ecore API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Ecore__Group.html">Ecore API for Wearable Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Elementary Animations: Applying Transition Effects to an Evas Object</h1>
- <div class="cont"><div class="static-cont">
+
<p>This tutorial demonstrates how you can use Elm Transit to create animated transitions effects, such as rotation, wiping, zooming, resizing, and fading, to an <span style="font-family: Courier New,Courier,monospace">Evas_Object</span>.</p>
<h2>Warm-up</h2>
-<p>Become familiar with the Transit API basics by learning about:</p>
+<p>Become familiar with the Ecore, Elementary, and Evas API basics by learning about:</p>
<ul>
- <li><a class="opensection" href="#setup">Setting Up the Application</a>
+ <li><a href="#setup">Setting Up the Application</a>
<p>Prepare the application for use.</p></li>
- <li><a class="opensection" href="#rotate">Creating a Rotation Effect</a>
+ <li><a href="#rotate">Creating a Rotation Effect</a>
<p>Create a rotation effect in your application.</p></li>
- <li><a class="opensection" href="#zoom">Creating a Zoom Effect</a>
+ <li><a href="#zoom">Creating a Zoom Effect</a>
<p>Create a zoom effect in your application.</p></li>
- <li><a class="opensection" href="#flip">Creating a Flip Effect</a>
+ <li><a href="#flip">Creating a Flip Effect</a>
<p>Create a flip effect in your application.</p></li>
- <li><a class="opensection" href="#blend">Creating a Blend Transition</a>
+ <li><a href="#blend">Creating a Blend Transition</a>
<p>Create a blend transition in your application.</p></li>
- <li><a class="opensection" href="#fade">Creating a Fade Effect</a>
+ <li><a href="#fade">Creating a Fade Effect</a>
<p>Create a fade effect in your application.</p></li>
- <li><a class="opensection" href="#flip_y">Creating a Flip on y Axis</a>
+ <li><a href="#flip_y">Creating a Flip on y Axis</a>
<p>Create a flip on y axis in your application.</p></li>
- <li><a class="opensection" href="#wipe">Creating a Wipe Effect</a>
+ <li><a href="#wipe">Creating a Wipe Effect</a>
<p>Create a wipe effect in your application.</p></li>
<li><a href="transit_effect_tutorial_n.htm">Implementing Elementary Transit Effects</a> <p>Demonstrates how you can implement a variety of EFL animation effects.</p></li>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
+ <h2 id="setup" name="setup">Setting Up the Application</h2>
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="setup" name="setup" class="items-tit-h2">Setting Up the Application</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
-<p>First create a basic application like explained in the <a href="basic_tutorial_n.htm">Basic Tutorial</a>.</p>
+<p>First create a basic application like explained in the <a href="basic_tutorial_mn.htm">Basic Tutorial</a>.</p>
<p>When the application is ready, create Evas objects and animate them. In this example, one single object is animated with different type of animations.</p>
} appdata_s;
</pre>
-<p>This structure holds the main widgets of the application:</p>
+<p>This structure holds the main UI components of the application:</p>
-<ul class="ul">
+<ul>
<li><span style="font-family: Courier New,Courier,monospace">win</span>: the main window</li>
<li><span style="font-family: Courier New,Courier,monospace">label</span>: the title label</li>
<li><span style="font-family: Courier New,Courier,monospace">button</span>: a button object, the target of the animations</li>
<li><span style="font-family: Courier New,Courier,monospace">rt_angle</span>, <span style="font-family: Courier New,Courier,monospace">zto</span>, <span style="font-family: Courier New,Courier,monospace">zfrom</span>: these variables are used to store values for animations</li>
</ul>
-<p>Place the widgets on the application's canvas. To make things easier, the widget creation is split into two functions.</p>
+<p>Place the UI components on the application's canvas. To make things easier, the UI component creation is split into two functions.</p>
-<p>The first function creates widgets on the main window, and the second in the boxes.</p>
+<p>The first function creates UI components on the main window, and the second in the boxes.</p>
<pre class="prettyprint">create_base_gui(appdata_s *ad)
{
ad->zfrom = 1.0;
ad->zto = 2.0;
- /* Window */
+ // Window
ad->win = elm_win_util_standard_add(PACKAGE, PACKAGE);
elm_win_autodel_set(ad->win, EINA_TRUE);
evas_object_smart_callback_add(ad->win, "delete,request", win_delete_request_cb, NULL);
- /* Label*/
+ // Label
ad->label = elm_label_add(ad->win);
elm_object_text_set(ad->label, "Effects Tutorial");
evas_object_size_hint_weight_set(ad->label, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
elm_win_resize_object_add(ad->win, ad->label);
evas_object_show(ad->label);
- /* Show window after base gui is set up */
+ // Show the window after the base GUI is set up
evas_object_show(ad->win);
ecore_event_handler_add(ECORE_EVENT_KEY_DOWN, keydown_cb, ad);
_create_btn_box(ad);
-} //End of create_base_gui
+} // End of create_base_gui
</pre>
<p>This function takes <span style="font-family: Courier New,Courier,monospace">appdata_s *ad</span> as its only parameter. This function is called by the creation callback <span style="font-family: Courier New,Courier,monospace">app_create</span> of the Tizen application (<span style="font-family: Courier New,Courier,monospace">event_callback.create = app_create;</span>) in the <span style="font-family: Courier New,Courier,monospace">main</span> function of the application.</p>
<p>Create the main window with a title and add the <span style="font-family: Courier New,Courier,monospace">delete</span> callback:</p>
-<pre class="prettyprint">/* Window */
+<pre class="prettyprint">// Window
ad->win = elm_win_util_standard_add(PACKAGE, PACKAGE);
elm_win_autodel_set(ad->win, EINA_TRUE);
evas_object_smart_callback_add(ad->win, "delete,request", win_delete_request_cb, NULL);
-/* Label*/
+// Label
ad->label = elm_label_add(ad->win);
elm_object_text_set(ad->label, "Effects Tutorial");
evas_object_size_hint_weight_set(ad->label, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
elm_win_resize_object_add(ad->win, ad->label);
evas_object_show(ad->label);
-/* Show window after base gui is set up */
+// Show the window after the base GUI is set up
evas_object_show(ad->win);
ecore_event_handler_add(ECORE_EVENT_KEY_DOWN, keydown_cb, ad);
appdata_s *ad = data;
// Starting the rotation effect 360 degrees
- //evas_object_resize(ad->button, 100, 50);
+ // evas_object_resize(ad->button, 100, 50);
elm_object_text_set(ad->button, "Resize");
_resize_effect(ad->button);
<p>This function is an <span style="font-family: Courier New,Courier,monospace">evas_object_smart_callback</span> and thus needs to have its specific prototype: it does not return anything and receives three parameters:</p>
-<ul class="ul">
+<ul>
<li><span style="font-family: Courier New,Courier,monospace">data</span>: data to be passed</li>
<li><span style="font-family: Courier New,Courier,monospace">btn</span>: the object the callback is being called about</li>
<li><span style="font-family: Courier New,Courier,monospace">ev</span>: the actual event, seldom used</li>
<p>When the resize button is clicked, the animation target button grows.</p>
<p>All the action buttons are created exactly the same way as the resize button, with a callback and an animation function.</p>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="rotate" name="rotate" class="items-tit-h2">Creating a Rotation Effect</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="rotate" name="rotate">Creating a Rotation Effect</h2>
+
<p>This effect rotates the animation target button with an angle of 360°. This angle is stored in the application data as <span style="font-family: Courier New,Courier,monospace">ad->rt_angle</span>.</p>
<p>Create the button and add it to the center column in the <span style="font-family: Courier New,Courier,monospace">_create_btn_box</span> function.</p>
<p>The animation function rotates the animation target by adding a rotation effect with <span style="font-family: Courier New,Courier,monospace">elm_transit_effect_rotation_add</span>. This function takes three parameters:</p>
-<ul class="ul">
+<ul>
<li><span style="font-family: Courier New,Courier,monospace">Elm_Transit</span></li>
<li>the rotation position at which the effect begins</li>
<li>the rotation position at which the effect ends</li>
Elm_Transit *trans = elm_transit_add();
elm_transit_object_add(trans, obj);
- // rotates the object from its original angle to given degrees to the right
+ // Rotates the object from its original angle to given degrees to the right
elm_transit_effect_rotation_add(trans, 0.0, angle);
elm_transit_duration_set(trans, 2.0);
elm_transit_go(trans);
}
</pre>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="zoom" name="zoom" class="items-tit-h2">Creating a Zoom Effect</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="zoom" name="zoom">Creating a Zoom Effect</h2>
+
<p>The zoom effect zooms on the animation target to make it twice bigger. Store the source rate and the destination rate in the application data using <span style="font-family: Courier New,Courier,monospace">ad->zfrom</span> and <span style="font-family: Courier New,Courier,monospace">ad->zto</span>.</p>
<p>Create the button and add it to the center column in the <span style="font-family: Courier New,Courier,monospace">_create_btn_box</span> function.</p>
appdata_s *ad = data;
// Starting the rotation effect 360 degrees
- //evas_object_resize(ad->button, 100, 50);
+ // evas_object_resize(ad->button, 100, 50);
elm_object_text_set(ad->button, "Zoom");
_zoom_effect(ad->button, ad->zfrom, ad->zto);
}
}
</pre>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="flip" name="flip" class="items-tit-h2">Creating a Flip Effect</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="flip" name="flip">Creating a Flip Effect</h2>
+
<p>This effect is applied to a pair of objects, in the order they are added, to the <span style="font-family: Courier New,Courier,monospace">Elm_Transit</span> transition. In this example, add the animation target button and the button called buttonbck which represents the back of the target button.</p>
<p>Create the action button for the flip effect:</p>
}
</pre>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="blend" name="blend" class="items-tit-h2">Creating a Blend Transition</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="blend" name="blend">Creating a Blend Transition</h2>
+
<p>The blend effect also works the same way as the flip, but without the axes or direction information. Use the back button here as well. To create the blend effect button:</p>
<pre class="prettyprint">// The blend button
elm_transit_go(trans);
}
</pre>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="fade" name="fade" class="items-tit-h2">Creating a Fade Effect</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="fade" name="fade">Creating a Fade Effect</h2>
+
<p>The fade effect works exactly the same way as the blend effect. First create the button:</p>
<pre class="prettyprint">// The fade button
elm_transit_go(trans);
}
</pre>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="flip_y" name="flip_y" class="items-tit-h2">Creating a Flip on y Axis</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="flip_y" name="flip_y">Creating a Flip on y Axis</h2>
+
<p>This is same as the flip transition, but on y axis. To create a flip on y axis:</p>
<pre class="prettyprint">// The flip y button
elm_transit_go(trans);
}
</pre>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="wipe" name="wipe" class="items-tit-h2">Creating a Wipe Effect</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="wipe" name="wipe">Creating a Wipe Effect</h2>
+
<p>The wipe transition is applied on an Evas object considering the wipe type and the direction. Use <span style="font-family: Courier New,Courier,monospace">ELM_TRANSIT_EFFECT_WIPE_TYPE_HIDE</span> to hide the button, and <span style="font-family: Courier New,Courier,monospace">ELM_TRANSIT_EFFECT_WIPE_DIR_RIGHT</span> to do it from left to right.</p>
<p>The wipe animation button is as follows:</p>
appdata_s *ad = data;
// Starting the rotation effect 360 degrees
- //evas_object_resize(ad->button, 100, 50);
+ // evas_object_resize(ad->button, 100, 50);
// Setting the button text
elm_object_text_set(ad->button, "Wipe");
_wipe_effect(ad->button);
elm_transit_go(trans);
}
</pre>
- </div>
- </li>
-
- </ul>
-</div>
-</div>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a class="opensection" href="#init">Initializing EOM</a></li>
- <li><a class="opensection" href="#getid">Getting Output ID</a></li>
- <li><a class="opensection" href="#setattr">Setting Attribute</a></li>
- <li><a class="opensection" href="#setwin">Setting External Window</a></li>
- <li><a class="opensection" href="#getstatus">Getting Status of External Output Device</a></li>
+ <li><a href="#init">Initializing the EOM</a></li>
+ <li><a href="#getid">Getting the Output ID</a></li>
+ <li><a href="#presentation">Setting the Presentation Mode</a></li>
+ <li><a href="#setwin">Setting the External Window</a></li>
+ <li><a href="#getstatus">Getting the Status of the External Output Device</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.guides/html/native/ui/eom_n.htm">EOM Guide</a></li>
-<!-- ( <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__EFL__UTIL__MODULE.html">EFL UTIL API</a></li>) -->
+<!-- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__EOM__MODULE.html">EOM API for Mobile Native</a></li>
+<li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EOM__MODULE.html">EOM API for Wearable Native</a></li> -->
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>EOM: Using the External Output Devices</h1>
- <div class="cont"><div class="static-cont">
- <p>This tutorial demonstrates how you can control external output devices by EOM API.</p>
+ <p>This tutorial demonstrates how you can control external output devices with the External Output Manager (EOM).</p>
<h2>Warm-up</h2>
<p>Become familiar with the EOM API basics by learning about:</p>
-
<ul>
- <li><a href="#init">Initializing EOM</a>
- <p>Initialize the EOM.</p></li>
- <li><a href="#getid">Getting Output ID</a>
- <p>Get output device's ID.</p></li>
- <li><a href="#setattr">Setting Attribute</a>
- <p>Set the attribute.</p></li>
- <li><a href="#setwin">Setting External Window</a>
- <p>Set external window.</p></li>
- <li><a href="#getstatus">Getting Status of External Output Device</a>
- <p>Get external output device's information</p></li>
+ <li><a href="#init">Initializing the EOM</a>
+ <p>Initialize the external output for use.</p></li>
+ <li><a href="#getid">Getting the Output ID</a>
+ <p>Obtain the output ID and control the external window.</p></li>
+ <li><a href="#presentation">Setting the Presentation Mode</a>
+ <p>Set the output attribute and connect to an external device using the presentation mode.</p></li>
+ <li><a href="#setwin">Setting the External Window</a>
+ <p>Set the external window and resize the image.</p></li>
+ <li><a href="#getstatus">Getting the Status of the External Output Device</a>
+ <p>Get information about the external output device.</p></li>
</ul>
- <div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
-
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="init" name="init" class="items-tit-h2">Initializing EOM</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
- <p>To use the EOM API, the following header file has to be included:</p>
- <pre class="prettyprint">#include <eom.h></pre>
- <p>And have to excute <span style="font-family: Courier New,Courier,monospace">eom_init()</span> function.</p>
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="getid" name="getid" class="items-tit-h2">Getting Output ID</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
- <p>Have to find output id to get information of output device and control external window.</P>
- <p>Use the <span style="font-family: Courier New,Courier,monospace">eom_get_eom_output_ids()</span> function to find output id.</p>
- <pre class="prettyprint">
+
+ <h2 id="init" name="init">Initializing the EOM</h2>
+<p>To initialize EOM:</p>
+<ol>
+<li>To use the functions and data types of the EOM API, include the <span style="font-family: Courier New,Courier,monospace"><eom.h></span> header file in your application:
+<pre class="prettyprint">#include <eom.h></pre>
+</li>
+<li>Initialize the application with the <span style="font-family: Courier New,Courier,monospace">eom_init()</span> function.</li>
+</ol>
+
+ <h2 id="getid" name="getid">Getting the Output ID</h2>
+
+<p>To retrieve the output ID, use the <span style="font-family: Courier New,Courier,monospace">eom_get_eom_output_ids()</span> function. You need the ID to get information about the output device and to control the external window.</p>
+<pre class="prettyprint">
int sample_get_output_id (const char *output_name)
{
eom_output_id *output_ids = NULL;
eom_output_type_e output_type = EOM_OUTPUT_TYPE_UNKNOWN;
int id_cnt = 0;
int i;
-
+
output_ids = eom_get_eom_output_ids(&id_cnt);
if (id_cnt == 0)
{
- printf ("no external outuputs supported\n");
+ printf ("no external outputs supported\n");
+
return 0;
}
-
+
for (i = 0; i < id_cnt; i++)
{
eom_get_output_type(output_ids[i], &output_type);
- if (!strncmp(output_name, "HDMI", 4))
+ if (!strncmp(output_name, "HDMI", 4))
{
if (output_type == EOM_OUTPUT_TYPE_HDMIA || output_type == EOM_OUTPUT_TYPE_HDMIB)
{
break;
}
}
- else if (!strncmp(output_name, "Virtual", 7))
+ else if (!strncmp(output_name, "Virtual", 7))
{
if (output_type == EOM_OUTPUT_TYPE_VIRTUAL)
{
}
}
}
-
+
if (output_ids)
free (output_ids);
+
return output_id;
}
- </pre>
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="setattr" name="setattr" class="items-tit-h2">Setting Attribute</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
- <p>To acquire the right of external output device, use the <span style="font-family: Courier New,Courier,monospace">eom_set_output_attribute()</span> function</p>
- <p>If setting is successful, eom module will work presentation mode when external output device connected.</p>
- <pre class="prettyprint">
+</pre>
+
+
+ <h2 id="presentation" name="presentation">Setting the Presentation Mode</h2>
+
+<p>To connect to an external output device in the presentation mode, use the <span style="font-family: Courier New,Courier,monospace">eom_set_output_attribute()</span> function to set the presentation mode priority attribute.</p>
+<p>If the setting is successful, the EOM module uses the presentation mode when the external output device connected.</p>
+<pre class="prettyprint">
int set_attribute()
{
m_output_id output_id = 0;
int ret;
-
- output_id = sample_get_output_id("HDMI");
-
+
+ output_id = sample_get_output_id("HDMI");
+
ret = eom_set_output_attribute(output_id, EOM_OUTPUT_ATTRIBUTE_NORMAL);
if (ret != EOM_ERROR_NONE)
{
- //Attribute set fail. Cannot use external output device. Deinitializing.
- eom_deinit ();
+ // Attribute setting failed, the external output device cannot be used. Deinitializing.
+ eom_deinit();
+
return -1;
}
+
return 0;
}
- </pre>
- <p>There are three attributes for priority. It is recommended to use EOM_OUTPUT_ATTRIBUTE_NORMAL attribute to general application.</p>
- <p>Other attributes are for special applications.</p>
- <pre class="prettyprint">
-EOM_OUTPUT_ATTRIBUTE_NORMAL
-EOM_OUTPUT_ATTRIBUTE_EXCLUSIVE_SHARE
-EOM_OUTPUT_ATTRIBUTE_EXCLUSIVE
- </pre>
- <p>If receive EOM_ERROR_NONE by eom_set_output_attribute() funtion, the application can use external output device.</p>
- </div>
- </li>
-
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="setwin" name="setwin" class="items-tit-h2">Setting External Window</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
- <p>Application can set window to external by using <span style="font-family: Courier New,Courier,monospace">eom_set_output_window()</span> function.</p>
- <p>This API moves window to external output and resizes best resolution of external output device automatically.</p>
- <p>Before excuting this function, application must receive success return from <span style="font-family: Courier New,Courier,monospace">eom_set_output_attribute()</span> function.</p>
- <pre class="prettyprint">
+</pre>
+
+<p>If the <span style="font-family: Courier New,Courier,monospace">EOM_ERROR_NONE</span> response is received from the <span style="font-family: Courier New,Courier,monospace">eom_set_output_attribute()</span> function, the application can use the external output device.</p>
+
+ <h2 id="setwin" name="setwin">Setting the External Window</h2>
+
+<p>To set an external window, use the <span style="font-family: Courier New,Courier,monospace">eom_set_output_window()</span> function. This function moves the window to the external output and automatically resizes it to the best resolution of the external output device.</p>
+<p>Before calling this function, you must receive a success return from the <span style="font-family: Courier New,Courier,monospace">eom_set_output_attribute()</span> function.</p>
+<pre class="prettyprint">
int make_external_window()
{
Evas_Object *window;
- window = elm_win_add(NULL, "external_window", ELM_WIN_BASIC);
+ window = elm_win_add(NULL, "external_window", ELM_WIN_BASIC);
if (eom_set_output_window(output_id, window) == EOM_ERROR_NONE)
return 0;
else
{
evas_object_del (window);
+
return -1;
}
}
- </pre>
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="getstatus" name="getstatus" class="items-tit-h2">Getting Status of External Output Device</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
- <p>Application can get external output device's information by using EOM API callback functions.</p>
- <h3>mode info</h3>
- <p>Mirror mode is default mode. If eom_set_output_attribute funtion excuted successfully, the external output will work to presentation mode.</p>
- <pre class="prettyprint">
-typedef enum
-{
- EOM_OUTPUT_MODE_NONE,
- EOM_OUTPUT_MODE_MIRROR,
- EOM_OUTPUT_MODE_PRESENTATION,
- EOM_OUTPUT_MODE_MAX,
-} eom_output_mode_e;
- </pre>
-
- <h3>attribute state</h3>
- <p>If application set attribue, EOM send current attribute state to application.</p>
- <p>ACTIVE means application can use external output. INACTIVE means cannot use cause of disconnection.</p>
- <p>LOST means application cannot use external output cause of another application's attribute setting.</p>
- <p>In case of LOST, application can't recevie attribute state anymore.</p>
- <pre class="prettyprint">
-typedef enum
-{
- EOM_OUTPUT_ATTRIBUTE_STATE_NONE,
- EOM_OUTPUT_ATTRIBUTE_STATE_ACTIVE,
- EOM_OUTPUT_ATTRIBUTE_STATE_INACTIVE,
- EOM_OUTPUT_ATTRIBUTE_STATE_LOST,
- EOM_OUTPUT_ATTRIBUTE_STATE_MAX,
-} eom_output_attribute_state_e;
- </pre>
-
- <h3>get information</h3>
- <p>Application can get some information by using below APIs.</p>
- <p><span style="font-family: Courier New,Courier,monospace">int eom_get_output_type (eom_output_id output_id, eom_output_type_e *type):</span>Get output device type(HDMI, VIRTUAL, VGA, etc).</p>
- <p><span style="font-family: Courier New,Courier,monospace">int eom_get_output_mode (eom_output_id output_id, eom_output_mode_e *mode):</span>Get mode (NONE, MIRROR, PRESETNTATION).</p>
- <p><span style="font-family: Courier New,Courier,monospace">int eom_get_output_attribute (eom_output_id output_id, eom_output_attribute_e *attribute)</span>Get information of attribute set(NORMAL, EXCLUSIVE_SHARE, EXCLUSIVE).</p>
- <p><span style="font-family: Courier New,Courier,monospace">int eom_get_output_attribute_state (eom_output_id output_id, eom_output_attribute_state_e *state)</span>Get attribute state(ACTIVE, INACTIVE, LOST).</p>
- <p><span style="font-family: Courier New,Courier,monospace">int eom_get_output_resolution (eom_output_id output_id, int *width, int *height)</span>Get best resolution of external output device.</p>
- <p><span style="font-family: Courier New,Courier,monospace">int eom_get_output_physical_size (eom_output_id output_id, int *phy_width, int *phy_height)</span>Get physical size of external output device.</p>
-
- <h3>callback</h3>
- <p>Application can get status changing event by setting callback functions.</p>
- <pre class="prettyprint">
-typedef void (*eom_output_added_cb)(eom_output_id output_id, void *user_data);
-typedef void (*eom_output_removed_cb)(eom_output_id output_id, void *user_data);
-typedef void (*eom_mode_changed_cb)(eom_output_id output_id, void *user_data);
-typedef void (*eom_attribute_changed_cb)(eom_output_id output_id, void *user_data);
- </pre>
- <p>By using below funtions, application can set and unset callback functions.</p>
- <pre class="prettyprint">
-int eom_set_output_added_cb (eom_output_added_cb callback, void *user_data); //external output connection event
-int eom_unset_output_added_cb (eom_output_added_cb callback); //external output connection event
-int eom_set_output_removed_cb (eom_output_removed_cb callback, void *user_data); //external output disconnection event
-int eom_unset_output_removed_cb (eom_output_removed_cb callback); //external output disconnection event
-int eom_set_mode_changed_cb (eom_mode_changed_cb callback, void *user_data); //external output mode changing event
-int eom_unset_mode_changed_cb (eom_mode_changed_cb callback); //external output mode changing event
-int eom_set_attribute_changed_cb (eom_attribute_changed_cb callback, void *user_data); //external output attribute state changing event
-int eom_unset_attribute_changed_cb (eom_attribute_changed_cb callback); //external output attribute state changing event
- </pre>
- <p>This is sample code about callback funtion.</p>
- <pre class="prettyprint">
+</pre>
+
+ <h2 id="getstatus" name="getstatus">Getting the Status of the External Output Device</h2>
+
+<p>To get information about the external output device:</p>
+
+<ul>
+<li>You can retrieve information about the external output device details with the following functions:
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">eom_get_output_type()</span>: Get the connection type of the external output.</li>
+<li><span style="font-family: Courier New,Courier,monospace">eom_get_output_mode()</span>: Get the external output mode.
+<p>The mirror mode is the default mode. If the <span style="font-family: Courier New,Courier,monospace">eom_set_output_attribute()</span> function has executed successfully, the external output works in the presentation mode.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">eom_get_output_attribute()</span>: Get the presentation mode priority attribute information.</li>
+<li><span style="font-family: Courier New,Courier,monospace">eom_get_output_attribute_state()</span>: Get the attribute state information.
+<p>If the application sets the attribute, the EOM sends the current attribute state to the application:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">ACTIVE</span>: The application can use the external output.</li>
+<li><span style="font-family: Courier New,Courier,monospace">INACTIVE</span>: The application was disconnected from the external output.</li>
+<li><span style="font-family: Courier New,Courier,monospace">LOST</span>: The application cannot use the external output because another application has set the attribute. The application cannot receive the attribute state anymore.</li>
+</ul></li>
+<li><span style="font-family: Courier New,Courier,monospace">eom_get_output_resolution()</span>: Get the best resolution of the external output device.</li>
+<li><span style="font-family: Courier New,Courier,monospace">eom_get_output_physical_size()</span>: Get the physical size of the external output device.</li>
+</ul>
+</li>
+<li>You can receive notifications about state changes in the external output device:
+<ol>
+<li>Define the callbacks for various state changes:
+<pre class="prettyprint">
typedef struct
{
Evas_Object *external_window;
int output_id;
-} SampleInfo;
+}
+SampleInfo;
+// Triggered when the external output is connected
static void
-sample_notify_cb_output_add (eom_output_id output_id, void *user_data)
+sample_notify_cb_output_add(eom_output_id output_id, void *user_data)
{
SampleInfo *info = (SampleInfo*)user_data;
if (!info->external_window)
{
- //make external window
+ // Create the external window
make_external_window(info->external_window);
}
}
+// Triggered when the external output is disconnected
static void
-sample_notify_cb_output_remove (eom_output_id output_id, void *user_data)
+sample_notify_cb_output_remove(eom_output_id output_id, void *user_data)
{
SampleInfo *info = (SampleInfo*)user_data;
if (!info->external_window)
{
- evas_object_del (info->external_window)
+ evas_object_del(info->external_window)
info->external_window = NULL;
}
}
+// Triggered when the state of the EOM output attribute changes
static void
-sample_notify_cb_attribute_changed (eom_output_id output_id, void *user_data)
+sample_notify_cb_attribute_changed(eom_output_id output_id, void *user_data)
{
SampleInfo *info = (SampleInfo*)user_data;
eom_output_attribute_e attribute = EOM_OUTPUT_ATTRIBUTE_NONE;
if (state == EOM_OUTPUT_ATTRIBUTE_STATE_ACTIVE)
{
- //start displaying image to external output(info->external_window);
+ // Start displaying the image to the external output(info->external_window);
}
else if (state == EOM_OUTPUT_ATTRIBUTE_STATE_INACTIVE)
{
- //stop displaying image
- //destory external_window
+ // Stop displaying the image
+ // Destroy the external_window
if (info->external_window)
{
- evas_object_del (info->external_window);
+ evas_object_del(info->external_window);
info->external_window = NULL;
}
}
else if (state == EOM_OUTPUT_ATTRIBUTE_STATE_LOST)
{
- //stop displaying image
- //destory external_window
+ // Stop displaying the image
+ // Destroy the external_window
if (info->external_window)
{
- evas_object_del (info->external_window);
+ evas_object_del(info->external_window);
info->external_window = NULL;
}
- //remove callback
+ // Remove the callbacks
eom_unset_output_added_cb(sample_notify_cb_output_add);
eom_unset_output_removed_cb(sample_notify_cb_output_remove);
eom_unset_attribute_changed_cb(sample_notify_cb_attribute_changed);
eom_deinit ();
}
}
+</pre>
+<p>You can also define the <span style="font-family: Courier New,Courier,monospace">eom_mode_change_cb</span> callback to be triggered when the EOM output mode changes.</p>
+
+</li>
+<li>Register the callbacks:
+<pre class="prettyprint">
int elm_main()
{
SampleInfo *info;
info = calloc(sizeof(SampleInfo));
- eom_init ();
- info->output_id = sample_get_output_id ("HDMI");
+ eom_init();
+ info->output_id = sample_get_output_id ("HDMI");
ret = eom_set_output_attribute(info->hdmi_output_id, EOM_OUTPUT_ATTRIBUTE_NORMAL);
if (ret != EOM_ERROR_NONE)
{
- //cannot use external output device
- eom_deinit ();
+ // Cannot use the external output device
+ eom_deinit();
}
else
{
eom_get_output_mode(info->output_id, &output_mode);
if (output_mode != EOM_OUTPUT_MODE_NONE)
{
- //make external window
+ // Create the external window
make_external_window(info->external_window);
}
-
- //add callback
+
+ // Add the callbacks
eom_set_output_added_cb(sample_notify_cb_output_add, info);
eom_set_output_removed_cb(sample_notify_cb_output_remove, info);
eom_set_attribute_changed_cb(sample_notify_cb_attribute_changed, info);
}
elm_run();
-
- //remove callback
+</pre>
+<p>To register the <span style="font-family: Courier New,Courier,monospace">eom_mode_change_cb</span> callback, use the <span style="font-family: Courier New,Courier,monospace">eom_set_mode_changed_cb()</span> function.</p>
+</li>
+
+
+<li>When no longer needed, delete the callbacks:
+<pre class="prettyprint">
eom_unset_output_added_cb(sample_notify_cb_output_add);
eom_unset_output_removed_cb(sample_notify_cb_output_remove);
eom_unset_attribute_changed_cb(sample_notify_cb_attribute_changed);
- eom_deinit ();
+ eom_deinit();
elm_shutdown();
+
return 0;
}
- </pre>
- </div>
- </li>
-</ul>
-</div>
-</div>
+</pre>
+
+<p>To delete the <span style="font-family: Courier New,Courier,monospace">eom_mode_change_cb</span> callback, use the <span style="font-family: Courier New,Courier,monospace">eom_unset_mode_changed_cb()</span> function.</p>
+
+</li>
+</ol>
+</li>
+</ul>
+
+
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/><br/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a href="#manage" class="opensection">Managing Images</a></li>
+ <li><a href="#manage">Managing Images</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.guides/html/native/ui/evas_n.htm">Evas Guide</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Evas: Creating and Managing Image Objects</h1>
-<div class="cont"><div class="static-cont">
+
<p>This tutorial demonstrates how you can create and manage image objects.</p>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
- <!-- Folds -->
- <ul class="devicespecifications">
-
- <li>
- <div class="devicespec-tit">
- <h2 id="manage" name="manage" class="items-tit-h2">Managing Images</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
- </div>
- <div class="devicespec-con">
+<h2 id="manage" name="manage">Managing Images</h2>
+
<p>To manage image objects in Evas:</p>
-<ul class="ul">
+<ul>
<li>Limit visibility.
<p>Evas always supports the image file type it was compiled with. Check your software packager for the information and use the <span style="font-family: Courier New,Courier,monospace;">evas_object_image_extension_can_load_get()</span> function.</p>
<p>With Evas, you can specify image margins to be treated as borders. The margins then maintain their aspects when the image is resized. This makes setting frames around other UI objects easier. The following figure illustrates the border behavior, when the image is resized.</p>
<p class="figure">Figure: Borders in Evas</p>
-<p
style="text-align:center;"><img alt="Borders in Evas" src="../../images/9patch.png" /></p>
+<p
align="center"><img alt="Borders in Evas" src="../../images/9patch.png" /></p>
</li>
</ul>
- </div>
- </li>
-
- </ul>
-</div>
-</div>
-
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.guides/html/native/ui/events_effects_n.htm">Event and Effect Guide</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UI__FRAMEWORK.html">UI API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Event and Effect: Using Animations and Effects</h1>
-<p>The event and effect tutorials demonstrate how to create and implement a variety of animation effects and use gestures in Tizen mobile native applications:</p>
+<p>The event and effect tutorials demonstrate how to create and implement a variety of animation effects and use gestures in Tizen native applications:</p>
<ul>
<li><a href="animation_event_types_tutorials_n.htm">Animation and Effect Types: Using Various Effect and Effect Types</a> <p>Demonstrates how you can create different kinds of animations and effects.</p></li>
<li><a href="gesture_detector_tutorial_n.htm">Gesture Detector: Implementing Gestures Provided by the EFL Library</a> <p>Demonstrates how you can implement gestures provided by the EFL library.</p></li>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a class="opensection" href="#widget">Setting the Font for a Widget</a></li>
- <li><a class="opensection" href="#edc">Setting the Font Using EDC</a></li>
- <li><a class="opensection" href="#edje">Using the Edje Text Class</a></li>
- <li><a class="opensection" href="#own">Setting Your Own Font</a></li>
+ <li><a href="#component">Setting the Font for a UI Component</a></li>
+ <li><a href="#edc">Setting the Font Using EDC</a></li>
+ <li><a href="#edje">Using the Edje Text Class</a></li>
+ <li><a href="#own">Setting Your Own Font</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.guides/html/native/ui/font_setting_n.htm">Font Setting Guide</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__Fonts.html">Elementary Fonts API</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje__Object__Text__Class.html">Edje Text Class API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje__Group.html">Edje API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje__Group.html">Edje API for Wearable Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Font Setting: Using Various Fonts in the Application</h1>
-<div class="cont"><div class="static-cont">
+
<p>This tutorial demonstrates how you can use different methods to set and change the font style in your application. You can change the font to another system-default font or one of your own fonts.</p>
<h2>Warm-up</h2>
-<p>Become familiar with the Elementary Fonts and Edje Text Class API basics by learning about:</p>
+<p>Become familiar with the Edje, Elementary, and Evas API basics by learning about:</p>
<ul>
- <li><a class="opensection" href="#widget">Setting the Font for a Widget</a>
- <p>Set the font of a widget.</p></li>
- <li><a class="opensection" href="#edc">Setting the Font Using EDC</a>
+ <li><a href="#component">Setting the Font for a UI Component</a>
+ <p>Set the font of a UI component.</p></li>
+ <li><a href="#edc">Setting the Font Using EDC</a>
<p>Create a layout with text using the EDC.</p></li>
- <li><a class="opensection" href="#edje">Using the Edje Text Class</a>
+ <li><a href="#edje">Using the Edje Text Class</a>
<p>Change the font of several text parts simultaneously.</p></li>
- <li><a class="opensection" href="#own">Setting Your Own Font</a>
+ <li><a href="#own">Setting Your Own Font</a>
<p>Change the font of several text parts simultaneously.</p></li>
</ul>
- <div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
+<h2 name="component" id="component">Setting the Font for a UI Component</h2>
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 name="widget" id="widget" class="items-tit-h2">Setting the Font for a Widget</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
-<p>You can use the <a href="../../../../org.tizen.native.mobile.apireference/group__Fonts.html">Elementary Fonts</a> API to set the font for an application.</p>
-<p>To set a font for a widget:</p>
-<ul class="ul">
-<li>Set the font for a common widget:
+<p>You can use the Elementary Fonts API (in <a href="../../../../org.tizen.native.mobile.apireference/group__Fonts.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__Fonts.html">wearable</a> applications) to set the font for an application.</p>
+<p>To set a font for a UI component:</p>
+<ul>
+<li>Set the font for a common UI component:
<table class="note">
<tbody>
elm_object_part_text_set(layout, "textblock1", buf);
</pre>
</li>
-<li>Set the font for an <a href="../../../../org.tizen.native.mobile.apireference/group__Entry.html">entry widget</a> using the <span style="font-family: Courier New,Courier,monospace;">elm_entry_text_style_user_push()</span> function. It overrides the default style of the entry widget for each attribute.
+<li>Set the font for an entry component (in <a href="../../../../org.tizen.native.mobile.apireference/group__Entry.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__Entry.html">wearable</a> applications) using the <span style="font-family: Courier New,Courier,monospace;">elm_entry_text_style_user_push()</span> function. It overrides the default style of the entry component for each attribute.
<table class="note">
<tbody>
<th class="note">Note</th>
</tr>
<tr>
- <td class="note">The <span style="font-family: Courier New,Courier,monospace;">elm_entry_text_style_user_push()</span> function only affects the main text of the widget. To change the font of the guide text, you have to add markup tags.</td>
+ <td class="note">The <span style="font-family: Courier New,Courier,monospace;">elm_entry_text_style_user_push()</span> function only affects the main text of the UI component. To change the font of the guide text, you have to add markup tags.</td>
</tr>
</tbody>
</table>
</li>
</ul>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 name="edc" id="edc" class="items-tit-h2">Setting the Font Using EDC</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+<h2 name="edc" id="edc">Setting the Font Using EDC</h2>
+
<p>To create a layout with text using the EDC, you can set the font for each text part or textblock:</p>
-<ul class="ul">
+<ul>
<li id="TEXT">Set the font of a text part using the font family name and a specific style of the font family:
<pre class="prettyprint">
part
</li>
</ul>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 name="edje" id="edje" class="items-tit-h2">Using the Edje Text Class</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
-<p>You can use the <a href="../../../../org.tizen.native.mobile.apireference/group__Edje__Object__Text__Class.html">Edje Text class</a> to change multiple text occurrences as a batch. If you set a new font or font size to a text class, the change is applied to multiple objects.</p>
+<h2 name="edje" id="edje">Using the Edje Text Class</h2>
+
+<p>You can use the Edje Class: Text API (in <a href="../../../../org.tizen.native.mobile.apireference/group__Edje__Object__Text__Class.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__Edje__Object__Text__Class.html">wearable</a> applications) to change multiple text occurrences as a batch. If you set a new font or font size to a text class, the change is applied to multiple objects.</p>
<table class="note">
<tbody>
<th class="note">Note</th>
</tr>
<tr>
- <td class="note">Note that the <span style="font-family: Courier New,Courier,monospace;">text_class</span> cannot be used in a widget with markup text or the <span style="font-family: Courier New,Courier,monospace;">elm_entry_text_style_user_push()</span> function. You must set the <span style="font-family: Courier New,Courier,monospace;">text_class</span> in EDC.</td>
+ <td class="note">Note that the <span style="font-family: Courier New,Courier,monospace;">text_class</span> cannot be used in a UI component with markup text or the <span style="font-family: Courier New,Courier,monospace;">elm_entry_text_style_user_push()</span> function. You must set the <span style="font-family: Courier New,Courier,monospace;">text_class</span> in EDC.</td>
</tr>
</tbody>
</table>
<p>To set the text class, you can use reserved words for text class, but you can also make your own text class:</p>
-<ul class="ul">
+<ul>
<li>Set a class for a text part:
<pre class="prettyprint">
</li>
</ul>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 name="own" id="own" class="items-tit-h2">Setting Your Own Font</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+<h2 name="own" id="own">Setting Your Own Font</h2>
+
<p>You can create your own font and use them in your application. Before using your fonts, set the path for the fonts. Use the <span style="font-family: Courier New,Courier,monospace;">evas_font_path_global_append()</span> or prepend function once when the application is launched.</p>
<pre class="prettyprint">
char *font_path = "/opt/usr/apps/org.tizen.myapp/res/fonts/";
evas_font_path_global_append(font_path);
</pre>
-<p>After calling the <span style="font-family: Courier New,Courier,monospace;">evas_font_path_global_append()</span> function, you can load your fonts including the family name and style.</p>
-
- </div>
- </li>
- </ul>
-</div>
-</div>
+<p>After calling the <span style="font-family: Courier New,Courier,monospace;">evas_font_path_global_append()</span> function, you can load your fonts including the family name and style.</p>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a class="opensection" href="#create">Creating the Basic Application</a></li>
- <li><a class="opensection" href="#naviframe">Creating the Naviframe</a></li>
+ <li><a href="#create">Creating the Basic Application</a></li>
+ <li><a href="#naviframe">Creating the Naviframe</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.guides/html/native/ui/efl_n.htm">EFL Guide</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Eina__Group.html">Eina API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Form: Creating the Basic Application and Layout</h1>
- <div class="cont"><div class="static-cont">
+
<p>This tutorial explains how to create a basic application for displaying a list of contacts, and a form for displaying and editing contact information when an item is selected on the contact list.</p>
+ <table class="note">
+<tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">This feature is supported in mobile applications only.</td>
+ </tr>
+ </tbody>
+ </table>
+
<h2>Warm-up</h2>
-<p>Become familiar with the Elementary API basics by learning about:</p>
+<p>Become familiar with the Eina, Elementary, and Evas API basics by learning about:</p>
<ul>
- <li><a class="opensection" href="#create">Creating the Basic Application</a>
+ <li><a href="#create">Creating the Basic Application</a>
<p>Create an elementary application.</p></li>
- <li><a class="opensection" href="#naviframe">Creating the Naviframe</a>
+ <li><a href="#naviframe">Creating the Naviframe</a>
<p>Create the application layout.</p></li>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
+ <h2 id="create" name="create">Creating the Basic Application</h2>
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="create" name="create" class="items-tit-h2">Creating the Basic Application</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
<p>To create an elementary application with a single window, use the following code.</p>
<pre class="prettyprint">static bool
app_create(void *data)
return ui_app_main(&argc, &argv, &event_callback, &ad);
}
</pre>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="naviframe" name="naviframe" class="items-tit-h2">Creating the Naviframe</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="naviframe" name="naviframe">Creating the Naviframe</h2>
+
<p>Use a naviframe in this application to switch between different views. The first view that is displayed is the list of contacts. When a user selects an item on this list, information on the contact is displayed in a form. Both the view list and the form are opened in a naviframe, which handles the animations between the views for you. It also manages creating a back button in the top bar and launching the back animation when you select it, deletes the form view, and shows the list of contacts again.</p>
<h3>Naviframe</h3>
<p>The <span style="font-family: Courier New,Courier,monospace">_genlist_content_get</span> function is called several times depending on the style of the created item. In this case, with the default style for the genlist item, there are two different swallow parts. A swallow part is a container in the edje file of the genlist item, which may contain an evas object. The following figure shows the layout of different parts in the theme.</p>
-
<p class="figure">Figure: Genlist item</p>
-
<p style="text-align:center;"><img alt="Genlist item" src="../../images/genlist_item.png" /></p>
+<p class="figure">Figure: Genlist item</p>
+
<p align="center"><img alt="Genlist item" src="../../images/genlist_item.png" /></p>
<p>There are two elm.swallow parts. When the callback function for the creation of icons is called, the part name is passed via the <span style="font-family: Courier New,Courier,monospace">part</span> variable. Compare this variable to <span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span> for the first object and to <span style="font-family: Courier New,Courier,monospace">elm.swallow.end</span> for the icon at the end.</p>
<p>To display the various information about the contact, we use boxes in this example.</p>
<p class="figure">Figure: Form contact layout</p>
-
<p style="text-align:center;"><img alt="Form contact layout" src="../../images/form_contact_layout.png" /></p>
+
<p align="center"><img alt="Form contact layout" src="../../images/form_contact_layout.png" /></p>
<p>The first box is an vertical box.</p>
elm_box_pack_end(vbox, ic);
</pre>
-<p>In the following example, add the information on the contact: the name, the mobile phone number, the postal address and the e-mail address. For each information item, create a label and an edit line. The label contains the kind of the information, and the edit box, the information itself. To set the widgets in a horizontal layout, use a horizontal box.</p>
+<p>In the following example, add the information on the contact: the name, the mobile phone number, the postal address and the e-mail address. For each information item, create a label and an edit line. The label contains the kind of the information, and the edit box, the information itself. To set the UI components in a horizontal layout, use a horizontal box.</p>
<pre class="prettyprint">
hbox = elm_box_add(vbox);
elm_box_horizontal_set(hbox, EINA_TRUE);
</pre>
<p class="figure">Figure: Form tutorial: form</p>
-
<p style="text-align:center;"><img alt="Form tutorial: form" src="../../images/screenshot_1.png" /></p>
+
<p align="center"><img alt="Form tutorial: form" src="../../images/screenshot_1.png" /></p>
<p class="figure">Figure: Form tutorial: list</p>
- <p style="text-align:center;"><img alt="Form tutorial: list" src="../../images/screenshot_2.png" /></p>
- </div>
- </li>
- </ul>
-</div>
-</div>
+ <p align="center"><img alt="Form tutorial: list" src="../../images/screenshot_2.png" /></p>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
</div>
<ul class="toc">
<li>Set-up
<ul class="toc">
- <li><a class="opensection" href="#genlist_application_init">Initializing the Application</a></li>
- <li><a class="opensection" href="#genlist_creation">Creating a Genlist</a></li>
- <li><a class="opensection" href="#entries_creation">Adding New Entries</a></li>
+ <li><a href="#genlist_application_init">Initializing the Application</a></li>
+ <li><a href="#genlist_creation">Creating a Genlist</a></li>
+ <li><a href="#entries_creation">Adding New Entries</a></li>
</ul>
</li>
<li>Modifications
<ul class="toc">
- <li><a class="opensection" href="#item_style">Choosing Another Item Style to Add or Remove Parts</a></li>
- <li><a class="opensection" href="#item_modes">Using Item Modes</a></li>
- <li><a class="opensection" href="#other_apis">Using Other APIs</a></li>
+ <li><a href="#item_style">Choosing Another Item Style to Add or Remove Parts</a></li>
+ <li><a href="#item_modes">Using Item Modes</a></li>
+ <li><a href="#other_apis">Using Other APIs</a></li>
</ul>
</li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a class="opensection" href="../../../../org.tizen.guides/html/native/ui/ui_widgets_n.htm#genlist">Genlist Guide</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__Genlist.html">Genlist API</a></li>
+ <li><a href="../../../../org.tizen.guides/html/native/ui/components_mn.htm#genlist">Genlist Guide for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Genlist: Managing Large Element Sets</h1>
- <div class="cont"><div class="static-cont">
+
-<p>This tutorial deals with genlists, a list widget for large sets of elements. It uses callbacks to populate entries. The same widget handles both flat lists and trees.</p>
+<p>This tutorial deals with genlists, a list component for large sets of elements. It uses callbacks to populate entries. The same UI component handles both flat lists and trees.</p>
+
+ <table class="note">
+<tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">This feature is supported in mobile applications only.</td>
+ </tr>
+ </tbody>
+ </table>
<h2>Warm-up</h2>
-<p>Become familiar with the Genlist API basics by learning about:</p>
+<p>Become familiar with the Elementary and Evas API basics by learning about:</p>
<ul>
<li>Set-up
<ul>
- <li><a class="opensection" href="#genlist_application_init">Initializing the Application</a>
+ <li><a href="#genlist_application_init">Initializing the Application</a>
<p>Initialize the application for use.</p></li>
- <li><a class="opensection" href="#genlist_creation">Creating a Genlist</a>
+ <li><a href="#genlist_creation">Creating a Genlist</a>
<p>Create a genlist.</p></li>
- <li><a class="opensection" href="#entries_creation">Adding New Entries</a>
+ <li><a href="#entries_creation">Adding New Entries</a>
<p>Add new entries to the list.</p></li>
</ul>
</li>
<li>Modifications
<ul>
- <li><a class="opensection" href="#item_style">Choosing Another Item Style to Add or Remove Parts</a>
+ <li><a href="#item_style">Choosing Another Item Style to Add or Remove Parts</a>
<p>Customize your list.</p></li>
- <li><a class="opensection" href="#item_modes">Using Item Modes</a>
+ <li><a href="#item_modes">Using Item Modes</a>
<p>Use different list modes in your application.</p></li>
- <li><a class="opensection" href="#other_apis">Using Other APIs</a>
+ <li><a href="#other_apis">Using Other APIs</a>
<p>Change the item class and size of the genlist.</p></li>
</ul>
</li>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
+ <h2 id="genlist_application_init" name="genlist_application_init">Initializing the Application</h2>
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="genlist_application_init" name="genlist_application_init" class="items-tit-h2">Initializing the Application</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
<p class="figure">Figure: Example of a genlist</p>
-
<p style="text-align:center;"><img alt="Example of a genlist" src="../../images/genlist_1line.png" /></p>
- <p>The code below shows a typical elementary application that creates a window entitled "Genlist Basic Tutorial". It is consisted of a conformant widget that contains a naviframe widget. The genlist goes inside the naviframe.</p>
+
<p align="center"><img alt="Example of a genlist" src="../../images/genlist_1line.png" /></p>
+ <p>The code below shows a typical elementary application that creates a window entitled "Genlist Basic Tutorial". It is consisted of a conformant component that contains a naviframe component. The genlist goes inside the naviframe.</p>
<pre class="prettyprint">static bool
_app_create(void *data)
{
Elm_Genlist_Item_Class *itc2;
};
</pre>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="genlist_creation" name="genlist_creation" class="items-tit-h2">Creating a Genlist</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="genlist_creation" name="genlist_creation">Creating a Genlist</h2>
+
<p>Call <span style="font-family: Courier New,Courier,monospace">elm_genlist_add()</span> to create a genlist. Then new entries can be added. In this example, first the basic windows is created, then a genlist is added to it, and then 10000 elements with text and a colored block on each side of it.</p>
-<pre class="prettyprint">Evas_object *list = elm_genlist_add(parent);
+<pre class="prettyprint">Evas_Object *list = elm_genlist_add(parent);
</pre>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="entries_creation" name="entries_creation" class="items-tit-h2">Adding New Entries</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="entries_creation" name="entries_creation">Adding New Entries</h2>
+
<p>Use <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span> to add new elements. Its second parameter is a structure which describes how to populate entries. Typically this structure is built once and re-used across calls to <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span>.</p>
<h3 id="elm_genlist_item_class_new" name="elm_genlist_item_class_new">
Building a Basic Item Class</h3>
<p>The <span style="font-family: Courier New,Courier,monospace">data</span> parameter makes it possible to behave differently according to data that is given to the EFLs during the call to <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span> in the <span style="font-family: Courier New,Courier,monospace">data</span> parameter. For example, given an integer in that field through casting with <span style="font-family: Courier New,Courier,monospace">(void *)(uintptr_t) i</span>, it is possible to get its value back using <span style="font-family: Courier New,Courier,monospace">(int)(uintptr_t)data</span>:</p>
<pre class="prettyprint">static char *
-_genlist_text_get(void *data, Evas_Object *obj __UNUSED__, const char *part)
+_genlist_text_get(void *data, Evas_Object *obj__UNUSED__, const char *part)
{
if (strcmp(part, "elm.text") == 0)
{
elm_genlist_item_item_class_update(it, app->itc2);
}
</pre>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="item_style" name="item_style" class="items-tit-h2">Choosing Another Item Style to Add or Remove Parts</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="item_style" name="item_style">Choosing Another Item Style to Add or Remove Parts</h2>
+
<p>As mentioned above, the number of parts to fill depends on the item style that is chosen when adding a new item. This is simply a matter of setting the right value when filling the <span style="font-family: Courier New,Courier,monospace">Elm_Genlist_Item_Class</span> struct: </p>
<pre class="prettyprint">app->itc->item_style = "default";
</pre>
-<p>The <a class="opensection" href="../../../../org.tizen.guides/html/native/ui/ui_widgets_n.htm#genlist">Genlist Widget</a> lists all available item styles.</p>
+<p>The <a href="../../../../org.tizen.guides/html/native/ui/components_mn.htm#genlist">Genlist</a> component lists all available item styles.</p>
<p>Further customization is achieved by modifying the theme as explained in the <a href="../../../../org.tizen.guides/html/native/ui/edje_n.htm">Edje</a> guide.</p>
<p>In case the customization is only visual, it is good practice to keep the same item style names for new themes. This makes it possible to change theme and keep the code the same while also retaining the same overall item placement.</p>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="item_modes" name="item_modes" class="items-tit-h2">Using Item Modes</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
-<p>So far the genlist examples have all featured bare lists while the genlist widget is able to display trees or even a "group" mode where scrolling keeps the item at the top of the widget until another group comes and replaces it.</p>
+
+ <h2 id="item_modes" name="item_modes">Using Item Modes</h2>
+
+<p>So far the genlist examples have all featured bare lists while the genlist component is able to display trees or even a "group" mode where scrolling keeps the item at the top of the UI component until another group comes and replaces it.</p>
<h3 id="item_group" name="item_group">Group Mode</h3>
<p>The group mode makes it possible to keep an element visible as long as one of its children is visible. This is most useful for "title" items.</p>
<p>Mark some elements as <span style="font-family: Courier New,Courier,monospace">ELM_GENLIST_ITEM_GROUP</span> and use the returned <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> to establish the parent-children relationship when adding the children items.</p>
<h3 id="item_group_tree" name="item_group_tree">Mixing Group and Tree Modes</h3>
<p>A common UI design is to mix group and tree modes. It allows for a tree behavior while also keeping the group header item. The EFLs do not do any magic here and the way to get such a behavior is to create an item of type group, an item of type tree which parent is the group item. Then add the callbacks to populate the children of the tree item in the regular way.</p>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="other_apis" name="other_apis" class="items-tit-h2">Using Other APIs</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="other_apis" name="other_apis">Using Other APIs</h2>
<h3 id="homogeneous_set" name="homogeneous_set">Homogeneous Item Size</h3>
<p>Because of the scroller, the actual height and/or width of the genlist must be computed. This means summing the sizes of all the items, the sizes must be computed. This obviously has a cost and slows down adding items to the genlist.</p>
<p>The <span style="font-family: Courier New,Courier,monospace">elm_genlist_homogeneous_set()</span> function alleviates this issue by assuming all the items are the same size as the first one of the list. It speeds up large insertions. However, it may lead to serious graphical issues if the items are not actually the same size. Use with care.</p>
<h3 id="item_class_update" name="item_class_update">Changing the Item Class of an Item After Its Creation</h3>
-<p>Changing the item class of a widget is an easy way to change its appearance upon selection or other actions of the user. This is done by calling <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_class_update()</span>:</p>
+<p>Changing the item class of a UI component is an easy way to change its appearance upon selection or other actions of the user. This is done by calling <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_class_update()</span>:</p>
<pre class="prettyprint">static void
_tree_item_expand_request(void *data, Evas_Object *o, void *event_info)
{
elm_genlist_item_expanded_set(it, EINA_TRUE);
}
</pre>
- </div>
- </li>
- </ul>
-</div>
-</div>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
--- /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>Genlist: Managing Large Element Sets</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+ <div id="profile">
+ <p><img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+ </div>
+ <div id="toc_border"><div id="toc">
+ <p class="toc-title">Content</p>
+ <ul class="toc">
+ <li>Set-up
+ <ul class="toc">
+ <li><a href="#genlist_application_init">Initializing the Application</a></li>
+ <li><a href="#genlist_creation">Creating a Genlist</a></li>
+ <li><a href="#entries_creation">Adding New Entries</a></li>
+ </ul>
+ </li>
+ <li>Modifications
+ <ul class="toc">
+ <li><a href="#item_style">Choosing Another Item Style to Add or Remove Parts</a></li>
+ <li><a href="#item_modes">Using Item Modes</a></li>
+ <li><a href="#other_apis">Using Other APIs</a></li>
+ </ul>
+ </li>
+ </ul>
+ <p class="toc-title">Related Info</p>
+ <ul class="toc">
+ <li><a href="../../../../org.tizen.guides/html/native/ui/components_wn.htm#genlist">Genlist Guide for Wearable Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Genlist: Managing Large Element Sets</h1>
+
+<p>This tutorial deals with genlists, a list component for large sets of elements. It uses callbacks to populate entries. The same UI component handles both flat lists and trees.</p>
+
+ <table class="note">
+<tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">This feature is supported in wearable applications only.</td>
+ </tr>
+ </tbody>
+ </table>
+
+<h2>Warm-up</h2>
+<p>Become familiar with the Elementary and Evas API basics by learning about:</p>
+ <ul>
+ <li>Set-up
+ <ul>
+ <li><a href="#genlist_application_init">Initializing the Application</a>
+ <p>Initialize the application for use.</p></li>
+ <li><a href="#genlist_creation">Creating a Genlist</a>
+ <p>Create a genlist.</p></li>
+ <li><a href="#entries_creation">Adding New Entries</a>
+ <p>Add new entries to the list.</p></li>
+ </ul>
+ </li>
+ <li>Modifications
+ <ul>
+ <li><a href="#item_style">Choosing Another Item Style to Add or Remove Parts</a>
+ <p>Customize your list.</p></li>
+ <li><a href="#item_modes">Using Item Modes</a>
+ <p>Use different list modes in your application.</p></li>
+ <li><a href="#other_apis">Using Other APIs</a>
+ <p>Change the item class and size of the genlist.</p></li>
+ </ul>
+ </li>
+ </ul>
+
+ <h2 id="genlist_application_init" name="genlist_application_init">Initializing the Application</h2>
+
+ <p class="figure">Figure: Example of a genlist</p>
+ <p align="center"><img alt="Example of a genlist" src="../../images/genlist_wn.png" /></p>
+ <p>The code below shows a typical elementary application that creates a window entitled "Genlist Basic Tutorial". It is consisted of a conformant component that contains a naviframe component. The genlist goes inside the naviframe.</p>
+<pre class="prettyprint">static bool
+_app_create(void *data)
+{
+ appdata_s *app = data;
+
+ app->win = elm_win_util_standard_add("main", "Genlist Basic Tutorial");
+ elm_win_conformant_set(app->win, EINA_TRUE);
+ evas_object_show(app->win);
+ evas_object_resize(app->win, 480, 800);
+ elm_win_autodel_set(app->win, EINA_TRUE);
+
+ app->conformant = elm_conformant_add(app->win);
+ evas_object_size_hint_weight_set(app->conformant, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+ elm_win_resize_object_add(app->win, app->conformant);
+ evas_object_show(app->conformant);
+
+ app->naviframe = elm_naviframe_add(app->win);
+ evas_object_size_hint_weight_set(app->naviframe, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+ elm_win_resize_object_add(app->win, app->naviframe);
+ evas_object_show(app->naviframe);
+ elm_object_content_set(app->conformant, app->naviframe);
+
+ _create_list(app);
+ elm_naviframe_item_push(app->naviframe, NULL, NULL, NULL, app->list, NULL);
+
+ return true;
+}
+
+int
+main(int argc, char **argv)
+{
+ // Declare a few structures and zero-initialize (C99 feature)
+ struct app_data app = { 0 };
+ ui_app_lifecycle_callback_s event_callback = { 0 };
+
+ event_callback.create = _app_create;
+
+ // Run the mainloop
+ return ui_app_main(&argc, &argv, &event_callback, &ad);
+}
+</pre>
+<p> The declaration of the <span style="font-family: Courier New,Courier,monospace">struct app_data</span> is shown below:</p>
+<pre class="prettyprint">struct app_data
+{
+ Evas_Object *win;
+ Evas_Object *naviframe;
+ Evas_Object *conformant;
+ Evas_Object *list;
+ Elm_Genlist_Item_Class *itc;
+ Elm_Genlist_Item_Class *itc2;
+};
+</pre>
+
+ <h2 id="genlist_creation" name="genlist_creation">Creating a Genlist</h2>
+
+<p>Call <span style="font-family: Courier New,Courier,monospace">elm_genlist_add()</span> to create a genlist. Then new entries can be added. In this example, first the basic windows is created, then a genlist is added to it, and then 10000 elements with text and a colored block on each side of it.</p>
+<pre class="prettyprint">Evas_Object *list = elm_genlist_add(parent);
+</pre>
+
+ <h2 id="entries_creation" name="entries_creation">Adding New Entries</h2>
+
+<p>Use <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span> to add new elements. Its second parameter is a structure which describes how to populate entries. Typically this structure is built once and re-used across calls to <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span>.</p>
+<h3 id="elm_genlist_item_class_new" name="elm_genlist_item_class_new">
+Building a Basic Item Class</h3>
+<p>The code for the minimal genlist item class is below: </p>
+
+<pre class="prettyprint">Elm_Genlist_Item_Class *itc = elm_genlist_item_class_new();
+itc->item_style = "default";
+itc->func.text_get = NULL;
+itc->func.content_get = NULL;
+itc->func.state_get = NULL;
+itc->func.del = NULL;
+</pre>
+
+<p>It creates a simple item class, sets the <span style="font-family: Courier New,Courier,monospace">item_style</span> to "default" and every other field to NULL. However, this leaves out the <span style="font-family: Courier New,Courier,monospace">text_get</span> and <span style="font-family: Courier New,Courier,monospace">content_get</span> fields which are used to add text and an icon to the list entry. This is explained in another section.</p>
+<h3 id="elm_genlist_item_append" name="elm_genlist_item_append">Adding the Element</h3>
+<p>Once the genlist item class object is created, a new element is added to the list by calling <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span>. </p>
+<pre class="prettyprint">elm_genlist_item_append(list,
+ itc,
+ NULL, // Item data
+ NULL, // Parent item for trees, NULL if none
+ ELM_GENLIST_ITEM_NONE, // Item type; this is the common one
+ NULL, // Callback on selection of the item
+ NULL // Data for that callback function
+);
+</pre>
+<p>With most parameters as NULL and <span style="font-family: Courier New,Courier,monospace">itc</span> having most of its members NULL, too, the elements of that list are blank and will not trigger anything when selected. This shows the APIs that are used.</p>
+<h3 id="text_get" name="text_get">Text in the List Elements</h3>
+<p> Use <span style="font-family: Courier New,Courier,monospace">text_get</span> callback to add text in the elements in the <span style="font-family: Courier New,Courier,monospace">Elm_Genlist_Item_Class</span> structure. These callbacks must have a prototype matching to the following: </p>
+
+<pre class="prettyprint">char * text_get(void *data, Evas_Object *obj, const char *part);
+</pre>
+<p>This callbacks returns a C string that is displayed in the part named after the <span style="font-family: Courier New,Courier,monospace">part</span> parameter. This callback is called for each user-settable text part according to the current theme.</p>
+<p>If you are not familiar with the concept of parts in the EFLs, read the <a href="../../../../org.tizen.guides/html/native/ui/edje_n.htm#simple_edc_file">Write a Simple EDC File</a> section.</p>
+
+
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">The value returned is freed by the EFLs: the value must be freshly-allocated, do not free it yourself and do not re-use it across list elements.</td>
+ </tr>
+ </tbody>
+ </table>
+
+<p>For the default theme there is one part named <span style="font-family: Courier New,Courier,monospace">elm.text</span>. A possible implementation of the <span style="font-family: Courier New,Courier,monospace">text_get</span> callback is therefore: </p>
+<pre class="prettyprint">static char *
+_genlist_text_get(void *data, Evas_Object *obj, const char *part)
+{
+ // Check this is text for the part we're expecting
+ if (strcmp(part, "elm.text") == 0)
+ {
+ return strdup("Some text");
+ }
+ else {
+ return NULL;
+ }
+}
+</pre>
+
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">The names and positions of parts depends on the <span style="font-family: Courier New,Courier,monospace">item_style</span> chosen when adding new items to the genlist. Setting a custom theme makes it possible to completely change genlists by adding and moving parts. The <a href="../../../../org.tizen.guides/html/native/ui/edje_n.htm">Edje</a> guide explains how to do that.</td>
+ </tr>
+ </tbody>
+ </table>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">data</span> parameter makes it possible to behave differently according to data that is given to the EFLs during the call to <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span> in the <span style="font-family: Courier New,Courier,monospace">data</span> parameter. For example, given an integer in that field through casting with <span style="font-family: Courier New,Courier,monospace">(void *)(uintptr_t) i</span>, it is possible to get its value back using <span style="font-family: Courier New,Courier,monospace">(int)(uintptr_t)data</span>:</p>
+<pre class="prettyprint">static char *
+_genlist_text_get(void *data, Evas_Object *obj__UNUSED__, const char *part)
+{
+ if (strcmp(part, "elm.text") == 0)
+ {
+ char *buf = malloc(16);
+ snprintf(buf, 16, "Entry %d.", (int)(uintptr_t)data);
+
+ return buf;
+ }
+ else
+ {
+ return NULL;
+ }
+}
+</pre>
+
+<h3 id="content_get" name="content_get">Evas_Objects in the List Elements</h3>
+<p>Icons are added in a similar fashion: there is a callback named <span style="font-family: Courier New,Courier,monospace">content_get</span> which returns a pointer to an <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> and is called for each part which contents can be set.</p>
+<p>The prototype of the callback must match this one: </p>
+<pre class="prettyprint">Evas_Object * content_get(void *data, Evas_Object *obj, const char *part);
+</pre>
+
+<p>The only difference with the <span style="font-family: Courier New,Courier,monospace">text_get</span> callback is that it returns an <span style="font-family: Courier New,Courier,monospace">Evas_Object*</span> rather than a <span style="font-family: Courier New,Courier,monospace">char *</span>.</p>
+<p>This leads to a fairly simple dummy implementation with colored rectangles in the parts that are to be set:</p>
+<pre class="prettyprint">
+static Evas_Object *
+_genlist_content_get(void *data, Evas_Object *obj, const char *part)
+{
+ int i = (int) (uintptr_t) data;
+
+ if (strcmp(part, "elm.swallow.icon") == 0)
+ {
+ Evas_Object *bg = elm_bg_add(obj);
+ elm_bg_color_set(bg, 255 * cos(i / (double) 10), 0, i % 255);
+
+ return bg;
+ }
+ else if (strcmp(part, "elm.swallow.end") == 0)
+ {
+ Evas_Object *bg = elm_bg_add(obj);
+ elm_bg_color_set(bg, 0, 255 * sin(i / (double) 10), i % 255);
+
+ return bg;
+ }
+ else
+ {
+ return NULL;
+ }
+}
+</pre>
+<p> For the default theme, this displays a red rectangle on the left of each list item and a green one on their right.</p>
+<h3 id="state_get" name="state_get">Events on Genlist Items</h3>
+
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">The swallow parts have no minimum size. This means that if you do not fix the minimum size, the part cannot be seen.</td>
+ </tr>
+ </tbody>
+ </table>
+
+<p>Genlist items triggers a callback when clicked. This callback is chosen when adding the new item (for example, when calling <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span>):</p>
+<pre class="prettyprint">elm_genlist_item_append(list,
+ itc,
+ NULL, // item data
+ NULL, // parent item for trees, NULL if none
+ ELM_GENLIST_ITEM_NONE, // item type, other values are used for trees
+ _genlist_selected_cb, // callback on selection of the item
+ NULL // data for that callback function
+);
+</pre>
+
+<p>This callback adheres to the following prototype: </p>
+<pre class="prettyprint">void _contact_selected_cb(void *data, Evas_Object *obj, void *event_info)
+</pre>
+
+<p>The implementation below changes the item style of items when they are selected:</p>
+<pre class="prettyprint">static void
+_genlist_selected_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ appdata_s *app = data;
+
+ Elm_Object_Item *it = (Elm_Object_Item*) event_info;
+
+ elm_genlist_item_item_class_update(it, app->itc2);
+}
+</pre>
+
+ <h2 id="item_style" name="item_style">Choosing Another Item Style to Add or Remove Parts</h2>
+
+<p>As mentioned above, the number of parts to fill depends on the item style that is chosen when adding a new item. This is simply a matter of setting the right value when filling the <span style="font-family: Courier New,Courier,monospace">Elm_Genlist_Item_Class</span> struct: </p>
+<pre class="prettyprint">app->itc->item_style = "default";
+</pre>
+<p>The <a href="../../../../org.tizen.guides/html/native/ui/components_wn.htm#genlist">Genlist</a> component lists all available item styles.</p>
+<p>Further customization is achieved by modifying the theme as explained in the <a href="../../../../org.tizen.guides/html/native/ui/edje_n.htm">Edje</a> guide.</p>
+<p>In case the customization is only visual, it is good practice to keep the same item style names for new themes. This makes it possible to change theme and keep the code the same while also retaining the same overall item placement.</p>
+
+ <h2 id="item_modes" name="item_modes">Using Item Modes</h2>
+
+<p>So far the genlist examples have all featured bare lists while the genlist component is able to display trees or even a "group" mode where scrolling keeps the item at the top of the UI component until another group comes and replaces it.</p>
+<h3 id="item_group" name="item_group">Group Mode</h3>
+<p>The group mode makes it possible to keep an element visible as long as one of its children is visible. This is most useful for "title" items.</p>
+<p>Mark some elements as <span style="font-family: Courier New,Courier,monospace">ELM_GENLIST_ITEM_GROUP</span> and use the returned <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> to establish the parent-children relationship when adding the children items.</p>
+<p>Since there are two kind of items, create two item classes. Give them different styles and callback functions. The callback functions are visible in the example, they have no functionalities:</p>
+<pre class="prettyprint">
+app->itc = elm_genlist_item_class_new();
+app->itc->item_style = "default";
+app->itc->func.text_get = _genlist_text_get_size;
+app->itc->func.content_get = _genlist_content_get_bg;
+app->itc->func.state_get = NULL;
+app->itc->func.del = NULL;
+
+app->itc2 = elm_genlist_item_class_new();
+app->itc2->item_style = "1text.1icon";
+app->itc2->func.text_get = _genlist_text_get_nosize;
+app->itc2->func.content_get = _genlist_content_get_icon;
+app->itc2->func.state_get = NULL;
+app->itc2->func.del = NULL;
+</pre>
+
+<p> Then add a group header and follow it with 10 children. This is repeated 1000 times.</p>
+<p>The parent has type <span style="font-family: Courier New,Courier,monospace">ELM_GENLIST_ITEM_GROUP</span> while the children have type <span style="font-family: Courier New,Courier,monospace">ELM_GENLIST_ITEM_NONE</span>.</p>
+<p>The other important point is that the value returned by <span style="font-family: Courier New,Courier,monospace">lm_genlist_item_append()</span> is stored in it and then sent to the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span> call that adds the children. This creates the parent-children relationship.</p>
+<pre class="prettyprint">
+for (i = 0; i < 1000; i++)
+{
+ it = elm_genlist_item_append(app->list, app->itc2,
+ (void *)(uintptr_t) (10 * i),
+ NULL,
+ ELM_GENLIST_ITEM_GROUP,
+ NULL,
+ NULL
+ );
+ for (j = 0; j < 10; j++)
+ {
+ elm_genlist_item_append(app->list, app->itc,
+ (void *)(uintptr_t) (10 * i + j),
+ it,
+ ELM_GENLIST_ITEM_NONE,
+ NULL,
+ NULL
+ );
+ }
+}
+</pre>
+
+<h3 id="item_tree" name="item_tree">Tree Mode</h3>
+<p>Like group mode, tree mode uses the parenting relationship with other items. Unlike group mode, the child elements are created on-demand when their parent is expanded and deleted when it is contracted. This is done by using smart callbacks: <span style="font-family: Courier New,Courier,monospace">expand,request</span>, <span style="font-family: Courier New,Courier,monospace">expanded</span>, <span style="font-family: Courier New,Courier,monospace">contract,request</span>, and <span style="font-family: Courier New,Courier,monospace">contracted</span>. Like any smart callback, they are registered through <span style="font-family: Courier New,Courier,monospace">evas_object_smart_callback_add</span> on the genlist object:</p>
+<pre class="prettyprint">evas_object_smart_callback_add(app->list, "expand,request",
+ _tree_item_expand_request, NULL);
+evas_object_smart_callback_add(app->list, "expanded",
+ _tree_item_expanded, NULL);
+
+evas_object_smart_callback_add(app->list, "contract,request",
+ _tree_item_contract_request, NULL);
+evas_object_smart_callback_add(app->list, "contracted",
+ _tree_item_contracted, NULL);
+</pre>
+
+<p> The callbacks <span style="font-family: Courier New,Courier,monospace">expand,request</span> and <span style="font-family: Courier New,Courier,monospace">contract,request</span> do only one thing: decide whether the element is expanded or contracted. This is done by using <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_expanded_set()</span> function; if it changes the expansion status of the item, the next callback is called (either <span style="font-family: Courier New,Courier,monospace">expanded</span> or <span style="font-family: Courier New,Courier,monospace">contracted</span>, depending on whether it was an <span style="font-family: Courier New,Courier,monospace">expand,request</span> or <span style="font-family: Courier New,Courier,monospace">contract,request</span> event). A minimal implementation of these callbacks is therefore:</p>
+<pre class="prettyprint">
+static void
+_tree_item_expand_request(void *data, Evas_Object *o, void *event_info)
+{
+ Elm_Object_Item *it = (Elm_Object_Item*) event_info;
+
+ elm_genlist_item_item_class_update(it, app->itc2);
+
+ elm_genlist_item_expanded_set(it, EINA_TRUE);
+}
+</pre>
+
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">The example above has an extra line: the call to <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_item_class_update()</span>. It changes the item style and is explained in the <a href="#item_class_update">Changing the item class of an item after its creation</a> section.</td>
+ </tr>
+ </tbody>
+ </table>
+
+<pre class="prettyprint">
+static void
+_tree_item_contract_request(void *data, Evas_Object *o, void *event_info)
+{
+ Elm_Object_Item *it = (Elm_Object_Item*) event_info;
+
+ elm_genlist_item_item_class_update(it, app->itc);
+
+ elm_genlist_item_expanded_set(it, EINA_FALSE);
+}
+</pre>
+
+<p> As said above, once the genlist item status is set to expanded, the <span style="font-family: Courier New,Courier,monospace">expanded</span> event is triggered and it is the duty of a callback for that event to populate the list with the item's children. This relies on the <span style="font-family: Courier New,Courier,monospace">parent</span> parameter of functions like <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span>, like for the group mode.</p>
+<p>The function below is a callback implementation for the <span style="font-family: Courier New,Courier,monospace">expanded</span> event. It adds items that are built similarly to previous items, the only change is the parent parameter which is not NULL. Conveniently, the parent <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> pointer that is passes to the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span> function is given in the <span style="font-family: Courier New,Courier,monospace">event_info</span> callback and needs to be cast.</p>
+<pre class="prettyprint">static void
+_tree_item_expanded(void *data, Evas_Object *o, void *event_info)
+{
+ Elm_Object_Item *it_parent = (Elm_Object_Item*) event_info;
+ int i_parent = (int)(uintptr_t) data;
+ int i;
+
+ for (i = 0; i < 10; i++)
+ {
+ elm_genlist_item_append(app->list, app->itc,
+ (void *)(uintptr_t) (i + i_parent),
+ it_parent,
+ ELM_GENLIST_ITEM_NONE,
+ NULL,
+ NULL
+ );
+ }
+}
+</pre>
+
+<p>The following code has the callback function for the <span style="font-family: Courier New,Courier,monospace">contracted</span> event. It imply calls <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_subitems_clear()</span> to clear all children (including their own children if they have any) of the given item. Again, the item that is being contracted is available through the <span style="font-family: Courier New,Courier,monospace">event_info</span> parameter to the callback.</p>
+<pre class="prettyprint">static void
+_tree_item_contracted(void *data, Evas_Object *o, void *event_info)
+{
+ Elm_Object_Item *it_parent = (Elm_Object_Item*) event_info;
+
+ elm_genlist_item_subitems_clear(it_parent);
+}
+</pre>
+
+<h3 id="item_group_tree" name="item_group_tree">Mixing Group and Tree Modes</h3>
+<p>A common UI design is to mix group and tree modes. It allows for a tree behavior while also keeping the group header item. The EFLs do not do any magic here and the way to get such a behavior is to create an item of type group, an item of type tree which parent is the group item. Then add the callbacks to populate the children of the tree item in the regular way.</p>
+
+ <h2 id="other_apis" name="other_apis">Using Other APIs</h2>
+
+<h3 id="homogeneous_set" name="homogeneous_set">Homogeneous Item Size</h3>
+<p>Because of the scroller, the actual height and/or width of the genlist must be computed. This means summing the sizes of all the items, the sizes must be computed. This obviously has a cost and slows down adding items to the genlist.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">elm_genlist_homogeneous_set()</span> function alleviates this issue by assuming all the items are the same size as the first one of the list. It speeds up large insertions. However, it may lead to serious graphical issues if the items are not actually the same size. Use with care.</p>
+
+<h3 id="item_class_update" name="item_class_update">Changing the Item Class of an Item After Its Creation</h3>
+<p>Changing the item class of a UI component is an easy way to change its appearance upon selection or other actions of the user. This is done by calling <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_class_update()</span>:</p>
+<pre class="prettyprint">static void
+_tree_item_expand_request(void *data, Evas_Object *o, void *event_info)
+{
+ Elm_Object_Item *it = (Elm_Object_Item*) event_info;
+
+ // Change the appearance and possibly content of the item being expanded.
+ elm_genlist_item_item_class_update(it, app->itc2);
+
+ elm_genlist_item_expanded_set(it, EINA_TRUE);
+}
+</pre>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a class="opensection" href="#init">Initializing Touch Gestures</a></li>
- <li><a class="opensection" href="#touch">Implementing Touch Gestures</a></li>
+ <li><a href="#init">Initializing Touch Gestures</a></li>
+ <li><a href="#touch">Implementing Touch Gestures</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.guides/html/native/ui/events_effects_n.htm">Event and Effect Guide</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UI__FRAMEWORK.html">UI API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Gesture Detector: Implementing Gestures Provided by the EFL Library</h1>
- <div class="cont"><div class="static-cont">
+
<p>This tutorial demonstrates how you can implement different types of gestures provided by the EFL library and instructions on how to use them.</p>
<h2>Warm-up</h2>
-<p>Become familiar with the UI API basics by learning about:</p>
+<p>Become familiar with the Elementary and Evas API basics by learning about:</p>
<ul>
- <li><a class="opensection" href="#init">Initializing Touch Gestures</a>
+ <li><a href="#init">Initializing Touch Gestures</a>
<p>Initialize the touch gestures for use.</p></li>
- <li><a class="opensection" href="#touch">Implementing Touch Gestures</a>
+ <li><a href="#touch">Implementing Touch Gestures</a>
<p>Implement different kinds of touch gestures.</p></li>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="init" name="init" class="items-tit-h2">Initializing Touch Gestures</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="init" name="init">Initializing Touch Gestures</h2>
+
<p>The EFL library provides a wide range of touch gestures, such as tap, double tap, triple tap, long tap, momentum, line, zoom and rotate, which can be used by the application to build a dynamic user interface interaction which is simple to use as well as intuitive.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">create_base_gui</span> function creates the application layout. It starts by creating a window, then adds the <span style="font-family: Courier New,Courier,monospace">elm_conformant</span> widget to it to decorate the window with an indicator. It then adds the <span style="font-family: Courier New,Courier,monospace">elm_naviframe</span> widget which acts as a view manager for the window and provides the window title functionality. After this it creates a gesture view by using the <span style="font-family: Courier New,Courier,monospace">create_main_view()</span> function and adds it to naviframe.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">create_base_gui</span> function creates the application layout. It starts by creating a window, then adds the <span style="font-family: Courier New,Courier,monospace">elm_conformant</span> component to it to decorate the window with an indicator. It then adds the <span style="font-family: Courier New,Courier,monospace">elm_naviframe</span> component which acts as a view manager for the window and provides the window title functionality. After this it creates a gesture view by using the <span style="font-family: Courier New,Courier,monospace">create_main_view()</span> function and adds it to naviframe.</p>
<pre class="prettyprint">
static void
create_base_gui(appdata_s *ad)
<p>The following figure illustrates the Gesture Detector.</p>
<p class="figure">Figure: Gesture Detector screen</p>
- <p style="text-align:center;"><img alt="Gesture Detector screen" src="../../images/gesture_view2.png" /></p>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="touch" name="touch" class="items-tit-h2">Implementing Touch Gestures</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <p align="center"><img alt="Gesture Detector screen" src="../../images/gesture_view2.png" /></p>
+
+ <h2 id="touch" name="touch">Implementing Touch Gestures</h2>
+
<p>The <span style="font-family: Courier New,Courier,monospace">elm_gesture_layer_attach()</span> is the function to which a gesture layer for a particular object is attached.</p>
<p>A gesture can have 4 different states:</p>
-<ul class="ul">
+<ul>
<li><span style="font-family: Courier New,Courier,monospace">ELM_GESTURE_STATE_START</span></li>
<li><span style="font-family: Courier New,Courier,monospace">ELM_GESTURE_STATE_MOVE</span></li>
<li><span style="font-family: Courier New,Courier,monospace">ELM_GESTURE_STATE_ABORT</span></li>
<li><span style="font-family: Courier New,Courier,monospace">ELM_GESTURE_STATE_END</span></li></ul>
<p>Every gesture starts with the <span style="font-family: Courier New,Courier,monospace">ELM_GESTURE_STATE_START</span> state and finishes with either the <span style="font-family: Courier New,Courier,monospace">ELM_GESTURE_STATE_END</span> or <span style="font-family: Courier New,Courier,monospace">ELM_GESTURE_STATE_ABORT</span> state depending on whether the gesture is completed or aborted on that object. </p>
<p>If an application only needs to track a finished gesture, it can listen for the finished state only. For a more complete control of the gesture, an application can listen for all state changes for that particular gesture.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">Elm_gesture_layer_cb_set()</span> API is used for registering state change callback for a particular gesture.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">elm_gesture_layer_cb_set()</span> function is used for registering state change callback for a particular gesture.</p>
<p>For more information about the gestures, see the gesture documentation.</p>
<p>To detect touch gestures:</p>
-<ul class="ul">
+<ul>
<li><p>The following example adds callbacks for listening to the tap gesture:</p>
<pre class="prettyprint">
elm_gesture_layer_cb_set(g, ELM_GESTURE_N_TAPS,
}
</pre></li>
</ul>
- </div>
- </li>
- </ul>
-</div>
-</div>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a class="opensection" href="#structure">Defining the Application "Structure"</a></li>
- <li><a class="opensection" href="#theme">Defining the Application Theme</a></li>
- <li><a class="opensection" href="#basic_ui">Creating the Basic UI</a></li>
- <li><a class="opensection" href="#hidden_menu">Creating a Hidden Menu</a></li>
+ <li><a href="#structure">Defining the Application "Structure"</a></li>
+ <li><a href="#theme">Defining the Application Theme</a></li>
+ <li><a href="#basic_ui">Creating the Basic UI</a></li>
+ <li><a href="#hidden_menu">Creating a Hidden Menu</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.guides/html/native/ui/efl_n.htm">EFL Guide</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Ecore__Group.html">Ecore API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Menu: Adding Menus to the Application</h1>
- <div class="cont"><div class="static-cont">
+
<p>This tutorial shows how to add menus to the application. The example code creates an application with 3 views, these views are showed by an interaction with a menu bar, placed on the top of the application. The application has also a hidden menu that appears only when the menu button is pressed.</p>
+ <table class="note">
+<tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">This feature is supported in mobile applications only.</td>
+ </tr>
+ </tbody>
+ </table>
+
<h2>Warm-up</h2>
-<p>Become familiar with the Elementary API basics by learning about:</p>
+<p>Become familiar with the Ecore, Elementary, and Evas API basics by learning about:</p>
<ul>
- <li><a class="opensection" href="#structure">Defining the Application "Structure"</a>
+ <li><a href="#structure">Defining the Application "Structure"</a>
<p>Define the structure of the application.</p></li>
- <li><a class="opensection" href="#theme">Defining the Application Theme</a>
+ <li><a href="#theme">Defining the Application Theme</a>
<p>Create a theme using Basic EDC UI Application.</p></li>
- <li><a class="opensection" href="#basic_ui">Creating the Basic UI</a>
+ <li><a href="#basic_ui">Creating the Basic UI</a>
<p>Create menus and toolbars.</p></li>
- <li><a class="opensection" href="#hidden_menu">Creating a Hidden Menu</a>
+ <li><a href="#hidden_menu">Creating a Hidden Menu</a>
<p>Create a hidden menu in your application.</p></li>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
-
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="structure" name="structure" class="items-tit-h2">Defining the Application "Structure"</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="structure" name="structure">Defining the Application "Structure"</h2>
+
<p>Define the structure of the application:</p>
<pre class="prettyprint">typedef struct appdata
{
- Evas_Object* win; // The main window
- Evas_Object* layout; // The Edje layout
- Evas_Object* conform; // The conform
- Evas_Object *nf; // The Naviframe to handle the views
- appmenu_s *menu; // The main menu
- appmenu_s *sidemenu; // The side menu
+ Evas_Object* win; // The main window
+ Evas_Object* layout; // The Edje layout
+ Evas_Object* conform; // The conform
+ Evas_Object *nf; // The Naviframe to handle the views
+ appmenu_s *menu; // The main menu
+ appmenu_s *sidemenu; // The side menu
mainview_s *main_view; // The main view (dayselector)
- calview_s *cal_view; // The calendar view
+ calview_s *cal_view; // The calendar view
dateview_s *date_view; // The date and time view
settview_s *settings_view; // The settings view
- Eina_Bool sdmenu_up; // A Boolean variable to keep the side menu status
+ Eina_Bool sdmenu_up; // A Boolean variable to keep the side menu status
} appdata_s;
</pre>
<p>This structure contains some specific variables for the views and the menus.</p>
<p>Define the main view by using the structure <span style="font-family: Courier New,Courier,monospace">mainview</span>, it is composed of a <span style="font-family: Courier New,Courier,monospace">box</span> (the main container), a <span style="font-family: Courier New,Courier,monospace">dayselector</span>, an image <span style="font-family: Courier New,Courier,monospace">img</span>, and a label <span style="font-family: Courier New,Courier,monospace">lb_main</span>.</p>
<pre class="prettyprint">typedef struct mainview
{
- Evas_Object *box; //The main container of the view
- Evas_Object *colorselector; //A color selector
- Evas_Object *img; //An image
- Evas_Object *lb_day; //A label
+ Evas_Object *box; // The main container of the view
+ Evas_Object *colorselector; // A color selector
+ Evas_Object *img; // An image
+ Evas_Object *lb_day; // A label
} mainview_s;
</pre>
-<p>The date view is very similar, it contains a <span style="font-family: Courier New,Courier,monospace">box</span>, a <span style="font-family: Courier New,Courier,monospace">datetime</span> widget and a label <span style="font-family: Courier New,Courier,monospace">lb_date</span>.</p>
+<p>The date view is very similar, it contains a <span style="font-family: Courier New,Courier,monospace">box</span>, a <span style="font-family: Courier New,Courier,monospace">datetime</span> component and a label <span style="font-family: Courier New,Courier,monospace">lb_date</span>.</p>
<pre class="prettyprint">typedef struct dateview
{
- Evas_Object *box; //The main container of the view
- Evas_Object *datetime; //A datetime widget
- Evas_Object *lb_date; //A label
+ Evas_Object *box; // The main container of the view
+ Evas_Object *datetime; // A datetime component
+ Evas_Object *lb_date; // A label
} dateview_s;
</pre>
<p>The last view is the calendar, it contains a <span style="font-family: Courier New,Courier,monospace">box</span>, a <span style="font-family: Courier New,Courier,monospace">calendar</span> and a label <span style="font-family: Courier New,Courier,monospace">lb_cal</span>.</p>
<pre class="prettyprint">typedef struct calview
{
- Evas_Object *box; //The main container of the view
- Evas_Object *calendar; //A calendar widget
- Evas_Object *lb_cal; //A label widget
+ Evas_Object *box; // The main container of the view
+ Evas_Object *calendar; // A calendar component
+ Evas_Object *lb_cal; // A label component
} calview_s;
</pre>
<p>The last members of the application structure are the 2 menus. The main menu is fixed and visible, and the side menu is hidden on application starts. These menus are represented by the <span style="font-family: Courier New,Courier,monospace">appmenu</span> structure.</p>
<pre class="prettyprint">typedef struct appmenu
{
- Evas_Object *tb; //The toolbar
- Elm_Object_Item *submenu; //The submenu item
+ Evas_Object *tb; // The toolbar
+ Elm_Object_Item *submenu; // The submenu item
} appmenu_s;
</pre>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="theme" name="theme" class="items-tit-h2">Defining the Application Theme</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="theme" name="theme">Defining the Application Theme</h2>
+
<p>After the structure is defined, define the UI. In this tutorial, Basic EDC UI Application is used. </p>
<p>This application structure is based on this skeleton:</p>
<p class="figure">Figure: Menu skeleton</p>
-
<p style="text-align:center;"><img alt="Menu skeleton" src="../../images/menu_skeleton.png" /></p>
+
<p align="center"><img alt="Menu skeleton" src="../../images/menu_skeleton.png" /></p>
-<p>The window, the conformant and the layout are set by the Basic EDC UI Application skeleton. Setup the containers for widgets and views.</p>
+<p>The window, the conformant and the layout are set by the Basic EDC UI Application skeleton. Setup the containers for UI components and views.</p>
<p>Create the <span style="font-family: Courier New,Courier,monospace">main_menu</span> <span style="font-family: Courier New,Courier,monospace">SWALLOW</span> part in the <span style="font-family: Courier New,Courier,monospace">.edc</span> file.</p>
<pre class="prettyprint">
part
rel2.relative: 1.0 0.18;
}
-} //End menu/main
+} // End menu/main
</pre>
<p>This part has two descriptions, one for the real position named <span style="font-family: Courier New,Courier,monospace">up</span> and another out of the screen as the default position. Create these states to animate the menu on application start. The animation is run by <span style="font-family: Courier New,Courier,monospace">animation,menu_main</span>.</p>
<pre class="prettyprint">program
action: STATE_SET "up" 1.0;
target: "view/main";
transition: LINEAR 0.2;
-} //END animation,view_main
+} // END animation,view_main
</pre>
<p>The last container is the side menu called <span style="font-family: Courier New,Courier,monospace">menu/side</span>.</p>
<pre class="prettyprint">
rel2.relative: 0.3 1.0;
color: 255 0 0 255;
}
-} //END menu/side
+} // END menu/side
</pre>
<p>By default, this container is hidden. Clicking menu button makes it appear. The second description places the container on the left of the screen. Here is the program to run animation:</p>
<pre class="prettyprint">
action: STATE_SET "up" 1.0;
target: "menu/side";
transition: LINEAR 0.2;
-} //END animation,menu_side
+} // END animation,menu_side
</pre>
<p>This program runs when it receives an event called <span style="font-family: Courier New,Courier,monospace">show,sidemenu</span> from <span style="font-family: Courier New,Courier,monospace">MenuButton</span> source.</p>
<p>Create a program that does the opposite and starts when it receives a signal called <span style="font-family: Courier New,Courier,monospace">hide,menu_side</span> from <span style="font-family: Courier New,Courier,monospace">MenuButton</span> source.</p>
transition: LINEAR 0.2;
} //END animation,menu_side
</pre>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="basic_ui" name="basic_ui" class="items-tit-h2">Creating the Basic UI</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="basic_ui" name="basic_ui">Creating the Basic UI</h2>
+
<p>The view container <span style="font-family: Courier New,Courier,monospace">view/main</span> is structured like this:</p>
<p class="figure">Figure: Main view</p>
-<p
style="text-align:center;"><img alt="Main view" src="../../images/view_main.png" /></p>
+<p
align="center"><img alt="Main view" src="../../images/view_main.png" /></p>
-<p>The naviframe contains and manages the boxes. For more information, see the Container programming guide. This widget handle views. In this example each view is contained in a <span style="font-family: Courier New,Courier,monospace">box</span> and the <span style="font-family: Courier New,Courier,monospace">box</span> is contained in the naviframe.</p>
+<p>The naviframe contains and manages the boxes. For more information, see the Container programming guide. This UI component handle views. In this example each view is contained in a <span style="font-family: Courier New,Courier,monospace">box</span> and the <span style="font-family: Courier New,Courier,monospace">box</span> is contained in the naviframe.</p>
<p>Create the naviframe in the <span style="font-family: Courier New,Courier,monospace">create_base_gui</span> function and allocate the memory to handle the views and menus of the application.</p>
<pre class="prettyprint">
- // Memory allocation
+// Memory allocation
ad->main_view = calloc(1, sizeof(mainview_s)); // Allocating memory for the main view
ad->cal_view = calloc(1, sizeof(calview_s)); // Allocating memory for the calendar view
ad->date_view = calloc(1, sizeof(dateview_s)); // allocating memory for the date view
<p>Use <span style="font-family: Courier New,Courier,monospace">app_terminate</span> function to free the memory:</p>
<pre class="prettyprint">app_terminate(void *data)
{
- /* Release all resources. */
+ // Release all resources
appdata_s *ad = data;
free(ad->menu);
free(ad->main_view);
free(ad->cal_view);
free(ad->settings_view);
-} //END of app_terminate
+} // END of app_terminate
</pre>
<p>Create the naviframe:</p>
<p>Create the main menu after most of the containers are created. First create a new <span style="font-family: Courier New,Courier,monospace">_build_main_menu</span> function, it takes an <span style="font-family: Courier New,Courier,monospace">appdata_s</span> as a parameter. This function is called by <span style="font-family: Courier New,Courier,monospace">create_base_gui</span>.</p>
<pre class="prettyprint">static void _build_main_menu(appdata_s *ad)
{
- //Memory allocation for the main menu function.
+ // Memory allocation for the main menu function
appmenu_s *menu = calloc(1, sizeof(appmenu_s));
- //Putting the "main" menu in the application data.
+ // Putting the "main" menu in the application data
ad->menu = menu;
// Creation of the "Menu" toolbar
elm_toolbar_item_append(menu->tb, ICON_DIR"/clock.png", "Date", _menu_item_selected_cb, ad);
elm_toolbar_item_append(menu->tb, ICON_DIR"/settings.png", "Settings", _menu_item_selected_cb, ad);
- // Showing the widget
+ // Showing the UI component
evas_object_show(menu->tb);
- // Adding the widget to the "menu/main" SWALLOW container defined in the .edc theme file.
+ // Adding the UI component to the "menu/main" SWALLOW container defined in the .edc theme file.
elm_object_part_content_set(ad->layout, "menu/main", menu->tb);
// Set the default view
<p>Make the menu items have the same size by setting <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> to <span style="font-family: Courier New,Courier,monospace">elm_toolbar_homogeneous_set</span>. This activates the homogeneous mode of the toolbar.</p>
<p>Add menu items to the toolbar using <span style="font-family: Courier New,Courier,monospace">elm_toolbar_item_append</span>. This function takes 4 parameters:</p>
-<ul class="ul">
+<ul>
<li>the target toolbar</li>
<li>the icon path for the menu item</li>
<li>the item label</li>
elm_object_content_set(ad->nf, view);
</pre>
<p>The menu has views, Calendar, Date, Settings, and Home (main view). The view names are stored in the menu item label, to get the label compare the returned string with the view names. When the name matches, the view is built by calling the correct function. Store the view in the application data and set up a new content to the naviframe before exit.</p>
-<p>This way when the user clicks a menu item, the view changes. The naviframe widget destroys its content on each call of <span style="font-family: Courier New,Courier,monospace">elm_object_content_set</span>. That is why the content must be built again on each item click.</p>
+<p>This way when the user clicks a menu item, the view changes. The naviframe component destroys its content on each call of <span style="font-family: Courier New,Courier,monospace">elm_object_content_set</span>. That is why the content must be built again on each item click.</p>
<p>Create the functions which create the views.</p>
<pre class="prettyprint">static void _build_main_view(appdata_s *ad)
{
mainview_s *view = ad->main_view;
char buf[PATH_MAX];
- //Main box
+ // Main box
view->box = elm_box_add(ad->nf);
elm_box_horizontal_set(view->box, EINA_FALSE);
elm_box_homogeneous_set(view->box, EINA_TRUE);
{
calview_s *view = ad->cal_view;
- //Main box image = elm_image_add(win);
+ // Main box image = elm_image_add(win);
view->box = elm_box_add(ad->nf);
elm_box_horizontal_set(view->box, EINA_FALSE);
} // End of_build_calendar_view
</pre>
<p>Each function creates a view and stores it in the application data.</p>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="hidden_menu" name="hidden_menu" class="items-tit-h2">Creating a Hidden Menu</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="hidden_menu" name="hidden_menu">Creating a Hidden Menu</h2>
+
<p>Add a new function called <span style="font-family: Courier New,Courier,monospace">_build_side_menu</span> to create the side Menu toolbar and add some items to it. This function takes the application data as parameter and stores the built menu in the sidemenu attribute of the structure.</p>
<pre class="prettyprint">static void _build_side_menu(appdata_s *ad)
{
Ecore_Event_Key *ev = event;
if (!strcmp(ev->keyname, KEY_END))
{
- /* Let window go to hide state. */
+ // Let window go to hide state
elm_win_lower(ad->win);
}
{
// If the menu is visible send a "hide,sidemenu" signal
elm_object_signal_emit(ad->layout, "hide,sidemenu", "MenuButton");
- // Store the new menu status (hidden).
- ad->sdmenu_up = EINA_FALSE;
+ // Store the new menu status (hidden)
+ ad->sdmenu_up = EINA_FALSE;
}
}
</pre>
}
</pre>
<p>This way the menu disappears when the view is selected by the user.</p>
- </div>
- </li>
- </ul>
-</div>
-</div>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a class="opensection" href="#init">Initializing Multi-point Touch</a></li>
- <li><a class="opensection" href="#canvas">Handling the Canvas</a></li>
- <li><a class="opensection" href="#touch">Managing Touch Events</a></li>
+ <li><a href="#init">Initializing Multi-point Touch</a></li>
+ <li><a href="#canvas">Handling the Canvas</a></li>
+ <li><a href="#touch">Managing Touch Events</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.guides/html/native/ui/events_effects_n.htm">Event and Effect Guide</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UI__FRAMEWORK.html">UI API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Eina__Group.html">Eina API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Eina__Group.html">Eina API for Wearable Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Multi-point Touch: Tracking Touch Events</h1>
- <div class="cont"><div class="static-cont">
+
<p>This tutorial demonstrates how you can use the <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> to paint on a canvas and track touch events.</p>
<h2>Warm-up</h2>
- <p>Become familiar with the UI API basics by learning about:</p>
+ <p>Become familiar with the Eina, Elementary, and Evas API basics by learning about:</p>
<ul>
- <li><a class="opensection" href="#init">Initializing Multi-point Touch</a>
+ <li><a href="#init">Initializing Multi-point Touch</a>
<p>Initialize multi-point touch for use.</p></li>
- <li><a class="opensection" href="#canvas">Handling the Canvas</a>
+ <li><a href="#canvas">Handling the Canvas</a>
<p>Paint on a canvas.</p></li>
- <li><a class="opensection" href="#touch">Managing Touch Events</a>
+ <li><a href="#touch">Managing Touch Events</a>
<p>Manage and track different touch events.</p></li>
</ul>
- <div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
+ <h2 id="init" name="init">Initializing Multi-point Touch</h2>
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="init" name="init" class="items-tit-h2">Initializing Multi-point Touch</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
<p>This sample is a fully functional application able to track multiple simultaneous clicks. For every click, a black rectangle spot is drawn on the screen. This way it is easy to test the multi-point touch operation with the application.</p>
<p>Initialization is implemented in the <span style="font-family: Courier New,Courier,monospace">multitouch.c</span> file.</p>
<p>The following figure illustrates the Multi-point Touch.</p>
<p class="figure">Figure: Multi-point Touch screens</p>
- <p style="text-align:center;"><img alt="Multi-point Touch screens" src="../../images/multipoint_touch.png" /></p>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="canvas" name="canvas" class="items-tit-h2">Handling the Canvas</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <p align="center"><img alt="Multi-point Touch screens" src="../../images/multipoint_touch.png" /></p>
+
+ <h2 id="canvas" name="canvas">Handling the Canvas</h2>
+
<p>The <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function creates base GUI elements including Naviframe and the Naviframe button. Naviframe includes each view screen as an item, which in turn includes the title and a button which clears spots when clicked.</p>
<pre class="prettyprint">static void
appdata_s *ad = data;
Evas_Object *spot;
- EINA_LIST_FREE(ad->spots, spot)
+ EINA_LIST_FREE(ad->spots, spot)
{
evas_object_del(spot);
spot = NULL;
}
- elm_object_text_set(ad->label, "Clear");
+ elm_object_text_set(ad->label, "Clear");
}
</pre>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="touch" name="touch" class="items-tit-h2">Managing Touch Events</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="touch" name="touch">Managing Touch Events</h2>
+
<p>On the bottom of the <span style="font-family: Courier New,Courier,monospace">create_main_view()</span> function, event callbacks are added to the event rectangle. An event callback is added using the <span style="font-family: Courier New,Courier,monospace">evas_object_event_callback_add()</span> function.</p>
<p>The following touch event types are supported:</p>
-<ul class="ul">
+<ul>
<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_DOWN</span>: This event is called when the given object receives the mouse down event.</li>
<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_UP</span>: This event is called when the given object receives the mouse up event.</li>
<li><span style="font-family: Courier New,Courier,monospace">EVAS_CALLBACK_MOUSE_MOVE</span>: This event is called when the given object receives the mouse move event.</li>
ad->spots= eina_list_append(ad->spots, spot);
}
</pre>
- </div>
- </li>
- </ul>
-</div>
-</div>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a class="opensection" href="#create">Creating Naviframes</a>
+ <li><a href="#create">Creating Naviframes</a>
</li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a class="opensection" href="../../../../org.tizen.guides/html/native/ui/containers_n.htm#naviframe">Naviframe Container Guide</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__Naviframe.html">Naviframe API</a></li>
+ <li><a href="../../../../org.tizen.guides/html/native/ui/containers_mn.htm#naviframe">Naviframe Guide for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Eina__Group.html">Eina API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Naviframe: Creating Navigation Using Naviframes</h1>
- <div class="cont"><div class="static-cont">
+
<p>Naviframes are containers useful for implementing interfaces with several screens having a previous/next relationship.</p>
+ <table class="note">
+<tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">This feature is supported in mobile applications only.</td>
+ </tr>
+ </tbody>
+ </table>
+
<h2>Warm-up</h2>
-<p>Become familiar with the Naviframe API basics by learning about:</p>
+<p>Become familiar with the Eina, Elementary, and Evas API basics by learning about:</p>
<ul>
- <li><a class="opensection" href="#create">Creating Naviframes</a>
+ <li><a href="#create">Creating Naviframes</a>
<p>Create a UI with naviframes.</p></li>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
+ <h2 id="create" name="create">Creating Naviframes</h2>
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="create" name="create" class="items-tit-h2">Creating Naviframes</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
<p>Naviframes are containers useful for implementing interfaces with several screens having a previous/next relationship.</p>
<p>This tutorial shows a UI with three naviframes. Each naviframe is made of 20 screens, each made up of a label with the text "label
return z;
}
</pre>
-<p>Create buttons that are at the top of the naviframe and allow the user to go back and forth between the screens. The naviframe widget builds a button for "previous" by default, but allows the programmers to provide their own buttons. It has a specific slot for the "next" button.</p>
+<p>Create buttons that are at the top of the naviframe and allow the user to go back and forth between the screens. The naviframe component builds a button for "previous" by default, but allows the programmers to provide their own buttons. It has a specific slot for the "next" button.</p>
<pre class="prettyprint">// Save the element that is popped from the naviframe
static void
_naviframe_prev(void *data, Evas_Object *o __UNUSED__, void *event_info __UNUSED__)
z->popped = eina_list_remove_list(z->popped, z->popped);
if (label != NULL)
{
- // The widget is saved inside the naviframe but nothing more; we need
+ // The UI component is saved inside the naviframe but nothing more; we need
// to create new buttons and set the title text again (copy the one
// from the label that is saved).
text = elm_object_text_get(label);
evas_object_show(w);
}
</pre>
- </div>
- </li>
- </ul>
-</div>
-</div>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a class="opensection" href="#init">Initializing the Application</a></li>
- <li><a class="opensection" href="#create">Creating a Panes Widget</a></li>
- <li><a class="opensection" href="#config">Configuring the Panes</a></li>
- <li><a class="opensection" href="#signals">Handling Signals</a></li>
+ <li><a href="#init">Initializing the Application</a></li>
+ <li><a href="#create">Creating a Panes Component</a></li>
+ <li><a href="#config">Configuring the Panes</a></li>
+ <li><a href="#signals">Handling Signals</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a class="opensection" href="../../../../org.tizen.guides/html/native/ui/containers_n.htm#panes">Panes Guide</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__Panes.html">Panes API</a></li>
+ <li><a href="../../../../org.tizen.guides/html/native/ui/containers_mn.htm#panes">Panes Guide</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Panes: Using Panes</h1>
- <div class="cont"><div class="static-cont">
+
<p>This tutorial explains how to use Panes in the application.</p>
+ <table class="note">
+<tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">This feature is supported in mobile applications only.</td>
+ </tr>
+ </tbody>
+ </table>
+
<h2>Warm-up</h2>
-<p>Become familiar with the Panes API basics by learning about:</p>
+<p>Become familiar with the Elementary and Evas API basics by learning about:</p>
<ul>
- <li><a class="opensection" href="#init">Initializing the Application</a>
+ <li><a href="#init">Initializing the Application</a>
<p>Initialize the application for use.</p></li>
- <li><a class="opensection" href="#create">Creating a Panes Widget</a>
+ <li><a href="#create">Creating a Panes Component</a>
<p>Create panes to the application.</p></li>
- <li><a class="opensection" href="#config">Configuring the Panes</a>
+ <li><a href="#config">Configuring the Panes</a>
<p>Change the pane settings and layout.</p></li>
- <li><a class="opensection" href="#signals">Handling Signals</a>
+ <li><a href="#signals">Handling Signals</a>
<p>Handle signals based on user interaction.</p></li>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
+ <h2 id="init" name="init">Initializing the Application</h2>
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="init" name="init" class="items-tit-h2">Initializing the Application</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
<p>This is how to start an Appcore application.</p>
<pre class="prettyprint">#include <Elementary.h>
#include <app.h>
return ret;
}
</pre>
-<p>The code above creates a window entitled "Panes tutorial", composed of a conformant widget that contains a naviframe widget. To add a new Panes object, use the <span style="font-family: Courier New,Courier,monospace">_create()</span> function.</p>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="create" name="create" class="items-tit-h2">Creating a Panes Widget</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
-<p>The elm_panes widget adds a draggable bar between two contents. When dragged, this bar resizes the contents' size. To create a new Panes into an Elementary object, use the <span style="font-family: Courier New,Courier,monospace">elm_panes_add()</span> function:</p>
+<p>The code above creates a window entitled "Panes tutorial", composed of a conformant component that contains a naviframe component. To add a new Panes object, use the <span style="font-family: Courier New,Courier,monospace">_create()</span> function.</p>
+
+ <h2 id="create" name="create">Creating a Panes Component</h2>
+
+<p>The elm_panes component adds a draggable bar between two contents. When dragged, this bar resizes the contents' size. To create a new Panes into an Elementary object, use the <span style="font-family: Courier New,Courier,monospace">elm_panes_add()</span> function:</p>
<pre class="prettyprint">// Add an elm_panes
panes = elm_panes_add(naviframe);
evas_object_size_hint_weight_set(panes, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
nav_it = elm_naviframe_item_push (naviframe, "Panes view", NULL, NULL, panes, NULL);
</pre>
<p>Here the Panes is created and added in the naviframe.</p>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="config" name="config" class="items-tit-h2">Configuring the Panes</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="config" name="config">Configuring the Panes</h2>
+
<p>By default, the orientation of the Panes is vertical. To modify the orientation, use the <span style="font-family: Courier New,Courier,monospace">elm_panes_horizontal_set()</span> function.</p>
<pre class="prettyprint">// Add a horizontal elm_panes
panes_h = elm_panes_add(naviframe);
<pre class="prettyprint">elm_object_part_content_set(panes, "left", panes_h);
</pre>
-<p>This is how to set a button object to the "right" side of our vertical Panes widget.</p>
+<p>This is how to set a button object to the "right" side of our vertical Panes component.</p>
<pre class="prettyprint">// Create a button object
bt = elm_button_add(naviframe);
elm_object_text_set(bt, "Right");
<pre class="prettyprint">// Fix the Panes proportion
elm_panes_fixed_set(panes_h, EINA_TRUE);
</pre>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="signals" name="signals" class="items-tit-h2">Handling Signals</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
-<p>The Panes widgets emit four different signals, depending on the users' interaction with the draggable bar.</p>
-<ul class="ul">
+
+ <h2 id="signals" name="signals">Handling Signals</h2>
+
+<p>The Panes components emit four different signals, depending on the users' interaction with the draggable bar.</p>
+<ul>
<li>"press" - The pane is pressed.</li>
<li>"unpressed" - The pane is released after being pressed.</li>
<li>"clicked" - The pane is clicked.</li>
<h3>"unpress" Signal </h3>
-<p>For the "unpress" signal, the proportion size of the left content of the Panes widget is printed to the standard output. To do this, use the <span style="font-family: Courier New,Courier,monospace">elm_panes_content_left_size_get()</span> function.</p>
+<p>For the "unpress" signal, the proportion size of the left content of the Panes component is printed to the standard output. To do this, use the <span style="font-family: Courier New,Courier,monospace">elm_panes_content_left_size_get()</span> function.</p>
<pre class="prettyprint">// unpress callback
static void
_unpress_cb(void *data, Evas_Object *obj, void *event_info)
<h3>"clicked,double" Signal </h3>
-<p>Hide the left part of the Panes widget on the "clicked,double" signal and set the left proportion to 0.0. To restore the left part proportion with a double click on the hidden part of the Panes widget, use the <span style="font-family: Courier New,Courier,monospace">elm_panes_content_left_size_get()</span> and <span style="font-family: Courier New,Courier,monospace">elm_panes_content_left_size_set()</span> functions, and a variable to store the value of the current proportion.</p>
+<p>Hide the left part of the Panes component on the "clicked,double" signal and set the left proportion to 0.0. To restore the left part proportion with a double click on the hidden part of the Panes component, use the <span style="font-family: Courier New,Courier,monospace">elm_panes_content_left_size_get()</span> and <span style="font-family: Courier New,Courier,monospace">elm_panes_content_left_size_set()</span> functions, and a variable to store the value of the current proportion.</p>
<pre class="prettyprint">// double clicked callback
static void
</pre>
<p class="figure">Figure: Panes tutorial in action</p>
- <p style="text-align:center;"><img alt="Panes tutorial in action" src="../../images/pane_tuto.png" /></p>
- </div>
- </li>
- </ul>
-</div>
-</div>
+<p align="center"><img alt="Panes tutorial in action" src="../../images/pane_tuto.png" /></p>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
--- /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>Popup: Using Popups</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+ <div id="profile">
+ <p><img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+ </div>
+ <div id="toc_border"><div id="toc">
+ <p class="toc-title">Content</p>
+ <ul class="toc">
+ <li><a href="#init">Initializing the Popup Application</a></li>
+ <li><a href="#style">Using Popup Styles</a></li>
+ <li><a href="#event">Managing Popup Events</a></li>
+ </ul>
+ <p class="toc-title">Related Info</p>
+ <ul class="toc">
+ <li><a href="../../../../org.tizen.guides/html/native/ui/components_wn.htm#popup">Popup Guide for Wearable Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Popup.html">Popup API for Wearable Native</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Popup: Using Popups</h1>
+
+
+<p>This tutorial teaches the basics of the popup component interactions.</p>
+
+ <table class="note">
+<tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">This feature is supported in wearable applications only.</td>
+ </tr>
+ </tbody>
+ </table>
+
+<h2>Warm-up</h2>
+<p>Become familiar with the Popup API basics by learning about:</p>
+ <ul>
+ <li><a href="#init">Initializing the Popup Application</a>
+ <p>Create a base application where popups can be used.</p></li>
+ <li><a href="#style">Using Popup Styles</a>
+ <p>Create various popup styles to customize the your popup.</p></li>
+ <li><a href="#event">Managing Popup Events</a>
+ <p>Handle various popup events.</p></li>
+ </ul>
+
+<h2 id="init" name="init">Initializing the Popup Application</h2>
+
+<p>This use case creates an application with a window entitled "Popup Basic Tutorial". The window consists of a conformant component, and a popup is placed inside the conformant.</p>
+
+<p>To create a typical elementary application:</p>
+
+<pre class="prettyprint">
+static void
+create_base_gui(appdata_s *ad)
+{
+ // Window
+ ad->win = elm_win_util_standard_add("main", "Popup Basic Tutorial");
+ elm_win_autodel_set(ad->win, EINA_TRUE);
+
+ evas_object_smart_callback_add(ad->win, "delete,request", win_delete_request_cb, NULL);
+ eext_object_event_callback_add(ad->win, EEXT_CALLBACK_BACK, win_back_cb, ad);
+
+ // Conformant
+ ad->conform = elm_conformant_add(ad->win);
+ elm_win_indicator_mode_set(ad->win, ELM_WIN_INDICATOR_SHOW);
+ elm_win_indicator_opacity_set(ad->win, ELM_WIN_INDICATOR_OPAQUE);
+ evas_object_size_hint_weight_set(ad->conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+ elm_win_resize_object_add(ad->win, ad->conform);
+ evas_object_show(ad->conform);
+
+ create_popup(ad->conform);
+
+ // Show the window after the base GUI is set up
+ evas_object_show(ad->win);
+}
+
+static bool
+app_create(void *data)
+{
+ appdata_s *ad = data;
+ create_base_gui(ad);
+
+ return true;
+}
+
+int
+main(int argc, char **argv)
+{
+ struct app_data ad = {0,};
+ ui_app_lifecycle_callback_s event_callback = {0,};
+
+ event_callback.create = app_create;
+
+ return ui_app_main(&argc, &argv, &event_callback, &ad);
+}</pre>
+
+ <h2 id="style" name="style">Using Popup Styles</h2>
+
+<p>To create popups using various styles:</p>
+
+<ul><li>Create a basic text-only popup:
+
+<pre class="prettyprint">
+Evas_Object *popup;
+struct appdata *ad;
+ad = (struct appdata *) data;
+
+popup = elm_popup_add(ad->win_main);
+evas_object_size_hint_weight_set(popup, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+elm_popup_align_set(popup, ELM_NOTIFY_ALIGN_FILL, 1.0);
+eext_object_event_callback_add(popup, EEXT_CALLBACK_BACK, eext_popup_back_cb, NULL);
+elm_object_text_set(popup, "This has only texts");
+evas_object_show(popup);
+</pre></li>
+
+<li>Create a popup with a title and text. The <span style="font-family: Courier New,Courier,monospace">title,text</span> attribute is the title area text part that defines the title label.
+<pre class="prettyprint">
+Evas_Object *popup;
+struct appdata *ad;
+ad = (struct appdata *) data;
+
+popup = elm_popup_add(ad->win_main);
+evas_object_size_hint_weight_set(popup, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+elm_popup_align_set(popup, ELM_NOTIFY_ALIGN_FILL, 1.0);
+elm_object_part_text_set(popup, "title,text", "Title");
+elm_object_text_set(popup,"This Popup has title area and text");
+eext_object_event_callback_add(popup, EEXT_CALLBACK_BACK, eext_popup_back_cb, NULL);
+evas_object_show(popup);
+</pre></li>
+
+<li>Create a popup with a title, text, and 2 buttons:
+<pre class="prettyprint">
+Evas_Object *popup;
+Evas_Object *btn;
+struct appdata *ad = (struct appdata *) data;
+
+popup = elm_popup_add(ad->win_main);
+evas_object_size_hint_weight_set(popup, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+elm_popup_align_set(popup, ELM_NOTIFY_ALIGN_FILL, 1.0);
+elm_object_part_text_set(popup, "title,text", "Title");
+eext_object_event_callback_add(popup, EEXT_CALLBACK_BACK, eext_popup_back_cb, NULL);
+elm_object_text_set(popup, "This is title text 2button popup");
+
+btn = elm_button_add(popup);
+elm_object_style_set(btn, "popup");
+evas_object_size_hint_weight_set(btn, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+elm_object_text_set(btn, "Cancel");
+elm_object_part_content_set(popup, "button1", btn);
+evas_object_smart_callback_add(btn, "clicked", _response_cb, popup);
+
+btn = elm_button_add(popup);
+elm_object_style_set(btn, "popup");
+evas_object_size_hint_weight_set(btn, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+elm_object_text_set(btn, "OK");
+elm_object_part_content_set(popup, "button2", btn);
+evas_object_smart_callback_add(btn, "clicked", _response_cb, popup);
+
+evas_object_show(popup);
+</pre></li>
+
+<li>Create a toast popup:
+<pre class="prettyprint">
+Evas_Object *popup;
+struct appdata *ad = (struct appdata *) data;
+
+popup = elm_popup_add(ad->win_main);
+elm_object_style_set(popup, "toast");
+elm_popup_orient_set(popup, ELM_POPUP_ORIENT_BOTTOM);
+evas_object_size_hint_weight_set(popup, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+elm_popup_align_set(popup, ELM_NOTIFY_ALIGN_FILL, 1.0);
+eext_object_event_callback_add(popup, EEXT_CALLBACK_BACK, eext_popup_back_cb, NULL);
+elm_object_part_text_set(popup,"elm.text", "Saving Contacts to sim");
+
+evas_object_smart_callback_add(popup, "block,clicked", _block_clicked_cb, NULL);
+elm_popup_timeout_set(popup, 2.0);
+evas_object_smart_callback_add(popup, "timeout", _timeout_cb, NULL);
+
+evas_object_show(popup);
+</pre></li>
+</ul>
+
+ <h2 id="event" name="event">Managing Popup Events</h2>
+<p>The Elementary popups respond to user interactions with several events.</p>
+<p>To manage popup events:</p>
+
+<ul>
+<li>Handle timeout events:
+<p>The "timeout" event is triggered whenever a popup is closed as a result of timeout.</p>
+<pre class="prettyprint">
+static void _timeout_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ evas_object_del(obj);
+}
+elm_popup_timeout_set(popup, 3.0);
+evas_object_smart_callback_add(popup, "timeout", _timeout_cb, NULL);
+</pre></li>
+
+<li>Handle the <span style="font-family: Courier New,Courier,monospace">block,clicked</span> events:
+<p>The "block,clicked" event is triggered whenever the user taps on a blocked event area.</p>
+<pre class="prettyprint">
+static void _block_clicked_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ evas_object_del(obj);
+}
+evas_object_smart_callback_add(popup, "block,clicked", _block_clicked_cb, NULL);
+</pre></li>
+
+</ul>
+
+
+<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>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a class="opensection" href="#initial">Initializing the Application Layout</a></li>
- <li><a class="opensection" href="#rotation">Implementing the Rotation Effect</a></li>
- <li><a class="opensection" href="#zoom">Implementing the Zoom Effect</a></li>
+ <li><a href="#initial">Initializing the Application Layout</a></li>
+ <li><a href="#rotation">Implementing the Rotation Effect</a></li>
+ <li><a href="#zoom">Implementing the Zoom Effect</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.guides/html/native/ui/animations_effects_n.htm#elm_transit">Elementary Animations Guide</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__Transit.html">Transit API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Ecore__Group.html">Ecore API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Ecore__Group.html">Ecore API for Wearable Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Evas.html">Evas API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Transit: Implementing Elementary Transit Effects</h1>
- <div class="cont"><div class="static-cont">
-
-<p>This tutorial demonstrates how you can implement a variety of EFL animation effects using the Transit API available in the EFL library.</p>
+
+<p>This tutorial demonstrates how you can implement a variety of EFL animation effects using the APIs available in the EFL library.</p>
<h2>Warm-up</h2>
-<p>Become familiar with the Transit API basics by learning about:</p>
+<p>Become familiar with the Ecore, Elementary, and Evas API basics by learning about:</p>
<ul>
- <li><a class="opensection" href="#initial">Initializing the Application Layout</a>
+ <li><a href="#initial">Initializing the Application Layout</a>
<p>Initialize the application layout for use.</p></li>
- <li><a class="opensection" href="#rotation">Implementing the Rotation Effect</a>
+ <li><a href="#rotation">Implementing the Rotation Effect</a>
<p>Implement the rotation effect to the UI layout.</p></li>
- <li><a class="opensection" href="#zoom">Implementing the Zoom Effect</a>
+ <li><a href="#zoom">Implementing the Zoom Effect</a>
<p>Implement the zooming effect to the UI layout.</p></li>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="initial" name="initial" class="items-tit-h2">Initializing the Application Layout</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
-<p>The application uses widgets, such as <span style="font-family: Courier New,Courier,monospace">elm_conformant</span> and <span style="font-family: Courier New,Courier,monospace">elm_naviframe</span> for view management, layout classes, such as <span style="font-family: Courier New,Courier,monospace">elm_list</span> for the composition of the screen, and widgets, such as <span style="font-family: Courier New,Courier,monospace">elm_button</span> and <span style="font-family: Courier New,Courier,monospace">elm_image</span> for the content inside the view.</p>
+ <h2 id="initial" name="initial">Initializing the Application Layout</h2>
+
+<p>The application uses UI components, such as <span style="font-family: Courier New,Courier,monospace">elm_conformant</span> and <span style="font-family: Courier New,Courier,monospace">elm_naviframe</span> for view management, layout classes, such as <span style="font-family: Courier New,Courier,monospace">elm_list</span> for the composition of the screen, and UI components, such as <span style="font-family: Courier New,Courier,monospace">elm_button</span> and <span style="font-family: Courier New,Courier,monospace">elm_image</span> for the content inside the view.</p>
<p>The transit is designed to apply various animated transition effects to the <span style="font-family: Courier New,Courier,monospace">Evas_Object</span>. The following transition effects are supported in the Tizen native applications:</p>
-<ul class="ul">
+<ul>
<li>Blend</li>
<li>Color</li>
<li>Fade</li>
<li>Zoom</li>
</ul>
-<p>The application layout is created by the <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function. First, a window is created and the <span style="font-family: Courier New,Courier,monospace">elm_conformant</span> widget is added to it to decorate the window with an indicator. It then adds the <span style="font-family: Courier New,Courier,monospace">elm_naviframe</span> widget, which acts as a view manager for the window and provides the window title functionality.</p>
+<p>The application layout is created by the <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function. First, a window is created and the <span style="font-family: Courier New,Courier,monospace">elm_conformant</span> component is added to it to decorate the window with an indicator. It then adds the <span style="font-family: Courier New,Courier,monospace">elm_naviframe</span> component, which acts as a view manager for the window and provides the window title functionality.</p>
<pre class="prettyprint">
static void
create_base_gui(appdata_s *ad)
<p>This document describes only the rotation and zoom implementations. For more information about other effects, see the <span style="font-family: Courier New,Courier,monospace">transit.c</span> file and the <span style="font-family: Courier New,Courier,monospace">elm_transit</span> document. The following figure illustrates the rotation and zoom effects.</p>
<p class="figure">Figure: Rotation and zoom</p>
-<p style="text-align:center;"><img alt="Rotation and zoom" src="../../images/transit_rotation_zoom.png" /></p>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="rotation" name="rotation" class="items-tit-h2">Implementing the Rotation Effect</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+<p align="center"><img alt="Rotation and zoom" src="../../images/transit_rotation_zoom.png" /></p>
+
+ <h2 id="rotation" name="rotation">Implementing the Rotation Effect</h2>
+
<p>If the list item named by rotation includes the touch event, the callback function for this event is called.</p>
<p>The data is sent as an <span style="font-family: Courier New,Courier,monospace">Evas_Object</span>. This implements the animation effect.</p>
<p>To implement the rotation effect:</p>
elm_transit_go(transit);
}
</pre>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="zoom" name="zoom" class="items-tit-h2">Implementing the Zoom Effect</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="zoom" name="zoom">Implementing the Zoom Effect</h2>
+
<p>If the list item named by zoom includes the touch event, the callback function for this event is called.</p>
<p>The data is sent as an <span style="font-family: Courier New,Courier,monospace">Evas_Object</span>. This implements the animation effect.</p>
<p>There are 2 transit functions: one is for the zoom effect and the other is for returning to the original effect:</p>
elm_transit_go(transit);
}
</pre>
- </div>
- </li>
- </ul>
-</div>
-</div>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></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>UI Control: Managing UI Elements</title>
+ <title>UI Components: Managing UI Elements</title>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
</div>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a href="../../../../org.tizen.guides/html/native/ui/ui_control_n.htm">UI Control Guide</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API</a></li>
+ <li><a href="../../../../org.tizen.guides/html/native/ui/ui_component_mn.htm">UI Components Guide</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
-<h1>UI Control: Managing UI Elements</h1>
+<h1>UI Components: Managing UI Elements</h1>
+
+ <p>The UI component tutorials demonstrate how to manage user interface-related features in Tizen native applications:</p>
- <p>The UI control tutorials demonstrate how you can manage user interface-related features in Tizen mobile native applications:</p>
<ul>
- <li><a href="basic_tutorial_n.htm">Basic: Using Basic Interactions</a> <p>Demonstrates how you can implement an application with basic widgets interactions.</p></li>
- <li><a href="form_tutorial_n.htm">Form: Creating the Basic Application and Layout</a> <p>Demonstrates how you can create a basic application that provides a form.</p></li>
- <li><a href="naviframe_tutorial_n.htm">Naviframe: Creating Navigation Using Naviframes</a> <p>Demonstrates how you can use a naviframe container in your application.</p></li>
- <li><a href="genlist_tutorial_n.htm">Genlist: Managing Large Element Sets</a> <p>Demonstrates how you can use a genlist widget to manage large element sets in your application.</p></li>
- <li><a href="menu_tutorial_n.htm">Menu: Adding Menus to the Application</a> <p>Demonstrates how you can create menus for your application.</p></li>
- <li><a href="panes_tutorial_n.htm">Panes: Using Panes</a> <p>Demonstrates how you can use a panes widget in your application.</p></li>
- <li><a href="ui_layout_tutorial_n.htm">UI Layout: Creating a UI Screen Layout</a> <p>Demonstrates how you can compose a UI screen using the layout classes available in the EFL widget library.</p></li>
+ <li><a href="basic_tutorial_mn.htm">Basic: Using Basic Interactions</a> <p>Demonstrates how you can implement an application with basic UI component interactions.</p></li>
+ <li><a href="form_tutorial_
mn.htm">Form: Creating the Basic Application and Layout</a> <p>Demonstrates how you can create a basic application that provides a form.</p></li>
+ <li><a href="naviframe_tutorial_mn.htm">Naviframe: Creating Navigation Using Naviframes</a> <p>Demonstrates how you can use a naviframe container in your application.</p></li>
+ <li><a href="genlist_tutorial_mn.htm">Genlist: Managing Large Element Sets</a> <p>Demonstrates how you can use a genlist component to manage large element sets in your application.</p></li>
+ <li><a href="menu_tutorial_mn.htm">Menu: Adding Menus to the Application</a> <p>Demonstrates how you can create menus for your application.</p></li>
+ <li><a href="panes_tutorial_mn.htm">Panes: Using Panes</a> <p>Demonstrates how you can use a panes component in your application.</p></li>
+ <li><a href="ui_layout_tutorial_mn.htm">UI Layout: Creating a UI Screen Layout</a> <p>Demonstrates how you can compose a UI screen using the layout classes available in the EFL UI component library.</p></li>
</ul>
-
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
--- /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>UI Components: Managing UI Elements</title>
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
+ <div id="container"><div id="contents"><div class="content">
+ <h1>UI Components: Managing UI Elements</h1>
+
+<p>Click the profile you want:</p>
+<p><a href="ui_component_tutorials_mn.htm"><img alt="Mobile native" src="../../images/mn_division.png"/></a> <a href="ui_component_tutorials_wn.htm"><img alt="Wearable native" src="../../images/wn_division.png"/></a></p>
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+</div></div></div>
+
+<div id="footer">
+<p class="footer">Except as noted, this content is licensed under <a href="http://opensource.org/licenses/LGPL-2.1" target="_blank">LGPLv2.1+</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>UI Components: Managing UI Elements</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+ <div id="profile">
+ <p><img alt="Wearable native" src="../../images/wn_icon.png"/></p>
+ </div>
+ <div id="toc_border"><div id="toc">
+
+ <p class="toc-title">Related Info</p>
+ <ul class="toc">
+ <li><a href="../../../../org.tizen.guides/html/native/ui/ui_component_wn.htm">UI Components Guide</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Elementary.html">Elementary API for Wearable Native</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>UI Components: Managing UI Elements</h1>
+
+ <p>The UI component tutorials demonstrate how to manage user interface-related features in Tizen native applications:</p>
+
+ <ul>
+ <li><a href="button_tutorial_wn.htm">Button: Using Buttons</a> <p>Demonstrates how you can create various button component styles and handle button events.</p></li>
+ <li><a href="datetime_tutorial_wn.htm">Datetime: Using Datetime</a> <p>Demonstrates how you can create UI components that allow the user to select a date or time.</p></li>
+ <li><a href="genlist_tutorial_wn.htm">Genlist: Managing Large Element Sets</a> <p>Demonstrates how you can use a genlist component to manage large element sets in your application.</p></li>
+ <li><a href="popup_tutorial_wn.htm">Popup: Using Popups</a> <p>Demonstrates how you can create various popup component styles and handle popup events.</p></li>
+ <li><a href="circle_components_tutorial_wn.htm">Circle Components: Creating a Circular View</a> <p>Demonstrates how you can create various UI components for a circular screen.</p></li>
+ </ul>
+
+<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>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a class="opensection" href="#init">Creating the UI Layout</a></li>
- <li><a class="opensection" href="#content">Adding Content to the Screen</a></li>
+ <li><a href="#init">Creating the UI Layout</a></li>
+ <li><a href="#add_content">Adding Content to the Screen</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a href="../../../../org.tizen.guides/html/native/ui/ui_guide_n.htm">UI Guides</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UI__FRAMEWORK.html">UI API</a></li>
+ <li><a href="../../../../org.tizen.guides/html/native/ui/ui_guide_n.htm">UI Framework Guides</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Ecore__Group.html">Ecore API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Elementary.html">Elementary API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Evas.html">Evas API for Mobile Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>UI Layout: Creating a UI Screen Layout</h1>
- <div class="cont"><div class="static-cont">
+
-<p>This tutorial demonstrates how you can compose a UI screen using the layout classes available in the EFL widget library. It also highlights the capabilities of the EFL layout classes in free style layouting as well as layouting in a particular sequence (such as linear or grid).</p>
+<p>This tutorial demonstrates how you can compose a UI screen using the layout classes available in the EFL UI component library. It also highlights the capabilities of the EFL layout classes in free style layouting as well as layouting in a particular sequence (such as linear or grid).</p>
+
+ <table class="note">
+<tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">This feature is supported in mobile applications only.</td>
+ </tr>
+ </tbody>
+ </table>
<h2>Warm-up</h2>
-<p>Become familiar with the UI API basics by learning about:</p>
+<p>Become familiar with the Ecore, Elementary, and Evas API basics by learning about:</p>
<ul>
- <li><a class="opensection" href="#init">Creating the UI Layout</a>
+ <li><a href="#init">Creating the UI Layout</a>
<p>Create an application layout.</p></li>
- <li><a class="opensection" href="#content">Adding Content to the Screen</a>
+ <li><a href="#add_content">Adding Content to the Screen</a>
<p>Add content to UI screens.</p></li>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
+ <h2 id="init" name="init">Creating the UI Layout</h2>
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="init" name="init" class="items-tit-h2">Creating the UI Layout</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
-<p>The sample application uses widgets, such as <span style="font-family: Courier New,Courier,monospace">elm_naviframe</span> and <span style="font-family: Courier New,Courier,monospace">elm_toolbar</span> for the view management, layout classes, such as <span style="font-family: Courier New,Courier,monospace">elm_table</span>, <span style="font-family: Courier New,Courier,monospace">elm_box</span>, and <span style="font-family: Courier New,Courier,monospace">elm_grid</span> for the composition of the screen, and widgets, such as <span style="font-family: Courier New,Courier,monospace">elm_label</span> and <span style="font-family: Courier New,Courier,monospace">elm_image</span> for the content inside the view.</p>
+<p>The sample application uses UI components, such as <span style="font-family: Courier New,Courier,monospace">elm_naviframe</span> and <span style="font-family: Courier New,Courier,monospace">elm_toolbar</span> for the view management, layout classes, such as <span style="font-family: Courier New,Courier,monospace">elm_table</span>, <span style="font-family: Courier New,Courier,monospace">elm_box</span>, and <span style="font-family: Courier New,Courier,monospace">elm_grid</span> for the composition of the screen, and UI components, such as <span style="font-family: Courier New,Courier,monospace">elm_label</span> and <span style="font-family: Courier New,Courier,monospace">elm_image</span> for the content inside the view.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function creates the application layout. It starts by creating a window, then adds the <span style="font-family: Courier New,Courier,monospace">elm_conformant</span> widget to it to decorate the window with an indicator. It then adds the <span style="font-family: Courier New,Courier,monospace">elm_naviframe</span> widget which acts as a view manager for the window and provides the window title functionality. After this it creates the toolbar using the <span style="font-family: Courier New,Courier,monospace">create_toolbar()</span> function and adds it to naviframe.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function creates the application layout. It starts by creating a window, then adds the <span style="font-family: Courier New,Courier,monospace">elm_conformant</span> component to it to decorate the window with an indicator. It then adds the <span style="font-family: Courier New,Courier,monospace">elm_naviframe</span> component which acts as a view manager for the window and provides the window title functionality. After this it creates the toolbar using the <span style="font-family: Courier New,Courier,monospace">create_toolbar()</span> function and adds it to naviframe.</p>
<pre class="prettyprint">
static void
create_base_gui(appdata_s *ad)
tabbar_it = elm_toolbar_first_item_get(ad->tabbar);
elm_toolbar_item_selected_set(tabbar_it, EINA_TRUE);
- // Show window after base gui is set up
+ // Show the window after the base GUI is set up
evas_object_show(ad->win);
ecore_event_handler_add(ECORE_EVENT_KEY_DOWN, keydown_cb, NULL);
<p>The following figure illustrates the UI Layout.</p>
<p class="figure">Figure: UI Layout screen</p>
- <p style="text-align:center;"><img alt="UI Layout screen" src="../../images/uilayout_view2.png" /></p>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="content" name="content" class="items-tit-h2">Adding Content to the Screen</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <p align="center"><img alt="UI Layout screen" src="../../images/uilayout_view2.png" /></p>
+
+ <h2 id="add_content" name="add_content">Adding Content to the Screen</h2>
+
<p>The <span style="font-family: Courier New,Courier,monospace">create_box_view()</span> function creates the screen using a recursive composition of the box layout.</p>
<pre class="prettyprint">static Evas_Object*
}
</pre>
- </div>
- </li>
- </ul>
-</div>
-</div>
-
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></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>UI: Creating the Application UI</title>
+ <title>UI Framework: Creating the Application UI</title>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a href="../../../../org.tizen.guides/html/native/ui/ui_guide_n.htm">UI Guides</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UI__FRAMEWORK.html">UI API</a></li>
+ <li><a href="../../../../org.tizen.guides/html/native/ui/ui_guide_n.htm">UI Framework Guides</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UI__FRAMEWORK.html">UI Framework API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UI__FRAMEWORK.html">UI Framework API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
-<h1>UI: Creating the Application UI</h1>
- <p>The UI tutorials demonstrate how to create and manage the UI and its various elements and events in Tizen mobile native applications:</p>
+<h1>UI Framework: Creating the Application UI</h1>
+ <p>The UI framework tutorials demonstrate how to create and manage the UI and its various elements and events in Tizen native applications:</p>
<ul>
<li><a href="efl_tutorial_n.htm">EFL: Using EFL Features for Designing the UI</a> <p>Demonstrates how you can use EFL to create your application UI.</p></li>
<li><a href="evas_tutorial_n.htm">Evas: Creating and Managing Image Objects</a> <p>Demonstrates how you can create and manage image objects.</p></li>
- <li><a href="events_effects_tutorials_n.htm">Event and Effect: Using Animations and Effects</a> <p>Demonstrate how you can create and implement a variety of animation effects and use gestures in applications.</p></li>
- <li><a href="ui_control_tutorials_n.htm">UI Control: Managing UI Elements</a> <p>Demonstrate how you can manage user interface-related features.</p></li>
+ <li><a href="events_effects_tutorials_n.htm">Event and Effect: Using Animations and Effects</a> <p>Demonstrates how you can create and implement a variety of animation effects and use gestures in applications.</p></li>
+ <li><a href="ui_component_tutorials_n.htm">UI Components: Managing UI Elements</a> <p>Demonstrates how you can manage user interface-related features.</p></li>
<li><a href="efl_extension_tutorial_n.htm">Efl Extension: Creating a Naviframe Window</a> <p>Demonstrates how you can register the EFL Extension Menu and Back key events.</p></li>
<li><a href="font_settings_tutorial_n.htm">Font Setting: Using Various Fonts in the Application</a> <p>Demonstrates how you can modify the fonts and text size of your application, or set your own font.</p></li>
<li><a href="efl_util_tutorial_n.htm">EFL UTIL: Adjusting the Notification Window Level</a> <p>Demonstrates how you can create a notification window and adjust its position.</p></li>
<li><a href="efl_optimization_tutorial_n.htm">EFL Optimization: Optimizing Tizen Native Applications</a> <p>Demonstrates how you can optimize your Tizen native application.</p></li>
- <li><a href="eom_tutorial_n.htm">EOM: Using External Output by EOM</a> <p>Demonstrates how you can use external output devices.</p></li>
+ <li><a href="eom_tutorial_n.htm">EOM: Using External Output Devices</a> <p>Demonstrates how you can use external output devices.</p></li>
+
</ul>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.guides/html/native/uix/stt_n.htm">STT Guide</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__STT__MODULE.html">STT API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__STT__MODULE.html">STT API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UIX__STT__MODULE.html">STT API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>STT: Recognizing Speech</h1>
-<div class="cont"><div class="static-cont">
+
<p>This tutorial demonstrates how you can recognize sound data recorded by user and send the result as text.</p>
<p>Set the options and control recording for the STT.</p></li>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
- <!-- Folds -->
- <ul class="devicespecifications">
-
- <li>
- <div class="devicespec-tit">
- <h2 id="create" name="create" class="items-tit-h2">Creating and Destroying STT Handles</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+<h2 id="create" name="create">Creating and Destroying STT Handles</h2>
+
<p>To create and destroy STT handles:</p>
-<ol><li>To use the features of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__STT__MODULE.html">STT</a> (speech-to-text) API, include the <span style="font-family: Courier New,Courier,monospace;"><stt.h></span> header file in your application:
+<ol><li>To use the features of the STT (speech-to-text) API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__STT__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UIX__STT__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace;"><stt.h></span> header file in your application:
<pre class="prettyprint">
#include <stt.h></pre>
</li>
}
}
</pre></li> </ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="set" name="set" class="items-tit-h2">Setting and Unsetting Callbacks</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+<h2 id="set" name="set" >Setting and Unsetting Callbacks</h2>
+
<p>To set and unset callbacks:</p>
-<ol><li>To use the features of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__STT__MODULE.html">STT</a> (speech-to-text) API, include the <span style="font-family: Courier New,Courier,monospace;"><stt.h></span> header file in your application. The enum values for the callback function parameter are defined in the header file, as well as the parameter details.
+<ol><li>To use the features of the STT (speech-to-text) API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__STT__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UIX__STT__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace;"><stt.h></span> header file in your application. The enum values for the callback function parameter are defined in the header file, as well as the parameter details.
<pre class="prettyprint">
#include <stt.h></pre>
</li>
<li><p>The STT API provides various callback functions used to get the information including the recognition result, state changes, language changes, and errors. Call the callback functions in the <span style="font-family: Courier New,Courier,monospace;">STT_STATE_CREATED</span> state.</p>
<p>You can use the following callbacks:</p>
-<ul class="ul">
+<ul>
<li>State changed
<p>If you set the state changed callback for the STT, it is invoked when a state is changed by the STT.</p>
<pre class="prettyprint">
}
</pre></li>
</ul></li></ol>
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="get" name="get" class="items-tit-h2">Getting Information</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+<h2 id="get" name="get">Getting Information</h2>
+
<p>To get information of the current STT state and the languages used:</p>
-<ol><li>To use the features of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__STT__MODULE.html">STT</a> (speech-to-text) API, include the <span style="font-family: Courier New,Courier,monospace;"><stt.h></span> header file in your application:
+<ol><li>To use the features of the STT (speech-to-text) API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__STT__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UIX__STT__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace;"><stt.h></span> header file in your application:
<pre class="prettyprint">
#include <stt.h></pre>
</li>
<li><p>You can obtain the current STT state, the list of supported languages, and the current language:</p>
-<ul class="ul">
+<ul>
<li>Get the current state.
<p>The STT state is changed by other functions. It is also applied as a precondition for each function. Get the current state using the <span style="font-family: Courier New,Courier,monospace;">stt_get_state()</span> function.</p>
<pre class="prettyprint">
</pre>
</li>
</ul></li></ol>
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="prepare" name="prepare" class="items-tit-h2">Connecting and Disconnecting the STT</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+<h2 id="prepare" name="prepare">Connecting and Disconnecting the STT</h2>
+
<p>To operate the STT:</p>
- <ol><li>To use the features of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__STT__MODULE.html">STT</a> (speech-to-text) API, include the <span style="font-family: Courier New,Courier,monospace;"><stt.h></span> header file in your application:
+ <ol><li>To use the features of the STT (speech-to-text) API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__STT__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UIX__STT__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace;"><stt.h></span> header file in your application:
<pre class="prettyprint">
#include <stt.h></pre>
</li>
<li><p>After you create the STT handle, connect the background STT daemon:</p>
- <ul class="ul">
+ <ul>
<li>
<p>The <span style="font-family: Courier New,Courier,monospace;">stt_prepare()</span> function is asynchronous and the STT state changes to <span style="font-family: Courier New,Courier,monospace;">STT_STATE_READY</span>:</p>
</ul>
</li>
</ol>
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="option" name="option" class="items-tit-h2">Setting Options and Controlling Recording</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+<h2 id="option" name="option">Setting Options and Controlling Recording</h2>
+
<p>To set the STT options and control recording:</p>
-<ol><li>To use the features of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__STT__MODULE.html">STT</a> (speech-to-text) API, include the <span style="font-family: Courier New,Courier,monospace;"><stt.h></span> header file in your application:
+<ol><li>To use the features of the STT (speech-to-text) API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__STT__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UIX__STT__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace;"><stt.h></span> header file in your application:
<pre class="prettyprint">
#include <stt.h></pre>
</li>
<li><p>You can set the following STT options:</p>
-<ul class="ul">
+<ul>
<li>Set silence detection.
<p>After the STT starts recognizing sound, some STT engines can detect silence when the sound input from the user ends. If silence detection is enabled, the STT library stops recognition automatically and sends the result. Otherwise, you can manually stop it using the <span style="font-family: Courier New,Courier,monospace;">stt_stop()</span> function.</p>
<p>If you set the silence detection as automatic, STT works as a global STT setting. This option must be set in the <span style="font-family: Courier New,Courier,monospace;">STT_STATE_READY</span> state.</p>
</li>
<li>Start, stop, and cancel recognition:
- <ul class="ul">
+ <ul>
<li><p>To start recording, use the <span style="font-family: Courier New,Courier,monospace;">stt_start()</span> function. The connected STT daemon starts recording, and the state is changed to <span style="font-family: Courier New,Courier,monospace;">STT_STATE_RECORDING</span>.</p>
<table class="note">
<tbody>
</tr>
<tr>
<td class="note">If the <span style="font-family: Courier New,Courier,monospace;">stt_start()</span> function fails, check the error code. You can get the following error codes:
- <ul class="ul">
+ <ul>
<li><span style="font-family: Courier New,Courier,monospace;">STT_ERROR_RECORDER_BUSY</span></li>
<li><span style="font-family: Courier New,Courier,monospace;">STT_ERROR_OUT_OF_NETWORK</span></li>
<li><span style="font-family: Courier New,Courier,monospace;">STT_ERROR_INVALID_STATE</span></li>
</ul>
</li>
</ul></li></ol>
- </div>
- </li>
-
- </ul>
-</div>
-</div>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
<li>Set-up
<ul class="toc">
- <li><a href="#create" class="opensection">Creating and Destroying TTS Handles</a></li>
- <li><a href="#set" class="opensection">Setting and Unsetting Callbacks</a></li>
- <li><a href="#get" class="opensection">Getting Information</a></li>
- <li><a href="#mode" class="opensection">Getting and Setting the Mode</a></li>
- <li><a href="#prepare" class="opensection">Connecting and Disconnecting TTS</a></li>
+ <li><a href="#create">Creating and Destroying TTS Handles</a></li>
+ <li><a href="#set">Setting and Unsetting Callbacks</a></li>
+ <li><a href="#get">Getting Information</a></li>
+ <li><a href="#mode">Getting and Setting the Mode</a></li>
+ <li><a href="#prepare">Connecting and Disconnecting TTS</a></li>
</ul>
</li>
- <li><a href="#text" class="opensection">Adding Text</a></li>
- <li><a href="#start" class="opensection">Starting, Stopping, and Pausing Playback</a>
+ <li><a href="#text">Adding Text</a></li>
+ <li><a href="#start">Starting, Stopping, and Pausing Playback</a>
</li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.guides/html/native/uix/tts_n.htm">TTS Guide</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__TTS__MODULE.html">TTS API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__TTS__MODULE.html">TTS API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UIX__TTS__MODULE.html">TTS API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>TTS: Synthesizing Voice from Text and Playing Synthesized Sound Data</h1>
-<div class="cont"><div class="static-cont">
+
<p>This tutorial demonstrates how you can synthesize text into sound data as utterance and play, pause, and stop it.</p>
<p>Start TTS playback, stop, and pause it.</p></li>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
- <!-- Folds -->
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="create" name="create" class="items-tit-h2">Creating and Destroying TTS Handles</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+<h2 id="create" name="create">Creating and Destroying TTS Handles</h2>
+
<p>To create and destroy TTS handles:</p>
-<ol><li>To use the features of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__TTS__MODULE.html">TTS</a> (text-to-speech) API, include the <span style="font-family: Courier New,Courier,monospace;"><tts.h></span> header file in your application:
+<ol><li>To use the features of the TTS (text-to-speech) API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__TTS__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UIX__TTS__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace;"><tts.h></span> header file in your application:
<pre class="prettyprint">
#include <tts.h></pre>
</li>
}
}
</pre></li></ol>
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="set" name="set" class="items-tit-h2">Setting and Unsetting Callbacks</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+<h2 id="set" name="set">Setting and Unsetting Callbacks</h2>
+
<p>To set and unset callbacks:</p>
-<ol><li>To use the features of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__TTS__MODULE.html">TTS</a> (text-to-speech) API, include the <span style="font-family: Courier New,Courier,monospace;"><tts.h></span> header file in your application. The enum values for the parameters of the callback functions are defined there. You can also find the parameter details in the header file.
+<ol><li>To use the features of the TTS (text-to-speech) API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__TTS__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UIX__TTS__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace;"><tts.h></span> header file in your application. The enum values for the parameters of the callback functions are defined there. You can also find the parameter details in the header file.
<pre class="prettyprint">
#include <tts.h></pre>
</li>
<li><p>The TTS API provides various callback functions used to get information, such as changing states and starting a completing utterance. Call the setting and unsetting callback functions in the <span style="font-family: Courier New,Courier,monospace;">TTS_STATE_CREATED</span> state. </p>
<p>You can use the following callbacks:</p>
-<ul class="ul">
+<ul>
<li>State changed
<p>If you set the state change callback for the TTS, it is invoked when the TTS state changes.</p>
<pre class="prettyprint">
</pre>
</li>
</ul></li></ol>
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="get" name="get" class="items-tit-h2">Getting Information</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+<h2 id="get" name="get">Getting Information</h2>
+
<p>To get information of the current TTS state and the voices used:</p>
-<ol><li>To use the features of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__TTS__MODULE.html">TTS</a> (text-to-speech) API, include the <span style="font-family: Courier New,Courier,monospace;"><tts.h></span> header file in your application:
+<ol><li>To use the features of the TTS (text-to-speech) API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__TTS__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UIX__TTS__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace;"><tts.h></span> header file in your application:
<pre class="prettyprint">
#include <tts.h></pre>
</li>
<li><p>You can obtain the current state, the supported voice list, and the current voice:</p>
-<ul class="ul">
+<ul>
<li>Get the current state.
<p>The TTS state is changed by other functions, and it is also applied as a precondition of each API. You can get the current state using the <span style="font-family: Courier New,Courier,monospace;">tts_get_state()</span> function.</p>
<pre class="prettyprint">
</pre>
</li>
</ul></li></ol>
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="mode" name="mode" class="items-tit-h2">Getting and Setting the Mode</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+<h2 id="mode" name="mode">Getting and Setting the Mode</h2>
+
<p>To get and set the mode:</p>
-<ol><li>To use the features of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__TTS__MODULE.html">TTS</a> (text-to-speech) API, include the <span style="font-family: Courier New,Courier,monospace;"><tts.h></span> header file in your application:
+<ol><li>To use the features of the TTS (text-to-speech) API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__TTS__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UIX__TTS__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace;"><tts.h></span> header file in your application:
<pre class="prettyprint">
#include <tts.h></pre>
</li>
}
}
</pre></li></ol>
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="prepare" name="prepare" class="items-tit-h2">Connecting and Disconnecting TTS</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+<h2 id="prepare" name="prepare">Connecting and Disconnecting TTS</h2>
+
<p>To operate the TTS:</p>
-<ol><li>To use the features of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__TTS__MODULE.html">TTS</a> (text-to-speech) API, include the <span style="font-family: Courier New,Courier,monospace;"><tts.h></span> header file in your application:
+<ol><li>To use the features of the TTS (text-to-speech) API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__TTS__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UIX__TTS__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace;"><tts.h></span> header file in your application:
<pre class="prettyprint">
#include <tts.h></pre>
</li>
<li><p>After you create the TTS handle, connect the background TTS daemon. The daemon synthesizes the text with the engine and plays the resulting sound data:</p>
-<ul class="ul">
-<li><p>The <span style="font-family: Courier New,Courier,monospace;">tts_prepare()</span> API is asynchronous, and the state of the TTS is changed to <span style="font-family: Courier New,Courier,monospace;">TTS_STATE_READY</span>.</p>
+<ul>
+<li><p>The <span style="font-family: Courier New,Courier,monospace;">tts_prepare()</span> function is asynchronous, and the state of the TTS is changed to <span style="font-family: Courier New,Courier,monospace;">TTS_STATE_READY</span>.</p>
<pre class="prettyprint">
void prepare_for_tts(tts_h tts)
</table>
</li>
-<li><p>The <span style="font-family: Courier New,Courier,monospace;">tts_unprepare()</span> API is used for disconnection, and the state is changed back to <span style="font-family: Courier New,Courier,monospace;">TTS_STATE_CREATED</span>.</p>
+<li><p>The <span style="font-family: Courier New,Courier,monospace;">tts_unprepare()</span> function is used for disconnection, and the state is changed back to <span style="font-family: Courier New,Courier,monospace;">TTS_STATE_CREATED</span>.</p>
<pre class="prettyprint">void unprepared_for_tts(tts_h tts)
{
</li>
</ul></li></ol>
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="text" name="text" class="items-tit-h2">Adding Text</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+<h2 id="text" name="text">Adding Text</h2>
+
<p>To add text:</p>
-<ol><li>To use the features of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__TTS__MODULE.html">TTS</a> (text-to-speech) API, include the <span style="font-family: Courier New,Courier,monospace;"><tts.h></span> header file in your application. There are defined values, <span style="font-family: Courier New,Courier,monospace;">TTS_VOICE_TYPE_AUTO</span> and <span style="font-family: Courier New,Courier,monospace;">TTS_VOICE_SPEED_AUTO</span> for following the default TTS setting. The minimum and maximum limits for the speed are also defined in the header file.
+<ol><li>To use the features of the TTS (text-to-speech) API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__TTS__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UIX__TTS__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace;"><tts.h></span> header file in your application. There are defined values, <span style="font-family: Courier New,Courier,monospace;">TTS_VOICE_TYPE_AUTO</span> and <span style="font-family: Courier New,Courier,monospace;">TTS_VOICE_SPEED_AUTO</span> for following the default TTS setting. The minimum and maximum limits for the speed are also defined in the header file.
<pre class="prettyprint">
#include <tts.h></pre>
</li>
<li>To manage text:
-<ul class="ul">
+<ul>
<li>
<p>You can request the TTS library to read your own text using the <span style="font-family: Courier New,Courier,monospace;">tts_add_text()</span> function. The TTS library manages added text using queues, so it is possible to add several texts simultaneously. Each obtained text receives an utterance ID, which is used for synthesizing and playing the sound data.</p>
</pre>
</li>
</ul></li></ol>
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="start" name="start" class="items-tit-h2">Starting, Stopping, and Pausing Playback</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+<h2 id="start" name="start">Starting, Stopping, and Pausing Playback</h2>
+
<p>To start, pause, and stop playback:</p>
-<ol><li>To use the features of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__TTS__MODULE.html">TTS</a> (text-to-speech) API, include the <span style="font-family: Courier New,Courier,monospace;"><tts.h></span> header file in your application:
+<ol><li>To use the features of the TTS (text-to-speech) API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__TTS__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UIX__TTS__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace;"><tts.h></span> header file in your application:
<pre class="prettyprint">
#include <tts.h></pre>
</li>
}
}
</pre></li></ol>
- </div>
- </li>
-
- </ul>
-</div>
-</div>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.guides/html/native/uix/uix_guide_n.htm">UIX Guides</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__FRAMEWORK.html">UIX API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__FRAMEWORK.html">UIX API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UIX__FRAMEWORK.html">UIX API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>UIX: Taking Advantage of UI Extensions</h1>
- <p>The UIX tutorials demonstrate how to use the following features in creating Tizen mobile native applications:</p>
+ <p>The UIX tutorials demonstrate how to use the following features in creating Tizen native applications:</p>
<ul>
<li><a href="tts_tutorial_n.htm">TTS: Synthesizing Voice from Text and Playing Synthesized Sound Data</a>
<p>Demonstrates how you can synthesize text into sound data and play it.</p>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile native" src="../../images/mn_icon.png"/></p>
+ <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a class="opensection" href="#init">Initializing the EWK WebKit</a>
+ <li><a href="#init">Initializing the EWK WebKit</a>
</li>
- <li><a class="opensection" href="#window">Creating and Deleting a Window Object</a>
+ <li><a href="#window">Creating and Deleting a Window Object</a>
</li>
- <li><a class="opensection" href="#layout">Setting the Window Layout</a>
+ <li><a href="#layout">Setting the Window Layout</a>
</li>
- <li><a class="opensection" href="#view">Setting the Window View</a>
+ <li><a href="#view">Setting the Window View</a>
</li>
- <li><a class="opensection" href="#keymouse">Handling Key and Mouse Events</a>
+ <li><a href="#keymouse">Handling Key and Mouse Events</a>
</li>
- <li><a class="opensection" href="#show">Showing a Window and Setting the Focus</a>
+ <li><a href="#show">Showing a Window and Setting the Focus</a>
</li>
- <li><a class="opensection" href="#pageurl">Setting the Page URL</a>
+ <li><a href="#pageurl">Setting the Page URL</a>
</li>
- <li><a class="opensection" href="#helper">Finding a Window</a>
+ <li><a href="#helper">Finding a Window</a>
</li>
- <li><a class="opensection" href="#finalize">Finalizing the Application</a>
+ <li><a href="#finalize">Finalizing the Application</a>
</li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.guides/html/native/web/web_guide_n.htm">Web Guide</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__WEB__FRAMEWORK.html">Web API</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__WEB__FRAMEWORK.html">Web API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__WEB__FRAMEWORK.html">Web API for Wearable Native</a></li>
</ul>
</div></div>
<div id="container"><div id="contents"><div class="content">
<h1>Web: Managing Web Pages and Web Content</h1>
- <div class="cont"><div class="static-cont">
-<p>This tutorial demonstrates how to create a simple Web browser.</p>
+
+<p>This tutorial demonstrates how you can create a simple Web browser.</p>
<h2>Warm-up</h2>
<p>Become familiar with the Web API basics by learning about:</p>
<ul>
- <li><a class="opensection" href="#init">Initializing the EFL WebKit</a>
+ <li><a href="#init">Initializing the EFL WebKit</a>
<p>Initialize the EFL WebKit (EWK) for use.</p></li>
- <li><a class="opensection" href="#window">Creating and Deleting a Window Object</a>
+ <li><a href="#window">Creating and Deleting a Window Object</a>
<p>Create and delete a window object.</p></li>
- <li><a class="opensection" href="#layout">Setting the Window Layout</a>
+ <li><a href="#layout">Setting the Window Layout</a>
<p>Create the window layout.</p></li>
- <li><a class="opensection" href="#view">Setting the Window View</a>
+ <li><a href="#view">Setting the Window View</a>
<p>Set the window smart view and settings.</p></li>
- <li><a class="opensection" href="#keymouse">Handling Key and Mouse Events</a>
+ <li><a href="#keymouse">Handling Key and Mouse Events</a>
<p>Handle the key and mouse event.</p></li>
- <li><a class="opensection" href="#show">Showing a Window and Setting the Focus</a>
+ <li><a href="#show">Showing a Window and Setting the Focus</a>
<p>Show a window and set the focus.</p></li>
- <li><a class="opensection" href="#pageurl">Setting the Page URL</a>
+ <li><a href="#pageurl">Setting the Page URL</a>
<p>Set the page URL.</p></li>
- <li><a class="opensection" href="#helper">Finding a Window</a>
+ <li><a href="#helper">Finding a Window</a>
<p>Use the helper functions to find a window.</p></li>
- <li><a class="opensection" href="#finalize">Finalizing the Application</a>
+ <li><a href="#finalize">Finalizing the Application</a>
<p>Finalize the application.</p></li>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
-
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="init" name="init" class="items-tit-h2">Initializing the EWK WebKit</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+
+ <h2 id="init" name="init">Initializing the EWK WebKit</h2>
+
<p>To initialize the EWK WebKit:</p>
-<ol><li>To use the functions and data types of the <a href="../../../../org.tizen.native.mobile.apireference/group__WEBVIEW.html">WebView</a> API, include the <span style="font-family: Courier New,Courier,monospace;"><Ecore.h></span>, <span style="font-family: Courier New,Courier,monospace;"><Ecore_Evas.h></span>, <span style="font-family: Courier New,Courier,monospace;"><Ecore_Getopt.h></span>, <span style="font-family: Courier New,Courier,monospace;"><Eet.h></span>, <span style="font-family: Courier New,Courier,monospace;"><Eina.h></span>, <span style="font-family: Courier New,Courier,monospace;"><Elementary.h></span>, <span style="font-family: Courier New,Courier,monospace;"><Evas.h></span>, and <span style="font-family: Courier New,Courier,monospace;"><EWebKit.h></span> header files in your application:
+<ol><li>To use the functions and data types of the WebView API (in <a href="../../../../org.tizen.native.mobile.apireference/group__WEBVIEW.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__WEBVIEW.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace;"><Ecore.h></span>, <span style="font-family: Courier New,Courier,monospace;"><Ecore_Evas.h></span>, <span style="font-family: Courier New,Courier,monospace;"><Ecore_Getopt.h></span>, <span style="font-family: Courier New,Courier,monospace;"><Eet.h></span>, <span style="font-family: Courier New,Courier,monospace;"><Eina.h></span>, <span style="font-family: Courier New,Courier,monospace;"><Elementary.h></span>, <span style="font-family: Courier New,Courier,monospace;"><Evas.h></span>, <span style="font-family: Courier New,Courier,monospace;"><EWebKit.h></span>, and <span style="font-family: Courier New,Courier,monospace;"><app.h></span> header files in your application:
<pre class="prettyprint">
#include <Ecore.h>
#include <Ecore_Evas.h>
#include <Elementary.h>
#include <Evas.h>
#include <EWebKit.h>
+#include <app.h>
</pre></li>
<li>To use the EWK API, an application needs the following privileges:
{
int args = 1;
Browser_Window window;
- memset(&window, 0x00, sizeof(struct Browser_Window));
+ memset(&window, 0x00, sizeof(Browser_Window));
ui_app_lifecycle_callback_s ops;
memset(&ops, 0x00, sizeof(ui_app_lifecycle_callback_s));
ops.create = br_app_create;
- return ui_app_main(&argc, &argv, &ops, &window);
+ return ui_app_main(argc, argv, &ops, &window);
}
</pre></li>
<pre class="prettyprint">
window = window_create(NULL, 0, 0, EINA_FALSE);
</pre></li></ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="window" name="window" class="items-tit-h2">Creating and Deleting a Window Object</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="window" name="window">Creating and Deleting a Window Object</h2>
+
<p>To create and delete a window object:</p>
<ol>
<li>To create a window object, use the <span style="font-family: Courier New,Courier,monospace">elm_win_add(Evas_Object* parent, const char* name, Elm_Win_Type) type</span> function.</li>
window_close(window_find_with_elm_window(elm_window));
}
</pre></li></ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="layout" name="layout" class="items-tit-h2">Setting the Window Layout</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+
+ <h2 id="layout" name="layout">Setting the Window Layout</h2>
+
<p>Create the window layout.</p>
<p class="figure">Figure: Window layout</p>
-<p
style="text-align:center;"> <img alt="Window layout" src="../../images/window_layout.png"/></p>
+<p
align="center"><img alt="Window layout" src="../../images/window_layout.png"/></p>
<p>For this purpose, create new boxes (<span style="font-family: Courier New,Courier,monospace">vertical_layout</span> and <span style="font-family: Courier New,Courier,monospace">horizontal_layout</span>) using the <span style="font-family: Courier New,Courier,monospace">elm_box_add()</span> function:</p>
<pre class="prettyprint">
// Create vertical layout
-Evas_Object *vertical_layout = elm_box_add(window->elm_window);
+Evas_Object *vertical_layout = elm_box_add(window->elm_window);
elm_box_padding_set(vertical_layout, 0, 2);
evas_object_size_hint_weight_set(vertical_layout, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
elm_win_resize_object_add(window->elm_window, vertical_layout);
<span style="font-family: Courier New,Courier,monospace">evas_object_show(Evas_Object* obj)</span> makes an obj visible.
The <span style="font-family: Courier New,Courier,monospace">elm_box_pack_end (Evas_Object* obj, Evas_Object* subobj)</span> function adds a subobject at the end of the pack list.</p>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="view" name="view" class="items-tit-h2">Setting the Window View</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="view" name="view">Setting the Window View</h2>
+
<p>Create a window view and set the user agent. To create the view, use the <span style="font-family: Courier New,Courier,monospace">_ewk_view_add()</span> function. The view is an object that displays pages in the browser. To set the user agent, use the <span style="font-family: Courier New,Courier,monospace">ewk_view_user_agent_set()</span> function.</p>
<pre class="prettyprint">
ewk_view_user_agent_set(window->ewk_view, user_agent_string);
}</pre>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="keymouse" name="keymouse" class="items-tit-h2">Handling Key and Mouse Events</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+
+ <h2 id="keymouse" name="keymouse">Handling Key and Mouse Events</h2>
+
<p>To handle mouse or key events, corresponding callbacks need to be set by calling the <span style="font-family: Courier New,Courier,monospace">evas_object_event_callback_add()</span> function.</p>
<pre class="prettyprint">
view_focus_set(window, EINA_TRUE);
}
</pre>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="show" name="show" class="items-tit-h2">Showing a Window and Setting the Focus</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="show" name="show">Showing a Window and Setting the Focus</h2>
+
<p>In EFL, the UI focus control is implemented in an Elementary object, not an <span style="font-family: Courier New,Courier,monospace">Evas_object</span>. Therefore, the application using EWK derived from an <span style="font-family: Courier New,Courier,monospace">Evas_object</span> must control the focus itself. For example, steal focus away from the <span style="font-family: Courier New,Courier,monospace">elm_window</span> object and give it to the <span style="font-family: Courier New,Courier,monospace">ewk_view</span>.</p>
<p>To set the focus to a <span style="font-family: Courier New,Courier,monospace">ewk_view</span>, use the <span style="font-family: Courier New,Courier,monospace">void elm_object_focus_set (Evas_Object *obj, Eina_Bool focus)</span> and <span style="font-family: Courier New,Courier,monospace">void evas_object_focus_set (Evas_Object *obj, Eina_Bool focus)</span> functions. Example code:</p>
{
// We steal focus away from elm focus model and start to do things
// manually here, so elm now has no clue what is up. Tell elm that its
- // top level widget is to be unfocused so elm gives up the focus
+ // top level UI component is to be unfocused so elm gives up the focus
elm_object_focus_set(elm_object_top_widget_get(window->elm_window), EINA_FALSE);
evas_object_focus_set(window->ewk_view, focus);
};
</pre>
<p>The <span style="font-family: Courier New,Courier,monospace">void evas_object_show (Evas_Object *obj)</span> function makes the given <span style="font-family: Courier New,Courier,monospace">Evas</span> object visible.</p>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="pageurl" name="pageurl" class="items-tit-h2">Setting the Page URL</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="pageurl" name="pageurl">Setting the Page URL</h2>
+
<p>This example uses 2 helper functions for finding window structures. The first one, the <span style="font-family: Courier New,Courier,monospace">window_find_with_elm_window()</span> function, takes <span style="font-family: Courier New,Courier,monospace">elm_window</span> as an argument and returns a pointer to the <span style="font-family: Courier New,Courier,monospace">Browser_Window</span> object that the window is part of. The second one, the <span style="font-family: Courier New,Courier,monospace">window_find_with_ewk_view()</span> function, does the same with <span style="font-family: Courier New,Courier,monospace">ewk_view</span> passed as an argument. Both of them use the <span style="font-family: Courier New,Courier,monospace">EINA_LIST_FOREACH</span> macro to iterate over the windows list.</p>
<pre class="prettyprint">
return !!strstr(url, "://");
}
</pre>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="helper" name="helper" class="items-tit-h2">Finding a Window</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="helper" name="helper">Finding a Window</h2>
+
<p>This example uses 2 helper functions for finding window structures. The first one, the <span style="font-family: Courier New,Courier,monospace">window_find_with_elm_window()</span> function, takes <span style="font-family: Courier New,Courier,monospace">elm_window</span> as an argument and returns a pointer to the <span style="font-family: Courier New,Courier,monospace">Browser_Window</span> object that the window is part of. The second one, the <span style="font-family: Courier New,Courier,monospace">window_find_with_ewk_view()</span> function, does the same for <span style="font-family: Courier New,Courier,monospace">ewk_view</span>. Both of them use the <span style="font-family: Courier New,Courier,monospace">EINA_LIST_FOREACH</span> macro to iterate over the windows list.</p>
<pre class="prettyprint">
return NULL;
}</pre>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="finalize" name="finalize" class="items-tit-h2">Finalizing the Application</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="finalize" name="finalize">Finalizing the Application</h2>
+
<p>To close the application correctly, use the <span style="font-family: Courier New,Courier,monospace">ewk_shutdown()</span> function. This function cleans up any resources your application has allocated.</p>
<pre class="prettyprint">
ops.create = br_app_create;
ops.terminate = br_app_terminate;
- return ui_app_main(&argc, &argv, &ops, &window);
+ return ui_app_main(argc, argv, &ops, &window);
}
</pre>
-
- </div>
- </li>
- </ul>
-</div>
-</div>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
}
$('#contents').scroll();
-
- var updateH = function(){
+ var checkBreadCrumbs = function() {
if (!isScrolledIntoView($('#contents .content h1')))
{
$('a.top.sms').show();
$('.help_breadcrumbs').show();
}
$('#contents').css('padding-top', $('.help_breadcrumbs').outerHeight()*(7/6));
+ }
+
+ var updateH = function(){
+ checkBreadCrumbs();
$('a.top').css('bottom', $('#footer').outerHeight());
-
- if($('#navigation').length) {
- $('a.top').css('left', $('#navigation').position()['left'] + (($('#navigation').outerWidth() - $('a.top').outerWidth())/2));
- } else {
- $('a.top').css('left', $('#toc-navigation').position()['left'] + (($('#toc-navigation').outerWidth() - $('a.top').outerWidth())/2));
- }
+ $('a.top').css('left', $('#toc-navigation').position()['left'] + (($('#toc-navigation').outerWidth() - $('a.top').outerWidth())/2));
$('#toc').css('top', $('#toc_border').position()['top'] + 7);
$('#container #contents').css('margin-bottom', $('#footer').outerHeight());
//$('#toc').css('top', $('#toc_border').position()['top'] + 2);
$('#toc').css('top', $('#toc_border').position()['top'] + 7);
-
- if($('#navigation').length) {
- $('#contents').css('right', $(window).width() - $('#navigation').position()['left'] + 5);
+ $('#contents').css('right', $(window).width() - $('#toc-navigation').position()['left'] + 5);
//$('#toc').css('width', $('#toc_border').width() - 40);
- } else {
- $('#contents').css('right', $(window).width() - $('#toc-navigation').position()['left'] + 5);
- }
-
$('#toc').css('width', $('#toc_border').width() - 49);
};
var updateH_no_toc = function() {
+ checkBreadCrumbs();
if (!isScrolledIntoView($('#contents .content h1')))
{
$('a.top.sms').show();
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Alarm: Scheduling an Application to Be Launched at a Specific Time</h1>
- <div class="cont"><div class="static-cont">
<p>This tutorial demonstrates how you can manage alarms in the device to automatically launch applications when an alarm is triggered.</p>
<h2>Warm-up</h2>
<p>Become familiar with the Alarm API basics by learning about:</p>
<ul>
- <li><a href="#manage"
class="opensection">Managing Alarms</a> <p>Create an absolute and relative alarm, retrieve a list of alarms and delete an alarm.</p></li>
- <li><a href="#launch"
class="opensection">Launching Applications with Alarms</a> <p>Launch an application or application service when an alarm is triggered.</p></li>
- <li><a href="#check"
class="opensection">Checking for Alarm Events</a> <p>Check when the next absolute or relative alarm is going to be triggered.</p></li>
+ <li><a href="#manage">Managing Alarms</a> <p>Create an absolute and relative alarm, retrieve a list of alarms and delete an alarm.</p></li>
+ <li><a href="#launch">Launching Applications with Alarms</a> <p>Launch an application or application service when an alarm is triggered.</p></li>
+ <li><a href="#check">Checking for Alarm Events</a> <p>Check when the next absolute or relative alarm is going to be triggered.</p></li>
</ul>
- <!-- Show / Hide all links -->
- <div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
- <!-- Folds -->
- <ul class="devicespecifications">
-
- <li>
- <div class="devicespec-tit">
- <h2 id="manage" name="manage" class="items-tit-h2">Managing Alarms</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="manage" name="manage">Managing Alarms</h2>
<p>Learning how to create and delete alarms is a basic alarm management skill:</p>
<ol>
tizen.alarm.remove(alarm1.id);
</pre> <p>To delete all alarms at once, use the <span style="font-family: Courier New,Courier,monospace">removeAll()</span> method.</p></li>
</ol>
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="launch" name="launch" class="items-tit-h2">Launching Applications with Alarms</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="launch" name="launch">Launching Applications with Alarms</h2>
<p>Learning how to launch application with alarms is a basic alarm management skill:</p>
<ol>
tizen.alarm.add(alarm, "org.tizen.browser", appControl);
</pre> </li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="check" name="check" class="items-tit-h2">Checking for Alarm Events</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="check" name="check">Checking for Alarm Events</h2>
<p>Learning how to check for the next alarm to be triggered is a basic alarm management skill:</p>
<ol>
console.log("The alarm triggers " + alarm.getRemainingSeconds() + " seconds later");
</pre></li>
</ol>
- </div>
- </li>
-
- </ul>
-</div>
-</div>
-
+
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/>
<img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
<div id="container"><div id="contents"><div class="content">
<h1>Application: Providing Information about Applications and Controlling Applications</h1>
- <div class="cont"><div class="static-cont">
<p>This tutorial demonstrates how you can manage and launch applications.</p>
<h2 id="warmup" name="warmup">Warm-up</h2>
<p>Become familiar with the Application API basics by learning about:</p>
<ul>
- <li><a
class="opensection" href="#retrieve">Retrieving Application Information</a> <p>Display a list of applications that are currently installed or running on the device, and retrieve application information, such as application name, application ID, and context ID.</p></li>
- <li><a
class="opensection" href="#manage">Managing Applications</a> <p>Launch, stop, hide, or exit applications.</p></li>
- <li><a
class="opensection" href="#receive">Receiving Notifications on Application List Changes</a> <p>Receive notifications when applications are installed, updated, or uninstalled.</p></li>
- <li><a
class="opensection" href="#launch">Launching Applications with the Application Control</a> <p>Launch applications by a request based on their functionality.</p></li>
- <li><a
class="opensection" href="#handle">Handling Application Control Requests</a> <p>Handle requests from other applications and reply with a result.</p></li>
+ <li><a href="#retrieve">Retrieving Application Information</a> <p>Display a list of applications that are currently installed or running on the device, and retrieve application information, such as application name, application ID, and context ID.</p></li>
+ <li><a href="#manage">Managing Applications</a> <p>Launch, stop, hide, or exit applications.</p></li>
+ <li><a href="#receive">Receiving Notifications on Application List Changes</a> <p>Receive notifications when applications are installed, updated, or uninstalled.</p></li>
+ <li><a href="#launch">Launching Applications with the Application Control</a> <p>Launch applications by a request based on their functionality.</p></li>
+ <li><a href="#handle">Handling Application Control Requests</a> <p>Handle requests from other applications and reply with a result.</p></li>
</ul>
-
- <div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
-
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="retrieve" name="retrieve" class="items-tit-h2">Retrieving Application Information</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+
+ <h2 id="retrieve" name="retrieve">Retrieving Application Information</h2>
<p>Learning how to retrieve information about installed and running applications allows you to manage all the device applications from your application: </p>
<ol>
<li><p>To retrieve application context information, use the <span style="font-family: Courier New,Courier,monospace">getAppContext()</span> method of the <span style="font-family: Courier New,Courier,monospace">ApplicationManager</span> interface.</p> <p>Provide the context ID of the application whose context information you want as a parameter for the method. If no context ID is set, the method retrieves the information about the application calling the method.</p> <pre class="prettyprint">var appContext = tizen.application.getAppContext();
console.log("Application context retrieved for app " + appContext.id);</pre> </li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="manage" name="manage" class="items-tit-h2">Managing Applications</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="manage" name="manage">Managing Applications</h2>
<p>Learning how to launch and stop other applications, and hide or exit applications running on the device, allows you to manage all the device applications from your application:</p>
<ol>
currApp.exit();
</pre> </li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="receive" name="receive" class="items-tit-h2">Receiving Notifications on Application List Changes</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="receive" name="receive">Receiving Notifications on Application List Changes</h2>
<p>Learning to receive notifications when the list of installed applications changes allows you to manage all the device applications from your application:</p>
<ol>
<li> <p>To stop receiving the notifications, use the <span style="font-family: Courier New,Courier,monospace">removeAppInfoEventListener()</span> method of the <span style="font-family: Courier New,Courier,monospace">ApplicationManager</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationManager">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#ApplicationManager">wearable</a> applications):</p> <pre class="prettyprint">
tizen.application.removeAppInfoEventListener(listenerID);</pre> </li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="launch" name="launch" class="items-tit-h2">Launching Applications with the Application Control</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="launch" name="launch">Launching Applications with the Application Control</h2>
<p>Learning to use the application controls to launch applications allows you to take advantage of all the device applications from your application:</p>
function(e){/* Error handling */},
appControlReplyCB);</pre> </li>
</ol>
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="handle" name="handle" class="items-tit-h2">Handling Application Control Requests</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="handle" name="handle">Handling Application Control Requests</h2>
<p>Learning how to handle requests from other applications allows you to create Web applications that can be called from other applications to perform specific actions.</p>
<p>Web applications can provide a service which is identified by the operation name. Other applications can request it and use the provided feature of the service application
<ol>
- <li><p>To enable the application to receive Application Control requests, open the <a href="../../../../../org.tizen.gettingstarted/html/process/setting_properties_w.htm#set_widget">widget configuration editor</a> and
+ <li><p>To enable the application to receive Application Control requests, open the <a href="../../../../../org.tizen.gettingstarted/html/web/process/setting_properties_w.htm#set_widget">Web application configuration editor</a> and
add an operation in the <span style="font-family: Courier New,Courier,monospace">app-control</span> section.</p>
<p>In this example, the name of the operation is <span style="font-family: Courier New,Courier,monospace">http://example.tizen.org/operation/get_time</span>.
The <span style="font-family: Courier New,Courier,monospace">config.xml</span> file contains a <a href="../../../../../org.tizen.devtools/html/web_tools/config_editor_w.htm#mw_appcontrol"><tizen:app-control></a> element:</p>
</ol>
<p>For more information on launching an application, see <a href="#launch">Launching Applications with the Application Control</a>.</p>
- </div>
- </li>
- </ul>
-</div>
-</div>
-
+
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Data Control: Providing Information about Packages and their Installation</h1>
- <div class="cont"><div class="static-cont">
<p>This tutorial demonstrates how you can share data between applications.</p>
<h2>Warm-up</h2>
<p>Become familiar with the Data Control API basics by learning about:</p>
<ul>
- <li><a
class="opensection" href="#map">Managing Data in Key-value Pairs</a><p>Get, add, update, and remove values assigned to a key.</p></li>
- <li><a
class="opensection" href="#sql">Managing SQL-type Data</a><p>Select, insert, update, and remove SQL-type data.</p></li>
+ <li><a href="#map">Managing Data in Key-value Pairs</a><p>Get, add, update, and remove values assigned to a key.</p></li>
+ <li><a href="#sql">Managing SQL-type Data</a><p>Select, insert, update, and remove SQL-type data.</p></li>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
-
-<ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="map" name="map" class="items-tit-h2">Managing Data in Key-value Pairs</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="map" name="map">Managing Data in Key-value Pairs</h2>
<p>Learning how to manage map-type data allows you to use key-value pairs exposed by a DataControl provider:</p>
<ol>
This object allows accessing the key-value data stored by the DataControl provider.</p>
<p>You need a running DataControl provider application, which uses the <span style="font-family: Courier New,Courier,monospace">"http://tizen.org/datacontrol/provider/DictionaryDataControlProvider"</span> provider ID.</p>
<pre class="prettyprint">
-// Get the map-type DataControlConsumerObject
+/* Get the map-type DataControlConsumerObject */
try
{
var globalMappedConsumer = tizen.datacontrol.getDataControlConsumer("http://tizen.org/datacontrol/provider/DictionaryDataControlProvider", "Dictionary", "MAP");
}
</pre></li>
<li>To manage key-value pairs:
-<ul class="ul">
+<ul>
<li><p>To add a key-value pair, use the <span style="font-family: Courier New,Courier,monospace">addValue()</span> method of the <span style="font-family: Courier New,Courier,monospace">MappedDataControlConsumer</span>:</p>
<pre class="prettyprint">
try
{
- // Increase globalReqId for uniqueness
+ /* Increase globalReqId for uniqueness */
globalReqId++;
globalMappedConsumer.addValue(globalReqId, "tizen", "Foo", onRequestSuccess, onRequestError);
}
}
</pre></li></ul></li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="sql" name="sql" class="items-tit-h2">Managing SQL-type Data</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="sql" name="sql">Managing SQL-type Data</h2>
<p>Learning how to manage SQL-type data allows you to use databases exposed by a DataControl provider:</p>
<ol>
This object allows accessing the data stored by the DataControl provider.</p>
<p>You need a running DataControl provider application, which uses the <span style="font-family: Courier New,Courier,monospace">"http://tizen.org/datacontrol/provider/DictionaryDataControlProvider"</span> provider ID.</p>
<pre class="prettyprint">
-// Get SQL type DataControlConsumerObject
+/* Get SQL type DataControlConsumerObject */
try
{
var globalSQLConsumer = tizen.datacontrol.getDataControlConsumer("http://tizen.org/datacontrol/provider/DictionaryDataControlProvider", "Dictionary", "SQL");
</pre> </li>
<li>To manage the data:
-<ul class="ul">
+<ul>
<li><p>To insert data, use the <span style="font-family: Courier New,Courier,monospace">insert()</span> method of the <span style="font-family: Courier New,Courier,monospace">SQLDataControlConsumer</span> interface:</p>
<pre class="prettyprint">
function onInsertSuccess(reqId, rowId)
columns: ["WORD", "WORD_DESC"] ,
values: ["'tizen1'", "'tizen2'"]
};
- // Increases globalReqId for uniqueness
+ /* Increases globalReqId for uniqueness */
globalReqId++;
globalSQLConsumer.insert(globalReqId, rowData, onInsertSuccess, onRequestError);
}
}
</pre> </li></ul></li>
</ol>
- </div>
- </li>
- </ul>
-
-</div>
-</div>
+
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/>
<img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
<div id="container"><div id="contents"><div class="content">
<h1>Package: Providing Information about Package Installation and Installed Packages</h1>
-<div class="cont"><div class="static-cont">
<p>This tutorial demonstrates how you can manage packages and retrieve information about them.</p>
<h2 id="warmup" name="warmup">Warm-up</h2>
<p>Become familiar with the Package API basics by learning about:</p>
<ul>
- <li><a
class="opensection" href="#retrieve">Retrieving Package Information</a> <p>Display a list of installed packages on the device, and retrieve package information, such as name, ID, icon path, and version.</p></li>
- <li><a
class="opensection" href="#manage">Managing Packages</a> <p>Install or uninstall packages.</p></li>
- <li><a
class="opensection" href="#receive">Receiving Package Change Notifications</a> <p>Receive notifications if packages are installed, updated, or uninstalled.</p></li>
+ <li><a href="#retrieve">Retrieving Package Information</a> <p>Display a list of installed packages on the device, and retrieve package information, such as name, ID, icon path, and version.</p></li>
+ <li><a href="#manage">Managing Packages</a> <p>Install or uninstall packages.</p></li>
+ <li><a href="#receive">Receiving Package Change Notifications</a> <p>Receive notifications if packages are installed, updated, or uninstalled.</p></li>
</ul>
- <div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
-
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="retrieve" name="retrieve" class="items-tit-h2">Retrieving Package Information</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="retrieve" name="retrieve">Retrieving Package Information</h2>
<p>Learning how to retrieve information about installed packages allows you to manage device packages from your application:</p>
<ol>
tizen.package.getPackagesInfo(onListInstalledPackages);</pre> <p>The list of installed packages is returned to the <span style="font-family: Courier New,Courier,monospace">PackageInformationArraySuccessCallback()</span> methods as an array of <span style="font-family: Courier New,Courier,monospace">PackageInformation</span> objects (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/package.html#PackageInformation">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/package.html#PackageInformation">wearable</a> applications).</p></li>
<li><p>To retrieve basic package information, use the <span style="font-family: Courier New,Courier,monospace">getPackageInfo()</span> method of the <span style="font-family: Courier New,Courier,monospace">PackageManager</span> interface, specifying the package ID. If no package ID is set, the method retrieves information of the application package calling the method.</p> <pre class="prettyprint lang-js">var packageInfo = tizen.package.getPackageInfo("org.tizen.calculator");</pre></li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="manage" name="manage" class="items-tit-h2">Managing Packages</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="manage" name="manage">Managing Packages</h2>
<p>Learning how to install and uninstall packages is a basic package management skill:</p>
<ol>
tizen.package.uninstall("TEST_APP_ID", onUninstallation);</pre></li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="receive" name="receive" class="items-tit-h2">Receiving Package Change Notifications</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="receive" name="receive">Receiving Package Change Notifications</h2>
<p>Learning to receive notifications when the list of installed packages changes allows you to manage device packages from your application:</p>
<ol>
<li><p>Register the listener to use the defined event handlers with the <span style="font-family: Courier New,Courier,monospace">setPackageInfoEventListener()</span> method of the <span style="font-family: Courier New,Courier,monospace">PackageManager</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/package.html#PackageManager">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/package.html#PackageManager">wearable</a> applications):</p> <pre class="prettyprint lang-js">tizen.package.setPackageInfoEventListener(packageEventCallback);</pre></li>
<li><p>To stop receiving notifications, use the <span style="font-family: Courier New,Courier,monospace">unsetPackageInfoEventListener()</span> method of the <span style="font-family: Courier New,Courier,monospace">PackageManager</span> interface:</p> <pre class="prettyprint lang-js">tizen.package.unsetPackageInfoEventListener();</pre></li>
</ol>
- </div>
- </li>
- </ul>
-
-</div>
-</div>
+
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/> <img alt="Wearable Web" src="../../../images/ww_icon_optional.png"/></p>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Bluetooth: Managing a Bluetooth Device and Supporting RFCOMM and HDP</h1>
-<div class="cont"><div class="static-cont">
<p>This tutorial demonstrates how you can manage Bluetooth and exchange data with a peer device.</p>
</tr>
<tr>
<td class="note">The Bluetooth API is optional for both Tizen mobile and wearable profiles, which means that it may not be supported in all mobile and wearable devices.
- <p>The Bluetooth API is not supported on any Tizen Emulators.</p></td>
+ <p>The Bluetooth API is not supported on any Tizen Emulators.</p>
+</td>
</tr>
</tbody>
</table>
</ul>
<h2 id="task" name="task">Task</h2>
<p>In the <a href="task_bluetoothchat_w.htm">Bluetooth Chat</a> task, we will walk through how to use the device as a Bluetooth server or client in a chat application.</p>
-
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
-
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="Managing_BT_Adapter" name="Managing_BT_Adapter" class="items-tit-h2">Managing the Local Bluetooth Adapter</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="Managing_BT_Adapter" name="Managing_BT_Adapter">Managing the Local Bluetooth Adapter</h2>
<p>Learning how to enable or disable the local Bluetooth adapter, and set the device name is a basic Bluetooth management skill:</p>
<p>The Bluetooth API does not provide a method to enable or disable the Bluetooth adapter of the device directly. Whenever Bluetooth is required, request a built-in Settings application to present the relevant switch to the user so that they can enable or disable the Bluetooth.</p>
- <p class="figure"><img src="../../../images/bluetooth_onoff.png" alt="Bluetooth Setting Screen"/></p>
+ <p class="figure">Figure: Bluetooth setting screen</p>
+ <p align="center"><img src="../../../images/bluetooth_onoff.png" alt="Bluetooth setting screen"/></p>
<ol>
<li>Retrieve a <span style="font-family: Courier New,Courier,monospace">BluetoothAdapter</span> object (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothAdapter">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothAdapter">wearable</a> applications) with the <span style="font-family: Courier New,Courier,monospace">getDefaultAdapter()</span> method and prepare the <span style="font-family: Courier New,Courier,monospace">ApplicationControl</span> object (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationControl">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#ApplicationControl">wearable</a> applications) to request the Bluetooth switching operation:
<pre class="prettyprint">var bluetoothSwitchAppControl = new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/edit", null, "application/x-bluetooth-on-off");
<li><p>Set a friendly name for the device using the <span style="font-family: Courier New,Courier,monospace">setName()</span> method.</p> <p>The name helps to recognize the device in a list of <a href="#Discovering_BT_Devices">retrieved devices</a>.</p> <pre class="prettyprint">adapter.setName(chatServerName);</pre></li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="Discovering_BT_Devices" name="Discovering_BT_Devices" class="items-tit-h2">Discovering Bluetooth Devices</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="Discovering_BT_Devices" name="Discovering_BT_Devices">Discovering Bluetooth Devices</h2>
<p>Learning how to search for remote devices and get the known devices is a basic Bluetooth management skill:</p>
<ol>
- <li>Retrieve a <span style="font-family: Courier New,Courier,monospace">BluetoothAdapter</span> object (in <a href="../../../../../org.tizen.web.apiref
erence/html/device_api/mobile/tizen/bluetooth.html#BluetoothAdapter">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/we arable/tizen/bluetooth.html#BluetoothAdapter">wearable</a> applications) with the <span style="font-family: Courier New,Courier,monospace">getDefaultAdapter()</span> method:<p></p> <pre class="prettyprint">var adapter = tizen.bluetooth.getDefaultAdapter();
+ <li>Retrieve a <span style="font-family: Courier New,Courier,monospace">BluetoothAdapter</span> object (in <a href="../../../../../org.tizen.web.apiref
erence/html/device_api/mobile/tizen/bluetooth.html#BluetoothAdapter">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothAdapter">wearable</a> applications) with the <span style="font-family: Courier New,Courier,monospace">getDefaultAdapter()</span> method:<p></p> <pre class="prettyprint">var adapter = tizen.bluetooth.getDefaultAdapter();
</pre></li>
- <li><p>To search for remote devices, use the <span style="font-family: Courier New,Courier,monospace">discoverDevices()</span> method.</p> <p>The results of the search are returned in the <span style="font-family: Courier New,Courier,monospace">BluetoothDiscoverDevicesSuccessCallback</span> (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothDiscoverDevicesSuccessCallback">mobile</a> and
<a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/Bluetooth.html#BluetoothDiscoverDevicesSuccessCallback">wearable</a> applications).</p> <pre class="prettyprint">
+ <li><p>To search for remote devices, use the <span style="font-family: Courier New,Courier,monospace">discoverDevices()</span> method.</p> <p>The results of the search are returned in the <span style="font-family: Courier New,Courier,monospace">BluetoothDiscoverDevicesSuccessCallback</span> (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothDiscoverDevicesSuccessCallback">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/Bluetooth.html#BluetoothDiscoverDevicesSuccessCallback">wearable</a> applications).</p> <pre class="prettyprint">
var discoverDevicesSuccessCallback =
{
/* When a device is found */
</tr>
</tbody>
</table> </li>
- <li><p>To retrieve known devices (which have been previously paired or searched for), use the <span style="font-family: Courier New,Courier,monospace">getKnownDevices()</span> method.</p> <p>The results of the search are returned in the <span style="font-family: Courier New,Courier,monospace">BluetoothDeviceArraySuccessCallback</span> (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothDeviceArraySuccessCallback">mobile</a> and
<a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothDeviceArraySuccessCallback">wearable</a> applications).</p> <pre class="prettyprint">
+ <li><p>To retrieve known devices (which have been previously paired or searched for), use the <span style="font-family: Courier New,Courier,monospace">getKnownDevices()</span> method.</p> <p>The results of the search are returned in the <span style="font-family: Courier New,Courier,monospace">BluetoothDeviceArraySuccessCallback</span> (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothDeviceArraySuccessCallback">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothDeviceArraySuccessCallback">wearable</a> applications).</p> <pre class="prettyprint">
/* When a known device is found */
function onGotDevices(devices)
{
</pre></li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="Creating_Bond" name="Creating_Bond" class="items-tit-h2">Creating a Bonding with a Bluetooth Device</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="Creating_Bond" name="Creating_Bond">Creating a Bonding with a Bluetooth Device</h2>
<p>Learning how to create a bonding with other devices is a basic Bluetooth management skill:</p>
<ol>
- <li>Retrieve a <span style="font-family: Courier New,Courier,monospace">BluetoothAdapter</span> object (in <a href="../../../../../org.tizen.web.apiref
erence/html/device_api/mobile/tizen/bluetooth.html#BluetoothAdapter">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothAdapter">wearable</a> applications) with the <span style="font-family: Courier New,Courier,monospace">getDefaultAdapter()</span> method:<p></p> <pre class="prettyprint">var adapter = tizen.bluetooth.getDefaultAdapter();
+ <li>Retrieve a <span style="font-family: Courier New,Courier,monospace">BluetoothAdapter</span> object (in <a href="../../../../../org.tizen.web.apiref
erence/html/device_api/mobile/tizen/bluetooth.html#BluetoothAdapter">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothAdapter">wearable</a> applications) with the <span style="font-family: Courier New,Courier,monospace">getDefaultAdapter()</span> method:<p></p> <pre class="prettyprint">var adapter = tizen.bluetooth.getDefaultAdapter();
</pre></li>
<li><p>To create a bonding with another device, use the <span style="font-family: Courier New,Courier,monospace">createBonding()</span> method:</p> <pre class="prettyprint">
function onBondingSuccessCallback(device)
<th class="note">Note</th>
</tr>
<tr>
- <td class="note">The MAC address of the Bluetooth device is a <span style="font-family: Courier New,Courier,monospace">BluetoothAddress</span> object (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothAddress">mobile</a> and
<a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothAddress">wearable</a> applications). You can get the MAC address of the peer device from the <span style="font-family: Courier New,Courier,monospace">BluetoothDevice</span> object (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothDevice">mobile</a> and <a href="../../../. ./../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothDevice">wearable</a> applications), which is returned in the success callback of the <span style="font-family: Courier New,Courier,monospace">BluetoothAdapter</span>'s <span style="font-family: Courier New,Courier,monospace">getKnownDevices()</span> and <span style="font-family: Courier New,Courier,monospace">discoverDevices()</span> methods.</td>
+ <td class="note">The MAC address of the Bluetooth device is a <span style="font-family: Courier New,Courier,monospace">BluetoothAddress</span> object (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothAddress">mobile</a> and
<a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothAddress">wearable</a> applications). You can get the MAC address of the peer device from the <span style="font-family: Courier New,Courier,monospace">BluetoothDevice</span> object (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothDevice">mobile</a> and <a href="../../../. ./../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothDevice">wearable</a> applications), which is returned in the success callback of the <span style="font-family: Courier New,Courier,monospace">BluetoothAdapter</span>'s <span style="font-family: Courier New,Courier,monospace">getKnownDevices()</span> and <span style="font-family: Courier New,Courier,monospace">discoverDevices()</span> methods.</td>
</tr>
</tbody>
</table></li>
<li><p>To end the bonding with a remote device, use the <span style="font-family: Courier New,Courier,monospace">destroyBonding()</span> method:</p> <pre class="prettyprint">adapter.destroyBonding("35:F4:59:D1:7A:03");</pre></li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="Connecting_BT_device" name="Connecting_BT_device" class="items-tit-h2">Connecting to and Exchanging Data with a Bluetooth Device</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="Connecting_BT_device" name="Connecting_BT_device">Connecting to and Exchanging Data with a Bluetooth Device</h2>
<p>The Radio Frequency Communication (RFCOMM) is a set of transport protocols which allows multiple simultaneous connections to a device. The device that provides a service is called a server device, and devices that request the service are called client devices. </p>
<p>Learning how to connect to services provided by a server device to the client devices is a basic Bluetooth management skill:</p>
<ol>
- <li>Retrieve a <span style="font-family: Courier New,Courier,monospace">BluetoothAdapter</span> object (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothAdapter">mobile</a> and
<a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothAdapter">wearable</a> applications) with the <span style="font-family: Courier New,Courier,monospace">getDefaultAdapter()</span> method:<p></p> <pre class="prettyprint">var adapter = tizen.bluetooth.getDefaultAdapter();
+ <li>Retrieve a <span style="font-family: Courier New,Courier,monospace">BluetoothAdapter</span> object (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothAdapter">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothAdapter">wearable</a> applications) with the <span style="font-family: Courier New,Courier,monospace">getDefaultAdapter()</span> method:<p></p> <pre class="prettyprint">var adapter = tizen.bluetooth.getDefaultAdapter();
</pre></li>
<li><p>To register a service and allow client devices to connect to it, use the <span style="font-family: Courier New,Courier,monospace">registerRFCOMMServiceByUUID()</span> method on the server device:</p> <pre class="prettyprint">adapter.registerRFCOMMServiceByUUID(serviceUUID, "My service");</pre>
<table class="note">
<th class="note">Note</th>
</tr>
<tr>
- <td class="note">For P2P communication between 2 instances of the same application, the UUID can be hard-coded in your application. To retrieve the UUID of a Bluetooth device, use the <span style="font-family: Courier New,Courier,monospace">BluetoothDevice</span> object (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothDevice">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothDevice">wearable</a> applications). The object has an array of UUIDs available for the device.</td>
+ <td class="note">For P2P communication between 2 instances of the same application, the UUID can be hard-coded in your application. To retrieve the UUID of a Bluetooth device, use the <span style="font-family: Courier New,Courier,monospace">BluetoothDevice</span> object (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothDevice">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothDevice">wearable</a> applications). The object has an array of UUIDs available for the device.</td>
</tr>
</tbody>
- </table> <p>When the service has been successfully registered, the <span style="font-family: Courier New,Courier,monospace">BluetoothServiceSuccessCallback</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothServiceSuccessCallback">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothServiceSuccessCallback">wearable</a> applications) is triggered.</p> </li>
+ </table> <p>When the service has been successfully registered, the <span style="font-family: Courier New,Courier,monospace">BluetoothServiceSuccessCallback</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothServiceSuccessCallback">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothServiceSuccessCallback">wearable</a> applications) is triggered.</p> </li>
<li>Before establishing a connection, your device must be bonded with a peer device. For more information, see <a href="#Creating_Bond">Creating a Bonding with a Bluetooth Device</a>.</li>
}
);</pre>
-<p>When a connection between 2 devices is established, the <span style="font-family: Courier New,Courier,monospace">BluetoothSocketSuccessCallback</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothSocketSuccessCallback">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothSocketSuccessCallback">wearable</a> applications) on the client device and the <span style="font-family: Courier New,Courier,monospace">onconnect</span> event handler in the <span style="font-family: Courier New,Courier,monospace">BluetoothServiceHandler</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothServiceHandler">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothServiceHandler">wearable</a> applications) on the server device are triggered.</p></li>
+<p>When a connection between 2 devices is established, the <span style="font-family: Courier New,Courier,monospace">BluetoothSocketSuccessCallback</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothSocketSuccessCallback">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothSocketSuccessCallback">wearable</a> applications) on the client device and the <span style="font-family: Courier New,Courier,monospace">onconnect</span> event handler in the <span style="font-family: Courier New,Courier,monospace">BluetoothServiceHandler</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothServiceHandler">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothServiceHandler">wearable</a> applications) on the server device are triggered.</p></li>
<li><p>To send data to the peer device, use the <span style="font-family: Courier New,Courier,monospace">writeData()</span> method:</p>
<pre class="prettyprint">
var somemsg = [3, 2, 1];
var length = socket.writeData(somemsg);
</pre>
-<p>To send data between the devices, use a socket mechanism with the <span style="font-family: Courier New,Courier,monospace">BluetoothSocket</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothSocket">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothSocket">wearable</a> applications). The proper socket is received when the devices are connected.</p></li>
+<p>To send data between the devices, use a socket mechanism with the <span style="font-family: Courier New,Courier,monospace">BluetoothSocket</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothSocket">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothSocket">wearable</a> applications). The proper socket is received when the devices are connected.</p></li>
<li><p>To read the data in the server device, use the <span style="font-family: Courier New,Courier,monospace">readData()</span> method:</p>
<p>When an incoming message is received from the peer device, the <span style="font-family: Courier New,Courier,monospace">onmessage</span> event handler in the <span style="font-family: Courier New,Courier,monospace">BluetoothSocket</span> interface is triggered. </p></li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="Communicating_Health" name="Communicating_Health" class="items-tit-h2">Communicating with a Health Source Device</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="Communicating_Health" name="Communicating_Health">Communicating with a Health Source Device</h2>
<p>To increase the communication capabilities of your application, you must learn to communicate with a health source device:</p>
<ol>
- <li>Retrieve a <span style="font-family: Courier New,Courier,monospace">BluetoothHealthProfileHandler</span> object (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothHealthProfileHandler">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothHealthProfileHandler">wearable</a> applications):<p></p> <pre class="prettyprint">var adapter = tizen.bluetooth.getDefaultAdapter();
+ <li>Retrieve a <span style="font-family: Courier New,Courier,monospace">BluetoothHealthProfileHandler</span> object (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothHealthProfileHandler">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothHealthProfileHandler">wearable</a> applications):
+ <pre class="prettyprint">var adapter = tizen.bluetooth.getDefaultAdapter();
var healthProfileHandler = adapter.getBluetoothProfileHandler("HEALTH");
var healthApplication = null, healthChannel = null;
</pre></li>
healthProfileHandler.registerSinkApplication(4100, "testSinkApp", onSinkApp);
</pre>
-<p>When the sink application is registered successfully, the <span style="font-family: Courier New,Courier,monospace">BluetoothHealthApplicationSuccessCallback</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothHealthApplicationSuccessCallback">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothHealthApplicationSuccessCallback">wearable</a> applications) is invoked and you can get the registered sink application object.</p></li>
+<p>When the sink application is registered successfully, the <span style="font-family: Courier New,Courier,monospace">BluetoothHealthApplicationSuccessCallback</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothHealthApplicationSuccessCallback">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothHealthApplicationSuccessCallback">wearable</a> applications) is invoked and you can get the registered sink application object.</p></li>
<li>Before establishing a connection, your device must be bonded with a health source device. For more information, see <a href="#Creating_Bond">Creating a Bonding with a Bluetooth Device</a>.</li>
-<li><p>To connect to the health source device, use the <span style="font-family: Courier New,Courier,monospace">connectToSource()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothHealthProfileHandler</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothHealthProfileHandler">mobile</a> and
<a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothHealthProfileHandler">wearable</a> applications):</p>
+<li><p>To connect to the health source device, use the <span style="font-family: Courier New,Courier,monospace">connectToSource()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothHealthProfileHandler</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothHealthProfileHandler">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothHealthProfileHandler">wearable</a> applications):</p>
<pre class="prettyprint">
function onConnect(channel)
{
healthProfileHandler.connectToSource(device, healthApplication, onConnect);
});
</pre>
-<p>When a connection between 2 devices is established, the success callback of the <span style="font-family: Courier New,Courier,monospace">connectToSource()</span> method is called. In addition, the <span style="font-family: Courier New,Courier,monospace">onconnect</span> event handler of the <span style="font-family: Courier New,Courier,monospace">BluetoothHealthApplication</span> instance (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothHealthApplication">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothHealthApplication">wearable</a> applications) is called, if the success callback attribute is set. You can get the connected <span style="font-family: Courier New,Courier,monospace">BluetoothHealthChannel</span> object (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothHealthChannel">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothHealthChannel">wearable</a> applications) from the callbacks.</p></li>
+<p>When a connection between 2 devices is established, the success callback of the <span style="font-family: Courier New,Courier,monospace">connectToSource()</span> method is called. In addition, the <span style="font-family: Courier New,Courier,monospace">onconnect</span> event handler of the <span style="font-family: Courier New,Courier,monospace">BluetoothHealthApplication</span> instance (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothHealthApplication">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothHealthApplication">wearable</a> applications) is called, if the success callback attribute is set. You can get the connected <span style="font-family: Courier New,Courier,monospace">BluetoothHealthChannel</span> object (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothHealthChannel">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothHealthChannel">wearable</a> applications) from the callbacks.</p></li>
<li><p>To send data to the source device, use the <span style="font-family: Courier New,Courier,monospace">sendData()</span> method:</p>
<pre class="prettyprint">
var dataToSend = [0, 0, 0];
var length = healthChannel.sendData(dataToSend);</pre>
-<p>The <span style="font-family: Courier New,Courier,monospace">onmessage</span> event handler in the <span style="font-family: Courier New,Courier,monospace">BluetoothHealthChannelChangeCallback</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothHealthChannelChangeCallback">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothHealthChannelChangeCallback">wearable</a> applications) is called when the data is received, if you set a listener on the connected channel by using the <span style="font-family: Courier New,Courier,monospace">setListener()</span> method.</p></li>
+<p>The <span style="font-family: Courier New,Courier,monospace">onmessage</span> event handler in the <span style="font-family: Courier New,Courier,monospace">BluetoothHealthChannelChangeCallback</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothHealthChannelChangeCallback">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothHealthChannelChangeCallback">wearable</a> applications) is called when the data is received, if you set a listener on the connected channel by using the <span style="font-family: Courier New,Courier,monospace">setListener()</span> method.</p></li>
<li><p>Disconnect from the health source device:</p> <pre class="prettyprint">
healthChannel.close();
</pre>
<p>When the channel is disconnected, the <span style="font-family: Courier New,Courier,monospace">onclose</span> event handler in the <span style="font-family: Courier New,Courier,monospace">BluetoothHealthChannelChangeCallback</span> interface is called.</p></li>
</ol>
- </div>
- </li>
- </ul>
-</div>
-</div>
+
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
</script>
</body>
-</html>
+</html>
\ No newline at end of file
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/></p>
+ <p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/> <img alt="Wearable Web" src="../../../images/ww_icon_optional.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../../org.tizen.guides/html/web/tizen/communication/comm_guide_w.htm">Communication Guides</a></li>
<li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/index.html#Communication">Communication API for Mobile Web</a></li>
+ <li><a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/index.html#Communication">Communication API for Wearable Web</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Communication: Connecting to the Network and Communicating with Messages</h1>
- <table class="note">
-<tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">The Communication API domain is supported in mobile applications only.</td>
- </tr>
- </tbody>
- </table>
<p>The communication tutorials demonstrate how to use the following features in creating Tizen Web applications:</p>
<ul>
<li><a href="bluetooth_tutorial_w.htm">Bluetooth: Managing a Bluetooth Device and Supporting RFCOMM and HDP</a> <p>Demonstrates how you can manage Bluetooth and exchange data with a peer device.</p></li>
- <li><a href="messaging_tutorial_w.htm">Messaging: Managing and Receiving SMS, MMS, and Email Messages</a> <p>Demonstrates how you can create, send, and read messages as well as manage messages in the message storage.</p></li>
<li><a href="nfc_tutorial_w.htm">NFC: Managing an NFC Device and Detecting NFC Tags and Peers</a> <p>Demonstrates how you can use NFC connectivity to exchange data with NFC tags and NFC-enabled devices.</p></li>
<li><a href="push_tutorial_w.htm">Push: Receiving Push Notifications from a Push Server</a> <p>Demonstrates how you can register your application, connect to the push service, and start receiving push notifications.</p></li>
<li><a href="secure_element_tutorial_w.htm">Secure Element: Accessing Secure Elements</a> <p>Demonstrates how you can access and manage secure elements in a device.</p></li>
</ul>
+ <p>The following tutorials apply in <span style="color: red">mobile applications only</span>:</p>
+<ul>
+ <li><a href="messaging_tutorial_w.htm">Messaging: Managing and Receiving SMS, MMS, and Email Messages</a> <p>Demonstrates how you can create, send, and read messages as well as manage messages in the message storage.</p></li>
+</ul>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/></p>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Messaging: Managing and Receiving SMS, MMS, and Email Messages</h1>
- <div class="cont"><div class="static-cont">
<p>This tutorial demonstrates how you can create, send, and read messages as well as manage messages in the message storage.</p>
</ul>
<h2 id="task" name="task">Task</h2>
<p>In the <a href="task_chatter_w.htm">Chatter</a> task, we will walk through how to send, receive, and manage messages in your application.</p>
-
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
-
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="Sending_Messages" name="Sending_Messages" class="items-tit-h2">Creating and Sending Messages</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="Sending_Messages" name="Sending_Messages">Creating and Sending Messages</h2>
<p>To create engaging applications with various messaging features, you must learn to create and send messages:</p>
<ol>
}
</pre> <p>Defining a sending error callback allows you to handle all possible errors and exceptions that can occur causing the message delivery to fail.</p> </li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="Selecting_the_SIM_Card" name="Selecting_the_SIM_Card" class="items-tit-h2">Selecting the SIM Card for Sending Messages</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="Selecting_the_SIM_Card" name="Selecting_the_SIM_Card">Selecting the SIM Card for Sending Messages</h2>
<p>To add the dual SIM feature to your messaging application, you must learn to retrieve information on available SIM cards and select the SIM card to send SMS and MMS messages:</p>
<ol>
to: ["0001"],
plainBody: "Surprise!"
});
- // SIM is selected (first SIM - 1, second SIM - 2):
+ /* SIM is selected (first SIM - 1, second SIM - 2): */
messageService.sendMessage(message, sendSuccess, null, 2);
}
</pre>
</li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="Managing_Messages" name="Managing_Messages" class="items-tit-h2">Managing Messages</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="Managing_Messages" name="Managing_Messages">Managing Messages</h2>
<p>To create engaging applications with various messaging features, you must learn to work with messages in the message store:</p>
<ol>
emailService.messagingStorage.removeMessages(messages, successCallback);
}</pre> </li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="Find_Folders" name="Find_Folders" class="items-tit-h2">Finding Folders</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="Find_Folders" name="Find_Folders">Finding Folders</h2>
<p>To create engaging applications with various messaging features, you must learn how to find message folders:</p>
<ol>
</pre> </li>
<li><p>To get all message folders, use the <span style="font-family: Courier New,Courier,monospace">findFolders()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html#MessageStorage">MessageStorage</a> interface:</p> <pre class="prettyprint">service.messageStorage.findFolders(filter, onFindFolders, onFindFoldersFail);</pre> </li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="Synchronizing_with_the_Server" name="Synchronizing_with_the_Server" class="items-tit-h2">Synchronizing with the Server</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="Synchronizing_with_the_Server" name="Synchronizing_with_the_Server">Synchronizing with the Server</h2>
<p>To create engaging applications with various messaging features, you must learn to load email messages and attachments and synchronize email:</p>
<ol>
}
}</pre> </li>
<li><p>To synchronize email with an external server:</p>
- <ol>
+ <ol type="a">
<li><p>To synchronize all account folders, use the <span style="font-family: Courier New,Courier,monospace">sync()</span> method:</p> <pre class="prettyprint">
/* Synchronize the folders in the success event handler */
function servicesListSuccessCB(services)
emailService.messageStorage.findFolders(filter, folderQueryCallback)); </pre> </li>
</ol> </li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="Receiving_Notifications" name="Receiving_Notifications" class="items-tit-h2">Receiving Notifications on Message Storage Changes</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="Receiving_Notifications" name="Receiving_Notifications">Receiving Notifications on Message Storage Changes</h2>
<p>To create engaging applications with various messaging features, you must learn to receive notifications when messages and message folders are added, updated, or removed:</p>
<ol>
</tr>
</tbody>
</table>
- </div>
- </li>
- </ul>
-</div>
-</div>
+
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/></p>
+ <p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/> <img alt="Wearable Web" src="../../../images/ww_icon_optional.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<li><a href="#Exchanging_NDEF_Tags">Exchanging NDEF Data with Tags</a></li>
</ul></li>
<li><a href="#Using_NFC_Card_Emulation">Using NFC Card Emulation</a></li>
+ <li><a href="#Using_NFC_Host_Based_Card_Emulation">Using NFC Host-based Card Emulation</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../../org.tizen.guides/html/web/tizen/communication/nfc_w.htm">NFC Guide</a></li>
<li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html">NFC API for Mobile Web</a></li>
+ <li><a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/nfc.html">NFC API for Wearable Web</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>NFC: Managing an NFC Device and Detecting NFC Tags and Peers</h1>
-<div class="cont"><div class="static-cont">
- <p>This tutorial demonstrates how you can use NFC connectivity to exchange data with NFC tags and NFC-enabled devices.</p>
+ <p>This tutorial demonstrates how you can use NFC connectivity to detect NFC tags and exchange data with NFC-enabled devices.</p>
<table class="note">
<tbody>
<th class="note">Note</th>
</tr>
<tr>
- <td class="note">This feature is supported in mobile applications only.</td>
+ <td class="note">The NFC API is optional for both Tizen mobile and wearable profiles, which means that it may not be supported in all mobile and wearable devices.
+ <p>The NFC API is supported on all Tizen Emulators.</p></td>
</tr>
</tbody>
</table>
<li><a href="#Exchanging_NDEF_Tags">Exchanging NDEF Data with Tags</a> <p>Read NDEF messages and exchange them with tags.</p></li>
</ul></li>
<li><a href="#Using_NFC_Card_Emulation">Using NFC Card Emulation</a> <p>Enable NFC card emulation and monitor the transaction taking place.</p></li>
+ <li><a href="#Using_NFC_Host_Based_Card_Emulation">Using NFC Host-based Card Emulation</a> <p>Handle NFC host-based card emulation events.</p></li>
</ul>
- <h2 id="task" name="task">Task</h2>
- <p>In the <a href="task_contactsexchanger_w.htm">Contacts Exchanger</a> task, we will walk through how to exchange contacts between devices over the NFC connection.</p>
+ <h2 id="task" name="task">Task in Mobile Applications</h2>
+ <p>In the <a href="task_contactsexchanger_w.htm">Contacts Exchanger</a> task, we will walk through how to exchange contacts between devices over an NFC connection.</p>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="Managing_NFC_Conn" name="Managing_NFC_Conn" class="items-tit-h2">Managing NFC Connectivity</h2><span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="Managing_NFC_Conn" name="Managing_NFC_Conn">Managing NFC Connectivity</h2>
<p>Learning how to enable or disable the NFC service is a basic NFC management skill:</p>
<table class="note">
<th class="note">Note</th>
</tr>
<tr>
- <td class="note">The NFC API does not provide methods to directly enable or disable the NFC adapter of the device. When NFC is required, you must request a built-in Settings application to let the user enable or disable the NFC.</td>
+ <td class="note">The NFC API does not provide methods to directly enable or disable the NFC adapter of the device. When NFC is required, you must request the built-in Settings application to let the user enable or disable the NFC.</td>
</tr>
</tbody>
</table>
<ol>
- <li><p>To get the default NFC adapter, use the <span style="font-family: Courier New,Courier,monospace">getDefaultAdapter()</span> method and prepare the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationControl">ApplicationControl</a> object to request the NFC switching operation:</p>
+ <li><p>To get the default NFC adapter, use the <span style="font-family: Courier New,Courier,monospace">getDefaultAdapter()</span> method and prepare an <span style="font-family: Courier New,Courier,monospace">ApplicationControl</span> object (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationControl">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#ApplicationControl">wearable</a> applications) to request the NFC switching operation:</p>
<pre class="prettyprint">var nfcSwitchAppControl = new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/setting/nfc", null, null, null,
[new tizen.ApplicationControlData("type", "nfc")]);
var adapter = tizen.nfc.getDefaultAdapter();</pre></li>
<li>Define the event listener for the <span style="font-family: Courier New,Courier,monospace">launchAppControl()</span> method:
<pre class="prettyprint">function launchSuccess()
{
- console.log("NFC Settings application is successfully launched.");
+ console.log("NFC Settings application has successfully launched.");
+}
+function launchError(error)
+{
+ alert("An error occurred: " + error.name + ". Please enable NFC through the Settings application.");
}</pre></li>
-<li>Define the event handler for an application control, which implements the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationControlDataArrayReplyCallback">ApplicationControlDataArrayReplyCallback</a> interface:
+<li>Define the event handler for an application control, which implements the <span style="font-family: Courier New,Courier,monospace">ApplicationControlDataArrayReplyCallback</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationControlDataArrayReplyCallback">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#ApplicationControlDataArrayReplyCallback">wearable</a> applications):
<pre class="prettyprint">var serviceReply =
{
+ /* onsuccess is called when the launched application reports success */
onsuccess: function(data)
{
if (adapter.powered)
{
console.log("NFC is successfully turned on.");
}
- /* Error handling */
}
-};</pre></li>
+ /* onfailure is called when the launched application reports failure of the requested operation */
+ onfailure: function()
+ {
+ alert("NFC Settings application reported failure.");
+ }
+}</pre></li>
<li> If necessary, request launching the NFC Settings with <span style="font-family: Courier New,Courier,monospace">nfcSwitchAppControl</span> as parameter:
<pre class="prettyprint">if (adapter.powered)
{
tizen.application.launchAppControl(nfcSwitchAppControl, null, launchSuccess, launchError, serviceReply);
}</pre></li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="Detecting_NFC_Tags" name="Detecting_NFC_Tags" class="items-tit-h2">Detecting NFC Tags and Peer Devices</h2><span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="Detecting_NFC_Tags" name="Detecting_NFC_Tags">Detecting NFC Tags and Peer Devices</h2>
<p>Learning how to detect NFC tags and peer devices is a basic NFC management skill:</p>
<ol>
<li><p>To get the default NFC adapter, use the <span style="font-family: Courier New,Courier,monospace">getDefaultAdapter()</span> method:</p> <pre class="prettyprint">var nfcAdapter = tizen.nfc.getDefaultAdapter();</pre></li>
- <li><p>Define the event handlers for NFC tag detection using the <
a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NFCTagDetectCallback">NFCTagDetectCallback</a> listener interface:</p> <pre class="prettyprint">var setTagDetect =
+ <li><p>Define the event handlers for NFC tag detection using the <
span style="font-family: Courier New,Courier,monospace">NFCTagDetectCallback</span> listener interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NFCTagDetectCallback">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/nfc.html#NFCTagDetectCallback">wearable</a> applications):</p> <pre class="prettyprint">var setTagDetect =
{
/* When an NFC tag is detected */
onattach: function(nfcTag)
<li><p>To stop the tag detection, use the <span style="font-family: Courier New,Courier,monospace;">unsetTagListener()</span> method:</p> <pre class="prettyprint">
nfcAdapter.unsetTagListener();</pre> </li>
</ol>
- <p>NFC peers are detected similarly as NFC tags, except that the <span style="font-family: Courier New,Courier,monospace;">setPeerListener()</span> method is used to register the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NFCPeerDetectCallback">NFCPeerDetectCallback</a> listener interface, and the <span style="font-family: Courier New,Courier,monospace;">unsetPeerListener()</span> method is used to stop the peer detection.</p>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="Handling_NDEF_Messages" name="Handling_NDEF_Messages" class="items-tit-h2">Handling NDEF Messages</h2> <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <p>NFC peers are detected similarly as NFC tags, except that the <span style="font-family: Courier New,Courier,monospace;">setPeerListener()</span> method is used to register the <span style="font-family: Courier New,Courier,monospace;">NFCPeerDetectCallback</span> listener interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NFCPeerDetectCallback">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/nfc.html#NFCPeerDetectCallback">wearable</a> applications), and the <span style="font-family: Courier New,Courier,monospace;">unsetPeerListener()</span> method is used to stop the peer detection.</p>
+
+ <h2 id="Handling_NDEF_Messages" name="Handling_NDEF_Messages">Handling NDEF Messages</h2>
<p>Learning how to create NDEF messages is a basic NFC management skill:</p>
<ol>
- <li><p>To create an NDEF URI record, create an <
a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NDEFRecordURI">NDEFRecordURI</a> interface instance and specify the URI parameter.</p> <p>Additionally, you can create instances of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NDEFRecord">NDEFRecord</a>, <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NDEFRecordText">NDEFRecordText</a>, or <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NDEFRecordMedia">NDEFRecordMedia</a> interfaces based on the record type to be created.</p> <pre class="prettyprint">var newRecord = new tizen.NDEFRecordURI("https://www.tizen.org/");</pre></li>
- <li><p>Create an <
a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NDEFMessage">NDEFMessage</a> interface instance:</p> <pre class="prettyprint">
+ <li><p>To create an NDEF URI record, create an <
span style="font-family: Courier New,Courier,monospace;">NDEFRecordURI</span> interface instance (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NDEFRecordURI">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/nfc.html#NDEFRecordURI">wearable</a> applications) and specify the URI parameter.</p> <p>Additionally, you can create instances of the <span style="font-family: Courier New,Courier,monospace;">NDEFRecord</span> (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NDEFRecord">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/nfc.html#NDEFRecord">wearable</a> applications), <span style="font-family: Courier New,Courier,monospace;">NDEFRecordText</span> (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NDEFRecordText">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/nfc.html#NDEFRecordText">wearable</a> applications), or <span style="font-family: Courier New,Courier,monospace;">NDEFRecordMedia</span> (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NDEFRecordMedia">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/nfc.html#NDEFRecordMedia">wearable</a> applications) interfaces based on the record type to be created.</p> <pre class="prettyprint">var newRecord = new tizen.NDEFRecordURI("https://www.tizen.org/");</pre></li>
+ <li><p>Create an <
span style="font-family: Courier New,Courier,monospace">NDEFMessage</span> interface instance (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NDEFMessage">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/nfc.html#NDEFMessage">wearable</a> applications):</p> <pre class="prettyprint">
var newMessage = new tizen.NDEFMessage(); </pre></li>
<li><p>To add an NDEF record to an NDEF message, use the <span style="font-family: Courier New,Courier,monospace">records</span> attribute of the <span style="font-family: Courier New,Courier,monospace">NDEFMessage</span> interface:</p> <pre class="prettyprint">
newMessage.records[0] = newRecord;</pre></li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="Exchanging_NDEF_Peers" name="Exchanging_NDEF_Peers" class="items-tit-h2">Exchanging NDEF Data with Peers</h2> <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="Exchanging_NDEF_Peers" name="Exchanging_NDEF_Peers">Exchanging NDEF Data with Peers</h2>
- <p>Learning how to exchange NDEF data with peer devices is a basic NFC management skill:</p>
+ <p>Learning how to exchange NDEF messages is a basic NFC management skill:</p>
<ol>
- <li><p>To receive NDEF messages from a peer device, use the <span style="font-family: Courier New,Courier,monospace;">setReceiveNDEFListener()</span> method of the <
a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NFCPeer">NFCPeer</a> interface.</p><p>The <span style="font-family: Courier New,Courier,monospace;">setReceiveNDEFListener()</span> method registers the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NDEFMessageReadCallback">NDEFMessageReadCallback</a> listener interface, which is invoked when an NDEF message from a peer device is read.</p> <pre class="prettyprint">
+ <li><p>To receive NDEF messages from a peer device, use the <span style="font-family: Courier New,Courier,monospace;">setReceiveNDEFListener()</span> method of the <
span style="font-family: Courier New,Courier,monospace;">NFCPeer</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NFCPeer">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/nfc.html#NFCPeer">wearable</a> applications).</p><p>The <span style="font-family: Courier New,Courier,monospace;">setReceiveNDEFListener()</span> method registers the <span style="font-family: Courier New,Courier,monospace;">NDEFMessageReadCallback</span> listener interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NDEFMessageReadCallback">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/nfc.html#NDEFMessageReadCallback">wearable</a> applications), which is invoked when an NDEF message from a peer device is read.</p> <pre class="prettyprint">
/* NDEFMessageReadCallback listener */
function readMessage(message)
{
Peer.sendNDEF(newMessage);</pre></li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="Exchanging_NDEF_Tags" name="Exchanging_NDEF_Tags" class="items-tit-h2">Exchanging NDEF Data with Tags</h2> <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="Exchanging_NDEF_Tags" name="Exchanging_NDEF_Tags">Exchanging NDEF Data with Tags</h2>
<p>Learning how to exchange NDEF data with tags is a basic NFC management skill:</p>
<ol>
- <li><p>To read data from an NFC tag, use the <span style="font-family: Courier New,Courier,monospace;">readNDEF()</span> method of the <
a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NFCTag">NFCTag</a> interface.</p> <p>The <span style="font-family: Courier New,Courier,monospace;">readNDEF()</span> method registers the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NDEFMessageReadCallback">NDEFMessageReadCallback</a> listener interface, which is invoked when an NDEF message is read.</p> <pre class="prettyprint">
+ <li><p>To read data from an NFC tag, use the <span style="font-family: Courier New,Courier,monospace;">readNDEF()</span> method of the <
span style="font-family: Courier New,Courier,monospace;">NFCTag</span> 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).</p> <p>The <span style="font-family: Courier New,Courier,monospace;">readNDEF()</span> method registers the <span style="font-family: Courier New,Courier,monospace;">NDEFMessageReadCallback</span> listener interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NDEFMessageReadCallback">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/nfc.html#NDEFMessageReadCallback">wearable</a> applications), which is invoked when an NDEF message is read.</p> <pre class="prettyprint">
/* NDEFMessageReadCallback listener */
function readMessage(message)
{
{
console.log("Success!");
}
-Tag.writeNDEF(newMessage, writeCallback);</pre> <p>You can use the <span style="font-family: Courier New,Courier,monospace;">transceive()</span> method to transfer raw data, as a byte array, to an NFC tag without knowing the underlying details of the tag.</p></li>
+Tag.writeNDEF(newMessage, writeCallback);</pre> <p>You can use the <span style="font-family: Courier New,Courier,monospace;">transceive()</span> method to transfer raw data as a byte array to an NFC tag without knowing the underlying details of the tag.</p></li>
</ol>
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="Using_NFC_Card_Emulation" name="Using_NFC_Card_Emulation" class="items-tit-h2">Using NFC Card Emulation</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="Using_NFC_Card_Emulation" name="Using_NFC_Card_Emulation">Using NFC Card Emulation</h2>
<p>Learning how to enable or disable the NFC card emulation and detect Secure Element transactions is a basic NFC management skill:</p>
<ol>
-<li>Declare the required variables and obtain the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NFCAdapter">NFCAdapter</a> object using the <span style="font-family: Courier New,Courier,monospace">getDefaultAdapter()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NFCManager">NFCManager</a> interface:
+<li>Declare the required variables and obtain the <span style="font-family: Courier New,Courier,monospace">NFCAdapter</span> object (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NFCAdapter">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/nfc.html#NFCAdapter">wearable</a> applications) using the <span style="font-family: Courier New,Courier,monospace">getDefaultAdapter()</span> method of the <span style="font-family: Courier New,Courier,monospace">NFCManager</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NFCManager">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/nfc.html#NFCManager">wearable</a> applications):
<pre class="prettyprint">
var adapter = tizen.nfc.getDefaultAdapter();
var modeListenerId = 0, aseListenerId = 0, transListenerId = 0;
<pre class="prettyprint">
modeListenerId = adapter.addCardEmulationModeChangeListener(function(mode)
{
- if(mode === "ALWAYS_ON")
+ if (mode === "ALWAYS_ON")
{
console.log("We are ready to go now");
}
adapter.cardEmulationMode = "OFF";
</pre></li>
</ol>
- </div>
- </li>
+
+<h2 id="Using_NFC_Host_Based_Card_Emulation" name="Using_NFC_Host_Based_Card_Emulation">Using NFC Host-based Card Emulation</h2>
- </ul>
-</div>
-</div>
-
+<p>Learning how to detect NFC HCE (host-based card emulation) events and manage AID (Application ID) is a basic NFC management skill:</p>
+<ol>
+<li><p>Declare the required variables and obtain the <span style="font-family: Courier New,Courier,monospace">NFCAdapter</span> object (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NFCAdapter">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/nfc.html#NFCAdapter">wearable</a> applications) using the <span style="font-family: Courier New,Courier,monospace">getDefaultAdapter()</span> method of the <span style="font-family: Courier New,Courier,monospace">NFCManager</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html#NFCManager">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/nfc.html#NFCManager">wearable</a> applications).</p>
+<p>To enable NFC card emulation, change the value of the <span style="font-family: Courier New,Courier,monospace">cardEmulationMode</span> attribute.</p>
+<pre class="prettyprint">
+var hceListenerId = 0;
+var adapter = tizen.nfc.getDefaultAdapter();
+
+adapter.cardEmulationMode = "ALWAYS_ON";
+</pre></li>
+<li>Use the <span style="font-family: Courier New,Courier,monospace">addHCEEventListener()</span> method of the <span style="font-family: Courier New,Courier,monospace">NFCAdapter</span> interface to register a listener to detect the HCE event:
+<pre class="prettyprint">
+hceListenerId = adapter.addHCEEventListener(function(event_data)
+{
+ if (event_data.eventType =="ACTIVATED")
+ {
+ console.log("HCE activated");
+ }
+ else if (event_data.eventType =="DEACTIVATED")
+ {
+ console.log("HCE deactivated");
+ }
+ else if (event_data.eventType =="APDU_RECEIVED")
+ {
+ console.log("APDU received");
+ }
+});
+</pre></li>
+<li>Use the <span style="font-family: Courier New,Courier,monospace">sendHostAPDUResponse()</span> method of the <span style="font-family: Courier New,Courier,monospace">NFCAdapter</span> interface to send a host APDU (Application Protocol Data Unit is defined in the ISO/IEC 7816-4 specification) response to a Contactless Front-end:
+<pre class="prettyprint">
+try
+{
+ var successCB = function()
+ {
+ console.log("Sending APDU response was successful.");
+ };
+
+ var errorCB = function()
+ {
+ console.log("Sending APDU response failed.");
+ };
+
+ var apdu_response= [0x00,0xA4,0x04,0x00,0x04,0x11,0x12, 0x13, 0x14];
+ adapter.sendHostAPDUResponse(apdu_response, successCB, errorCB);
+}
+catch (err)
+{
+ console.log(err.name + ":" + err.message);
+}
+</pre></li>
+ <li>To register an AID for a specific category and secure element type, use the <span style="font-family: Courier New,Courier,monospace">registerAID()</span> method of the <span style="font-family: Courier New,Courier,monospace">NFCAdapter</span> interface:
+<pre class="prettyprint">
+try
+{
+ var aid = "ABC0012345";
+ adapter.registerAID("HCE", aid, "PAYMENT")
+}
+catch (err)
+{
+ console.log(err.name + ":" + err.message);
+}
+</pre></li>
+ <li>To retrieve the registered AIDs for a specific category and secure element type, use the <span style="font-family: Courier New,Courier,monospace">getAIDsForCategory()</span> method of the <span style="font-family: Courier New,Courier,monospace">NFCAdapter</span> interface:
+<pre class="prettyprint">
+try
+{
+ var successCallback = function(aid_datas)
+ {
+ for (var i = 0 ; i < aid_datas.length ; i++)
+ {
+ console.log("SE Type is " + aid_datas[i].type);
+ console.log("AID is " + aid_datas[i].aid);
+ console.log("readonly : " + aid_datas[i].readOnly);
+ }
+ };
+
+ var errorCallback = function(error)
+ {
+ console.log("getAIDsForCategory failed.");
+ };
+
+ adapter.getAIDsForCategory("PAYMENT", successCallback, errorCallback);
+}
+catch (err)
+{
+ console.log(err.name + ":" + err.message);
+}
+</pre></li>
+<li>Remove the registered listeners when they are no longer necessary, and disable NFC card emulation:
+<pre class="prettyprint">
+adapter.removeHCEEventListener(hceListenerId);
+adapter.cardEmulationMode = "OFF";
+</pre></li>
+</ol>
+
+
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/></p>
+ <p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/> <img alt="Wearable Web" src="../../../images/ww_icon_optional.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
<li><a href="../../../../../org.tizen.guides/html/web/tizen/communication/push_w.htm">Push Guide</a></li>
<li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/push.html">Push API for Mobile Web</a></li>
+ <li><a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/push.html">Push API for Wearable Web</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Push: Receiving Push Notifications from a Push Server</h1>
-<div class="cont"><div class="static-cont">
<p>This tutorial demonstrates how you can register your application, connect to the push service, and start receiving push notifications.</p>
<th class="note">Note</th>
</tr>
<tr>
- <td class="note">This feature is supported in mobile applications only.</td>
+ <td class="note">The Push API is optional for both Tizen mobile and wearable profiles, which means that it may not be supported in all mobile and wearable devices.
+ <p>The Push API is supported on all Tizen Emulators.</p>
+ </td>
</tr>
</tbody>
</table>
<li><a href="#Receiving">Receiving Push Notifications</a> <p>Connect to the push service and start receiving push notifications.</p></li>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
-
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="Registering" name="Registering" class="items-tit-h2">Registering to the Push Service</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="Registering" name="Registering">Registering to the Push Service</h2>
<p>To receive push notifications, you must learn how to register your application to the push service:</p>
<ol>
</pre> </li>
<li> <p>Register the application for the service with the <span style="font-family: Courier New,Courier,monospace">registerService()</span> method:</p> <pre class="prettyprint">tizen.push.registerService(service, registerSuccessCallback, errorCallback);</pre> <p>If the registration is successful, the <span style="font-family: Courier New,Courier,monospace;">registerSuccessCallback()</span> event handler returns the registration ID.</p> </li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="Receiving" name="Receiving" class="items-tit-h2">Receiving Push Notifications</h2><span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="Receiving" name="Receiving">Receiving Push Notifications</h2>
<p>To take advantage of the push technology, you must learn how to connect to the push service and receive push notifications:</p>
<ol>
</pre> </li>
<li> <p>Request the push service connection with the <span style="font-family: Courier New,Courier,monospace">connectService()</span> method:</p> <pre class="prettyprint">tizen.push.connectService(notificationCallback, errorCallback);</pre> <p>If the connection is established, you start receiving push notifications.</p> </li>
</ol>
- </div>
- </li>
- </ul>
-</div>
-</div>
+
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/></p>
+ <p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/>
+ <img alt="Wearable Web" src="../../../images/ww_icon_optional.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
<li><a href="../../../../../org.tizen.guides/html/web/tizen/communication/secure_element_w.htm">Secure Element Guide</a></li>
<li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/se.html">Secure Element API for Mobile Web</a></li>
+ <li><a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/se.html">Secure Element API for Wearable Web</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Secure Element: Accessing Secure Elements</h1>
-<div class="cont"><div class="static-cont">
<p>This tutorial demonstrates how you can access and manage secure elements in a device.</p>
<th class="note">Note</th>
</tr>
<tr>
- <td class="note">This feature is supported in mobile applications only.</td>
+ <td class="note">The Secure Element API is optional for both Tizen mobile and wearable profiles, which means that it may not be supported in all mobile and wearable devices.
+ <p>The Secure Element API is supported on all Tizen Emulators.</p></td>
</tr>
</tbody>
</table>
<li><a href="#Closing_Sessions">Closing Sessions and Channels</a> <p>Close specific channels and sessions, or all channels and sessions.</p></li>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
-
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="Managing_Secure_Element" name="Managing_Secure_Element" class="items-tit-h2">Managing Secure Elements</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="Managing_Secure_Element" name="Managing_Secure_Element">Managing Secure Elements</h2>
<p>To use secure elements in your application, you must learn to retrieve them and track changes in them:</p>
<ol>
- <li><p>To retrieve all the available secure element readers, use the <span style="font-family: Courier New,Courier,monospace">getReaders()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/se.html#SEService">SEService</a> interface. The method registers the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/se.html#ReaderArraySuccessCallback">ReaderArraySuccessCallback</a> interface, which is invoked when the list of available secure element readers has been successfully retrieved.
+ <li><p>To retrieve all the available secure element readers, use the <span style="font-family: Courier New,Courier,monospace">getReaders()</span> method of the <span style="font-family: Courier New,Courier,monospace">SEService</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/se.html#SEService">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/se.html#SEService">wearable</a> applications). The method registers the <span style="font-family: Courier New,Courier,monospace">ReaderArraySuccessCallback</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/se.html#ReaderArraySuccessCallback">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/se.html#ReaderArraySuccessCallback">wearable</a> applications), which is invoked when the list of available secure element readers has been successfully retrieved.
</p> <pre class="prettyprint">
function success(readers)
{
</pre> </li>
<li> <p>To receive reader change notifications, use the <span style="font-family: Courier New,Courier,monospace">registerSEListener()</span> method of the <span style="font-family: Courier New,Courier,monospace">SEService</span> interface:</p>
- <ol>
- <li><p>Define a listener using the <
a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/se.html#SEChangeListener">SEChangeListener</a> interface:</p> <pre class="prettyprint">
+ <ol type="a">
+ <li><p>Define a listener using the <
span style="font-family: Courier New,Courier,monospace">SEChangeListener</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/se.html#SEChangeListener">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/se.html#SEChangeListener">wearable</a> applications):</p> <pre class="prettyprint">
var setSEChange =
{
onSEReady: function(reader)
tizen.seService.unregisterSEListener(seListener);
</pre> </li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="Opening_Sessions" name="Opening_Sessions" class="items-tit-h2">Opening Sessions and Channels</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
-
+
+ <h2 id="Opening_Sessions" name="Opening_Sessions">Opening Sessions and Channels</h2>
+
<p>To use secure elements in your application, you must learn to open sessions and channels:</p>
<ol>
- <li><p>To open a session, use the <span style="font-family: Courier New,Courier,monospace">openSession()</span> method of the <
a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/se.html#Reader">Reader</a> interface. The method registers the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/se.html#SessionSuccessCallback">SessionSuccessCallback</a> interface, which is invoked when a session on a specific reader is opened.</p> <pre class="prettyprint">
+ <li><p>To open a session, use the <span style="font-family: Courier New,Courier,monospace">openSession()</span> method of the <
span style="font-family: Courier New,Courier,monospace">Reader</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/se.html#Reader">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/se.html#Reader">wearable</a> applications). The method registers the <span style="font-family: Courier New,Courier,monospace">SessionSuccessCallback</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/se.html#SessionSuccessCallback">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/se.html#SessionSuccessCallback">wearable</a> applications), which is invoked when a session on a specific reader is opened.</p> <pre class="prettyprint">
function successCB(session)
{
console.log("A session is open successfully");
reader.openSession(successCB, errorCB);
</pre> </li>
<li><p>To open a channel within a session:</p>
- <ol>
- <li><p>Open a basic channel with the <span style="font-family: Courier New,Courier,monospace">openBasicChannel()</span> method of the <
a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/se.html#Session">Session</a> interface. The method registers the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/se.html#ChannelSuccessCallback">ChannelSuccessCallback</a> interface, which is invoked when a channel is opened to communicate with a specific applet.</p> <pre class="prettyprint">
+ <ol type="a">
+ <li><p>Open a basic channel with the <span style="font-family: Courier New,Courier,monospace">openBasicChannel()</span> method of the <
span style="font-family: Courier New,Courier,monospace">Session</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/se.html#Session">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/se.html#Session">wearable</a> applications). The method registers the <span style="font-family: Courier New,Courier,monospace">ChannelSuccessCallback</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/se.html#ChannelSuccessCallback">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/se.html#ChannelSuccessCallback">wearable</a> applications), which is invoked when a channel is opened to communicate with a specific applet.</p> <pre class="prettyprint">
function successCB(channel)
{
if (channel.isBasicChannel)
</ol>
</li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="Transmitting_APDU" name="Transmitting_APDU" class="items-tit-h2">Transmitting APDUs to Secure Elements</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="Transmitting_APDU" name="Transmitting_APDU">Transmitting APDUs to Secure Elements</h2>
<p>To use secure elements in your application, you must learn to transmit application protocol data units (APDU) to secure elements:</p>
<ol>
- <li><p>To transmit an APDU command to a secure element, use the <span style="font-family: Courier New,Courier,monospace">transmit()</span> method of the <
a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/se.html#Channel">Channel</a> interface.</p> <pre class="prettyprint">
+ <li><p>To transmit an APDU command to a secure element, use the <span style="font-family: Courier New,Courier,monospace">transmit()</span> method of the <
span style="font-family: Courier New,Courier,monospace">Channel</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/se.html#Channel">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/se.html#Channel">wearable</a> applications).</p> <pre class="prettyprint">
/* The APDU command is defined in ISO7816-4 */
channel.transmit(command, successCB, errorCB);
</pre> </li>
- <li><p>The <span style="font-family: Courier New,Courier,monospace">transmit()</span> method registers the <
a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/se.html#TransmitSuccessCallback">TransmitSuccessCallback</a> interface, which is invoked when a command has been successfully transmitted:</p> <pre class="prettyprint">
+ <li><p>The <span style="font-family: Courier New,Courier,monospace">transmit()</span> method registers the <
span style="font-family: Courier New,Courier,monospace">TransmitSuccessCallback</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/se.html#TransmitSuccessCallback">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/se.html#TransmitSuccessCallback">wearable</a> applications), which is invoked when a command has been successfully transmitted:</p> <pre class="prettyprint">
function successCB(response)
{
console.log("An APDU is transmitted successfully. The response is " + response);
}
</pre> </li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="Closing_Sessions" name="Closing_Sessions" class="items-tit-h2">Closing Sessions and Channels</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="Closing_Sessions" name="Closing_Sessions">Closing Sessions and Channels</h2>
<p>To use secure elements in your application, you must learn to close sessions and channels:</p>
<ol>
- <li><p>To close a specific channel, use the <span style="font-family: Courier New,Courier,monospace">close()</span> method of the <
a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/se.html#Channel">Channel</a> interface:</p> <pre class="prettyprint">
+ <li><p>To close a specific channel, use the <span style="font-family: Courier New,Courier,monospace">close()</span> method of the <
span style="font-family: Courier New,Courier,monospace">Channel</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/se.html#Channel">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/se.html#Channel">wearable</a> applications):</p> <pre class="prettyprint">
channel.close();
</pre> </li>
- <li><p>To close all channels within a specific session, use the <span style="font-family: Courier New,Courier,monospace">closeChannels()</span> method of the <
a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/se.html#Session">Session</a> interface:</p> <pre class="prettyprint">
+ <li><p>To close all channels within a specific session, use the <span style="font-family: Courier New,Courier,monospace">closeChannels()</span> method of the <
span style="font-family: Courier New,Courier,monospace">Session</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/se.html#Session">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/se.html#Session">wearable</a> applications):</p> <pre class="prettyprint">
session.closeChannels();
</pre> </li>
<li><p>To close a specific session, use the <span style="font-family: Courier New,Courier,monospace">close()</span> method of the <span style="font-family: Courier New,Courier,monospace">Session</span> interface:</p> <pre class="prettyprint">
session.close();
</pre> </li>
- <li><p>To close all session for a specific reader, use the <span style="font-family: Courier New,Courier,monospace">closeSessions()</span> method of the <
a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/se.html#Reader">Reader</a> interface:</p> <pre class="prettyprint">
+ <li><p>To close all session for a specific reader, use the <span style="font-family: Courier New,Courier,monospace">closeSessions()</span> method of the <
span style="font-family: Courier New,Courier,monospace">Reader</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/se.html#Reader">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/se.html#Reader">wearable</a> applications):</p> <pre class="prettyprint">
reader.closeSessions();
</pre> </li>
</ol>
- </div>
- </li>
- </ul>
-</div>
-</div>
+
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/> <img alt="Wearable Web" src="../../../images/ww_icon_optional.png"/></p>
</div>
<ul class="toc">
<li><a href="../../../../../org.tizen.guides/html/web/tizen/communication/bluetooth_w.htm">Bluetooth Guide</a></li>
<li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html">Bluetooth API for Mobile Web</a></li>
- <li><a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html">Bluetooth API for Wearable Web</a></li>
+
<li><a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html">Bluetooth API for Wearable Web</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 SDK, demonstrates how you can use the <span style="font-family: Courier New,Courier,monospace">Bluetooth</span> API (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) 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/downloads/sample-applications/sample-mobile-applications" target="blank">BluetoothChat</a>.</p>
+ <p>This task, based on the BluetoothChat sample delivered with the Tizen SDK, demonstrates how you can use the Bluetooth API (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) 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/downloads/sample-applications/sample-mobile-applications" target="blank">BluetoothChat</a>.</p>
<p>This task consists of the following parts:</p>
- <ul class="ul">
+ <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>
<p>The following figure shows the main screens of the application.</p>
<p class="figure">Figure: BluetoothChat screens</p>
- <p
style="text-align: center;"><img alt="BluetoothChat screens" src="../../../images/bluetoothchat.png" /></p>
+ <p
align="center"><img alt="BluetoothChat screens" src="../../../images/bluetoothchat.png" /></p>
<h3 id="main" name="main">Defining the Main Screen</h3>
<ol class="tutorstep">
<li>index.html Source File
- <ol><li>
+ <ol type="a"><li>
<p>The main screen displays option buttons. The header section of the screen is defined within a <span style="font-family: Courier New,Courier,monospace;"><div></span> element whose <span style="font-family: Courier New,Courier,monospace;">data-role</span> attribute is set to <span style="font-family: Courier New,Courier,monospace;">header</span>. The header section determines the title of the screen.</p>
<pre class="prettyprint lang-html">
</li>
<li>templates/keyboard_page.tpl Source File
-<ol>
+<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">
<h3 id="server" name="server">Defining the Choose Your Server Screen</h3>
<ol class="tutorstep">
<li>templates/choose_page.tpl Source File
-<ol><li><p>The content section of the Choose your server screen displays a list (in <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Listview.htm">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/wearable/widgets/widget_list.htm">wearable</a> applications) of available servers.</p>
+<ol
type="a"><li><p>The content section of the Choose your server screen displays a list (in <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Listview.htm">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/wearable/widgets/widget_list.htm">wearable</a> applications) of available servers.</p>
<pre class="prettyprint">
<div data-role="page" id="choose">
<!--Header section-->
<ol class="tutorstep">
<li>app.server.js Source File
- <ol><li><p>Before pairing devices, you must check whether Bluetooth is enabled. The default Bluetooth adapter is retrieved using the <span style="font-family: Courier New,Courier,monospace">getDefaultAdapter()</span> method.</p>
+ <ol
type="a"><li><p>Before pairing devices, you must check whether Bluetooth is enabled. The default Bluetooth adapter is retrieved using the <span style="font-family: Courier New,Courier,monospace">getDefaultAdapter()</span> method.</p>
<pre class="prettyprint">
this.adapter = tizen.bluetooth.getDefaultAdapter();
</pre>
<h3 id="connect" name="connect">Connecting Devices</h3>
<ol class="tutorstep">
<li>app.client.model.js Source File
- <ol>
+ <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 <span style="font-family: Courier New,Courier,monospace">connectToService()</span> method.</p>
<pre class="prettyprint">
</script>
</body>
-</html>
+</html>
\ No newline at end of file
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/></p>
</div>
<h1>Task: Chatter</h1>
<p>This task, based on the Chatter sample delivered with the Tizen SDK, 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/downloads/sample-applications/sample-mobile-applications" target="blank">Chatter</a>.</p>
<p>This task consists of the following parts:</p>
- <ul class="ul">
+ <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>
<p>The following figure shows the main screens of the application.</p>
<p class="figure">Figure: Chatter screens</p>
- <p
style="text-align: center;"><img alt="Chatter screens" src="../../../images/chatter.png" /></p>
+ <p
align="center"><img alt="Chatter screens" src="../../../images/chatter.png" /></p>
<h3 id="main" name="main">Defining the Main Screen</h3>
<p>The message grouping functionality is implemented in the <span style="font-family: Courier New,Courier,monospace">app.model.js</span> file.</p>
<ol class="tutorstep">
<li>Creating the Group
- <ol>
+ <ol type="a">
<li>
<p>The <span style="font-family: Courier New,Courier,monospace">groupMessages()</span> method is used to filter the messages according to their status.</p>
<pre class="prettyprint">
<h3 id="get_contact" name="get_contact">Getting the Contact List</h3>
<ol class="tutorstep">
<li>app.model.js Source File
- <ol><li><p>To get the contact list from the device memory, get the default address book using the <span style="font-family: Courier New,Courier,monospace">getDefaultAddressBook()</span> method.</p>
+ <ol
type="a"><li><p>To get the contact list from the device memory, get the default address book using the <span style="font-family: Courier New,Courier,monospace">getDefaultAddressBook()</span> method.</p>
<pre class="prettyprint">
this.addressBook = tizen.contact.getDefaultAddressBook();
</pre></li>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/></p>
</div>
<p>This task, based on the ContactsExchanger sample delivered with the Tizen SDK, 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/downloads/sample-applications/sample-mobile-applications" target="blank">ContactsExchanger</a>.</p>
<p>This task consists of the following parts:</p>
- <ul class="ul">
+ <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>
<p>The following figure shows the main screens of the application.</p>
<p class="figure">Figure: ContactsExchanger screens</p>
- <p
style="text-align: center;"><img alt="ContactsExchangerscreens" src="../../../images/contactsexchanger.png" /></p>
+ <p
align="center"><img alt="ContactsExchangerscreens" src="../../../images/contactsexchanger.png" /></p>
<h3 id="main" name="main">Defining the Main Screen</h3>
<ol class="tutorstep">
<li>index.html Source File
-<ol><li>
+<ol type="a"><li>
<p>The header section of the screen is defined within a <span style="font-family: Courier New,Courier,monospace;"><div></span> element whose <span style="font-family: Courier New,Courier,monospace;">data-role</span> attribute is set to <span style="font-family: Courier New,Courier,monospace;">header</span>. The header section determines the title of the screen.</p>
<pre class="prettyprint lang-html">
<!--Main screen layout-->
<pre class="prettyprint lang-html">
<!--Content section-->
<div data-role="content" id="content-start">
- <!-- Dynamic content -->
+ <!--Dynamic content-->
</div>
</div>
</pre>
</ol>
</li>
<li>app.ui.js Source File
- <ol><li><p>The <span style="font-family: Courier New,Courier,monospace">loadStartPage()</span> method is called to start the screen initialization. The method handles 2 scenarios: if the user has defined the default contact, the <span style="font-family: Courier New,Courier,monospace">loadStartContent()</span> method is executed, and the user gets access to the application. Otherwise, the user is prompted to define the default contact.</p>
+ <ol
type="a"><li><p>The <span style="font-family: Courier New,Courier,monospace">loadStartPage()</span> method is called to start the screen initialization. The method handles 2 scenarios: if the user has defined the default contact, the <span style="font-family: Courier New,Courier,monospace">loadStartContent()</span> 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()
{
<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 class="tutorstep"><li>app.ui.js Source File
- <ol><li>
+ <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');
<h3 id="read" name="read">Reading an NDEF Message from an NFC Tag</h3>
<ol class="tutorstep">
<li>app.nfc.card.js Source File
- <ol><li>
+ <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 <span style="font-family: Courier New,Courier,monospace">setTagListener()</span> 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()
<h3 id="write" name="write">Writing an NDEF Message to the NFC Tag</h3>
<ol class="tutorstep">
<li>app.nfc.card.js Source File
- <ol><li>
+ <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 <span style="font-family: Courier New,Courier,monospace">setTagDetectWrite()</span> method is called. The <span style="font-family: Courier New,Courier,monospace">setTagListener()</span> method adds an event listener to detect whether the tag is successfully attached.</p>
<pre class="prettyprint">
setTagDetectWrite: function nfc_card_setTagDetectWrite()
<p>The data exchange functionality is implemented in the <span style="font-family: Courier New,Courier,monospace">app.nfc.peer.js</span> file.</p>
<ol class="tutorstep">
<li>Sending Information
-<ol><li><p>When the user taps the <strong>Communicate with another device</strong> button on the main screen, the transfer page is displayed. The <span style="font-family: Courier New,Courier,monospace">setPeerListener()</span> 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>
+<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 <span style="font-family: Courier New,Courier,monospace">setPeerListener()</span> 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()
{
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Content: Discovering Multimedia Content (Such as Images, Videos, or Music)</h1>
-<div class="cont"><div class="static-cont">
<p>This tutorial demonstrates how you can retrieve content and manage items in your device local storage.</p>
<h2 id="warm_up" name="warm_up">Warm-up</h2>
<p>Become familiar with the Content API basics by learning about:</p>
<ul>
- <li><a
class="opensection" href="#browse">Browsing Content</a> <p>Browse and search for directories and items in directories.</p></li>
- <li><a
class="opensection" href="#manage">Managing Content</a> <p>View and update item details.</p></li>
- <li><a
class="opensection" href="#receive">Receiving Notifications on Content Changes</a> <p>Receive notifications when a content item is added, updated, or deleted.</p></li>
+ <li><a href="#browse">Browsing Content</a> <p>Browse and search for directories and items in directories.</p></li>
+ <li><a href="#manage">Managing Content</a> <p>View and update item details.</p></li>
+ <li><a href="#receive">Receiving Notifications on Content Changes</a> <p>Receive notifications when a content item is added, updated, or deleted.</p></li>
<li>Playlist
<ul>
- <li><a
class="opensection" href="#create">Creating a Playlist</a> <p>Create a new playlist and add items. Create a new playlist based on an existing playlist.</p></li>
- <li><a
class="opensection" href="#manage_p">Managing Playlists</a> <p>Retrieve all playlists. Remove a playlist.</p></li>
- <li><a
class="opensection" href="#items">Managing Playlist Items</a> <p>Add, retrieve, and remove items. Change item position and order.</p></li></ul>
+ <li><a href="#create">Creating a Playlist</a> <p>Create a new playlist and add items. Create a new playlist based on an existing playlist.</p></li>
+ <li><a href="#manage_p">Managing Playlists</a> <p>Retrieve all playlists. Remove a playlist.</p></li>
+ <li><a href="#items">Managing Playlist Items</a> <p>Add, retrieve, and remove items. Change item position and order.</p></li></ul>
</li>
</ul>
<h2 id="task" name="task">Task</h2>
<p>In the <a href="task_mediacontent_w.htm">Media Content</a> task, we will walk through how to browse and manage the media directories in your application.</p>
-
- <div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
-
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="browse" name="browse" class="items-tit-h2">Browsing Content</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="browse" name="browse">Browsing Content</h2>
<p>Learning how to browse and search for content directories and content items in directories is a basic content management skill:</p>
<ol>
<th class="note">Note</th>
</tr>
<tr>
- <td class="note">To retrieve a specific set of content items, you can specify a content directory (with the directory ID), filter, and sorting order for the search operation through the <span style="font-family: Courier New,Courier,monospace">directoryId</span>, <span style="font-family: Courier New,Courier,monospace">filter</span> and <span style="font-family: Courier New,Courier,monospace">sortMode</span> parameters (for attributes supported in the filter, see <a href="../../../../../org.tizen.guides/html/web/tizen/tizen/tizen_guide_w.htm#content">Content Filter Attributes</a>). <p>In this example, the directory ID is set to <span style="font-family: Courier New,Courier,monospace">null</span> (which means that all directories are searched), the filter retrieves all content items whose type is VIDEO, and no sorting order is defined (which means that the default sorting order is used).</p> </td>
+ <td class="note">To retrieve a specific set of content items, you can specify a content directory (with the directory ID), filter, and sorting order for the search operation through the <span style="font-family: Courier New,Courier,monospace">directoryId</span>, <span style="font-family: Courier New,Courier,monospace">filter</span> and <span style="font-family: Courier New,Courier,monospace">sortMode</span> parameters (for attributes supported in the filter, see <a href="../../../../../org.tizen.guides/html/web/tizen/tizen/tizen_guide_w.htm#content
_filter">Content Filter Attributes</a>). <p>In this example, the directory ID is set to <span style="font-family: Courier New,Courier,monospace">null</span> (which means that all directories are searched), the filter retrieves all content items whose type is VIDEO, and no sorting order is defined (which means that the default sorting order is used).</p> </td>
</tr>
</tbody>
</table> </li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="manage" name="manage" class="items-tit-h2">Managing Content</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="manage" name="manage">Managing Content</h2>
<p>Learning how to view content details and update them is a basic content management skill:</p>
<ol>
});
</pre></li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="receive" name="receive" class="items-tit-h2">Receiving Notifications on Content Changes</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="receive" name="receive">Receiving Notifications on Content Changes</h2>
<p>To create engaging applications with various content features, you must learn to receive notifications when content items are added, updated, or removed:</p>
<ol>
tizen.content.unsetChangeListener();
</pre> </li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="create" name="create" class="items-tit-h2">Creating a Playlist</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="create" name="create">Creating a Playlist</h2>
<p>Learning how to create a new playlist enables adding a playlist from your application:</p>
-<ul class="ul">
+<ul>
<li><p>To create a new empty playlist, use the <span style="font-family: Courier New,Courier,monospace">createPlaylist()</span> method of the <span style="font-family: Courier New,Courier,monospace">ContentManager</span> interface (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):</p>
<pre class="prettyprint">function createSuccess(playlist)
});</pre>
</li>
</ul>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="manage_p" name="manage_p" class="items-tit-h2">Managing Playlists</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="manage_p" name="manage_p">Managing Playlists</h2>
<p>Learning how to retrieve and remove playlists is a basic playlist management skill:</p>
-<ul class="ul">
+<ul>
<li><p>To retrieve a list of all playlists, use the <span style="font-family: Courier New,Courier,monospace">getPlaylists()</span> method of the <span style="font-family: Courier New,Courier,monospace">ContentManager</span> interface (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):</p>
<pre class="prettyprint">function getPlaylistsSuccess(playlists)
});</pre></li>
</ul>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="items" name="items" class="items-tit-h2">Managing Playlist Items</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="items" name="items">Managing Playlist Items</h2>
<p>Learning how to manage list items is a basic playlist management skill:</p>
-<ul class="ul">
+<ul>
<li>To add items to a playlist:
<pre class="prettyprint">function getSuccess(items)
{
console.log("Playlist items:");
- for(var i = 0; i < items.length; ++i)
+ for (var i = 0; i < items.length; ++i)
{
console.log("[" + i + "]: name:" + items[i].name);
}
</li></ol>
</li>
</ul>
- </div>
- </li>
-
- </ul>
-</div>
-</div>
+
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a class="opensection" href="../../../../../org.tizen.guides/html/web/tizen/content/content_guide_w.htm">Content Guides</a></li>
+ <li><a href="../../../../../org.tizen.guides/html/web/tizen/content/content_guide_w.htm">Content Guides</a></li>
<li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/index.html#Contents">Content API for Mobile Web</a></li>
<li><a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/index.html#Contents">Content API for Wearable Web</a></li>
</ul>
<ul>
<li><a href="content_tutorial_w.htm">Content: Discovering Multimedia Content (Such as Images, Videos, or Music)</a> <p>Demonstrates how you can receive information about content folders and items stored on external and internal storages and find and update the content of a media item.</p></li>
<li><a href="download_tutorial_w.htm">Download: Downloading Remote Objects by HTTP Request</a> <p>Demonstrates how you can manage and monitor downloads.</p></li>
+ <li><a href="exif_tutorial_w.htm">Exif: Manipulating EXIF Data from JPEG Files</a> <p>Demonstrates how you can use EXIF (exchangeable image format) information stored in JPEG files.</p></li>
</ul>
- <p>The following tutorials apply in <span style="color: red">mobile applications only</span>:</p>
-<ul>
- <li><a href="exif_tutorial_w.htm">Exif: Manipulating EXIF Data from JPEG Files</a> <p>Demonstrates how you can use EXIF (exchangeable image format) information stored in JPEG files.</p></li>
-</ul>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon_optional.png"/></p>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Download: Downloading Remote Objects by HTTP Request</h1>
-<div class="cont"><div class="static-cont">
<p>This tutorial demonstrates how you can manage and monitor downloads.</p>
<h2>Warm-up</h2>
<p>Become familiar with the Download API basics by learning about:</p>
<ul>
- <li><a
class="opensection" href="#manage">Managing Downloads</a> <p>Start, pause, and cancel downloading a file.</p></li>
- <li><a
class="opensection" href="#check">Checking the Download State and Information</a> <p>Check whether a download is currently ongoing, failed, paused, or completed, and retrieve the download information.</p></li>
+ <li><a href="#manage">Managing Downloads</a> <p>Start, pause, and cancel downloading a file.</p></li>
+ <li><a href="#check">Checking the Download State and Information</a> <p>Check whether a download is currently ongoing, failed, paused, or completed, and retrieve the download information.</p></li>
</ul>
<h2>Task</h2>
<p>In the <a href="task_downloadmanager_w.htm">Download Manager</a> task, we will walk through how to download URL content to the device storage.</p>
- <div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
-
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="manage" name="manage" class="items-tit-h2">Managing Downloads</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="manage" name="manage">Managing Downloads</h2>
<p>To provide the user access to Internet resources, you must learn how to manage download operations:</p>
<ol>
<li><p>Create an instance of the <span style="font-family: Courier New,Courier,monospace">DownloadRequest</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/download.html#DownloadRequest">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/download.html#DownloadRequest">wearable</a> applications) that defines the URL of the file to be downloaded:</p> <pre class="prettyprint">
var downloadRequest = new tizen.DownloadRequest("http://download.tizen.org/tools/README.txt", "downloads");
-</pre> <p>The final parameter (<span style="font-family: Courier New,Courier,monospace">downloads</span>) defines the folder where the downloaded content is stored. The parameter uses a relative folder location defined in the
<span style="font-family: Courier New,Courier,monospace">Filesystem</span> 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). The folder is not an absolute folder location, but instead uses a <a href="../../../../../org.tizen.guides/html/web/tizen/input_output/filesystem_w.htm">virtual root location</a> (<span style="font-family: Courier New,Courier,monospace">downloads</span> is the default download location in the virtual root).</p></li>
+</pre> <p>The final parameter (<span style="font-family: Courier New,Courier,monospace">downloads</span>) defines the folder where the downloaded content is stored. The parameter uses a relative folder location defined in 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). The folder is not an absolute folder location, but instead uses a <a href="../../../../../org.tizen.guides/html/web/tizen/input_output/filesystem_w.htm">virtual root location</a> (<span style="font-family: Courier New,Courier,monospace">downloads</span> is the default download location in the virtual root).</p></li>
<li><p>It is not possible to download anything when the device is not connected to a network. To check whether any connection is available, use the <span style="font-family: Courier New,Courier,monospace">getPropertyValue()</span> method of the <span style="font-family: Courier New,Courier,monospace">SystemInfo</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfo">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html#SystemInfo">wearable</a> applications):</p>
<pre class="prettyprint">
tizen.systeminfo.getPropertyValue("NETWORK", function(networkInfo)
downloadId = tizen.download.start(downloadRequest, listener);
</pre> <p>The <span style="font-family: Courier New,Courier,monospace">start()</span> method returns a unique identifier for the download operation.</p> </li>
<li>During the download:
- <ol>
+ <ol type="a">
<li><p>To pause the download, use the <span style="font-family: Courier New,Courier,monospace">pause()</span> method with the download ID:</p> <pre class="prettyprint">
tizen.download.pause(downloadId);
</pre> </li>
</pre> </li>
</ol></li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="check" name="check" class="items-tit-h2">Checking the Download State and Information</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="check" name="check">Checking the Download State and Information</h2>
<p>To provide the user access to Internet resources, you must learn how to check the state of a download operation and retrieve relevant information:</p>
<ol>
var MIMEType = tizen.download.getMIMEType(downloadId);
</pre><p>The method returns the MIME type the target file which has started downloading.</p> </li>
</ol>
- </div>
- </li>
- </ul>
-</div>
-</div>
+
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+ <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../../org.tizen.guides/html/web/tizen/content/exif_w.htm">Exif Guide</a></li>
- <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/exif.html">Exif API for Mobile Web</a></li>
+ <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/exif.html">Exif API for Mobile Web</a></li>
+ <li><a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/exif.html">Exif API for Wearable Web</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Exif: Manipulating EXIF Data from JPEG Files</h1>
-<div class="cont"><div class="static-cont">
<p>This tutorial demonstrates how you can use EXIF (exchangeable image format) information stored in JPEG files.</p>
<th class="note">Note</th>
</tr>
<tr>
- <td class="note">This feature is supported in mobile applications only.</td>
+ <td class="note">The Exif API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices.
+<p>The Exif API is supported on all Tizen Emulators.</p></td>
</tr>
</tbody>
</table>
<li><a href="#copy">Copying the EXIF Data</a> <p>Copy the EXIF data from one JPEG file to another.</p></li>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
-
- <ul class="devicespecifications">
-
- <li>
- <div class="devicespec-tit">
- <h2 id="load" name="load" class="items-tit-h2">Loading the EXIF Data</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="load" name="load">Loading the EXIF Data</h2>
<p>Learning how to retrieve EXIF data from JPEG files is a useful content management skill:</p>
<ol>
tizen.filesystem.resolve("images/tizen.jpg", resolveSuccess, resolveFail);</pre></li>
-<li><p>With a valid <span style="font-family: Courier New,Courier,monospace">File</span> object, use the <span style="font-family: Courier New,Courier,monospace">getExifInfo()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/exif.html#ExifManager">ExifManager</a> interface and pass the URI to the method.</p>
+<li><p>With a valid <span style="font-family: Courier New,Courier,monospace">File</span> object, use the <span style="font-family: Courier New,Courier,monospace">getExifInfo()</span> method of the <span style="font-family: Courier New,Courier,monospace">ExifManager</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/exif.html#ExifManager">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/exif.html#ExifManager">wearable</a> applications) and pass the URI to the method.</p>
<pre class="prettyprint">function onSuccess(exifInfo)
{
}
tizen.exif.getExifInfo(fileURI, onSuccess, onError);</pre>
-<p>With a valid <span style="font-family: Courier New,Courier,monospace">exifInfo</span> object, you can access various <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/exif.html#ExifInformation">ExifInformation</a> attributes, such as width, height, orientation, and flash.</p>
+<p>With a valid <span style="font-family: Courier New,Courier,monospace">exifInfo</span> object, you can access various <span style="font-family: Courier New,Courier,monospace">ExifInformation</span> attributes (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/exif.html#ExifInformation">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/exif.html#ExifInformation">wearable</a> applications), such as width, height, orientation, and flash.</p>
</li>
<li>To retrieve an EXIF thumbnail of the image:
-<ol><li>Resolve the input JPEG file:
+<ol type="a"><li>Resolve the input JPEG file:
<pre class="prettyprint">var fileURI = "";
} </pre></li></ol></li>
</ol>
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="add" name="add" class="items-tit-h2">Adding EXIF Data</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="add" name="add">Adding EXIF Data</h2>
<p>Learning how to add EXIF data to JPEG files is a useful content management skill:</p>
<ol>
-<li><p>Create a new <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/exif.html#ExifInformation">ExifInformation</a> object:</p>
+<li><p>Create a new <span style="font-family: Courier New,Courier,monospace">ExifInformation</span> object (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/exif.html#ExifInformation">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/exif.html#ExifInformation">wearable</a> applications):</p>
<pre class="prettyprint">var myNewExif = new tizen.ExifInformation();
myNewExif.userComment = "Photo taken on Charles Bridge in Prague";
</li>
-<li><p>When you have a valid URI to the file, set it in the <span style="font-family: Courier New,Courier,monospace">myNewExif</span> object and call the <span style="font-family: Courier New,Courier,monospace">saveExifInfo()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/exif.html#ExifManager">ExifManager</a> interface:</p>
+<li><p>When you have a valid URI to the file, set it in the <span style="font-family: Courier New,Courier,monospace">myNewExif</span> object and call the <span style="font-family: Courier New,Courier,monospace">saveExifInfo()</span> method of the <span style="font-family: Courier New,Courier,monospace">ExifManager</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/exif.html#ExifManager">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/exif.html#ExifManager">wearable</a> applications):</p>
<pre class="prettyprint">function onSaveSuccess()
{
</li>
</ol>
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="update" name="update" class="items-tit-h2">Updating the EXIF Data</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="update" name="update">Updating the EXIF Data</h2>
<p>Learning how to update EXIF data in JPEG files is a useful content management skill:</p>
<ol>
-<li><p>To update the EXIF data, load the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/exif.html#ExifInformation">ExifInformation</a> object from the file and change the values of the object properties.</p>
+<li><p>To update the EXIF data, load the <span style="font-family: Courier New,Courier,monospace">ExifInformation</span> object (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/exif.html#ExifInformation">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/exif.html#ExifInformation">wearable</a> applications) from the file and change the values of the object properties.</p>
<p>You can remove information from the file by setting the property to <span style="font-family: Courier New,Courier,monospace">null</span>.</p>
<pre class="prettyprint">function getSuccess(exifInfo)
tizen.exif.getExifInfo(file.toURI(), getSuccess);
});</pre></li>
-<li>After updating the property values, use the <span style="font-family: Courier New,Courier,monospace">saveExifInfo()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/exif.html#ExifManager">ExifManager</a> interface to save the changes to the file:
+<li>After updating the property values, use the <span style="font-family: Courier New,Courier,monospace">saveExifInfo()</span> method of the <span style="font-family: Courier New,Courier,monospace">ExifManager</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/exif.html#ExifManager">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/exif.html#ExifManager">wearable</a> applications) to save the changes to the file:
<pre class="prettyprint">function saveSuccess(exifInfo)
{
tizen.exif.saveExifInfo(exifInfo, saveSuccess);</pre></li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="copy" name="copy" class="items-tit-h2">Copying the EXIF Data</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="copy" name="copy">Copying the EXIF Data</h2>
<p>Learning how to copy EXIF data between JPEG files is a useful content management skill:</p>
<ol>
-<li><p>Get the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/exif.html#ExifInformation">ExifInformation</a> object and resolve the output file, and then change the <span style="font-family: Courier New,Courier,monospace">sourceExifInfo.uri</span> attribute to point to the output JPEG file:</p>
+<li><p>Get the <span style="font-family: Courier New,Courier,monospace">ExifInformation</span> object (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/exif.html#ExifInformation">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/exif.html#ExifInformation">wearable</a> applications) and resolve the output file, and then change the <span style="font-family: Courier New,Courier,monospace">sourceExifInfo.uri</span> attribute to point to the output JPEG file:</p>
<pre class="prettyprint">var sourceExifInfo = null;
tizen.exif.getExifInfo(fileURI, onSuccess);</pre></li>
-<li>Use the <span style="font-family: Courier New,Courier,monospace">saveExifInfo()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/exif.html#ExifManager">ExifManager</a> interface to save the changes in the output JPEG file:
+<li>Use the <span style="font-family: Courier New,Courier,monospace">saveExifInfo()</span> method of the <span style="font-family: Courier New,Courier,monospace">ExifManager</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/exif.html#ExifManager">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/exif.html#ExifManager">wearable</a> applications) to save the changes in the output JPEG file:
<pre class="prettyprint">
function onSaveSuccess()
</pre></li>
</ol>
- </div>
- </li>
-
- </ul>
-
-</div></div>
+
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon_optional.png"/></p>
</div>
<h1>Task: Download Manager</h1>
- <p>This task, based on the DownloadManager sample delivered with the Tizen SDK, demonstrates how you can use the
<span style="font-family: Courier New,Courier,monospace">Download</span> 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/downloads/sample-applications/sample-mobile-applications" target="blank">DownloadManager</a>.</p>
+ <p>This task, based on the DownloadManager sample delivered with the Tizen SDK, 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/downloads/sample-applications/sample-mobile-applications" target="blank">DownloadManager</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>
<p>The following figure shows the main screens of the application.</p>
<p class="figure">Figure: DownloadManager screens</p>
- <p
style="text-align: center;"><img alt="DownloadManager screens" src="../../../images/downloadmanager.png" /></p>
+ <p
align="center"><img alt="DownloadManager screens" src="../../../images/downloadmanager.png" /></p>
<h3 id="main" name="main">Defining the Main Screen</h3>
<ol class="tutorstep">
<ol class="tutorstep">
<li>js/app.ui.templateManager.js Source File
- <ol><li>
+ <ol type="a"><li>
<p>The Template Manager loads the template files to the cache.</p>
<pre class="prettyprint">
});
</pre> </li>
<li>js/app.model.js Source File
-<ol><li>
+<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)
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</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 SDK, demonstrates how you can use the
<span style="font-family: Courier New,Courier,monospace">Content</span> 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/downloads/sample-applications/sample-mobile-applications" target="blank">Media Content</a>.</p>
+ <p>This task, based on the MediaContent sample delivered with the Tizen SDK, 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/downloads/sample-applications/sample-mobile-applications" target="blank">Media Content</a>.</p>
<p>This task consists of the following parts:</p>
- <ul class="ul">
+ <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>
<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 Content 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 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 class="figure">Figure: Content screens</p>
- <p style="text-align: center;"><img alt="Content screens" src="../../../images/content_sd.png" /></p>
+ <p class="figure">Figure: MediaContent screens</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 class="tutorstep">
<li>index.html Source File
- <ol>
+ <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 <span style="font-family: Courier New,Courier,monospace;"><div></span> element whose <span style="font-family: Courier New,Courier,monospace;">data-role</span> attribute is set to <span style="font-family: Courier New,Courier,monospace;">header</span>. The header section determines the title of the screen.</p>
<pre class="prettyprint lang-html">
<!--Main screen layout-->
</div>
</pre></li>
<li> <p>The actual content section of the screen is defined within a <span style="font-family: Courier New,Courier,monospace;"><div></span> element whose <span style="font-family: Courier New,Courier,monospace;">data-role</span> attribute is set to <span style="font-family: Courier New,Courier,monospace;">content</span>.</p>
-<p>The section has a list widget displaying the storage types, and a list divider for the folder list (whose list items are defined in the <span style="font-family: Courier New,Courier,monospace;">main.js</span> file).</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 <span style="font-family: Courier New,Courier,monospace;">main.js</span> file).</p>
<pre class="prettyprint lang-html">
<!--Content section-->
<div data-role="content">
</div>
</div></pre></li></ol></li></ol>
- <h3 id="content" name="content">Defining the Content Screen</h3>
+ <h3 id="folder_screen" name="folder_screen">Defining the Folder Screen</h3>
<ol class="tutorstep">
<li>index.html Source File
-<p>Similarly as the main screen, the content screen contains a list widget displaying radio buttons (defined within an <span style="font-family: Courier New,Courier,monospace;"><input></span> element whose <span style="font-family: Courier New,Courier,monospace;">type</span> attribute is set to <span style="font-family: Courier New,Courier,monospace;">radio</span>) for the content types and a list divider for the item list (whose list items are defined in the <span style="font-family: Courier New,Courier,monospace;">main.js</span> file).
+<p>Similarly as the main screen, the folder screen contains a list component displaying radio buttons (defined within an <span style="font-family: Courier New,Courier,monospace;"><input></span> element whose <span style="font-family: Courier New,Courier,monospace;">type</span> attribute is set to <span style="font-family: Courier New,Courier,monospace;">radio</span>) for the content types and a list divider for the item list (whose list items are defined in the <span style="font-family: Courier New,Courier,monospace;">main.js</span> file).
</p>
<pre class="prettyprint lang-html">
-<!--Content screen layout-->
+<!--Folder screen layout-->
<div data-role="page" id="items">
<div data-role="header" data-position="fixed">
<h1 id="items-title"></h1>
</div></pre> </li>
</ol>
- <p>The Details screen content section contains a list widget, and every list item is defined in the <span style="font-family: Courier New,Courier,monospace;">main.js</span> file.</p>
+ <p>The Details screen content section contains a list component, and every list item is defined in the <span style="font-family: Courier New,Courier,monospace;">main.js</span> file.</p>
<h2 id="initialize" name="initialize">Initializing the Application</h2>
<h3 id="get_folder" name="get_folder">Retrieving Media Directories</h3>
<ol class="tutorstep">
<li>main.js Source File
- <ol>
+ <ol type="a">
<li><p>The Content API uses the same <span style="font-family: Courier New,Courier,monospace">ContentManager</span> 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 <span style="font-family: Courier New,Courier,monospace">ContentManager</span> interface instance using the <span style="font-family: Courier New,Courier,monospace">tizen</span> global object.</p> <pre class="prettyprint">gMediaSource = tizen.content;</pre></li>
<li><p>Use the <span style="font-family: Courier New,Courier,monospace">getFolders()</span> method to retrieve the list of directories present in all storage types. The <span style="font-family: Courier New,Courier,monospace">showFolderList()</span> 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)
{
<h3 id="get_item" name="get_item">Retrieving Media Items</h3>
<ol class="tutorstep">
<li>main.js Source File
- <ol>
+ <ol type="a">
<li><p>To get the media item list, use the <span style="font-family: Courier New,Courier,monospace">getFolderItems()</span> method. The method takes 2 attributes: <span style="font-family: Courier New,Courier,monospace">folderId</span>, which takes the folder ID whose media item list is to be displayed and <span style="font-family: Courier New,Courier,monospace">mediaType</span>, which specifies the media type (all, image, audio, or video).</p> <p>The <span style="font-family: Courier New,Courier,monospace">getFolderItems()</span> 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 <span style="font-family: Courier New,Courier,monospace">find()</span> 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 <span style="font-family: Courier New,Courier,monospace">showItemList()</span> 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">
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+ <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../../org.tizen.guides/html/web/tizen/input_output/archive_w.htm">Archive Guide</a></li>
- <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/archive.html">Archive API for Mobile Web</a></li>
+ <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/archive.html">Archive API for Mobile Web</a></li>
+ <li><a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/archive.html">Archive API for Wearable Web</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Archive: Creating an Archive File as Well as Various Other Kinds of Manipulation</h1>
-<div class="cont"><div class="static-cont">
<p>This tutorial demonstrates how you can create, browse, and extract ZIP archives.</p>
<th class="note">Note</th>
</tr>
<tr>
- <td class="note">This feature is supported in mobile applications only.</td>
+ <td class="note">The Archive API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices.
+<p>The Archive API is supported on all Tizen Emulators.</p></td>
</tr>
</tbody>
</table>
<li><a href="#extract">Extracting Files from an Archive</a> <p>Extract all files from an archive, or extract a selected file.</p></li>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
-
- <ul class="devicespecifications">
-
- <li>
- <div class="devicespec-tit">
- <h2 id="read" name="read" class="items-tit-h2">Reading the Content of an Archive</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="read" name="read">Reading the Content of an Archive</h2>
<p>Opening an archive and accessing a list of its members is a basic archive management skill:</p>
<ol>
-<li><p>To access the archive file, use the <span style="font-family: Courier New,Courier,monospace">open()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/archive.html#ArchiveManager">ArchiveManager</a> interface. The provided callback function receives an <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/archive.html#ArchiveFile">ArchiveFile</a> object.</p>
+<li><p>To access the archive file, use the <span style="font-family: Courier New,Courier,monospace">open()</span> method of the <span style="font-family: Courier New,Courier,monospace">ArchiveManager</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/archive.html#ArchiveManager">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/archive.html#ArchiveManager">wearable</a> applications). The provided callback function receives an <span style="font-family: Courier New,Courier,monospace">ArchiveFile</span> object (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/archive.html#ArchiveFile">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/archive.html#ArchiveFile">wearable</a> applications).</p>
<pre class="prettyprint">var myArchive = null;
function openSuccess(arch)
archive.close();</pre>
</li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="create" name="create" class="items-tit-h2">Creating an Archive</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="create" name="create">Creating an Archive</h2>
<p>Creating an archive and adding files to it is a basic archive management skill:</p>
<ol>
-<li><p>To create the archive file, use the <span style="font-family: Courier New,Courier,monospace">open()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/archive.html#ArchiveManager">ArchiveManager</a> interface and set the mode as <span style="font-family: Courier New,Courier,monospace">w</span>:</p>
+<li><p>To create the archive file, use the <span style="font-family: Courier New,Courier,monospace">open()</span> method of the <span style="font-family: Courier New,Courier,monospace">ArchiveManager</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/archive.html#ArchiveManager">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/archive.html#ArchiveManager">wearable</a> applications) and set the mode as <span style="font-family: Courier New,Courier,monospace">w</span>:</p>
<pre class="prettyprint">
tizen.archive.open("downloads/new_archive.zip", "w", createSuccess);</pre>
</pre>
</li>
</ol>
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="extract" name="extract" class="items-tit-h2">Extracting Files from an Archive</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="extract" name="extract">Extracting Files from an Archive</h2>
<p>Extracting a file from an archive is a basic archive management skill:</p>
<ol>
<li>
-<p>To access an archive file, use the <span style="font-family: Courier New,Courier,monospace">open()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/archive.html#ArchiveManager">ArchiveManager</a> interface. The "r" mode is suitable for extracting from the archive.</p>
+<p>To access an archive file, use the <span style="font-family: Courier New,Courier,monospace">open()</span> method of the <span style="font-family: Courier New,Courier,monospace">ArchiveManager</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/archive.html#ArchiveManager">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/archive.html#ArchiveManager">wearable</a> applications). The "r" mode is suitable for extracting from the archive.</p>
<pre class="prettyprint">
tizen.archive.open("downloads/some_archive.zip", "r", openSuccess, openError);</pre>
</li>
<li>To extract files:
-<ul class="ul">
+<ul>
<li>
-<p>To extract all files from the archive, use the <span style="font-family: Courier New,Courier,monospace">extractAll()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/archive.html#ArchiveFile">ArchiveFile</a> interface.</p>
+<p>To extract all files from the archive, use the <span style="font-family: Courier New,Courier,monospace">extractAll()</span> method of the <span style="font-family: Courier New,Courier,monospace">ArchiveFile</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/archive.html#ArchiveFile">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/archive.html#ArchiveFile">wearable</a> applications).</p>
<pre class="prettyprint">
function progressCallback(opId, val, name)
}</pre>
</li>
<li>
-<p>To extract only a selected file from the archive, use the <span style="font-family: Courier New,Courier,monospace">extract()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/archive.html#ArchiveFileEntry">ArchiveFileEntry</a> interface.</p>
+<p>To extract only a selected file from the archive, use the <span style="font-family: Courier New,Courier,monospace">extract()</span> method of the <span style="font-family: Courier New,Courier,monospace">ArchiveFileEntry</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/archive.html#ArchiveFileEntry">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/archive.html#ArchiveFileEntry">wearable</a> applications).</p>
<p>First, get the <span style="font-family: Courier New,Courier,monospace">archiveFileEntry</span> object using the <span style="font-family: Courier New,Courier,monospace">getEntryByName()</span> or <span style="font-family: Courier New,Courier,monospace">getEntries()</span> method of the <span style="font-family: Courier New,Courier,monospace">ArchiveFile</span> interface.</p>
<pre class="prettyprint">
</ul>
</li>
</ol>
- </div>
- </li>
-
- </ul>
-
-</div></div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Filesystem: Providing Access to the Device File System</h1>
-<div class="cont"><div class="static-cont">
<p>This tutorial demonstrates how you can control files and directories on the device.</p>
<p>Become familiar with the Filesystem API basics by learning about:</p>
<ul>
- <li><a
class="opensection" href="#manage">Managing File Storages</a> <p>Retrieve file storages and storage details, and subscribe to notifications on storage state changes.</p> </li>
- <li><a
class="opensection" href="#create">Creating and Deleting Files and Directories</a> <p>Create and delete files and directories in the file system.</p> </li>
- <li><a
class="opensection" href="#retrieve">Retrieving Files and File Details</a> <p>Retrieve a list of files in a directory, the URI of the file, or the file content as a <span style="font-family: Courier New,Courier,monospace">DOMString</span>.</p></li>
- <li><a
class="opensection" href="#file_dir">Managing Files and Directories</a> <p>Open, read, write, copy, move, and close files and directories.</p></li>
+ <li><a href="#manage">Managing File Storages</a> <p>Retrieve file storages and storage details, and subscribe to notifications on storage state changes.</p> </li>
+ <li><a href="#create">Creating and Deleting Files and Directories</a> <p>Create and delete files and directories in the file system.</p> </li>
+ <li><a href="#retrieve">Retrieving Files and File Details</a> <p>Retrieve a list of files in a directory, the URI of the file, or the file content as a <span style="font-family: Courier New,Courier,monospace">DOMString</span>.</p></li>
+ <li><a href="#file_dir">Managing Files and Directories</a> <p>Open, read, write, copy, move, and close files and directories.</p></li>
</ul>
<h2>Task</h2>
<p>In the <a href="task_filemanager_w.htm">File Manager</a> task, we will walk through how to manage files in your application.</p>
- <div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
-
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="manage" name="manage" class="items-tit-h2">Managing File Storages</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="manage" name="manage">Managing File Storages</h2>
<p>Learning how to manage file storages is a basic data management skill:</p>
<ol>
<li><p>To stop receiving the notifications, use the <span style="font-family: Courier New,Courier,monospace">removeStorageStateChangeListener()</span> method:</p> <pre class="prettyprint">
tizen.filesystem.removeStorageStateChangeListener(watchID);</pre> </li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="create" name="create" class="items-tit-h2">Creating and Deleting Files and Directories</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="create" name="create">Creating and Deleting Files and Directories</h2>
<p>Learning how to create and delete files and directories is a basic data management skill:</p>
<ol>
documentsDir.deleteDirectory(newDir.fullPath, false, onDelete);
anotherNewDir.parent.deleteDirectory(anotherNewDir.fullPath, false, onDelete);</pre> </li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="retrieve" name="retrieve" class="items-tit-h2">Retrieving Files and File Details</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="retrieve" name="retrieve">Retrieving Files and File Details</h2>
<p>Learning how to get files and file details from the file system is a basic data management skill:</p>
<ol>
}
}</pre> </li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="file_dir" name="file_dir" class="items-tit-h2">Managing Files and Directories</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="file_dir" name="file_dir">Managing Files and Directories</h2>
<p>Learning how to read and write to files, and move and copy files and directories, is a basic data management skill:</p>
<ol>
}
</pre> </li>
</ol>
- </div>
- </li>
-
- </ul>
-</div>
-</div>
+
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<p>The input/output tutorials demonstrate how to use the following features in creating Tizen Web applications:</p>
<ul>
+ <li><a href="archive_tutorial_w.htm">Archive: Creating an Archive File as Well as Various Other Kinds of Manipulation</a> <p>Demonstrates how you can create, browse, and extract ZIP archives.</p></li>
<li><a href="filesystem_tutorial_w.htm">Filesystem: Providing Access to the Device File System</a> <p>Demonstrates how you can control local files and file operations, retrieve and monitor storage information, and access the sandboxed sections of the local file system to search, create, and delete a directory or file.</p></li>
<li><a href="message_port_tutorial_w.htm">Message Port: Communicating with Other Applications</a> <p>Demonstrates how you can send and receive messages through message ports.</p></li>
</ul>
-<p>The following tutorials apply in <span style="color: red">mobile applications only</span>:</p>
-<ul>
- <li><a href="archive_tutorial_w.htm">Archive: Creating an Archive File as Well as Various Other Kinds of Manipulation</a> <p>Demonstrates how you can create, browse, and extract ZIP archives.</p></li>
-</ul>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Message Port: Communicating with Other Applications</h1>
-<div class="cont"><div class="static-cont">
<p>This tutorial demonstrates how you can send and receive messages through message ports.</p>
<h2>Warm-up</h2>
<p>Become familiar with the Message Port API basics by learning about:</p>
<ul>
- <li><a
class="opensection" href="#Manage_Message_Port">Managing Message Ports</a> <p>Send and receive messages.</p> </li>
+ <li><a href="#Manage_Message_Port">Managing Message Ports</a> <p>Send and receive messages.</p> </li>
</ul>
-
- <!-- Show / Hide all links -->
- <div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
- <!-- Folds -->
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="Manage_Message_Port" name="Manage_Message_Port" class="items-tit-h2">Managing Message Ports</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="Manage_Message_Port" name="Manage_Message_Port">Managing Message Ports</h2>
<p>Learning how to send messages to and receive responses from other Tizen applications through message ports is a basic data communication skill:</p>
<ol>
</ol>
<p>To implement the application receiving the message as a native application, see the mobile native <a href="../../../native/app_framework/message_port_tutorial_n.htm">Message Port Tutorial</a>.</p>
-</div></li></ul>
-</div></div>
+
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</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 SDK, demonstrates how you can use the
<span style="font-family: Courier New,Courier,monospace">Filesystem</span> 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/downloads/sample-applications/sample-mobile-applications" target="blank">FileManager</a>.</p>
+ <p>This task, based on the FileManager sample delivered with the Tizen SDK, 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/downloads/sample-applications/sample-mobile-applications" target="blank">FileManager</a>.</p>
<p>This task consists of the following parts:</p>
- <ul class="ul">
+ <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>
<p>The following figure shows the main screens of the application.</p>
<p class="figure">Figure: FileManager screen</p>
- <p
style="text-align: center;"><img alt="FileManager screen" src="../../../images/filemanager.png" /></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 class="tutorstep">
<li>app.ui.templateManager.js Source File
- <ol>
+ <ol type="a">
<li>
<p>The template manager loads the template files into the cache.</p>
<pre class="prettyprint">
}</pre></li>
<li>Pasting Content from the Clipboard
- <ol><li><p>The <span style="font-family: Courier New,Courier,monospace;">pasteClipboard()</span> 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>
+ <ol
type="a"><li><p>The <span style="font-family: Courier New,Courier,monospace;">pasteClipboard()</span> 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();
<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>Media Controller: Communication between the media controller server and client.</title>
+ <title>Media Controller: Communicating between the Media Controller Server and Client</title>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a href="#example1">Creating a new server</a></li>
- <li><a href="#example2">Getting a client and finding all active servers</a></li>
- <li><a href="#example3">Setting up a server</a></li>
- <li><a href="#example4">Sending requests from a client to a server</a></li>
- <li><a href="#example5">Receiving notifications from a server</a></li>
- <li><a href="#example6">Sending custom commands by a client</a></li>
- <li><a href="#example7">Receiving and handling custom commands by a server</a></li>
+ <li><a href="#create">Getting the Client and Server</a></li>
+ <li><a href="#request">Managing Requests</a></li>
+ <li><a href="#noti">Receiving Notifications from the Server</a></li>
+ <li><a href="#commands">Sending and Receiving Custom Commands</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
</div>
<div id="container"><div id="contents"><div class="content">
-<h1>Media Controller: Communication between the media controller server and client.</h1>
-
+<h1>Media Controller: Communicating between the Media Controller Server and Client</h1>
<p>
-This tutorial demonstrates how to use Media Controller API. It shows how to develop server and client applications for controlling various media functions of the device.
-In order to manage media using Media Controller API you have to develop two applications. One is a client and the second is a server which directly manages media on the device.
-The client sends requests to the server in order to change playback state, position modes etc.
-</p>
+This tutorial demonstrates how you can to develop server and client applications for controlling various media functions of the device.</p>
<table class="note">
<tbody>
<h2>Warm-up</h2>
<p>Become familiar with the Media Controller API basics by learning about:</p>
<ul>
- <li>
- <p>Creating a client and a server</p>
- <p><a href="#example1">Creating a new Media Controller server</a>.</p>
- <p>How to <a href="#example2">get a client</a> and how to find all active servers.</p>
- </li>
- <li>
- <p>Setting up connection between the client and the server and sending and receiving requests from the client to the server</p>
- <p>How to <a href="#example3">set up the server</a> to receive and handle requests from the client in order to change playback state and position.</p>
- <p>How to <a href="#example4">send requests</a> by the client to the server.</p>
- </li>
- <li>
- <p>Listenign changes on the server by the client</p>
- <p>How to <a href="#example5">set up a listener on the client</a> to receive notification of changes made by the server.</p>
- </li>
- <li>
- <p>Sending and handling custom commands</p>
- <p>How <a href="#example6">the client sends custom commands</a> to the server.</p>
- <p>How <a href="#example7">the server receives and handles</a> custom commands sent by the client.</p>
- </li>
+ <li><a href="#create">Getting the Client and Server</a>
+ <p>Create a server, and get a client and find all active servers.</p> </li>
+ <li><a href="#request">Managing Requests</a>
+ <p>Send a request from the client and handle it in the server.</p></li>
+ <li><a href="#noti">Receiving Notifications from the Server</a>
+ <p>Receive notifications when the server makes changes in the play modes.</p></li>
+ <li><a href="#commands">Sending and Receiving Custom Commands</a>
+ <p>Send a custom command from the client, and receive and handle it in the server.</p></li>
</ul>
-<h2 id="task" name="task">Task</h2>
-<p>In this task, we will walk through how to change playback state and position by the Media Controller client and how to send custom commands from the client to the server.</p>
-<div class="devicespecs-util mt7 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
-</div>
+<h2 id="create" name="create">Getting the Client and Server</h2>
-<ul class="devicespecifications">
+<p>To manage the media controller features in your application, you must learn to set up the client and server pair:</p>
-<li>
-<div class="devicespec-tit">
- <h2 id="example1" name="example1" class="items-tit-h2">Creating a new server</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
-</div>
-
-<div class="devicespec-con">
-
-<p>Create new server.</p>
<ol>
<li>Create a media controller server using the <span style="font-family: Courier New,Courier,monospace">createServer()</span> method:
<pre class="prettyprint">
var mcServer = tizen.mediacontroller.createServer();
</pre>
</li>
-</ol>
-</div>
-</li>
-
-<li>
-<div class="devicespec-tit">
- <h2 id="example2" name="example2" class="items-tit-h2">Getting a client and finding all active servers</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
-</div>
-
-<div class="devicespec-con">
-
-<p>To create applications with media controller features, you have to learn how to get client and find media controller servers.</p>
-<ol>
<li>Get the client using the <span style="font-family: Courier New,Courier,monospace">getClient()</span> method:
<pre class="prettyprint">
</pre>
</li>
-<li>Before searching activated media controller servers define success handler implementing the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/mediacontroller.html#MediaControllerServerInfoArraySuccessCallback">MediaControllerServerInfoArraySuccessCallback</a> interface and optionally an error handler:
+<li>Define a success (and optionally error) event handler by implementing the <span style="font-family: Courier New,Courier,monospace">MediaControllerServerInfoArraySuccessCallback</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/mediacontroller.html#MediaControllerServerInfoArraySuccessCallback">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/mediacontroller.html#MediaControllerServerInfoArraySuccessCallback">wearable</a> applications):
<pre class="prettyprint">
var mcServerInfo;
-function findSuccessCallback(servers) {
+function findSuccessCallback(servers)
+{
console.log("Found " + servers.length + " servers");
- if (servers.length > 0) {
+ if (servers.length > 0)
+ {
mcServerInfo = servers[0];
}
}
-function findErrorCallback(e) {
+function findErrorCallback(e)
+{
console.log("Error name: " + e.name + " Error message: " + e.message);
}
</pre>
</li>
-<li>To get all media controller servers use <span style="font-family: Courier New,Courier,monospace">findServers()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/mediacontroller.html#MediaControllerClient">MediaControllerClient</a> interface:
+<li>To search for all activated media controller servers, use the <span style="font-family: Courier New,Courier,monospace">findServers()</span> method of the <span style="font-family: Courier New,Courier,monospace">MediaControllerClient</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/mediacontroller.html#MediaControllerClient">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/mediacontroller.html#MediaControllerClient">wearable</a> applications):
<pre class="prettyprint">
mcClient.findServers(findSuccessCallback, findErrorCallback);</pre>
</li>
</ol>
-</div>
-</li>
-<li>
-<div class="devicespec-tit">
- <h2 id="example3" name="example3" class="items-tit-h2">Setting up a server</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
-</div>
+<h2 id="request" name="request">Managing Requests</h2>
-<div class="devicespec-con">
-<p>Set up the server to receive requests from the client and to update state, position etc.</p>
+<p>To manage the media controller features in your application, you must learn to handle requests from the client to the server:</p>
<ol>
-<li>Create <span style="font-family: Courier New,Courier,monospace">MediaControllerChangeRequestPlaybackInfoCallback</span> object which defines listeners for getting requests from a client:
+<li>Create a <span style="font-family: Courier New,Courier,monospace">MediaControllerChangeRequestPlaybackInfoCallback</span> object (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/mediacontroller.html#MediaControllerChangeRequestPlaybackInfoCallback">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/mediacontroller.html#MediaControllerChangeRequestPlaybackInfoCallback">wearable</a> applications) to define listeners for getting the requests from a client.
+
+<p>Each listener must invoke the appropriate function to perform the related update on the server and send an appropriate notification to the client. For example, the <span style="font-family: Courier New,Courier,monospace">onplaybackstaterequest</span> listener must use the <span style="font-family: Courier New,Courier,monospace">updatePlaybackState()</span> method to update the playback state.</p>
+
<pre class="prettyprint">
-var requestPlaybackInfoCb = {
- onplaybackstaterequest: function(state) {
- console.log('Request to change the playback state to: ' + state);
- mcServer.updatePlaybackState(state);
- },
- onplaybackpositionrequest: function(position) {
- console.log('Request to change the playback position to: ' + position);
- mcServer.updatePlaybackPosition(position);
- },
- onshufflemoderequest: function(mode) {
- console.log('Request to change the playback shufflemode to: ' + (mode ? 'TRUE' : 'FALSE'));
- mcServer.updateShuffleMode(mode);
- },
- onrepeatmoderequest: function(mode) {
- console.log('Request to change the playback repeat mode to: ' + (mode ? 'TRUE' : 'FALSE'));
- mcServer.updateRepeatMode(mode);
- }
+var requestPlaybackInfoCb =
+{
+ onplaybackstaterequest: function(state)
+ {
+ console.log('Request to change the playback state to: ' + state);
+ mcServer.updatePlaybackState(state);
+ },
+ onplaybackpositionrequest: function(position)
+ {
+ console.log('Request to change the playback position to: ' + position);
+ mcServer.updatePlaybackPosition(position);
+ },
+ onshufflemoderequest: function(mode)
+ {
+ console.log('Request to change the playback shuffle mode to: ' + (mode ? 'TRUE' : 'FALSE'));
+ mcServer.updateShuffleMode(mode);
+ },
+ onrepeatmoderequest: function(mode)
+ {
+ console.log('Request to change the playback repeat mode to: ' + (mode ? 'TRUE' : 'FALSE'));
+ mcServer.updateRepeatMode(mode);
+ }
};
</pre>
-Every listener should invoke an appropriate function to update state, position and modes. They are:
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">updatePlaybackState()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">updatePlaybackPosition()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">updateShuffleMode()</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">updateRepeatMode()</span></li>
-</ul>
-These functions change the values on the server and send an appropriate notifications to the client.
</li>
-<li>Add listeners defined in <span style="font-family: Courier New,Courier,monospace">MediaControllerChangeRequestPlaybackInfoCallback</span> object to the server.
+<li>Add the listeners defined in the <span style="font-family: Courier New,Courier,monospace">MediaControllerChangeRequestPlaybackInfoCallback</span> object to the server:
<pre class="prettyprint">
var watchId = mcServer.addChangeRequestPlaybackInfoListener(requestPlaybackInfoCb);
</pre>
-The <span style="font-family: Courier New,Courier,monospace">watchId</span> variable stores the value which can be used in the future to remove the listeners from the server with the function
-<span style="font-family: Courier New,Courier,monospace">removeChangeRequestPlaybackInfoListener</span>.
-</li>
-
-</ol>
-</div>
+<p>The <span style="font-family: Courier New,Courier,monospace">watchId</span> variable stores the value, which can be used in the future to remove the listeners from the server using the <span style="font-family: Courier New,Courier,monospace">removeChangeRequestPlaybackInfoListener()</span> method.</p>
</li>
-<li>
-<div class="devicespec-tit">
- <h2 id="example4" name="example4" class="items-tit-h2">Sending requests from a client to a server</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
-</div>
-
-<div class="devicespec-con">
-
-<p>After getting client and finding servers you have to learn how to send request to the server. You can send requests to the server using <span style="font-family: Courier New,Courier,monospace">sendPlaybackState(), sendPlaybackPosition(), endShuffleMode() or sendRepeatMode()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/mediacontroller.html#MediaControllerServerInfo">MediaControllerServerInfo</a> interface.</p>
-<ol>
-<li>In this example you can learn, how to send request to pause playback. Before sending request you can define optional success and error callback:
+<li>At the client side, before sending a request, define optional success and error callbacks:
<pre class="prettyprint">
-function successCallback() {
+function successCallback()
+{
console.log("Playback has been paused.");
}
-function errorCallback(e) {
+function errorCallback(e)
+{
console.log("Error name: " + e.name + " Error message: " + e.message);
}
</pre>
</li>
-<li>Send request to the server using <span style="font-family: Courier New,Courier,monospace">sendPlaybackState()</span> method:
+<li>You can send a request from the client using the <span style="font-family: Courier New,Courier,monospace">sendPlaybackState()</span>, <span style="font-family: Courier New,Courier,monospace">sendPlaybackPosition()</span>, <span style="font-family: Courier New,Courier,monospace">endShuffleMode()</span>, or <span style="font-family: Courier New,Courier,monospace">sendRepeatMode()</span> method of the <span style="font-family: Courier New,Courier,monospace">MediaControllerServerInfo</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/mediacontroller.html#MediaControllerServerInfo">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/mediacontroller.html#MediaControllerServerInfo">wearable</a> applications).
+<p>In the following example, send a request for the changing the playback state to paused using the <span style="font-family: Courier New,Courier,monospace">sendPlaybackState()</span> method:
+</p>
<pre class="prettyprint">
mcServerInfo.sendPlaybackState("PAUSE", successCallback, errorCallback);
</li>
</ol>
-</div>
-</li>
-
-<li>
-<div class="devicespec-tit">
- <h2 id="example5" name="example5" class="items-tit-h2">Receiving notifications from a server</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
-</div>
-<div class="devicespec-con">
+<h2 id="noti" name="noti">Receiving Notifications from the Server</h2>
-<p>To create applications with media controller features you have to learn how to receive notifications from the server.</p>
+<p>To manage the media controller features in your application, you must learn to receive notifications from the server:</p>
<ol>
-<li>Define needed variable:
+<li>Define the needed variable:
<pre class="prettyprint">
var watcherId;
</pre>
</li>
-<li>Define the event handlers for different notifications by implementing the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/mediacontroller.html#MediaControllerPlaybackInfoChangeCallback">MediaControllerPlaybackInfoChangeCallback</a> interface:
+<li>Define the event handlers for different notifications by implementing the <span style="font-family: Courier New,Courier,monospace">MediaControllerPlaybackInfoChangeCallback</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/mediacontroller.html#MediaControllerPlaybackInfoChangeCallback">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/mediacontroller.html#MediaControllerPlaybackInfoChangeCallback">wearable</a> applications):
<pre class="prettyprint">
-var playbackListener = {
- onplaybackchanged: function(state, position) {
+var playbackListener =
+{
+ onplaybackchanged: function(state, position)
+ {
console.log("Current playback state: " + state);
console.log("Current playback position: " + position);
},
- onshufflemodechanged: function(mode) {
+ onshufflemodechanged: function(mode)
+ {
console.log("Shuffle mode changed to: " + mode);
},
- onrepeatmodechanged: function(mode) {
+ onrepeatmodechanged: function(mode)
+ {
console.log("Repeat mode changed to: " + mode);
- },
- onmetadatachanged: function(metadata) {
+ },
+ onmetadatachanged: function(metadata)
+ {
console.log("Playback metadata changed: " + JSON.stringify(metadata));
}
};
</pre>
</li>
-<li>Register listener to start receiving notifications about playback:
+<li>Register the listener to start receiving notifications about playback changes:
<pre class="prettyprint">
watcherId = mcServerInfo.addPlaybackInfoChangeListener(playbackListener);
</pre>
</li>
-<li>To stop receiving notifications, use <span style="font-family: Courier New,Courier,monospace">removePlaybackInfoChangeListener()</span> method:
+<li>To stop receiving notifications, use the <span style="font-family: Courier New,Courier,monospace">removePlaybackInfoChangeListener()</span> method:
<pre class="prettyprint">
mcServerInfo.removePlaybackInfoChangeListener(watcherId);
</li>
</ol>
-</div>
-</li>
-<li>
-<div class="devicespec-tit">
- <h2 id="example6" name="example6" class="items-tit-h2">Sending custom commands by a client</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
-</div>
-<div class="devicespec-con">
+<h2 id="commands" name="commands">Sending and Receiving Custom Commands</h2>
-<p>Except sending requests to the media controller server you have to learn also, how to send custom commands.</p>
+<p>To manage the media controller features in your application, you must learn to send custom commands:</p>
<ol>
-<li>Define your command:
+<li id="send_command">On the client side:
+<ol><li>Define your custom command:
<pre class="prettyprint">
-var exampleCustomCommandData = {
+var exampleCustomCommandData =
+{
myFilter: "rock"
};
</pre>
</li>
-<li>Define success callback implementing the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/mediacontroller.html#MediaControllerSendCommandSuccessCallback">MediaControllerSendCommandSuccessCallback</a> interface and optionally an error callback:
+<li>Define a success (and optionally error) callback implementing the <span style="font-family: Courier New,Courier,monospace">MediaControllerSendCommandSuccessCallback</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/mediacontroller.html#MediaControllerSendCommandSuccessCallback">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/mediacontroller.html#MediaControllerSendCommandSuccessCallback">wearable</a> applications):
<pre class="prettyprint">
-function sendCommandSuccessCallback(response) {
+function sendCommandSuccessCallback(response)
+{
console.log("Command executed with result: " + JSON.stringify(response));
}
-function sendCommandErrorCallback(e) {
+function sendCommandErrorCallback(e)
+{
console.log("Error name: " + e.name + " Error message: " + e.message);
}
</pre>
</li>
-<li>Send command to the server using the <span style="font-family: Courier New,Courier,monospace">sendCommand()</span> method.
+<li>Send the command to the server using the <span style="font-family: Courier New,Courier,monospace">sendCommand()</span> method:
<pre class="prettyprint">
mcServerInfo.sendCommand("myPlaylistFilter", sendCommandSuccessCallback, sendCommandErrorCallback);
</pre>
</li>
-</ol>
-</div>
-</li>
+</ol></li>
+<li id="receive_command">On the server side:
-<li>
-<div class="devicespec-tit">
- <h2 id="example7" name="example7" class="items-tit-h2">Receiving and handling custom commands by a server</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
-</div>
-
-<div class="devicespec-con">
-
-<p>Set up a server to receive and handle custom commands sent by a client.</p>
<ol>
-<li>Create the <span style="font-family: Courier New,Courier,monospace">MediaControllerReceiveCommandCallback</span> object which defines a listener for receving custom commands from a client:
+<li>Create the <span style="font-family: Courier New,Courier,monospace">MediaControllerReceiveCommandCallback</span> object (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/mediacontroller.html#MediaControllerReceiveCommandCallback">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/mediacontroller.html#MediaControllerReceiveCommandCallback">wearable</a> applications) to define a listener for receiving custom commands from a client:
<pre class="prettyprint">
-var commandReceiveListener = function(client, command, data) {
- console.log('command: ' + command + ' client: ' + client + ' data: ' + JSON.stringify(data));
- return { reply: 'response from server' };
+var commandReceiveListener = function(client, command, data)
+{
+ console.log('command: ' + command + ' client: ' + client + ' data: ' + JSON.stringify(data));
+
+ return {reply: 'response from server'};
};
</pre>
-The included callback function returns the object with the response to the client. The client can obtain this value as an argument of the success callback of the function
-<span style="font-family: Courier New,Courier,monospace">sendCommand()</span>
-invoked by the client when it is sending the custom command.
+<p>The callback function within the listener returns the object with the response to the client. The client can obtain this value as an argument of the success callback of the <span style="font-family: Courier New,Courier,monospace">sendCommand()</span> method that it used to send the command.</p>
</li>
-<li>Add the listener included in the created <span style="font-family: Courier New,Courier,monospace">MediaControllerReceiveCommandCallback</span> object to the server.
+<li>Add the listener defined in the <span style="font-family: Courier New,Courier,monospace">MediaControllerReceiveCommandCallback</span> object to the server:
<pre class="prettyprint">
var watcherId = mcServer.addCommandListener(commandReceiveListener);
</pre>
-The <span style="font-family: Courier New,Courier,monospace">watcherId</span> variable stores the value which can be used in the future to remove the listener from the server with the function
-<span style="font-family: Courier New,Courier,monospace">removeCommandListener()</span>.
+<p>The <span style="font-family: Courier New,Courier,monospace">watcherId</span> variable stores the value, which can be used in the future to remove the listener from the server using the <span style="font-family: Courier New,Courier,monospace">removeCommandListener()</span> method.</p>
</li>
-</ol>
-</div>
-</li>
-
-</ul>
-
-
+</ol></li></ol>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/> <img alt="Wearable Web" src="../../../images/ww_icon_optional.png"/></p>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Media Key: Controlling Multimedia Playback</h1>
- <div class="cont"><div class="static-cont">
<p>This tutorial demonstrates how you can control multimedia playback.</p>
<h2>Warm-up</h2>
<p>Become familiar with the Media Key API basics by learning about:</p>
<ul>
- <li><a
class="opensection" href="#state">Managing Media Key State Changes</a> <p>Register a listener and monitor changes in the media key states.</p> </li>
+ <li><a href="#state">Managing Media Key State Changes</a> <p>Register a listener and monitor changes in the media key states.</p> </li>
</ul>
- <div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
-
- <ul class="devicespecifications">
-
- <li>
- <div class="devicespec-tit">
- <h2 id="state" name="state" class="items-tit-h2">Managing Media Key State Changes</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="state" name="state">Managing Media Key State Changes</h2>
<p>Learning how to register key event listener is a basic media key management skill:</p>
<ol>
tizen.mediakey.unsetMediaKeyEventListener();</pre>
</li></ol>
-</div>
- </li>
-
- </ul>
-
-</div></div>
+
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<p>The multimedia tutorials demonstrate how to use the following features in creating Tizen Web applications:</p>
<ul>
+ <li><a href="media_controller_tutorial_w.htm">Media Controller: Communicating between the Media Controller Server and Client</a> <p>Demonstrates how you can communicate between the media controller server and client.</p></li>
<li><a href="media_key_tutorial_w.htm">Media Key: Controlling Multimedia Playback</a> <p>Demonstrates how you can control multimedia playback.</p></li>
<li><a href="sound_tutorial_w.htm">Sound: Controlling the Sound Volume Level and the Sound Devices</a> <p>Demonstrates how you can manage the device volume levels and the sound devices.</p></li>
</ul>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Service Application: Creating a Service Application</h1>
- <div class="cont"><div class="static-cont">
<p>This tutorial demonstrates how you can create a service application and implement specific features within the service application.</p>
<p>Terminate a service application</p></li>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
-
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="create" name="create" class="items-tit-h2">Creating a Service Application</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="create" name="create">Creating a Service Application</h2>
<p>Learning how to create a service application is a basic application management skill:</p>
console.log("service terminate");
}
</pre></li></ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="package" name="package" class="items-tit-h2">Packaging a Service Application</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="package" name="package">Packaging a Service Application</h2>
<p>Learning how to package a service application is a basic application management skill:</p>
-<p>A widget package can contain 1 Web UI application and several service applications. Each application in the widget package shares the same package ID and has a unique application ID. In the following example, you can use the <span style="font-family: Courier New,Courier,monospace"><tizen:application></span> element to contain information for the Web UI application. The <span style="font-family: Courier New,Courier,monospace"><tizen:service></span> element is used to contain information about the service application. The UI application and the service application have the same package ID and different application IDs.</p>
+<p>A Web application package can contain 1 Web UI application and several service applications. Each application in the Web application package shares the same package ID and has a unique application ID. In the following example, you can use the <span style="font-family: Courier New,Courier,monospace"><tizen:application></span> element to contain information for the Web UI application. The <span style="font-family: Courier New,Courier,monospace"><tizen:service></span> element is used to contain information about the service application. The UI application and the service application have the same package ID and different application IDs.</p>
<ol><li>Define the service in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file.
<p>The <span style="font-family: Courier New,Courier,monospace"><tizen:service></span> element allows you to define the characteristics of the service application. For example, you can specify the name, icon, and starting JavaScipt file of the service application.</p>
</widget>
</pre></li></ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="launch" name="launch" class="items-tit-h2">Launching a Service Application</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="launch" name="launch">Launching a Service Application</h2>
<p>Learning how to launch a service application is a basic application management skill:</p>
-<ul class="ul">
+<ul>
<li>Launch by other applications
<p>The Web application launches a service application by calling the <span style="font-family: Courier New,Courier,monospace">launch()</span> or <span style="font-family: Courier New,Courier,monospace">launchAppControl()</span> function with the service application ID:</p>
<pre class="prettyprint">
</pre>
</li>
</ul>
-</div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="terminate" name="terminate" class="items-tit-h2">Terminating a Service Application</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="terminate" name="terminate">Terminating a Service Application</h2>
<p>Learning how to terminate a service application is a basic application management skill:</p>
</pre>
</li>
</ol>
- </div>
- </li>
-
- </ul>
-</div>
-</div>
+
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Account: Managing Accounts and Account Information</h1>
- <div class="cont"><div class="static-cont">
<p>This tutorial demonstrates how you can manage accounts and retrieve account information.</p>
</li>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
-
- <ul class="devicespecifications">
-
- <li>
- <div class="devicespec-tit">
- <h2 id="get_account" name="get_account" class="items-tit-h2">Retrieving Accounts</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="get_account" name="get_account">Retrieving Accounts</h2>
<p>Learning how to retrieve account information enables you to include account support into your applications:</p>
-<ul class="ul">
+<ul>
<li>To retrieve information about all available accounts, use the <span style="font-family: Courier New,Courier,monospace">getAccounts()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/account.html#AccountManager">AccountManager</a> interface:
<pre class="prettyprint">function getAccountsSuccess(accounts)
{
for (var i = 0; i < accounts.length; i++)
{
- // Use the retrieved accounts
+ /* Use the retrieved accounts */
}
}
function getAccountsError(error)
<pre class="prettyprint">var account = tizen.account.getAccount(my_account_id);</pre>
</li>
</ul>
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="get_providers" name="get_providers" class="items-tit-h2">Retrieving Providers</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="get_providers" name="get_providers">Retrieving Providers</h2>
<p>To create accounts, you must learn how to get access to account providers:</p>
</tbody>
</table>
-<ul class="ul">
+<ul>
<li>Get a specific account provider with the given application ID using the <span style="font-family: Courier New,Courier,monospace">getProviders()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationManager">ApplicationManager</a> interface.
<p>If the current application is an account provider application (meaning that it contains the <a href="../../../../../org.tizen.devtools/html/web_tools/config_editor_w.htm#mw_account"><tizen:account></a> element in its <span style="font-family: Courier New,Courier,monospace">config.xml</span> file), you can use the current application ID. Otherwise, get the ID of the current application using the <span style="font-family: Courier New,Courier,monospace">getCurrentApplication()</span> method of the <span style="font-family: Courier New,Courier,monospace">ApplicationManager</span> interface:</p>
<pre class="prettyprint">function getProvidersSuccess(providers)
{
- // providers is an array whose members are providers with contact capability
+ /* Providers is an array whose members are providers with contact capability */
}
function getProvidersError(error)
{
tizen.account.getProviders(getProvidersSuccess, getProvidersError, "http://tizen.org/account/capability/contact");</pre>
</li>
</ul>
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="manage" name="manage" class="items-tit-h2">Managing Accounts</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="manage" name="manage">Managing Accounts</h2>
<p>Creating, adding, updating, and deleting accounts is a basic account management skill:</p>
<pre class="prettyprint">tizen.account.remove(account.id);</pre>
</li>
</ol>
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="listener" name="listener" class="items-tit-h2">Receiving Notifications on Account Changes</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="listener" name="listener">Receiving Notifications on Account Changes</h2>
<p>Learning how to register change listeners enables you to synchronize the view of your application with the changes in the account database:</p>
{
onadded: function(account)
{
- // Called when an account is added
+ /* Called when an account is added */
},
onremoved: function(accountId)
{
- // Called when an account is removed
+ /* Called when an account is removed */
},
onupdated: function(account)
{
- // Called when a registered account is changed
+ /* Called when a registered account is changed */
}
};</pre>
</li>
<pre class="prettyprint">tizen.account.removeAccountListener(watchId);</pre>
</li>
-</ol></div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="extend" name="extend" class="items-tit-h2">Managing Extended Account Data</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+</ol>
+ <h2 id="extend" name="extend">Managing Extended Account Data</h2>
<p>Learning how to manage extended data for an account enables you to include account support into your applications:</p>
<ol>
<li><a href="#get_account">Retrieve the account object</a>.</li>
<li>Manage the extended data for the retrieved account:
-<ul class="ul"><li>To set extended data:
+<ul><li>To set extended data:
<p>Set the additional information with the <span style="font-family: Courier New,Courier,monospace">setExtendedData()</span> method:</p>
<pre class="prettyprint">var key = 'nickname';
</li>
<li>To get extended data:
-<ul class="ul"><li>To retrieve extended data value for a specific key, use the <span style="font-family: Courier New,Courier,monospace">getExtendedData()</span> method:
+<ul><li>To retrieve extended data value for a specific key, use the <span style="font-family: Courier New,Courier,monospace">getExtendedData()</span> method:
<pre class="prettyprint">var key = 'accessToken';
var value = account.getExtendedData(key); </pre>
</li></ul></li></ul></li>
</ol>
- </div>
- </li>
-
- </ul>
-
-</div></div>
+
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Bookmark: Managing Web Browser Bookmarks</h1>
- <div class="cont"><div class="static-cont">
<p>This tutorial demonstrates how you can manage Tizen Web browser bookmarks on the device.</p>
<li><a href="#Retrieving_Bookmark">Retrieving the Bookmark List</a> <p>Retrieve a list of the current bookmarks in the root bookmark folder.</p> </li>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
-
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="Creating_Bookmark" name="Creating_Bookmark" class="items-tit-h2">Creating Bookmark Folders and Items</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="Creating_Bookmark" name="Creating_Bookmark">Creating Bookmark Folders and Items</h2>
<p>To create engaging applications with bookmark-related features, you must learn how to add bookmark folders and items to the root bookmark folder and subfolders:</p>
- <ul class="ul">
+ <ul>
<li>To add a folder and a bookmark to the root bookmark folder:
<ol>
<li><p>Create an instance of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bookmark.html#BookmarkFolder">BookmarkFolder</a> interface by specifying the bookmark folder name:</p> <pre class="prettyprint">
</ol> </li>
</ul>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="Deleting_Bookmark" name="Deleting_Bookmark" class="items-tit-h2">Deleting Bookmarks</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="Deleting_Bookmark" name="Deleting_Bookmark">Deleting Bookmarks</h2>
<p>To create engaging applications with bookmark-related features, you must learn how to delete bookmarks:</p>
<ol>
</pre> </li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="Retrieving_Bookmark" name="Retrieving_Bookmark" class="items-tit-h2">Retrieving the Bookmark List</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="Retrieving_Bookmark" name="Retrieving_Bookmark">Retrieving the Bookmark List</h2>
+
<p>To create engaging applications with bookmark-related features, you must learn how to retrieve the bookmarks:</p>
<ol>
<li><p>To retrieve bookmarks from a specific bookmark folder and its subfolders, use the <span style="font-family: Courier New,Courier,monospace">get()</span> method, specifying the bookmark folder name and setting the <span style="font-family: Courier New,Courier,monospace">recursive</span> parameter as <span style="font-family: Courier New,Courier,monospace">true</span>:</p> <pre class="prettyprint">tizen.bookmark.get(folder1, true);
</pre> </li>
</ol>
- </div>
- </li>
- </ul>
-</div>
-</div>
+
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Calendar: Managing Calendars and Calendar Events</h1>
-<div class="cont"><div class="static-cont">
<p>This tutorial demonstrates how you can manage calendars in the device to access, modify, add, and remove calendar items within a specified calendar on the device.</p>
</ul>
<h2 id="task" name="task">Task</h2>
<p>In the <a href="task_eventmanager_w.htm">Event Manager</a> task, we will walk through how to manage calendar events in your application.</p>
-
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
-
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="Creating_Calendar" name="Creating_Calendar" class="items-tit-h2">Creating a Calendar</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="Creating_Calendar" name="Creating_Calendar">Creating a Calendar</h2>
<p>Creating a new calendar is a basic calendar management skill:</p>
</pre></li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="Adding_Events" name="Adding_Events" class="items-tit-h2">Adding Events to a Calendar</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="Adding_Events" name="Adding_Events">Adding Events to a Calendar</h2>
<p>To create engaging applications with various calendar features, you must learn to add events to calendars:</p>
</pre></li>
<li><p>Add the <span style="font-family: Courier New,Courier,monospace">CalendarEvent</span> object to the default calendar with the <span style="font-family: Courier New,Courier,monospace">add()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#Calendar">Calendar</a> object.</p> <pre class="prettyprint">calendar.add(ev); /* ev.id attribute is generated */</pre> </li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="Adding_Events_Batch" name="Adding_Events_Batch" class="items-tit-h2">Adding Events to a Calendar in the Batch Mode</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="Adding_Events_Batch" name="Adding_Events_Batch">Adding Events to a Calendar in the Batch Mode</h2>
+
<p>To create engaging applications with various calendar features, you must learn to add events to calendars in the batch mode:</p>
<ol>
</tbody>
</table>
</li>
- </ol></div></li>
- <li>
- <div class="devicespec-tit">
- <h2 id="Managing_Event" name="Managing_Event" class="items-tit-h2">Managing a Single Calendar Event</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ </ol>
+
+ <h2 id="Managing_Event" name="Managing_Event">Managing a Single Calendar Event</h2>
<p>To create engaging applications with various calendar features, you must learn to manage a single calendar event:</p>
<ol>
myCalendar.remove(events[1].id);
}</pre> </li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="Updating_Event" name="Updating_Event" class="items-tit-h2">Updating Recurring Calendar Events</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="Updating_Event" name="Updating_Event">Updating Recurring Calendar Events</h2>
<p>To create engaging applications with various calendar features, you must learn to update recurring calendar events:</p>
<ol>
}
</pre> </li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="Managing_Event_Batch" name="Managing_Event_Batch" class="items-tit-h2">Managing Multiple Calendar Events in the Batch Mode</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="Managing_Event_Batch" name="Managing_Event_Batch">Managing Multiple Calendar Events in the Batch Mode</h2>
<p>To create engaging applications with various calendar features, you must learn to manage multiple calendar events in the batch mode:</p>
<ol>
</table> </li>
<li>To update events:
- <ol>
+ <ol type="a">
<li><p>Define the items to be updated in the success event handler of the <span style="font-family: Courier New,Courier,monospace">find()</span> method:</p> <pre class="prettyprint">
function eventSearchSuccessCallback(events)
{
}
</pre> </li>
</ol>
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="Converting_Event" name="Converting_Event" class="items-tit-h2">Converting Calendar Event Formats</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="Converting_Event" name="Converting_Event">Converting Calendar Event Formats</h2>
<p>The following examples illustrate how to make calendar event exchange more efficient in your application by converting the calendar events to iCalendar format or the other way around using the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarEvent">CalendarEvent</a> constructor and the <span style="font-family: Courier New,Courier,monospace">convertToString()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#Calendar">Calendar</a> object respectively:</p>
- <ul class="ul">
+ <ul>
<li>To convert an iCalendar string to a calendar event:
<ol>
<li><p>Retrieve the default system calendar using the <span style="font-family: Courier New,Courier,monospace">getDefaultCalendar()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarManager">CalendarManager</a> interface.</p> <p>With the parameter, specify the calendar type as event.</p> <pre class="prettyprint">
</ol>
<p>To export and convert multiple events from a calendar, find the required events using the <span style="font-family: Courier New,Courier,monospace">find()</span> method with an applicable filter, and then convert the found events one by one.</p> </li></ul>
- </div></li>
- <li>
- <div class="devicespec-tit">
- <h2 id="Adding_Tasks" name="Adding_Tasks" class="items-tit-h2">Adding Tasks to a Calendar</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="Adding_Tasks" name="Adding_Tasks">Adding Tasks to a Calendar</h2>
<p>To create engaging applications with various calendar features, you must learn to add tasks to calendars:</p>
<ol>
</pre></li>
<li><p>Add the <span style="font-family: Courier New,Courier,monospace">CalendarTask</span> object to the default calendar with the <span style="font-family: Courier New,Courier,monospace">add()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#Calendar">Calendar</a> object:</p> <pre class="prettyprint">calendar.add(task); /* task.id attribute is generated */</pre> </li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="Adding_Tasks_Batch" name="Adding_Tasks_Batch" class="items-tit-h2">Adding Tasks to a Calendar in the Batch Mode</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="Adding_Tasks_Batch" name="Adding_Tasks_Batch">Adding Tasks to a Calendar in the Batch Mode</h2>
<p>To create engaging applications with various calendar features, you must learn to add tasks to calendars in the batch mode:</p>
<ol>
</table>
</li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="Managing_Task" name="Managing_Task" class="items-tit-h2">Managing a Single Calendar Task</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="Managing_Task" name="Managing_Task">Managing a Single Calendar Task</h2>
<p>To create engaging applications with various calendar features, you must learn to manage a single calendar task:</p>
<ol>
myCalendar.remove(tasks[1].id);
}</pre> </li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="Managing_Task_Batch" name="Managing_Task_Batch" class="items-tit-h2">Managing Multiple Calendar Tasks in the Batch Mode</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="Managing_Task_Batch" name="Managing_Task_Batch">Managing Multiple Calendar Tasks in the Batch Mode</h2>
<p>To create engaging applications with various calendar features, you must learn to manage multiple calendar tasks in the batch mode:</p>
<ol>
</tbody>
</table> </li>
<li>To update tasks:
- <ol>
+ <ol type="a">
<li><p>Define the items to be updated in the success event handler of the <span style="font-family: Courier New,Courier,monospace">find()</span> method:</p> <pre class="prettyprint open-bottom">
function taskSearchSuccessCallback(tasks)
{
}
</pre> </li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="Converting_Task" name="Converting_Task" class="items-tit-h2">Converting Calendar Task Formats</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="Converting_Task" name="Converting_Task">Converting Calendar Task Formats</h2>
<p>The following examples illustrate how to make calendar task exchange more efficient in your application by converting the calendar task to iCalendar format or the other way around using the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarTask">CalendarTask</a> constructor and the <span style="font-family: Courier New,Courier,monospace">convertToString()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#Calendar">Calendar</a> object respectively:</p>
- <ul class="ul">
+ <ul>
<li>To convert an iCalendar string to a calendar task:
<ol>
<li><p>Retrieve the default system calendar using the <span style="font-family: Courier New,Courier,monospace">getDefaultCalendar()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#CalendarManager">CalendarManager</a> interface.</p> <p>With the parameter, specify the calendar type as task.</p> <pre class="prettyprint">
</pre> </li>
</ol> <p>To export and convert multiple tasks from a calendar, find the required tasks using the <span style="font-family: Courier New,Courier,monospace">find()</span> method with an applicable filter, and then convert the found tasks one by one.</p> </li>
</ul>
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="Receiving_Calendar" name="Receiving_Calendar" class="items-tit-h2">Receiving Notifications on Calendar Changes</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="Receiving_Calendar" name="Receiving_Calendar">Receiving Notifications on Calendar Changes</h2>
<p>To create engaging applications with various calendar features, you must learn to receive notifications when calendar items are added, updated, or removed:</p>
<ol>
}
</pre> </li>
</ol>
- </div>
- </li>
- </ul>
-</div>
-</div>
+
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/></p>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Call History: Managing the Call History on the Device</h1>
- <div class="cont"><div class="static-cont">
<p>This tutorial demonstrates how you can manage and monitor the call history.</p>
<h2 id="task" name="task">Task</h2>
<p>In the <a href="task_calllog_w.htm">Call Log</a> task, we will walk through how to manage call logs in your application.</p>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
-
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="Searching_Call_History" name="Searching_Call_History" class="items-tit-h2">Searching for Call History Items</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="Searching_Call_History" name="Searching_Call_History">Searching for Call History Items</h2>
<p>Learning how to retrieve call history items using different parameters allows you to view specific items in a specific order, making call history monitoring easy and convenient.</p>
<ol>
}
}</pre> </li>
<li> <p>Use the <span style="font-family: Courier New,Courier,monospace">filter</span> parameter of the <span style="font-family: Courier New,Courier,monospace">find()</span> method to define a filter for the query result set. A filter with the <span style="font-family: Courier New,Courier,monospace">CallHistoryEntry </span>attributes is used to limit the results of the call history search.</p> <p>You can define various filters:</p>
- <ul class="ul">
+ <ul>
<li><p>The <span style="font-family: Courier New,Courier,monospace">AttributeFilter</span> type is used to search based on a single <span style="font-family: Courier New,Courier,monospace">CallHistoryEntry</span> attribute (for attributes supported in the filter, see <a href="../../../../../org.tizen.guides/html/web/tizen/tizen/tizen_guide_w.htm#call">CallHistory Filter Attributes</a>).</p> <p>For example, the following filters define that only cellular calls or calls where the remote party has the telephone number 123456789 are included in the query results:</p> <pre class="prettyprint">/* First filter example */
var filter = new tizen.AttributeFilter("type", "EXACTLY", "TEL");
<li> <p>Use the <span style="font-family: Courier New,Courier,monospace">limit</span> and <span style="font-family: Courier New,Courier,monospace">offset</span> parameters of the <span style="font-family: Courier New,Courier,monospace">find()</span> method to specify the starting point and upper limit of the results that are returned.</p> <p>The <span style="font-family: Courier New,Courier,monospace">limit</span> parameter specifies the maximum number of matching results that are returned (the value 0 makes the limit infinite), while the <span style="font-family: Courier New,Courier,monospace">offset</span> parameter skips that many matching results that are to be returned (the value 0 means nothing is skipped).</p> <p>For example, if your search results consist of 100 matching results and you have specified an offset of 10 and a limit of 20, you get the objects from 10-29. The matching results from 0-9 are skipped due to the offset, and the 20 results starting from the first result after the offset are returned.</p> </li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="Removing_Call_History" name="Removing_Call_History" class="items-tit-h2">Removing Call History Items</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="Removing_Call_History" name="Removing_Call_History">Removing Call History Items</h2>
<p>Learning how to remove call history items allows you to keep the call history list organized and save storage space on the device:</p>
<ol>
<li><p> To remove all call history items, use the <span style="font-family: Courier New,Courier,monospace">removeAll()</span> method:</p> <pre class="prettyprint">tizen.callhistory.removeAll();</pre> </li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
+
- <h2 id="Monitoring_Call_History" name="Monitoring_Call_History" class="items-tit-h2">Monitoring the Call History</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="Monitoring_Call_History" name="Monitoring_Call_History">Monitoring the Call History</h2>
<p>Learning how to register change listeners allows you to synchronize the view of your application to changes in the call history database.</p>
<ol>
<li> <p>Use the <span style="font-family: Courier New,Courier,monospace">removeChangeListener()</span> method to unregister a previously registered listener. Use the ID returned by the <span style="font-family: Courier New,Courier,monospace">addChangeListener()</span>:</p> <pre class="prettyprint">tizen.callhistory.removeChangeListener(callHistoryListener);</pre> </li>
</ol>
- </div>
- </li>
- </ul>
-</div>
-</div>
+
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Contact: Managing Contacts and Handling Contact Information</h1>
- <div class="cont"><div class="static-cont">
<p>This tutorial demonstrates how you can manage address books in the device to access, modify, add, and remove contacts within a specified address book on the device.</p>
</li>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
-
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="Adding_Addressbook" name="Adding_Addressbook" class="items-tit-h2">Creating an Address Book</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="Adding_Addressbook" name="Adding_Addressbook">Creating an Address Book</h2>
<p>Creating a new address book is a basic contact management skill:</p>
<pre class="prettyprint">tizen.account.getAccounts(getAccountsSuccess, function(err));
</pre></li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="Getting_Address_Books" name="Getting_Address_Books" class="items-tit-h2">Getting Address Books</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="Getting_Address_Books" name="Getting_Address_Books">Getting Address Books</h2>
<p>To create engaging applications with various contacts features, you must learn to access the address books in which the contacts are listed:</p>
<ol>
</li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="Adding_Contact" name="Adding_Contact" class="items-tit-h2">Adding a Contact</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="Adding_Contact" name="Adding_Contact">Adding a Contact</h2>
<p>To create engaging applications with various contacts features, you must learn to add a contact to an address book:</p>
<ol>
</pre> </li>
<li><p>Add the <span style="font-family: Courier New,Courier,monospace">Contact</span> object to the default address book with the <span style="font-family: Courier New,Courier,monospace">add()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#AddressBook">AddressBook</a> interface:</p> <pre class="prettyprint">addressbook.add(contact);</pre> </li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="Managing_Contact" name="Managing_Contact" class="items-tit-h2">Managing a Contact</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="Managing_Contact" name="Managing_Contact">Managing a Contact</h2>
<p>To create engaging applications with various contacts features, you must learn to manage a contact in your address book:</p>
<ol>
}
</pre> </li>
<li>To manage a single contact:
- <ol>
+ <ol type="a">
<li><p>Retrieve the default address book using the <span style="font-family: Courier New,Courier,monospace">getDefaultAddressBook()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#ContactManager">ContactManager</a> interface.</p> <pre class="prettyprint">
var addressbook = tizen.contact.getDefaultAddressBook();
</pre> </li>
}</pre> </li>
</ol> </li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="Receiving_Contact" name="Receiving_Contact" class="items-tit-h2">Receiving Notifications on Contact Changes</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="Receiving_Contact" name="Receiving_Contact">Receiving Notifications on Contact Changes</h2>
<p>To create engaging applications with various contacts features, you must learn to receive notifications when contacts are added, updated, or removed:</p>
<ol>
addressbook.removeChangeListener(watcherId);
</pre> </li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="Importing_Contact" name="Importing_Contact" class="items-tit-h2">Importing Contacts</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="Importing_Contact" name="Importing_Contact">Importing Contacts</h2>
<p>To create engaging applications with various contacts features, you must learn to import contacts with the help of the vCard format:</p>
console.log("Contact was added with ID " + contact.id);
}</pre> </li>
</ol> <p>To convert multiple strings and import them to an address book, convert the strings one by one and then use the <span style="font-family: Courier New,Courier,monospace">addBatch()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#AddressBook">AddressBook</a> interface to <a href="#Adding_Multiple_Contact">add all the contacts at once in the batch mode</a>.</p>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="Exporting_Contact" name="Exporting_Contact" class="items-tit-h2">Exporting Contacts</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="Exporting_Contact" name="Exporting_Contact">Exporting Contacts</h2>
<p>To create engaging applications with various contacts features, you must learn to export contacts with the help of the vCard format:</p>
<ol>
var vcard = contacts[0].convertToString("VCARD_30");
}</pre></li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="Adding_Multiple_Contact" name="Adding_Multiple_Contact" class="items-tit-h2">Adding Multiple Contacts in the Batch Mode</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="Adding_Multiple_Contact" name="Adding_Multiple_Contact">Adding Multiple Contacts in the Batch Mode</h2>
<p>To create engaging applications with various contacts features, you must learn to add multiple contacts to an address book in the batch mode:</p>
<ol>
</table>
</li>
</ol>
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="Managing_Multiple_Contact" name="Managing_Multiple_Contact" class="items-tit-h2">Managing Multiple Contacts in the Batch Mode</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="Managing_Multiple_Contact" name="Managing_Multiple_Contact">Managing Multiple Contacts in the Batch Mode</h2>
<p>To create engaging applications with various contacts features, you must learn to manage multiple contacts in your address books in the batch mode:</p>
<ol>
addressbook.find(contactsFoundCB, null, filter, sortMode);
}</pre> </li>
<li>To update contacts:
- <ol>
+ <ol type="a">
<li><p>Define the contact changes to be made in the success event handler of the <span style="font-family: Courier New,Courier,monospace">find()</span> method:</p> <pre class="prettyprint">
function contactsFoundCB(contacts)
{
}
</pre> </li>
</ol>
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="Managing_Groups" name="Managing_Groups" class="items-tit-h2">Managing Contact Groups</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="Managing_Groups" name="Managing_Groups">Managing Contact Groups</h2>
<p>To create engaging applications with various contact features, you must learn to manage contact groups:</p>
<ol>
<li>To manage groups:
-<ul
class="ul"> <li><p>To retrieve all the contact groups from the address book, use the <span style="font-family: Courier New,Courier,monospace">getGroups()</span> method
+<ul> <li><p>To retrieve all the contact groups from the address book, use the <span style="font-family: Courier New,Courier,monospace">getGroups()</span> method
of the <span style="font-family: Courier New,Courier,monospace">AddressBook</span> interface:</p>
<pre class="prettyprint">
var groups;
}
</pre></li></ul></li>
</ol>
- </div>
- </li>
-
-
- <li>
- <div class="devicespec-tit">
- <h2 id="Managing_Persons" name="Managing_Persons" class="items-tit-h2">Managing Persons</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="Managing_Persons" name="Managing_Persons">Managing Persons</h2>
<p>To create engaging applications with various contacts features, you must learn to manage persons in your contact database:</p>
<ol>
<li>To manage a single person:
- <ol>
+ <ol type="a">
<li><p>To retrieve persons, use the <span style="font-family: Courier New,Courier,monospace">find()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#ContactManager">ContactManager</a> interface:</p> <pre class="prettyprint">tizen.contact.find(personsFoundCB);</pre></li>
<li><p>Update or delete the found persons in the <span style="font-family: Courier New,Courier,monospace">personsFoundCB()</span> event handler. In this example, the favorite flag of the first person is changed and the contact is updated using the <span style="font-family: Courier New,Courier,monospace">update()</span> method. The second person is deleted using the <span style="font-family: Courier New,Courier,monospace">remove()</span> method.</p> <pre class="prettyprint">/* Define the event success callback */
function personsFoundCB(persons)
}</pre></li>
</ol> </li>
<li>To merge multiple persons into a single person item:
- <ol>
+ <ol type="a">
<li>Retrieve the persons as described above.</li>
<li><p>Define the persons to be merged in the <span style="font-family: Courier New,Courier,monospace">personsFoundCB()</span> event handler:</p> <pre class="prettyprint">function personsFoundCB(persons)
{
}</pre></li>
</ol> </li>
</ol>
- </div>
- </li>
- </ul>
-</div>
-</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/></p>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Data Synchronization: Creating a Sync Profile and Synchronizing Device Data</h1>
- <div class="cont"><div class="static-cont">
<p>This tutorial demonstrates how you can synchronize device data, such as contacts and calendar events, with the OMA DS server.</p>
<li><a href="#Starting_Sync">Starting and Monitoring Data Synchronization</a> <p>Start the synchronization operation and receive notifications about its progress.</p></li>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
-
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="Creating_Sync_Profile" name="Creating_Sync_Profile" class="items-tit-h2">Creating a Sync Profile</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="Creating_Sync_Profile" name="Creating_Sync_Profile">Creating a Sync Profile</h2>
<p>To be able to synchronize your device data, such as contacts and calendar events, with the OMA DS server, you must learn how to create a sync profile:</p>
<ol>
var profileId = profile.profileId;
}</pre> </li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="Starting_Sync" name="Starting_Sync" class="items-tit-h2">Starting and Monitoring Data Synchronization</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="Starting_Sync" name="Starting_Sync">Starting and Monitoring Data Synchronization</h2>
<p>Learning how to start and monitor the data synchronization process is a basic data management skill:</p>
<ol>
tizen.datasync.startSync(profileId, syncCallback);
</pre> </li>
</ol>
- </div>
- </li>
- </ul>
-</div>
-</div>
+
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
</div>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/></p>
</div>
<h1>Task: Call Log</h1>
<p>This task, based on the CallLog sample delivered with the Tizen SDK, 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/downloads/sample-applications/sample-mobile-applications" target="blank">CallLog</a>.</p>
<p>This task consists of the following parts:</p>
- <ul class="ul">
+ <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>
<p>The following figure shows the main screens of the application.</p>
<p class="figure">Figure: CallLog screens</p>
- <p
style="text-align: center;"><img alt="CallLog screens" src="../../../images/calllog.png" /></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 class="tutorstep">
<li>app.ui.templateManager.js Source File
- <ol>
+ <ol type="a">
<li>
<p>The template manager loads the template files into the cache.</p>
<pre class="prettyprint">
<h3 id="main" name="main">Defining the Main Screen</h3>
<ol class="tutorstep">
<li>callView.tpl Source File
- <ol>
+ <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 <span style="font-family: Courier New,Courier,monospace;"><div></span> element whose <span style="font-family: Courier New,Courier,monospace;">data-role</span> attribute is set to <span style="font-family: Courier New,Courier,monospace;">header</span>. The header section determines the title of the screen.</p>
<pre class="prettyprint lang-html"><div data-role="page" id="callView">
<!--Header section-->
<p>The call log retrieval functionality is implemented in the <span style="font-family: Courier New,Courier,monospace;">app.model.js</span> file.</p>
<ol class="tutorstep">
<li>Retrieving the Complete Call History
- <ol>
+ <ol type="a">
<li><p>The <span style="font-family: Courier New,Courier,monospace;">find()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/callhistory.html#CallHistory">CallHistory</a> interface, placed in the <span style="font-family: Courier New,Courier,monospace;">app.model.js</span> 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)
{
</pre></li></ol>
</li>
<li>Retrieving the Call History for a Specific Caller
- <ol><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 <span style="font-family: Courier New,Courier,monospace;">find()</span> method.</p>
+ <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 <span style="font-family: Courier New,Courier,monospace;">find()</span> method.</p>
<pre class="prettyprint">getCallHistoryForCaller: function Model_getCallHistoryForCaller(phoneNumber, onSuccess)
{
tizen.callhistory.find(onSuccess, null,
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
</div>
<p>This task, based on the EventManager sample delivered with the Tizen SDK, 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/downloads/sample-applications/sample-mobile-applications" target="blank">EventManager</a>.</p>
<p>This task consists of the following parts:</p>
- <ul class="ul">
+ <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>
<p>The following figure shows the main screens of the application.</p>
<p class="figure">Figure: EventManager screens</p>
- <p
style="text-align: center;"><img alt="EventManager screens" src="../../../images/eventmanager.png" /></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 class="tutorstep">
<li>app.ui.templateManager.js Source File
- <ol>
+ <ol type="a">
<li>
<p>The template manager loads the template files into the cache.</p>
<pre class="prettyprint">
<h3 id="main" name="main">Defining the Main Screen</h3>
<ol class="tutorstep">
<li>templates/home.tpl Source File
- <ol><li>
+ <ol type="a"><li>
<p>The main screen displays a list of calendar events. The header section of the screen is defined within a <span style="font-family: Courier New,Courier,monospace;"><div></span> element whose <span style="font-family: Courier New,Courier,monospace;">data-role</span> attribute is set to <span style="font-family: Courier New,Courier,monospace;">header</span>. The header section determines the title of the screen.</p>
<pre class="prettyprint lang-html">
<h3 id="new" name="new">Defining the New Event Screen</h3>
<ol class="tutorstep">
<li>templates/new_event.tpl Source File
-<p>The New event screen contains UI widgets 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>
+<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">
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/></p>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>FM Radio: Listening to the FM Radio</h1>
-<div class="cont"><div class="static-cont">
-<p>This tutorial demonstrates how to manage a FM radio on the device.</p>
+<p>This tutorial demonstrates how you can manage a FM radio on the device.</p>
<table class="note">
<tbody>
<li><a href="#get_info">Getting Information about Interruptions</a><p>Set an event handler to retrieve information about radio playback interruptions and restart the playback.</p></li>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
-
- <!-- Folds -->
- <ul class="devicespecifications">
-
- <li>
- <div class="devicespec-tit">
- <h2 id="manage" name="manage" class="items-tit-h2">Managing the FM Radio</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="manage" name="manage">Managing the FM Radio</h2>
<p>Starting and stopping an FM radio and changing the frequency is a basic FM radio management skill:</p>
</pre>
</li>
</ol>
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="scan" name="scan" class="items-tit-h2">Scanning the FM Radio Frequency</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="scan" name="scan">Scanning the FM Radio Frequency</h2>
<p>To create an application with FM radio features, you must provide a scanning capability:</p>
</pre>
</li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="get_info" name="get_info" class="items-tit-h2">Getting Information about Interruptions</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="get_info" name="get_info">Getting Information about Interruptions</h2>
<p>Retrieving information about FM radio interruptions is a useful FM radio management skill:</p>
</li>
</ol>
- </div>
- </li>
-
- </ul>
-
-</div></div>
+
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/> <img alt="Wearable Web" src="../../../images/ww_icon_optional.png"/></p>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Human Activity Monitor: Retrieving User Activity Data from the Various Device Sensors</h1>
-<div class="cont"><div class="static-cont">
-<p>This tutorial demonstrates how to monitor user activity.</p>
+<p>This tutorial demonstrates how you can monitor user activity.</p>
<table class="note">
<tbody>
<li><a href="#receive">Receiving Notifications on Pedometer Data Changes</a> <p>Track the changes in the step count.</p></li>
</ul>
- <!-- Show / Hide all links -->
- <div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
-
- <!-- Folds -->
- <ul class="devicespecifications">
-
- <li>
- <div class="devicespec-tit">
- <h2 id="retrieve" name="retrieve" class="items-tit-h2">Retrieving Data</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="retrieve" name="retrieve">Retrieving Data</h2>
<p>Enabling the monitor and retrieving data is a basic Human Activity Monitor (HAM) management skill:</p>
<pre class="prettyprint">tizen.humanactivitymonitor.stop("HRM");</pre>
</li>
</ol>
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="receive" name="receive" class="items-tit-h2">Receiving Notifications on Pedometer Data Changes</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="receive" name="receive">Receiving Notifications on Pedometer Data Changes</h2>
<p>Learning how to register a listener for accumulative allows you to monitor the step count maintained by the system without enabling the Pedometer sensor and the <span style="font-family: Courier New,Courier,monospace">PEDOMETER</span> monitor:</p>
<ol>
</pre>
</li>
</ol>
- </div>
- </li>
-
- </ul>
-
-</div></div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Power: Controlling Power Resources</h1>
-<div class="cont"><div class="static-cont">
<p>This tutorial demonstrates how you can access the device power state.</p>
<h2>Warm-up</h2>
<p>Become familiar with the Power API basics by learning about:</p>
<ul>
- <li><a class="opensection" href="#manage">Managing the Power Resource</a> <p>Request and release a specific power state.</p></li>
- <li><a class="opensection" href="#brightness">Managing the Screen Brightness</a> <p>Get, set, and restore the screen brightness.</p></li>
- <li><a class="opensection" href="#screen">Managing the Screen State</a> <p>Switch the screen on and off, and check whether the screen is on.</p></li></ul>
-
- <!-- Show / Hide all links -->
- <div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
- <!-- Folds -->
- <ul class="devicespecifications">
-
- <li>
- <div class="devicespec-tit">
- <h2 id="manage" name="manage" class="items-tit-h2">Managing the Power Resource</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <li><a href="#manage">Managing the Power Resource</a> <p>Request and release a specific power state.</p></li>
+ <li><a href="#brightness">Managing the Screen Brightness</a> <p>Get, set, and restore the screen brightness.</p></li>
+ <li><a href="#screen">Managing the Screen State</a> <p>Switch the screen on and off, and check whether the screen is on.</p></li></ul>
+
+
+ <h2 id="manage" name="manage">Managing the Power Resource</h2>
<p>Learning how to request and release the power state is a basic power management skill:</p>
<ol>
<pre class="prettyprint">tizen.power.unsetScreenStateChangeListener();</pre> </li>
</ol>
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="brightness" name="brightness" class="items-tit-h2">Managing the Screen Brightness</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="brightness" name="brightness">Managing the Screen Brightness</h2>
<p>Learning how to manage the screen brightness is a basic power management skill:</p>
- <ul class="ul">
+ <ul>
<li><p>To get the screen brightness, call the <span style="font-family: Courier New,Courier,monospace">getScreenBrightness()</span> method of the <span style="font-family: Courier New,Courier,monospace">PowerManager</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/power.html#PowerManager">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/power.html#PowerManager">wearable</a> applications):</p>
<pre class="prettyprint">
var screenBrightness = tizen.power.getScreenBrightness();
tizen.power.restoreScreenBrightness();
</pre> </li>
</ul>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="screen" name="screen" class="items-tit-h2">Managing the Screen State</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
- </div>
- <div class="devicespec-con">
-
+ <h2 id="screen" name="screen">Managing the Screen State</h2>
+
<p>Learning how to manage the screen state is a basic power management skill:</p>
- <ul class="ul">
+ <ul>
<li><p>To check whether the screen is on, call the <span style="font-family: Courier New,Courier,monospace">isScreenOn()</span> method of the <span style="font-family: Courier New,Courier,monospace">PowerManager</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/power.html#PowerManager">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/power.html#PowerManager">wearable</a> applications):</p>
<pre class="prettyprint">
var isScreenOn = tizen.power.isScreenOn();
</pre> </li>
</ul>
- </div>
- </li>
-
- </ul>
-</div>
-</div>
+
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/> <img alt="Wearable Web" src="../../../images/ww_icon_optional.png"/></p>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Sensor: Getting Sensor Data from the Various Device Sensors</h1>
-<div class="cont"><div class="static-cont">
-<p>This tutorial demonstrates how to use device sensors.</p>
+<p>This tutorial demonstrates how you can use device sensors.</p>
<table class="note">
<tbody>
<p>Become familiar with the Sensor API basics by learning about:</p>
<ul>
- <li><a
class="opensection" href="#manage">Managing Sensors</a><p>Check, whether the sensor is supported, enable the sensor, read sensor data, and disable the sensor.</p></li>
- <li><a
class="opensection" href="#receive">Receiving Notifications on Sensor Data Changes</a><p>Register an event handler to receive notifications on sensor data changes.</p></li>
+ <li><a href="#manage">Managing Sensors</a><p>Check, whether the sensor is supported, enable the sensor, read sensor data, and disable the sensor.</p></li>
+ <li><a href="#receive">Receiving Notifications on Sensor Data Changes</a><p>Register an event handler to receive notifications on sensor data changes.</p></li>
</ul>
- <!-- Show / Hide all links -->
- <div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
- <!-- Folds -->
- <ul class="devicespecifications">
+<h2>Task in Mobile Applications</h2>
+<p>In the <a href="task_sensorball_w.htm">Sensor Ball</a> task, we will walk through simulating ball behavior to create a game.</p>
- <li>
- <div class="devicespec-tit">
- <h2 id="manage" name="manage" class="items-tit-h2">Managing Sensors</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
- </div>
- <div class="devicespec-con">
+<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>
<pre class="prettyprint">proximitySensor.stop(); </pre>
</li>
</ol>
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="receive" name="receive" class="items-tit-h2">Receiving Notifications on Sensor Data Changes</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="receive" name="receive">Receiving Notifications on Sensor Data Changes</h2>
<p>Learning how to register a change event handler for sensor data enables your application to react to changes without the need to check current values constantly.</p>
<pre class="prettyprint">proximitySensor.unsetChangeListener();</pre>
</li>
</ol>
- </div>
- </li>
-
- </ul>
-
-</div></div>
-
+
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/>
<img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
<div id="container"><div id="contents"><div class="content">
<h1>System Information: Providing Information about the Device Display, Network, Storage, and Other Capabilities</h1>
-<div class="cont"><div class="static-cont">
<p>This tutorial demonstrates how you can obtain information about the device properties.</p>
<h2>Task</h2>
<p>In the <a href="task_systeminfo_w.htm">System Information</a> task, we will walk through how to access and use system information in your application.</p>
- <!-- Show / Hide all links -->
- <div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
- <!-- Folds -->
- <ul class="devicespecifications">
-
- <li>
- <div class="devicespec-tit">
- <h2 id="retrieve" name="retrieve" class="items-tit-h2">Retrieving a Device Capability</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="retrieve" name="retrieve">Retrieving a Device Capability</h2>
<p>Learning how to get a capability of the device is a basic application development skill:</p>
<ol>
<p>For a list of available keys and their meaning, see the device capability keys (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo_capability_keys.html">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo_capability_keys.html">wearable</a> applications).</p>
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="state" name="state" class="items-tit-h2">Retrieving the Current State of a Property</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="state" name="state">Retrieving the Current State of a Property</h2>
<p>Learning how to retrieve information about the property states is a basic application development skill:</p>
<ol>
<pre class="prettyprint">console.log("The number of SIM cards in the device is " + tizen.systeminfo.getCount("SIM"));</pre> </li>
</ol>
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="memory" name="memory" class="items-tit-h2">Retrieving the Memory State</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="memory" name="memory">Retrieving the Memory State</h2>
<p>Learning how to get the memory status of the device is a basic application development skill:</p>
- <ul class="ul">
+ <ul>
<li><p>To get the total amount of system memory, use the <span style="font-family: Courier New,Courier,monospace">getTotalMemory()</span> method:</p>
<pre class="prettyprint">console.log("The total memory size is " + tizen.systeminfo.getTotalMemory() + " bytes.");</pre></li>
<pre class="prettyprint">console.log("The available memory size is " + tizen.systeminfo.getAvailableMemory() + " bytes.");</pre></li>
</ul>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="orientation" name="orientation" class="items-tit-h2">Retrieving and Monitoring the Device Orientation</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="orientation" name="orientation">Retrieving and Monitoring the Device Orientation</h2>
<p>Learning how to retrieve information about the device orientation is a basic mobile application development skill:</p>
tizen.systeminfo.removePropertyValueChangeListener(orientationListenerId);
</pre> </li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="receive" name="receive" class="items-tit-h2">Receiving Notifications on Property Value Changes</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="receive" name="receive">Receiving Notifications on Property Value Changes</h2>
<p>Learning how to receive notifications on property value changes is a basic application development skill:</p>
<ol>
var id = tizen.systeminfo.addPropertyValueArrayChangeListener("SIM", successCallback);
</pre> </li>
</ol>
- </div>
- </li>
-
- </ul>
-</div>
-</div>
+
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>System Setting: Providing System Setting Functionality</h1>
-<div class="cont"><div class="static-cont">
+
<p>This tutorial demonstrates how you can access the device's settings for the home screen and lock screen wallpaper, incoming call ringtone, and email notification tone.</p>
<h2>Warm-up</h2>
<p>Become familiar with the System Setting API basics by learning about:</p>
<ul>
- <li><a
class="opensection" href="#wall">Managing the Device Wallpapers</a> <p>Set the wallpaper of the home screen and the lock screen.</p></li>
- <li><a
class="opensection" href="#tone">Managing Ringtones and Notification Tones</a> <p>Set the ringtone for incoming calls and the tone for email notifications.</p></li>
+ <li><a href="#wall">Managing the Device Wallpapers</a> <p>Set the wallpaper of the home screen and the lock screen.</p></li>
+ <li><a href="#tone">Managing Ringtones and Notification Tones</a> <p>Set the ringtone for incoming calls and the tone for email notifications.</p></li>
</ul>
- <!-- Show / Hide all links -->
- <div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
- <!-- Folds -->
- <ul class="devicespecifications">
-
- <li>
- <div class="devicespec-tit">
- <h2 id="wall" name="wall" class="items-tit-h2">Managing the Device Wallpapers</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="wall" name="wall">Managing the Device Wallpapers</h2>
<p>Learning how to set the device wallpaper and get information about it is a basic application development skill:</p>
<ol>
}
</pre> </li>
</ol>
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="tone" name="tone" class="items-tit-h2">Managing Ringtones and Notification Tones</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="tone" name="tone">Managing Ringtones and Notification Tones</h2>
<p>Learning how to set ringtones and notification tones is a basic application development skill:</p>
<ol>
}
</pre> </li>
</ol>
- </div>
- </li>
-
- </ul>
-</div>
-</div>
+
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+ <p><img alt="Mobile Web" src="../../../images/mw_icon_optional.png"/></p>
</div>
<div id="toc_border"><div id="toc">
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a href="../../../../../org.tizen.guides/html/web/w3c/device/device_orientation_w.htm">DeviceOrientation Event Specification Guide</a></li>
- <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="../../../../../org.tizen.guides/html/web/tizen/system/sensor_w.htm">Sensor Guide</a></li>
+ <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/sensor.html">Sensor API</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 SDK, 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 read and process gyro sensor data. For more information on the sample functionality and creating the sample with the full source code, see the <a href="https://developer.tizen.org/downloads/sample-applications/sample-mobile-applications" target="blank">SensorBall</a>.</p>
+ <p>This task, based on the SensorBall sample delivered with the Tizen SDK, 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 the <a href="https://developer.tizen.org/downloads/sample-applications/sample-mobile-applications" target="blank">SensorBall</a>.</p>
<p>This task consists of the following parts:</p>
- <ul class="ul">
+ <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>
<p>The following figure shows the main screen of the application.</p>
<p class="figure">Figure: SensorBall screen</p>
- <p
style="text-align: center;"><img alt="SensorBall screen" src="../../../images/sensorball.png" /></p>
+ <p
align="center"><img alt="SensorBall screen" src="../../../images/sensorball.png" /></p>
<h3 id="main" name="main">Defining the Main Screen</h3>
<ol class="tutorstep">
<li>index.html Source File
- <ol><li> <p>The main screen displays the game screen. The header section of the screen is defined within a <span style="font-family: Courier New,Courier,monospace"><div></span> element whose <span style="font-family: Courier New,Courier,monospace">data-role</span> attribute is set to <span style="font-family: Courier New,Courier,monospace">header</span>. The header section determines the title of the screen.</p>
+ <ol
type="a"><li> <p>The main screen displays the game screen. The header section of the screen is defined within a <span style="font-family: Courier New,Courier,monospace"><div></span> element whose <span style="font-family: Courier New,Courier,monospace">data-role</span> attribute is set to <span style="font-family: Courier New,Courier,monospace">header</span>. The header section determines the title of the screen.</p>
<pre class="prettyprint">
<body>
<div data-role="page" id="mainPage">
</ol>
<h2 id="data" name="data">Managing the Gyro Sensor Data</h2>
- <p>This section builds upon the elements described in <a href="device_orientation_tutorial_w.htm#accelerate">Detecting Device Acceleration</a>.</p>
+ <p>This section builds upon the elements described in <a href="../../w3c/device/device_orientation_tutorial_w.htm#accelerate">Detecting Device Acceleration</a>.</p>
<h3 id="appobjectcreate" name="appobjectcreate">Managing the Application and Window Objects</h3>
<ol class="tutorstep">
<li>main.js Source File
- <ol>
+ <ol type="a">
<li>The <span style="font-family: Courier New,Courier,monospace">
devicemotion</span> event listener calls the <span style="font-family: Courier New,Courier,monospace">
saveSensorData()</span> method each time the event takes place. The event allows the application to access information about sensor data changes.
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</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 SDK, demonstrates how you can use the
<span style="font-family: Courier New,Courier,monospace">System Information</span> 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/downloads/sample-applications/sample-mobile-applications" target="blank">SystemInfo</a>.</p>
+ <p>This task, based on the Systeminfo sample delivered with the Tizen SDK, 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/downloads/sample-applications/sample-mobile-applications" target="blank">SystemInfo</a>.</p>
<p>This task consists of the following parts:</p>
- <ul class="ul">
+ <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>The following figure shows the main screens of the application.</p>
<p class="figure">Figure: Systeminfo screens</p>
- <p
style="text-align: center;"><img alt="Systeminfo screens" src="../../../images/systeminfo_sd.png" /></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 class="tutorstep">
<li>index.html Source File
- <ol>
+ <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 <span style="font-family: Courier New,Courier,monospace;"><div></span> element whose <span style="font-family: Courier New,Courier,monospace;">data-role</span> attribute is set to <span style="font-family: Courier New,Courier,monospace;">header</span>. 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-->
<h3 id="information" name="information">Defining the Information Screen</h3>
<ol class="tutorstep">
<li>index.html Source File
- <ol>
+ <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 <span style="font-family: Courier New,Courier,monospace;"><div></span> element whose <span style="font-family: Courier New,Courier,monospace;">data-role</span> attribute is set to <span style="font-family: Courier New,Courier,monospace;">header</span>. 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-->
<h1 id="info-title"></h1>
</div>
</pre> </li>
- <li><p>The actual content section of the screen is defined within a <span style="font-family: Courier New,Courier,monospace;"><div></span> element whose <span style="font-family: Courier New,Courier,monospace;">data-role</span> attribute is set to <span style="font-family: Courier New,Courier,monospace;">content</span>. The content section of the information screen contains a list
widget displaying the details of the selected system property.</p> <pre class="prettyprint lang-html"> <!--Content section-->
+ <li><p>The actual content section of the screen is defined within a <span style="font-family: Courier New,Courier,monospace;"><div></span> element whose <span style="font-family: Courier New,Courier,monospace;">data-role</span> attribute is set to <span style="font-family: Courier New,Courier,monospace;">content</span>. 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>
<h3 id="list" name="list">Defining the List Item Types</h3>
<ol class="tutorstep">
<li>main.js Source File <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 class="ul">
+ <ul>
<li>List item with 1 line (contains the property value) <pre class="prettyprint">function make1lineListItem(value)
{
return '<li>' + value + '</li>';
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/>
<img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
<div id="container"><div id="contents"><div class="content">
<h1>Time: Exposing Information about Date, Time, and Time Zones</h1>
-<div class="cont"><div class="static-cont">
<p>This tutorial demonstrates how you can manage date and time information and perform different calculations and other tasks related to date and time.</p>
<h2>Warm-up</h2>
<p>Become familiar with the Time API basics by learning about:</p>
<ul>
- <li><a
class="opensection" href="#Retrieving_Date">Retrieving Date and Time</a> <p>Retrieve the current date and time or all available time zones, and check whether a specific year is a leap year.</p></li>
- <li><a
class="opensection" href="#Retrieving_Local_Date">Retrieving the Local Date and Time Format</a> <p>Get the currently used time and date formats.</p></li>
- <li><a
class="opensection" href="#Calculating_Date">Calculating Date and Time Information</a> <p>Perform calculations and comparisons with date and time data.</p></li>
- <li><a
class="opensection" href="#Monitoring_Changes">Retrieving Time Change Notifications</a> <p>Monitor the time and time zone changes performed by the user.</p></li>
+ <li><a href="#Retrieving_Date">Retrieving Date and Time</a> <p>Retrieve the current date and time or all available time zones, and check whether a specific year is a leap year.</p></li>
+ <li><a href="#Retrieving_Local_Date">Retrieving the Local Date and Time Format</a> <p>Get the currently used time and date formats.</p></li>
+ <li><a href="#Calculating_Date">Calculating Date and Time Information</a> <p>Perform calculations and comparisons with date and time data.</p></li>
+ <li><a href="#Monitoring_Changes">Retrieving Time Change Notifications</a> <p>Monitor the time and time zone changes performed by the user.</p></li>
</ul>
-
- <!-- Show / Hide all links -->
- <div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
- <!-- Folds -->
- <ul class="devicespecifications">
-
- <li>
- <div class="devicespec-tit">
- <h2 id="Retrieving_Date" name="Retrieving_Date" class="items-tit-h2">Retrieving Date and Time</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="Retrieving_Date" name="Retrieving_Date">Retrieving Date and Time</h2>
<p>Learning how to handle date and time in your application is a basic locale management skill:</p>
<ol>
</pre>
</li>
<li>To handle time zone information:
- <ol>
+ <ol type="a">
<li> <p>To retrieve the current time zone, use the <span style="font-family: Courier New,Courier,monospace">getLocalTimezone()</span> method:</p> <pre class="prettyprint">
console.log("The current time zone is " + tizen.time.getLocalTimezone());
</pre> <p>The general format of the time zones is "general descriptor/specific descriptor 1/specific descriptor 2/specific descriptor n". For example, "America/Argentina/Buenos_Aires".</p> </li>
</li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="Retrieving_Local_Date" name="Retrieving_Local_Date" class="items-tit-h2">Retrieving the Local Date and Time Format</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="Retrieving_Local_Date" name="Retrieving_Local_Date">Retrieving the Local Date and Time Format</h2>
<p>Learning how to handle date and time formats in your application is a basic locale management skill:</p>
<ol>
console.log("Time format is " + timeFormat);
</pre> </li>
</ol>
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="Calculating_Date" name="Calculating_Date" class="items-tit-h2">Calculating Date and Time Information</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="Calculating_Date" name="Calculating_Date">Calculating Date and Time Information</h2>
<p>Learning how to calculate and compare time and date information is a basic time management skill:</p>
<ol>
var tomorrow = now.addDuration(new tizen.TimeDuration(1,"DAYS");
</pre> <p> If the number of added time is negative, date or time is set to an earlier moment of time. </p> </li>
</ol>
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="Monitoring_Changes" name="Monitoring_Changes" class="items-tit-h2">Retrieving Time Change Notifications</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="Monitoring_Changes" name="Monitoring_Changes">Retrieving Time Change Notifications</h2>
<p>Learning how to get notifications when the user changes the time or time zone allows you to react to those changes in your application:</p>
<ol>
<li> <p>To monitor time or time zone changes, define the event handlers:</p>
- <ul class="ul">
+ <ul>
<li> <p>The time change event handler is called when the user adjusts the clock:</p>
<pre class="prettyprint">
function timeChangedCallback()
{
try
{
- // New time zone can be retrieved through tizen.time.getLocalTimezone()
+ /* New time zone can be retrieved through tizen.time.getLocalTimezone() */
var zone = tizen.time.getLocalTimezone();
console.log("Time zone has been set to " + zone);
}
</pre> </li>
</ul> </li>
<li><p>When the event handlers are defined, register them as listeners:</p>
- <ul class="ul">
+ <ul>
<li> <p>Register the time change listener using the <span style="font-family: Courier New,Courier,monospace">setDateTimeChangeListener()</span> method of the <span style="font-family: Courier New,Courier,monospace">TimeUtil</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/time.html#TimeUtil">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/time.html#TimeUtil">wearable</a> applications):</p>
<pre class="prettyprint">
tizen.time.setDateTimeChangeListener(timeChangedCallback);
</li>
<li><p>To stop receiving the notifications, unregister the listeners:</p>
- <ul class="ul">
+ <ul>
<li> <p>To unregister the time change listener, use the <span style="font-family: Courier New,Courier,monospace">unsetDateTimeChangeListener()</span> method of the <span style="font-family: Courier New,Courier,monospace">TimeUtil</span> interface:</p>
<pre class="prettyprint">
tizen.time.unsetDateTimeChangeListener();
</li>
</ol>
- </div>
- </li>
-
- </ul>
-</div>
-</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Web Setting: Managing the Setting States of the Web View</h1>
-<div class="cont"><div class="static-cont">
<p>This tutorial demonstrates how you can manage Web view properties.</p>
<li><a href="#set">Setting a User Agent for a Running Application</a> <p>Set a Web view user agent string.</p></li>
<li><a href="#delete">Deleting Web View Cookies</a> <p>Delete Web view cookies.</p></li>
</ul>
-
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
- <!-- Folds -->
- <ul class="devicespecifications">
-
- <li>
- <div class="devicespec-tit">
- <h2 id="set" name="set" class="items-tit-h2">Setting a User Agent for a Running Application</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="set" name="set">Setting a User Agent for a Running Application</h2>
<p>Learning how to set a user agent string to perform tasks is a basic Web setting management skill:</p>
<ol>
tizen.websetting.setUserAgentString(userAgent, successCallback);
</pre> </li>
</ol>
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="delete" name="delete" class="items-tit-h2">Deleting Web View Cookies</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="delete" name="delete">Deleting Web View Cookies</h2>
<p>Learning how to delete Web view cookies is a basic Web setting management skill:</p>
<ol>
tizen.websetting.removeAllCookies(CookiesRemovedSuccessCallback);
</pre> </li>
</ol>
- </div>
- </li>
-
- </ul>
-</div>
-</div>
-
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Tizen: Managing the Basic Tizen Features</h1>
- <div class="cont"><div class="static-cont">
+
<p>This tutorial demonstrates how you can utilize generic Tizen Device API features, such as filters, sorting modes, and generic event handlers.</p>
<h2>Warm-up</h2>
<p>Become familiar with the Tizen API basics by learning about:</p>
<ul>
- <li><a
class="opensection" href="#filter">Creating Attribute Filters</a> <p>Create attribute filters to limit data query results.</p></li>
- <li><a
class="opensection" href="#range">Creating Attribute Range Filters</a> <p>Create attribute range filters to limit data query results.</p></li>
- <li><a
class="opensection" href="#composite">Creating Composite Filters</a> <p>Create composite filters to limit data query results.</p></li>
- <li><a
class="opensection" href="#use_modes">Using Sorting Modes</a> <p>Use sorting modes to organize data query results.</p></li>
- <li><a
class="opensection" href="#use_handlers">Using the Generic Event Handlers</a> <p>Utilize generic event handlers to make application creation easier.</p></li>
- <li><a
class="opensection" href="#make">Making Complex Queries Using Filters</a> <p>Create complex queries by combining filters.</p></li>
+ <li><a href="#filter">Creating Attribute Filters</a> <p>Create attribute filters to limit data query results.</p></li>
+ <li><a href="#range">Creating Attribute Range Filters</a> <p>Create attribute range filters to limit data query results.</p></li>
+ <li><a href="#composite">Creating Composite Filters</a> <p>Create composite filters to limit data query results.</p></li>
+ <li><a href="#use_modes">Using Sorting Modes</a> <p>Use sorting modes to organize data query results.</p></li>
+ <li><a href="#use_handlers">Using the Generic Event Handlers</a> <p>Utilize generic event handlers to make application creation easier.</p></li>
+ <li><a href="#make">Making Complex Queries Using Filters</a> <p>Create complex queries by combining filters.</p></li>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
-
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="filter" name="filter" class="items-tit-h2">Creating Attribute Filters</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="filter" name="filter">Creating Attribute Filters</h2>
<p> Learning how to create attribute filters allows you effectively incorporate query methods in your application:</p>
<ol>
tizen.contact.getDefaultAddressBook().find(successCB, errorCB, firstNameFilter);</pre> </li>
</ol>
-</div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="range" name="range" class="items-tit-h2">Creating Attribute Range Filters</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="range" name="range">Creating Attribute Range Filters</h2>
<p> Learning how to use attribute range filters allows you effectively incorporate query methods in your application:</p>
<ol>
<li> <p> Call the <span style="font-family: Courier New,Courier,monospace">find()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html#Calendar">Calendar</a> interface to find events. The filter (<span style="font-family: Courier New,Courier,monospace">dateRangeFilter</span>) you created is included as a parameter. </p> <pre class="prettyprint">
tizen.calendar.getDefaultCalendar("EVENT").find(successCB, errorCB, dateRangeFilter);</pre> </li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="composite" name="composite" class="items-tit-h2">Creating Composite Filters</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="composite" name="composite">Creating Composite Filters</h2>
<p> Learning how to use composite filters allows you effectively incorporate query methods in your application:</p>
<ol>
<li><p> Call the <span style="font-family: Courier New,Courier,monospace">find()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#AddressBook">AddressBook</a> interface to find matching contacts. The filter (<span style="font-family: Courier New,Courier,monospace">nameCompositeFilter</span>) you created is included as a parameter.</p> <pre class="prettyprint">
tizen.contact.getDefaultAddressBook().find(successCB, errorCB, nameCompositeFilter);</pre> </li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="use_modes" name="use_modes" class="items-tit-h2">Using Sorting Modes</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="use_modes" name="use_modes">Using Sorting Modes</h2>
<p> Learning how to use sorting modes allows you effectively incorporate query methods in your application:</p>
<ol>
<li><p> Call the <span style="font-family: Courier New,Courier,monospace">find()</span> method of the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html#AddressBook">AddressBook</a> interface to find matching contacts. In this example, the filter parameter in the <span style="font-family: Courier New,Courier,monospace">find()</span> method is defined as <span style="font-family: Courier New,Courier,monospace">null</span>, which means that the method retrieves all contacts in the address book.</p> <pre class="prettyprint">
tizen.contact.getDefaultAddressBook().find(successCB, errorCB, null, sortMode);</pre> </li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="use_handlers" name="use_handlers" class="items-tit-h2">Using the Generic Event Handlers</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="use_handlers" name="use_handlers">Using the Generic Event Handlers</h2>
<p>Learning how to use generic, predefined event handlers allows you handle application operations and errors efficiently:</p>
<ol>
tizen.calendar.getCalendars("EVENT", calendarListCallback, errorCallback);
</pre> </li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="make" name="make" class="items-tit-h2">Making Complex Queries Using Filters</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="make" name="make">Making Complex Queries Using Filters</h2>
<p>Learning how to use filters allows you effectively incorporate complex query methods in your application. You can create queries using AND and OR conditions, like in SQL queries. The following example shows how to make the following query:</p>
<p><span style="font-family: Courier New,Courier,monospace">"where ((type='VIDEO' OR type='IMAGE') AND title like '%special%')"</span></p>
<pre class="prettyprint"> tizen.content.find(findMediaContentsCallback, onError, null, finalFilter);
}</pre> <p>The <span style="font-family: Courier New,Courier,monospace;">findMediaContentsCallback()</span> event handler returns the query result.</p> </li>
</ol>
- </div>
- </li>
- </ul>
-</div>
-</div>
+
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../images/ww_icon.png"/></p>
</div>
<tr>
<td class="note"> In Tizen Web Device APIs, there are 2 types of APIs: mandatory and optional.
<p>The mandatory APIs are always available on all Tizen devices. The optional APIs provide functionality that depends on the available device hardware or software capabilities, and they may not be available in all Tizen devices. For example, the Bluetooth and NFC API hardware features are optional, and not supported on all devices.</p>
-<p>To determine the availability of optional APIs, use the <span style="font-family: Courier New,Courier,monospace;">tizen.systeminfo.getCapability()</span> method of the
<span style="font-family: Courier New,Courier,monospace">System Information</span> API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfo">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html#SystemInfo">wearable</a> applications).</p>
+<p>To determine the availability of optional APIs, use the <span style="font-family: Courier New,Courier,monospace;">tizen.systeminfo.getCapability()</span> method of the
System Information API (in <a href="../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html#SystemInfo">mobile</a> and <a href="../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html#SystemInfo">wearable</a> applications).</p>
<p>Note that all mandatory APIs are supported on the Tizen Emulators, while the optional APIs may or may not be supported. For the details of each API, see <a href="../../../../org.tizen.web.apireference/html/device_api/device_api_cover.html">Tizen Web Device API Reference</a>.</p></td>
</tr>
</tbody>
<p>Demonstrates how you can filter data and use generic event handlers.</p></li>
<li><a href="application/app_tutorials_w.htm">Application: Controlling Your Applications</a>
<p>Demonstrates how you can configure application properties, and manage application data, packages, and alarms.</p></li>
+ <li><a href="communication/comm_tutorials_w.htm">Communication: Connecting to the Network and Communicating with Messages</a>
+ <p>Demonstrates how you can send data to networks and other applications, and receive data back from them.</p></li>
<li><a href="content/content_tutorials_w.htm">Content: Getting and Handling Content</a>
<p>Demonstrates how you can manage files, playlists, and downloads, and view file details.</p></li>
<li><a href="input_output/io_tutorials_w.htm">Input/Output: Processing Input and Output</a>
<p>Demonstrates how you can manage and retrieve information from the device and its sensors.</p></li>
<li><a href="ui/ui_tutorials_w.htm">User Interface: Notifying Users of New Application Information</a>
<p>Demonstrates how you can manage badges and notifications on the screen.</p></li>
- <li><a href="communication/comm_tutorials_w.htm">Communication: Connecting to the Network and Communicating with Messages</a> <span style="color: red">in mobile applications only</span>
- <p>Demonstrates how you can send data to networks and other applications, and receive data back from them.</p></li>
<li><a href="social/social_tutorials_w.htm">Social: Managing Personal Data</a> <span style="color: red">in mobile applications only</span>
<p>Demonstrates how you can manage the user's personal data, such as contacts, calendars, location data, and call and browsing history, on the device.</p></li>
</ul>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Badge: Displaying the Notification (Badge) Count on the Home Screen</h1>
-<div class="cont"><div class="static-cont">
<p>This tutorial demonstrates how you can manage home screen badges.</p>
<h2>Warm-up</h2>
<p>Become familiar with the Badge API basics by learning about:</p>
<ul>
- <li><a
class="opensection" href="#manage">Managing Badges</a> <p>Get and set the badge number of the application.</p></li>
- <li><a
class="opensection" href="#receive">Receiving Notifications on Badge Changes</a> <p>Register an event handler for badge changes.</p></li>
+ <li><a href="#manage">Managing Badges</a> <p>Get and set the badge number of the application.</p></li>
+ <li><a href="#receive">Receiving Notifications on Badge Changes</a> <p>Register an event handler for badge changes.</p></li>
</ul>
- <!-- Show / Hide all links -->
- <div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
- <!-- Folds -->
- <ul class="devicespecifications">
-
- <li>
- <div class="devicespec-tit">
- <h2 id="manage" name="manage" class="items-tit-h2">Managing Badges</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="manage" name="manage">Managing Badges</h2>
<p>Getting and setting the badge number is a useful UI management skill:</p>
<table class="note">
</pre>
</li>
</ol>
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="receive" name="receive" class="items-tit-h2">Receiving Notifications on Badge Changes</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="receive" name="receive">Receiving Notifications on Badge Changes</h2>
<p>Registering a listener for badge count changes to react to new badges and display your badges is a useful UI management skill:</p>
<pre class="prettyprint">
tizen.badge.removeChangeListener(["BDb5tZJe47.TestSample"]);</pre> </li>
</ol>
- </div>
- </li>
-
- </ul>
-
-</div></div>
+
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
+ <p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a class="opensection" href="../../../../../org.tizen.guides/html/web/tizen/ui/noti_w.htm">Notification Guide</a></li>
- <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/notification.html">Notification API for Mobile Web</a></li>
+ <li><a href="../../../../../org.tizen.guides/html/web/tizen/ui/noti_w.htm">Notification Guide</a></li>
+ <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/notification.html">Notification API for Mobile Web</a></li>
+ <li><a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/notification.html">Notification API for Wearable Web</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
-<h1>Notification: Notifying Users of Application Events</h1>
-<div class="cont"><div class="static-cont">
+<h1>Notification: Notifying Users of Application Events</h1>
<p>This tutorial demonstrates how you can manage notifications created based on application events.</p>
<th class="note">Note</th>
</tr>
<tr>
- <td class="note">This feature is supported in mobile applications only.</td>
+ <td class="note">The Notification API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices.
+<p>All mandatory APIs are supported on the Tizen Emulators.</p></td>
</tr>
</tbody>
</table>
<li><a href="#manage">Managing Notifications</a> <p>Retrieve, update, and remove posted notifications.</p></li>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
- <!-- Folds -->
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="create" name="create" class="items-tit-h2">Creating Simple Notifications</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="create" name="create">Creating Simple Notifications</h2>
<p>Learning how to create status notifications allows you to design interactive applications that provide the user information about their events:</p>
<ol>
- <li><p>Define the status notification properties of the <
a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/notification.html#StatusNotificationInit">StatusNotificationInit</a> interface:</p> <pre class="prettyprint">
+ <li><p>Define the status notification properties of the <
span style="font-family: Courier New,Courier,monospace">StatusNotificationInit</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/notification.html#StatusNotificationInit">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/notification.html#StatusNotificationInit">wearable</a> applications):</p> <pre class="prettyprint">
/* Application control */
var appControl = new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/create_content",
null, "image/jpg", null, null);
/* Application control to be launched when the user selects the notification */
appControl: appControl
};
-</pre> <p>The path in the <span style="font-family: Courier New,Courier,monospace">iconPath</span> and <span style="font-family: Courier New,Courier,monospace">soundPath</span> parameters means a relative file location defined in the
<a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/filesystem.html">Filesystem</a> API. The path is not an absolute file location, but instead uses a <a href="../../../../../org.tizen.guides/html/web/tizen/input_output/filesystem_w.htm">virtual root location</a> (such as <span style="font-family: Courier New,Courier,monospace">images</span> in <span style="font-family: Courier New,Courier,monospace">images/image1.jpg</span>).</p></li>
- <li><p>To be able to display the notification, create a <
a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/notification.html#StatusNotification">StatusNotification</a> object with the status notification type, title, and the additional notification properties defined in the previous step.</p> <pre class="prettyprint">
+</pre> <p>The path in the <span style="font-family: Courier New,Courier,monospace">iconPath</span> and <span style="font-family: Courier New,Courier,monospace">soundPath</span> parameters means a relative file location defined in 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). The path is not an absolute file location, but instead uses a <a href="../../../../../org.tizen.guides/html/web/tizen/input_output/filesystem_w.htm">virtual root location</a> (such as <span style="font-family: Courier New,Courier,monospace">images</span> in <span style="font-family: Courier New,Courier,monospace">images/image1.jpg</span>).</p></li>
+ <li><p>To be able to display the notification, create a <
span style="font-family: Courier New,Courier,monospace">StatusNotification</span> object (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/notification.html#StatusNotification">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/notification.html#StatusNotification">wearable</a> applications) with the status notification type, title, and the additional notification properties defined in the previous step.</p> <pre class="prettyprint">
var notification = new tizen.StatusNotification("SIMPLE", "Simple notification", notificationDict);
</pre> </li>
- <li><p>To post the notification, use the <span style="font-family: Courier New,Courier,monospace">post()</span> method of the <
a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/notification.html#NotificationManager">NotificationManager</a> interface:</p> <pre class="prettyprint">
+ <li><p>To post the notification, use the <span style="font-family: Courier New,Courier,monospace">post()</span> method of the <
span style="font-family: Courier New,Courier,monospace">NotificationManager</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/notification.html#NotificationManager">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/notification.html#NotificationManager">wearable</a> applications):</p> <pre class="prettyprint">
tizen.notification.post(notification);
</pre> </li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="progress" name="progress" class="items-tit-h2">Creating Progress Notifications</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="progress" name="progress">Creating Progress Notifications</h2>
<p>Learning how to create progress notifications allows you to design interactive applications that inform the user about the progress of an activity:</p>
<ol>
- <li><p>Define the status notification properties of the <
a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/notification.html#StatusNotificationInit">StatusNotificationInit</a> dictionary:</p> <pre class="prettyprint">
+ <li><p>Define the status notification properties of the <
span style="font-family: Courier New,Courier,monospace">StatusNotificationInit</span> dictionary (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/notification.html#StatusNotificationInit">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/notification.html#StatusNotificationInit">wearable</a> applications):</p> <pre class="prettyprint">
/* Application control */
var appControl = new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/create_content",
null, "image/jpg", null, null);
progressType: "PERCENTAGE",
progressValue: 0
};
-</pre> <p>The path in the <span style="font-family: Courier New,Courier,monospace">iconPath</span> and <span style="font-family: Courier New,Courier,monospace">soundPath</span> parameters means a file location defined in the
<a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/filesystem.html">Filesystem</a> API. The path is not an absolute file location, but instead uses a <a href="../../../../../org.tizen.guides/html/web/tizen/input_output/filesystem_w.htm">virtual root location</a> (such as <span style="font-family: Courier New,Courier,monospace">images</span> in <span style="font-family: Courier New,Courier,monospace">images/image1.jpg</span>).</p></li>
- <li><p>To be able to display the notification, create a <
a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/notification.html#StatusNotification">StatusNotification</a> object with the status notification type, title, and the additional notification properties defined in the previous step:</p> <pre class="prettyprint">
+</pre> <p>The path in the <span style="font-family: Courier New,Courier,monospace">iconPath</span> and <span style="font-family: Courier New,Courier,monospace">soundPath</span> parameters means a file location defined in 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). The path is not an absolute file location, but instead uses a <a href="../../../../../org.tizen.guides/html/web/tizen/input_output/filesystem_w.htm">virtual root location</a> (such as <span style="font-family: Courier New,Courier,monospace">images</span> in <span style="font-family: Courier New,Courier,monospace">images/image1.jpg</span>).</p></li>
+ <li><p>To be able to display the notification, create a <
span style="font-family: Courier New,Courier,monospace">StatusNotification</span> object (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/notification.html#StatusNotification">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/notification.html#StatusNotification">wearable</a> applications) with the status notification type, title, and the additional notification properties defined in the previous step:</p> <pre class="prettyprint">
var notification = new tizen.StatusNotification("PROGRESS", "Progress notification", notificationDict);
</pre> </li>
- <li><p>Define a function which uses the <span style="font-family: Courier New,Courier,monospace">update()</span> method of the <
a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/notification.html#NotificationManager">NotificationManager</a> interface to update the posted notification every second:</p><pre class="prettyprint">
+ <li><p>Define a function which uses the <span style="font-family: Courier New,Courier,monospace">update()</span> method of the <
span style="font-family: Courier New,Courier,monospace">NotificationManager</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/notification.html#NotificationManager">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/notification.html#NotificationManager">wearable</a> applications) to update the posted notification every second:</p><pre class="prettyprint">
function updateProgressNotification(progress)
{
if (progress <= 100)
updateProgressNotification(0);
</pre> </li>
</ol>
-
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="manage" name="manage" class="items-tit-h2">Managing Notifications</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="manage" name="manage">Managing Notifications</h2>
<p>Learning how to manage notifications allows you to design interactive applications that provide the user information about their events:</p>
<ol>
<li><p>To retrieve notifications: </p>
- <ol>
- <li>To retrieve a previously posted notification, use the <span style="font-family: Courier New,Courier,monospace">get()</span> method of the <
a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/notification.html#NotificationManager">NotificationManager</a> interface with the notification ID as a parameter:<p></p> <pre class="prettyprint">
+ <ol type="a">
+ <li>To retrieve a previously posted notification, use the <span style="font-family: Courier New,Courier,monospace">get()</span> method of the <
span style="font-family: Courier New,Courier,monospace">NotificationManager</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/notification.html#NotificationManager">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/notification.html#NotificationManager">wearable</a> applications with the notification ID as a parameter:<p></p> <pre class="prettyprint">
var myId = notification.id;
var myNotification = tizen.notification.get(myId);
</pre> </li>
tizen.notification.update(myNotification);
</pre> </li>
<li>To remove notifications:
- <ol>
+ <ol type="a">
<li><p>To remove a previously posted notification, use the <span style="font-family: Courier New,Courier,monospace">remove()</span> method with the notification ID as a parameter:</p> <pre class="prettyprint">
tizen.notification.remove(myNotification.id);
</pre> </li>
tizen.notification.removeAll();</pre> </li>
</ol></li>
</ol>
- </div>
- </li>
-
- </ul>
-</div>
-</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a class="opensection" href="../../../../../org.tizen.guides/html/web/tizen/ui/ui_guide_w.htm">User Interface Guides</a></li>
+ <li><a href="../../../../../org.tizen.guides/html/web/tizen/ui/ui_guide_w.htm">User Interface Guides</a></li>
<li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/index.html#User Interface">User Interface API for Mobile Web</a></li>
<li><a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/index.html#User Interface">User Interface API for Wearable Web</a></li>
</ul>
<p>The user interface (UI) tutorials demonstrate how to create and manage the UI and its various elements and events in Tizen Web applications:</p>
<ul>
<li><a href="badge_tutorial_w.htm">Badge: Displaying the Notification (Badge) Count on the Home Screen</a> <p>Demonstrates how you can manage home screen badges.</p></li>
- </ul>
-
-<p>The following tutorials apply in <span style="color: red">mobile applications only</span>:</p>
-<ul>
<li><a href="noti_tutorial_w.htm">Notification: Notifying Users of Application Events</a> <p>Demonstrates how you can manage notifications created based on application events.</p></li>
</ul>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
</div>
<div id="container"><div id="contents"><div class="content">
-<h1 id="tau-introduction">Web UI Framework (UIFW): Creating UI Components</h1>
-<div class="cont"><div class="static-cont">
+<h1 id="tau-introduction">Web UI Framework (UIFW): Creating UI Components</h1>
<p>This tutorial demonstrates how you can use the Web UI Framework (UIFW), which provides TAU (Tizen
Advanced UI Library). TAU is the standard Web UI library for the Tizen platform. It is a collection of UI components that simplify application coding.</p>
<h2>Warm-up</h2>
<p>Become familiar with the Tizen Web UI Framework API basics by learning about:</p>
<ul>
- <li><a class="opensection" href="#intro">Creating a Simple Application</a>
+ <li><a href="#intro">Creating a Simple Application</a>
<p>Create an application with a header and a footer button.</p></li>
- <li><a class="opensection" href="#application_visual_layout">Managing Pages</a>
+ <li><a href="#application_visual_layout">Managing Pages</a>
<p>Use pages to organize your application screens.</p></li>
- <li><a class="opensection" href="#basic_page_routing">Managing Page Routing</a>
+ <li><a href="#basic_page_routing">Managing Page Routing</a>
<p>Change between multiple application pages.</p></li>
- <li><a class="opensection" href="#introduction_to_widgets">Managing UI Components</a>
+ <li><a href="#introduction_to_widgets">Managing UI Components</a>
<p>Use UI components in your application, and modify their behavior and appearance.</p></li>
- <li><a class="opensection" href="#notes">Creating a Notepad Application</a>
+ <li><a href="#notes">Creating a Notepad Application</a>
<p>Create an application that allows the user to create and manage notes, and displays the notes on the main page.</p></li>
</ul>
</tbody>
</table>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
-
- <ul class="devicespecifications">
-
- <li>
- <div class="devicespec-tit">
- <h2 id="intro" name="intro" class="items-tit-h2">Creating a Simple Application</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="intro" name="intro">Creating a Simple Application</h2>
<p>To create a simple application in a Web browser:</p>
-<ul class="ul">
+<ul>
<li><p>To create a wearable application with a header and a footer button for closing the application, use the following code:</p>
<pre class="prettyprint"><div class="ui-page ui-page-active">
<div class="ui-header">MyApplication</div>
</tbody>
</table>
-<p>For more information on the standalone Web application concept, see <a class="opensection" href="#application_visual_layout">Managing Pages</a>.</p>
+<p>For more information on the standalone Web application concept, see <a href="#application_visual_layout">Managing Pages</a>.</p>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="application_visual_layout" name="application_visual_layout" class="items-tit-h2">Managing Pages</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="application_visual_layout" name="application_visual_layout">Managing Pages</h2>
<p>The basic building block of an application UI in the TAU library is the <span style="font-family: Courier New,Courier,monospace">Page</span> element, which includes all other elements. The element is optional and extendable, so you can have any element for grouping controls you want. </p>
<p>The page consist of:</p>
-<ul class="ul">
+<ul>
<li>Header area
<p>Shows the user which page is currently open. The header can contain buttons, menus, and toolbars. The header is optional.</p></li>
<li>Content area
<p>All the page areas are specified by a corresponding <span style="font-family: Courier New,Courier,monospace">class</span> attribute.</p>
<p class="figure">Figure: Page content</p>
-<p><img src="../../../images/application_page_layout.png" alt="Application UI Schema" title="Application UI Schema" /></p>
+<p
align="center"><img src="../../../images/application_page_layout.png" alt="Application UI Schema" title="Application UI Schema" /></p>
<p>If there is no <span style="font-family: Courier New,Courier,monospace">Page</span> element in the markup, TAU creates one. For example, if no <span style="font-family: Courier New,Courier,monospace">Page</span> element exists:</p>
<pre class="prettyprint"><span>I have no page</span>
</div>
</div>
</pre>
-<p>The popup works because TAU opens (makes visible) the page whose <span style="font-family: Courier New,Courier,monospace">id</span> attribute corresponds to the <span style="font-family: Courier New,Courier,monospace">#hashtag</span> page. This is basic page routing; for more information see <a class="opensection" href="#basic_page_routing">Managing Page Routing</a>.</p>
+<p>The popup works because TAU opens (makes visible) the page whose <span style="font-family: Courier New,Courier,monospace">id</span> attribute corresponds to the <span style="font-family: Courier New,Courier,monospace">#hashtag</span> page. This is basic page routing; for more information see <a href="#basic_page_routing">Managing Page Routing</a>.</p>
<table class="note">
<tbody>
<tr>
</table>
</li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="basic_page_routing" name="basic_page_routing" class="items-tit-h2">Managing Page Routing</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="basic_page_routing" name="basic_page_routing">Managing Page Routing</h2>
<p>TAU is basically a UI framework, but since its purpose is to ease application building, it also provides basic functionality for changing pages in multi-screen applications. The mechanics behind page routing are simple, and works without any additional JavaScript code. If necessary, you can use the API to get more powerful page routing functionalities.</p>
<p>To manage page routing:</p>
-<ul class="ul">
+<ul>
<li id="routing-without-javascript">To route without JavaScript:
<p>TAU routing is based on URL hash changes, and it has a built-in mechanism for history tracking. The framework responds to <span style="font-family: Courier New,Courier,monospace">#hashtag</span> changes and tries to display the page that has the <span style="font-family: Courier New,Courier,monospace">id</span> attribute equal to the hashtag value. This approach works for pages defined inside the same HTML document.</p>
<p>TAU uses every <span style="font-family: Courier New,Courier,monospace"><a></span> element in the page and binds routing methods for them. In addition, all button instances that are based on that tag and have a proper <span style="font-family: Courier New,Courier,monospace">href</span> attribute work with the framework router. The active page has an <span style="font-family: Courier New,Courier,monospace">ui-page-active</span> class assigned. Set that class yourself to be sure the correct page is displayed.</p>
-<pre class="prettyprint"><--! pageOne.html -->
+<pre class="prettyprint"><!--pageOne.html-->
<div class="ui-page ui-page-active" id="first">
<div class="ui-content">
<a href="pageTwo.html">Go to page two</a>
</div>
</div>
-<--! pageTwo.html -->
+<!--pageTwo.html-->
<div class="ui-page" id="two">
<div class="ui-content">
<a href="pageOne.html">Go to page one</a>
<li id="routing-api">To route using the API:
<p>You can change pages through the TAU API by using the <span style="font-family: Courier New,Courier,monospace">tau.changePage()</span> method:</p>
-<pre class="prettyprint"><--! pageTwo.html -->
+<pre class="prettyprint"><!--pageTwo.html-->
<div class="ui-page ui-page-active" id="first">
<div class="ui-content">
You are viewing the first page of the example.
</script>
</div>
-<--! pageTwo.html -->
+<!--pageTwo.html-->
<div class="ui-page" id="second">
<div class="ui-content">
This is the second page of the example.
</pre>
</li>
</ul>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="introduction_to_widgets" name="introduction_to_widgets" class="items-tit-h2">Managing UI Components</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
-<p>A UI component is basically a UI control with specific functionality, such as an input text box, a drop-down menu, or a touch slider. UI components build your application interface, and can be used anywhere in the application. They speed up application development, since much of the work for handling the UI is implemented in them. Some UI components are directly visible, while others are not (for example, the layout UI component).</p>
+ <h2 id="introduction_to_widgets" name="introduction_to_widgets">Managing UI Components</h2>
+
+<p>A UI component is basically a UI element with specific functionality, such as an input text box, a drop-down menu, or a touch slider. UI components build your application interface, and can be used anywhere in the application. They speed up application development, since much of the work for handling the UI is implemented in them. Some UI components are directly visible, while others are not (for example, the layout UI component).</p>
<p>A "UI component":</p>
-<ul class="ul">
+<ul>
<li>Is a graphical element.</li>
<li>Displays data and modifies other elements.</li>
<li>Allows data modification.</li>
<p>The TAU UI components have high performance. The previous <span style="font-family: Courier New,Courier,monospace">web-ui-fw</span> framework, based on jQuery Mobile, was actually an extension. The framework was redefined, conforming to the Tizen platform. The UI components and the look were also redefined. TAU goes a step further still, breaking the dependence on jQuery and jQuery Mobile, while still being compatible with the latter.</p>
<p>The TAU components were rewritten from scratch, with a different architecture in half of them. Simply put, the building phase (which means creating, modifying, and removing elements and properties), which ensures the "look" of the UI component and its structure, and the control logic were separated. This allows pre-building the markup for faster application runtime and startup.</p>
<p>The key features of the TAU components are:</p>
-<ul class="ul">
+<ul>
<li>Performance</li>
<li>Pre-building</li>
<li>Easy to use API</li>
</ul>
<p>A basic UI component implements 5 protected methods:</p>
-<ul class="ul">
+<ul>
<li><span style="font-family: Courier New,Courier,monospace">build</span> is responsible for the UI component creation.
<table class="note">
<tbody>
<li id="widget-flavours">Customize the UI components.
<p>Almost all UI components support options which change their look and behavior. The options can be changed either on UI component creation or sometimes at runtime. To specify the options, you can use 2 methods:</p>
-<ul
class="ul"><li><p>Use the <span style="font-family: Courier New,Courier,monospace">data-\*</span> attributes, where <span style="font-family: Courier New,Courier,monospace">\*</span> stands for the option name.</p>
+<ul><li><p>Use the <span style="font-family: Courier New,Courier,monospace">data-\*</span> attributes, where <span style="font-family: Courier New,Courier,monospace">\*</span> stands for the option name.</p>
<pre class="prettyprint"><a href="popup.html" data-rel="popup" data-transition="slideup">I'll slide up</a>
</pre></li>
<li><p>When your UI component is created dynamically, pass the options to the
input = tau.engine.instanceWidget(inputElement, "Checkboxradio");
window.setTimeout(function ()
{
- input.value(false); // toggle checkbox
+ input.value(false); /* Toggle checkbox */
}, 2500);
});
</script>
</pre>
</li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="notes" name="notes" class="items-tit-h2">Creating a Notepad Application</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="notes" name="notes">Creating a Notepad Application</h2>
<p>The notepad application shows all the notes in the main page, and allows the user to add new notes, edit existing notes, and delete notes by swiping them. The notes on the main page can be scrolled and edited, and a button is provided for adding a new note. After you click a note, it is displayed in the edit page for editing.</p>
<ol>
<li>Generate an application from the Tizen SDK.
<p>Create a simple basic application that can be used for further development:</p>
-<ol><li>In the IDE menu, go to
+<ol type="a"><li>In the IDE menu, go to
<strong>File > New > Tizen Web Project > WEARABLE-2.3 > Wearable UI > Basic Application</strong>.</li>
<li>Enter the application name as <strong>Notes</strong> and click <strong>Finish</strong>.</li></ol>
<p>The IDE creates the application with a default file structure.</p></li>
<li>Edit the section header for the <span style="font-family: Courier New,Courier,monospace">index.html</span> file.
<p>Because the application runs on mobile or wearable devices, make sure that you have the correct <span style="font-family: Courier New,Courier,monospace">tau.css</span> styles for the corresponding profile:</p>
-<ul class="ul"><li>Mobile:
+<ul><li>Mobile:
<pre class="prettyprint"><link rel="stylesheet" type="text/css" href="lib/tau/mobile/theme/default/tau.min.css"/></pre></li>
<li>Wearable:
<pre class="prettyprint"><link rel="stylesheet" type="text/css" href="lib/tau/wearable/theme/default/tau.min.css"/></pre>
<title>Notepad</title>
- <!-- Use 'mobile' or 'wearable' to choose the device TAU profile -->
+ <!--Use 'mobile' or 'wearable' to choose the device TAU profile-->
<link rel="stylesheet" type="text/css" href="lib/tau/mobile/theme/default/tau.css"/>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head></pre></li>
<li>Create the pages: the main page for displaying the notes and the editing page for adding and editing notes.
-<ol><li>The main page is the first page, defined with the <span style="font-family: Courier New,Courier,monospace">div</span> block with the <span style="font-family: Courier New,Courier,monospace">ui-page</span> class and <span style="font-family: Courier New,Courier,monospace">main</span> id.
-<ol><li>Add the title header (<strong>Notes</strong>) for the page:
+<ol type="a"><li>The main page is the first page, defined with the <span style="font-family: Courier New,Courier,monospace">div</span> block with the <span style="font-family: Courier New,Courier,monospace">ui-page</span> class and <span style="font-family: Courier New,Courier,monospace">main</span> id.
+<ol type="a"><li>Add the title header (<strong>Notes</strong>) for the page:
<pre class="prettyprint">
<div id="main" class="ui-page">
<header class="ui-header">
<p>The editing page is needed for adding or editing a selected note. It has a <span style="font-family: Courier New,Courier,monospace">textarea</span> element to allow the user to edit the selected note.</p>
<pre class="prettyprint">
- <!-- This code applies to wearable applications -->
+<!--This code applies to wearable applications-->
<div class="ui-page" id="editor">
<div class="ui-header">
<h1>Editor</h1>
return $('[data-role="page"]:visible')[0].id;
}
- /**
- * Refresh current page
- */
+ /* Refresh current page */
function refreshCurrentPage()
{
$('#' + getCurrentPageId()).trigger('create');
return getStorage(STORAGE_KEY) || [];
}
- /**
- * Clear list with notes
- */
+ /* Clear list with notes */
function clearNotesList()
{
notesList.innerHTML = '';
}
- /**
- * Delete note from storage
- */
+ /* Delete note from storage */
function deleteNote(index)
{
var notes = getNotes();
}
}
- /**
- * Show all notes extracted from local storage
- */
+ /* Show all notes extracted from local storage */
function showNotes()
{
var notes = getNotes(),
}
}
- /**
- * Clear editor textarea
- */
+ /* Clear editor textarea */
function clearEditor()
{
editorField.value = '';
}
- /**
- * Save note to storage
- */
+ /* Save note to storage */
function saveNote()
{
var notes = getNotes();
tau.changePage(mainPageId);
}
- /**
- * New note button handler
- */
+ /* New note button handler */
function newNote()
{
currentIndex = null;
tau.changePage(editorPageId);
}
- /**
- * On editor page show handler
- */
+ /* On editor page show handler */
function onEditorPageShow()
{
editorField.focus();
}
- /**
- * Attach events
- */
+ /* Attach events */
function events()
{
newBtn.addEventListener('click', newNote);
});
}
- /**
- * Initialize
- */
+ /* Initialize */
function init()
{
showNotes();
</script>
</pre>
<p>Now the application is ready and you can deploy it to a device or Emulator.</p> </li></ol>
- </div>
- </li>
-</ul>
-
-</div></div>
+
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../images/mw_icon.png"/> <img alt="Wearable Web" src="../images/ww_icon.png"/></p>
</div>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/><br/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a href="#Triggering" class="opensection">Triggering Server Push Requests</a></li>
- <li><a href="#Receiving" class="opensection">Receiving Server Push Data</a></li>
+ <li><a href="#Triggering">Triggering Server Push Requests</a></li>
+ <li><a href="#Receiving">Receiving Server Push Data</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<div id="container"><div id="contents"><div class="content">
<h1>Server-Sent Events: Using Server Push in Web Environment</h1>
- <div class="cont"><div class="static-cont">
<p>This tutorial demonstrates how you can implement server push messaging.</p>
<li><a href="#Receiving">Receiving Server Push Data</a><p>Define the data server and the push data receiving event.</p></li>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
-
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="Triggering" name="Triggering" class="items-tit-h2">Triggering Server Push Requests</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="Triggering" name="Triggering">Triggering Server Push Requests</h2>
+
<p>To take advantage of the server push feature, you must learn to connect to the server to request push data:</p>
<ol>
<li>Create an <a href="http://www.w3.org/TR/2011/WD-eventsource-20111020/#the-eventsource-interface" target="_blank">EventSource</a> interface instance:
</ol>
<p>In the following figure, the <span style="font-family: Courier New,Courier,monospace">open</span> event is fired every 2 seconds.</p>
<p class="figure">Figure: Push request event</p>
-<p
style="text-align:center;"><img alt="Push request event" src="../../../images/server-sent_request.png" /></p>
+<p
align="center"><img alt="Push request event" src="../../../images/server-sent_request.png" /></p>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following files:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/communication/server_sent_events" target="_blank">server_sent_events_client1.html</a></li>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/communication/server_sent_events" target="_blank">server_sent_events_server.php</a></li>
</ul>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="Receiving" name="Receiving" class="items-tit-h2">Receiving Server Push Data</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="Receiving" name="Receiving">Receiving Server Push Data</h2>
+
<p>To take advantage of the server push feature, you must learn to handle the push data events:</p>
<ol>
<li><p>Define the data server that the client connects to, according to the <a href="http://www.w3.org/TR/2011/WD-eventsource-20111020/#event-stream-interpretation" target="_blank">event stream interpretation rules</a>.</p>
</ol>
<p>In the following figure, the <span style="font-family: Courier New,Courier,monospace">open</span> event is fired every 2 seconds and the <span style="font-family: Courier New,Courier,monospace">message</span> event shows that push data is received.</p>
<p class="figure">Figure: Push message event</p>
-<p
style="text-align:center;"><img alt="Push message event" src="../../../images/server-sent_message.png" /></p>
+<p
align="center"><img alt="Push message event" src="../../../images/server-sent_message.png" /></p>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following files:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/communication/server_sent_events" target="_blank">server_sent_events_client2.html</a></li>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/communication/server_sent_events" target="_blank">server_sent_events_server.php</a></li>
</ul>
- </div>
- </li>
- </ul>
-</div>
-</div>
+
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a href="#Cross-document_Messaging" class="opensection">Using Cross-document Messaging</a>
+ <li><a href="#Cross-document_Messaging">Using Cross-document Messaging</a>
</li>
- <li><a href="#Channel_Messaging" class="opensection">Using Channel Messaging</a>
+ <li><a href="#Channel_Messaging">Using Channel Messaging</a>
</li>
</ul>
<p class="toc-title">Related Info</p>
<div id="container"><div id="contents"><div class="content">
<h1>HTML5 Web Messaging: Accessing Device-specific Information</h1>
- <div class="cont"><div class="static-cont">
<p>This tutorial demonstrates how you can send messages between documents and through the message channel ports.</p>
<li><a href="#Channel_Messaging">Using Channel Messaging</a><p>Send a message from document A to document B using the message channel ports.</p></li>
</ul>
- <div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
-
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="Cross-document_Messaging" name="Cross-document_Messaging" class="items-tit-h2">Using Cross-document Messaging</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="Cross-document_Messaging" name="Cross-document_Messaging">Using Cross-document Messaging</h2>
+
<p>Learning how to use cross-document messaging enhances the communication capabilities of your application:</p>
<ol>
<li>Create document A and B.</li>
</ol>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following file:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/communication/html5_web_messaging" target="_blank">web_messaging_cross_document_messaging.htm</a></li>
</ul>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="Channel_Messaging" name="Channel_Messaging" class="items-tit-h2">Using Channel Messaging</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="Channel_Messaging" name="Channel_Messaging">Using Channel Messaging</h2>
+
<p>Learning how to use channel messaging enhances the communication capabilities of your application:</p>
<ol>
<li>To send a message from document A to document B, create in document A a <a href="http://www.w3.org/TR/2012/CR-webmessaging-20120501/#message-channels" target="_blank">MessageChannel</a> interface instance, which has 2 <a href="http://www.w3.org/TR/2012/CR-webmessaging-20120501/#message-ports" target="_blank">message port</a> attributes: <span style="font-family: Courier New,Courier,monospace">port1</span> and <span style="font-family: Courier New,Courier,monospace">port2</span>.
</ol>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following files:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/communication/html5_web_messaging" target="_blank">web_messaging_channel_messaging.htm</a></li>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/communication/html5_web_messaging" target="_blank">web_messaging_channel_messaging_iframe.htm</a></li>
</ul>
- </div>
- </li>
- </ul>
-</div>
-</div>
+
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a href="#Connecting_Socket_Server" class="opensection">Connecting to the Socket Server</a>
+ <li><a href="#Connecting_Socket_Server">Connecting to the Socket Server</a>
</li>
- <li><a href="#Sending_Data" class="opensection">Sending Data to the Server</a>
+ <li><a href="#Sending_Data">Sending Data to the Server</a>
</li>
- <li><a href="#Receiving_Data" class="opensection">Receiving Data from the Server</a>
+ <li><a href="#Receiving_Data">Receiving Data from the Server</a>
</li>
- <li><a href="#Closing_Socket_Connection" class="opensection">Closing the Socket Connection</a>
+ <li><a href="#Closing_Socket_Connection">Closing the Socket Connection</a>
</li>
</ul>
<p class="toc-title">Related Info</p>
<div id="container"><div id="contents"><div class="content">
<h1>WebSocket: Exchanging Data Using a Socket Server</h1>
- <div class="cont"><div class="static-cont">
<p>This tutorial demonstrates how you can manage the client-server communication.</p>
<h2>Warm-up</h2>
<p>Become familiar with the WebSocket API basics by learning about:</p>
<ul>
- <li><a class="opensection" href="#Connecting_Socket_Server">Connecting to the Socket Server</a>
+ <li><a href="#Connecting_Socket_Server">Connecting to the Socket Server</a>
<p>Open a connection to the socket server and track the connection status.</p></li>
- <li><a class="opensection" href="#Sending_Data">Sending Data to the Server</a>
+ <li><a href="#Sending_Data">Sending Data to the Server</a>
<p>Send data to the socket server.</p></li>
- <li><a class="opensection" href="#Receiving_Data">Receiving Data from the Server</a>
+ <li><a href="#Receiving_Data">Receiving Data from the Server</a>
<p>Receive data from the socket server.</p></li>
- <li><a class="opensection" href="#Closing_Socket_Connection">Closing the Socket Connection</a>
+ <li><a href="#Closing_Socket_Connection">Closing the Socket Connection</a>
<p>Close the connection to the socket server, and track the closing status.</p></li>
</ul>
- <div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
+ <h2 id="Connecting_Socket_Server" name="Connecting_Socket_Server">Connecting to the Socket Server</h2>
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="Connecting_Socket_Server" name="Connecting_Socket_Server" class="items-tit-h2">Connecting to the Socket Server</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
<p>To use the Web socket features in your application, you must learn to connect to a socket server:</p>
<ol>
<li><p>Create a <a href="http://www.w3.org/TR/2012/CR-websockets-20120920/#the-websocket-interface" target="_blank">WebSocket</a> interface instance using a valid socket server URL as a parameter:</p>
</ol>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following file:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/communication/the_websocket_api" target="_blank">web_socket.htm</a></li>
</ul>
-</div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="Sending_Data" name="Sending_Data" class="items-tit-h2">Sending Data to the Server</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="Sending_Data" name="Sending_Data">Sending Data to the Server</h2>
+
<p>To use the Web socket features in your application, you must learn to connect to send data to the server:</p>
<ol>
<li><p>Create a <a href="http://www.w3.org/TR/2012/CR-websockets-20120920/#the-websocket-interface" target="_blank">WebSocket</a> interface instance using a valid socket server URL as a parameter:</p>
</ol>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following file:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/communication/the_websocket_api" target="_blank">web_socket.htm</a></li>
</ul>
-</div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="Receiving_Data" name="Receiving_Data" class="items-tit-h2">Receiving Data from the Server</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+
+ <h2 id="Receiving_Data" name="Receiving_Data">Receiving Data from the Server</h2>
+
<p>To use the Web socket features in your application, you must learn to receive data from the server:</p>
<ol>
<li><p>Create a <a href="http://www.w3.org/TR/2012/CR-websockets-20120920/#the-websocket-interface" target="_blank">WebSocket</a> interface instance using a valid socket server URL as a parameter:</p>
</ol>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following file:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/communication/the_websocket_api" target="_blank">web_socket.htm</a></li>
</ul>
-</div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="Closing_Socket_Connection" name="Closing_Socket_Connection" class="items-tit-h2">Closing the Socket Connection</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+
+ <h2 id="Closing_Socket_Connection" name="Closing_Socket_Connection">Closing the Socket Connection</h2>
+
<p>To use the Web socket features in your application, you must learn to close the socket connection:</p>
<ol>
<li><p>Create a <a href="http://www.w3.org/TR/2012/CR-websockets-20120920/#the-websocket-interface" target="_blank">WebSocket</a> interface instance using a valid socket server URL as a parameter:</p>
</ol>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following file:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/communication/the_websocket_api" target="_blank">web_socket.htm</a></li>
</ul>
- </div>
- </li>
- </ul>
-</div>
-</div>
+
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a href="#Sending_Request" class="opensection">Sending a Cross-origin Request</a>
+ <li><a href="#Sending_Request">Sending a Cross-origin Request</a>
</li>
- <li><a href="#Uploading_Files" class="opensection">Uploading Files with Ajax</a>
+ <li><a href="#Uploading_Files">Uploading Files with Ajax</a>
</li>
- <li><a href="#Handling_Requests" class="opensection">Handling Request Events</a>
+ <li><a href="#Handling_Requests">Handling Request Events</a>
</li>
- <li><a href="#Tracking_Download" class="opensection">Tracking Download Progress State</a>
+ <li><a href="#Tracking_Download">Tracking Download Progress State</a>
</li>
</ul>
<p class="toc-title">Related Info</p>
<div id="container"><div id="contents"><div class="content">
<h1>XMLHttpRequest Level 1 and 2: Communicating with the Server</h1>
- <div class="cont"><div class="static-cont">
<p>This tutorial demonstrates how you can communicate with a Web server using HTTP requests.</p>
<h2>Warm-up</h2>
<p>Become familiar with the XMLHttpRequest Level 1 and 2 API basics by learning about:</p>
<ul>
- <li><a class="opensection" href="#Sending_Request">Sending a Cross-origin Request</a>
+ <li><a href="#Sending_Request">Sending a Cross-origin Request</a>
<p>Send a cross-domain request to the Web server.</p></li>
- <li><a class="opensection" href="#Uploading_Files">Uploading Files with Ajax</a>
+ <li><a href="#Uploading_Files">Uploading Files with Ajax</a>
<p>Upload files on the background using Ajax.</p></li>
- <li><a class="opensection" href="#Handling_Requests">Handling Request Events</a>
+ <li><a href="#Handling_Requests">Handling Request Events</a>
<p>Track requests through various events. </p></li>
- <li><a class="opensection" href="#Tracking_Download">Tracking Download Progress State</a>
+ <li><a href="#Tracking_Download">Tracking Download Progress State</a>
<p>Start and cancel a download and track the download status.</p></li>
</ul>
-
- <div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
+
+ <h2 id="Sending_Request" name="Sending_Request">Sending a Cross-origin Request</h2>
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="Sending_Request" name="Sending_Request" class="items-tit-h2" >Sending a Cross-origin Request</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
<p>To use the XML HTTP request features in your application, you must learn to send a cross-origin request:</p>
<ol>
<li><p>Create an <a href="http://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/#dom-xmlhttprequest" target="_blank">XMLHttpRequest</a> interface instance:</p>
</ol>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following files:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/communication/xmlhttprequest_level_2" target="_blank">xhr3.html</a></li>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/communication/xmlhttprequest_level_2" target="_blank">video_sample.mp4</a></li>
</ul>
-</div>
- </li>
- <li>
- <div class="devicespec-tit">
-<h2 id="Uploading_Files" name="Uploading_Files" class="items-tit-h2">Uploading Files with Ajax</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+
+<h2 id="Uploading_Files" name="Uploading_Files">Uploading Files with Ajax</h2>
+
<p>To use the XML HTTP request features in your application, you must learn to upload files on the background with Ajax:</p>
<ol>
<li><p>Define the input elements for the file upload. Use the <span style="font-family: Courier New,Courier,monospace">upload()</span> method for the button click event to upload the file when the button is clicked.</p>
</ol>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following file:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/communication/xmlhttprequest_level_2" target="_blank">xhr1.html</a></li>
</ul>
-</div>
- </li>
- <li>
- <div class="devicespec-tit">
-<h2 id="Handling_Requests" name="Handling_Requests" class="items-tit-h2">Handling Request Events</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+<h2 id="Handling_Requests" name="Handling_Requests">Handling Request Events</h2>
+
<p>To use the XML HTTP request features in your application, you must learn to track requests through events:</p>
<ol>
<li><p>Define a text element in which to display the request event results:</p>
</ol>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following files:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/communication/xmlhttprequest_level_2" target="_blank">xhr2.html</a></li>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/communication/xmlhttprequest_level_2" target="_blank">video_sample.mp4</a></li>
</ul>
-</div>
- </li>
- <li>
- <div class="devicespec-tit">
-<h2 id="Tracking_Download" name="Tracking_Download" class="items-tit-h2">Tracking Download Progress State</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+<h2 id="Tracking_Download" name="Tracking_Download">Tracking Download Progress State</h2>
+
<p>To use the XML HTTP request features in your application, you must learn to track download progress:</p>
<ol>
<li><p>Define the input elements for managing a download. Use the <span style="font-family: Courier New,Courier,monospace">sendRequest()</span> and <span style="font-family: Courier New,Courier,monospace">abortRequest()</span> methods for the button click events to start and cancel a download.</p>
</ol>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following file:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/communication/xmlhttprequest_level_2" target="_blank">xhr3.html</a></li>
</ul>
- </div>
- </li>
- </ul>
-</div>
-</div>
+
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a href="#retrieve" class="opensection">Retrieving Battery Status Information</a></li>
- <li><a href="#detect" class="opensection">Detecting Battery Status Changes</a></li>
+ <li><a href="#retrieve">Retrieving Battery Status Information</a></li>
+ <li><a href="#detect">Detecting Battery Status Changes</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<div id="container"><div id="contents"><div class="content">
<h1>Battery Status: Checking the Battery Status</h1>
-<div class="cont"><div class="static-cont">
<p>This tutorial demonstrates how you can retrieve and detect the battery status information of the device.</p>
<h2>Warm-up</h2>
<p>Become familiar with the Battery Status API by learning about:</p>
<ul>
- <li><a
class="opensection" href="#retrieve">Retrieving Battery Status Information</a> <p>Get and display the battery status information. </p></li>
- <li><a
class="opensection" href="#detect">Detecting Battery Status Changes</a> <p>Set event listeners to detect various battery status changes.</p></li></ul>
+ <li><a href="#retrieve">Retrieving Battery Status Information</a> <p>Get and display the battery status information. </p></li>
+ <li><a href="#detect">Detecting Battery Status Changes</a> <p>Set event listeners to detect various battery status changes.</p></li></ul>
-
- <!-- Show / Hide all links -->
- <div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
- <!-- Folds -->
- <ul class="devicespecifications">
-
- <li>
- <div class="devicespec-tit">
- <h2 id="retrieve" name="retrieve" class="items-tit-h2">Retrieving Battery Status Information</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="retrieve" name="retrieve">Retrieving Battery Status Information</h2>
+
<p>To enhance the user interaction with the device, you must learn to retrieve and display the battery status:</p>
<ol>
<li>
</ol>
<p class="figure">Figure: Displaying battery status (in mobile applications only)</p>
-<p
style="text-align:center;"><img alt="Displaying battery status (in mobile applications only)" src="../../../images/charging_battery.png" /></p>
+<p
align="center"><img alt="Displaying battery status (in mobile applications only)" src="../../../images/charging_battery.png" /></p>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following file:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/device/battery_status_api" target="_blank">show_battery_state.htm</a></li>
</ul>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="detect" name="detect" class="items-tit-h2">Detecting Battery Status Changes</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="detect" name="detect">Detecting Battery Status Changes</h2>
+
<p>To enhance the user interaction with the device, you must learn to set event handlers to detect changes in the battery status:</p>
<ol>
<li>
</ol>
<p class="figure">Figure: Battery status (in mobile applications only)</p>
-<p
style="text-align:center;"><img alt="Battery status (in mobile applications only)" src="../../../images/changing_batterystatus.png" /></p>
+<p
align="center"><img alt="Battery status (in mobile applications only)" src="../../../images/changing_batterystatus.png" /></p>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following file:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/device/battery_status_api" target="_blank">battery_event.htm</a></li>
</ul>
- </div>
- </li>
-
- </ul>
-</div>
-</div>
+
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a href="#Retrieving_Browser_State" class="opensection">Retrieving the Browser State</a>
+ <li><a href="#Retrieving_Browser_State">Retrieving the Browser State</a>
</li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a class="opensection" href="../../../../../org.tizen.guides/html/web/w3c/device/browser_state_w.htm">HTML5 Browser state Guide</a></li>
+ <li><a href="../../../../../org.tizen.guides/html/web/w3c/device/browser_state_w.htm">HTML5 Browser state Guide</a></li>
<li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#browserstate">HTML5 Browser state API for Mobile Web</a></li>
</ul>
</div></div>
<div id="container"><div id="contents"><div class="content">
<h1>HTML5 Browser state: Monitoring Browser Network Connection</h1>
-<div class="cont"><div class="static-cont">
+
<p>This tutorial demonstrates how you can access the browser connection state.</p>
<table class="note">
<p>Retrieve the current browser state and track changes in the state.</p></li>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
- <!-- Folds -->
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="Retrieving_Browser_State" name="Retrieving_Browser_State" class="items-tit-h2">Retrieving the Browser State</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
- </div>
- <div class="devicespec-con">
+<h2 id="Retrieving_Browser_State" name="Retrieving_Browser_State">Retrieving the Browser State</h2>
<p>To enhance the user interaction with the device, you must learn to retrieve the browser state:</p>
<ol>
<li>The <span style="font-family: Courier New,Courier,monospace">updateIndicator()</span> method updates the browser connection state information on the screen to reflect the current state.
<p>To retrieve the current state, use the return value of the <span style="font-family: Courier New,Courier,monospace">onLine</span> attribute of the <span style="font-family: Courier New,Courier,monospace">navigator</span> interface:</p>
-<pre><pre class="prettyprint lang-html" style="border:0px">
+<pre class="prettyprint lang-html">
<!DOCTYPE HTML>
<html>
<head>
<title>Online status</title>
- <script></pre><pre class="prettyprint lang-js" style="border:0px">
+ <script></pre><pre class="prettyprint lang-js">
function updateIndicator()
{
var status = navigator.onLine ? 'online' : 'offline';
document.getElementById('indicator').textContent = status;
}
-</pre></pre> </li>
+</pre> </li>
<li><p>Subscribe to event listeners to be informed when the connection state changes:</p>
-<pre><pre class="prettyprint lang-js" style="border:0px">
+<pre class="prettyprint lang-js">
/* Receive event when page is loaded */
window.onload = updateIndicator;
/* Receive event when network connection is available */
window.ononline = updateIndicator;
/* Receive event when network connection is unavailable */
- window.onoffline = updateIndicator;</pre><pre class="prettyprint lang-html" style="border:0px"> </script>
+ window.onoffline = updateIndicator;</pre><pre class="prettyprint lang-html"> </script>
</head>
<body>
<p>The network is: <span id="indicator">(state unknown)</span>
</body>
</html>
-</pre></pre></li></ol>
+</pre></li></ol>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following file:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/device/html5_browser_state" target="_blank">browser_state.htm</a></li>
</ul>
- </div></li></ul>
- </div></div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a href="#rotate" class="opensection">Detecting Device Rotation</a></li>
- <li><a href="#accelerate" class="opensection">Detecting Device Acceleration</a></li>
+ <li><a href="#rotate">Detecting Device Rotation</a></li>
+ <li><a href="#accelerate">Detecting Device Acceleration</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<div id="container"><div id="contents"><div class="content">
<h1>DeviceOrientation Event Specification: Detecting Device Motion</h1>
-<div class="cont"><div class="static-cont">
+
<p>This tutorial demonstrates how you can detect device motions in Tizen.</p>
</ul>
<h2>Task in Mobile Applications</h2>
-<p>This tutorial comprises the following tasks:</p>
-
-<ul>
-<li>In the <a href="task_compass_w.htm">Compass</a> task, we will walk through using the magnetic sensor data to orient a compass needle.</li>
-<li>In the <a href="task_sensorball_w.htm">Sensor Ball</a> task, we will walk through using the gyro sensor data to create a game.</li></ul>
+<p>In the <a href="task_compass_w.htm">Compass</a> task, we will walk through using the magnetic sensor data to orient a compass needle.</p>
- <!-- Show / Hide all links -->
- <div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
- <!-- Folds -->
- <ul class="devicespecifications">
-
- <li>
- <div class="devicespec-tit">
- <h2 id="rotate" name="rotate" class="items-tit-h2">Detecting Device Rotation</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="rotate" name="rotate">Detecting Device Rotation</h2>
+
<p>Learning how to detect device rotation is a basic device motion handling skill:</p>
<ol>
<li>Display the device rotation details on the screen:
-<pre class="prettyprint"><pre class="prettyprint lang-html" style="border:0px; margin:0px">
+<pre class="prettyprint lang-html">
<h1>Device orientation tutorial</h1>
<div>
<p id="alpha"></p>
<p id="gamma"></p>
</div>
-<script></pre><pre class="prettyprint lang-js" style="border:0px; margin:0px">
+<script></pre><pre class="prettyprint lang-js">
var alphaElem = document.getElementById("alpha");
var betaElem =document.getElementById("beta");
var gammaElem = document.getElementById("gamma");
-</pre></pre></li>
+</pre></li>
<li>To track changes in the device rotation, subscribe to the <a href="http://www.w3.org/TR/2011/WD-orientation-event-20111201/#deviceorientation" target="_blank">deviceorientation</a> event:
-<pre class="prettyprint"><pre class="prettyprint lang-js" style="border:0px; margin:0px">
+<pre class="prettyprint lang-js">
window.addEventListener("deviceorientation", function(e)
{
alphaElem.innerHTML ='alpha value ' + Math.round(e.alpha);
betaElem.innerHTML = 'beta value ' + Math.round(e.beta);
gammaElem.innerHTML = 'gamma value ' + Math.round(e.gamma);
- }, true);</pre><pre class="prettyprint lang-html" style="border:0px; margin:0px">
+ }, true);</pre><pre class="prettyprint lang-html">
</script>
-</pre></pre>
+</pre>
</li></ol>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following file:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/device/device_orientation_event_specification" target="_blank">device_orientation.html</a></li>
</ul>
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="accelerate" name="accelerate" class="items-tit-h2">Detecting Device Acceleration</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="accelerate" name="accelerate">Detecting Device Acceleration</h2>
<p>Learning how to detect device acceleration is a basic device motion handling skill:</p>
<ol>
<li>Display the device acceleration details on the screen:
-<pre class="prettyprint"><pre class="prettyprint lang-html" style="border:0px; margin:0px">
+<pre class="prettyprint lang-html">
<h1>device orientation tutorial</h1>
<div>
<p id="firElem"></p>
<p id="thirElem"></p>
</div>
-<script></pre><pre class="prettyprint lang-js" style="border:0px; margin:0px">
+<script></pre><pre class="prettyprint lang-js">
var firElem = document.getElementById("firElem");
var secElem =document.getElementById("secElem");
var thirElem = document.getElementById("thirElem");
-</pre></pre></li>
+</pre></li>
<li>To track changes in the device acceleration, subscribe to the <a href="http://www.w3.org/TR/2011/WD-orientation-event-20111201/#devicemotion" target="_blank">devicemotion</a> event:
-<pre class="prettyprint">
-<pre class="prettyprint lang-js" style="border:0px; margin:0px">
+<pre class="prettyprint lang-js">
window.addEventListener("devicemotion", function(e)
{
/* Data for acceleration */
+ '[ alpha value: ' + Math.round(e.rotationRate.alpha) + " degree ]<br>"
+ '[ beta value: ' + Math.round(e.rotationRate.beta) + " degree ]<br>"
+ '[ gamma value: ' + Math.round(e.rotationRate.gamma) + ' degree ]';
- }, true);</pre><pre class="prettyprint lang-html" style="border:0px; margin:0px">
+ }, true);</pre><pre class="prettyprint lang-html">
</script>
-</pre></pre></li></ol>
+</pre></li></ol>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following file:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/device/device_orientation_event_specification" target="_blank">device_motion.html</a></li>
</ul>
- </div>
- </li>
-
- </ul>
-</div>
-</div>
+
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a class="opensection" href="../../../../../org.tizen.guides/html/web/w3c/device/device_guide_w.htm">Device Guides</a></li>
+ <li><a href="../../../../../org.tizen.guides/html/web/w3c/device/device_guide_w.htm">Device Guides</a></li>
<li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#device">Device API for Mobile Web</a></li>
<li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#device">Device API for Wearable Web</a></li>
</ul>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a href="#manage" class="opensection">Managing the Screen Orientation</a></li>
+ <li><a href="#manage">Managing the Screen Orientation</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a class="opensection" href="../../../../../org.tizen.guides/html/web/w3c/device/screen_orientation_w.htm">Screen Orientation Guide</a></li>
+ <li><a href="../../../../../org.tizen.guides/html/web/w3c/device/screen_orientation_w.htm">Screen Orientation Guide</a></li>
<li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#sceenori">Screen Orientation API for Mobile Web</a></li>
</ul>
</div></div>
<div id="container"><div id="contents"><div class="content">
<h1>Screen Orientation: Managing Screen Orientation State</h1>
-<div class="cont"><div class="static-cont">
+
<p>This tutorial demonstrates how you can manage the screen orientation state.</p>
<table class="note">
<p>Lock the screen to a specific orientation and release the lock.</p></li>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
- <!-- Folds -->
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="manage" name="manage" class="items-tit-h2">Managing the Screen Orientation</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="manage" name="manage">Managing the Screen Orientation</h2>
+
<p>To enhance the user interaction with the device, you must learn to manage the screen orientation. The application implemented below consists of buttons used to either lock the screen orientation to a specific state or release the lock. The current orientation state is also displayed on the screen.</p>
<p class="figure">Figure: Screen orientation application</p>
-<p
style="text-align:center;"><img alt="Screen orientation application" src="../../../images/screen_orientation.png" /></p>
+<p
align="center"><img alt="Screen orientation application" src="../../../images/screen_orientation.png" /></p>
<ol><li>Define the text and button elements for the screen (the body of the HTML page):
<pre class="prettyprint">
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following file:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/device/the_screen_orientation_api" target="_blank">screen_orientation.html</a></li>
</ul>
- </div>
- </li>
-
-
- </ul>
-</div>
-</div>
+
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
</div>
<h1>Task: Compass</h1>
<p>This task, based on the Compass sample delivered with the Tizen SDK, 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/downloads/sample-applications/sample-mobile-applications" target="blank">Compass</a>.</p>
<p>This task consists of the following parts:</p>
- <ul class="ul">
+ <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>
<p>The following figure shows the main screen of the application.</p>
<p class="figure">Figure: Compass screen</p>
- <p
style="text-align: center;"><img alt="Compass screen" src="../../../images/compass.png" /></p>
+ <p
align="center"><img alt="Compass screen" src="../../../images/compass.png" /></p>
<h3 id="main" name="main">Defining the Main Screen</h3>
<ol class="tutorstep">
<h2 id="configure" name="configure">Initializing the Application</h2>
<ol class="tutorstep">
<li>main.js Source File
- <ol>
+ <ol type="a">
<li><p>The application uses the <span style="font-family: Courier New,Courier,monospace">ready</span> event to determine when it has been initialized, and to call the <span style="font-family: Courier New,Courier,monospace">init()</span> method.</p>
<pre class="prettyprint">$(document).ready(init);</pre> </li>
<p>The orientation data interpretation and needle movement functionality is implemented in the <span style="font-family: Courier New,Courier,monospace">main.js</span> file.</p>
<ol class="tutorstep">
<li>Determining the Cardinal Direction
-<ol>
+<ol type="a">
<li>The <span style="font-family: Courier New,Courier,monospace">onDeviceOrientation()</span> event handler is called each time the device orientation changes. The new orientation details are received in the <span style="font-family: Courier New,Courier,monospace">dataEvent</span> parameter, and the <span style="font-family: Courier New,Courier,monospace">alpha</span> attribute is used to determine the current cardinal direction to be displayed at the top of the compass screen.
<p>The <span style="font-family: Courier New,Courier,monospace">alpha</span> 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)
</li></ol></li>
<li>Updating the Compass Needle Position
-<ol>
+<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;
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
</div>
<p>This task, based on the TouchPaint sample delivered with the Tizen SDK, demonstrates how you can use the <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#touch">Touch Events version 1</a> API to create a simple paint application using the touch events and the <a href="../../../../../org.tizen.guides/html/web/w3c/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/downloads/sample-applications/sample-mobile-applications" target="blank">TouchPaint</a>.</p>
<p>This task consists of the following parts:</p>
- <ul class="ul">
+ <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>
<p>The following figure shows the main screen of the application.</p>
<p class="figure">Figure: TouchPaint screen</p>
-<p
style="text-align:center;"><img alt="TouchPaint screen" src="../../../images/touchpaint_sd.png" /></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 class="tutorstep">
<li>Drawing based on Stored Event Coordinates
<p>Create a <span style="font-family: Courier New,Courier,monospace">drawPath</span> array that remembers the order of the triggered touch events, and edit the <span style="font-family: Courier New,Courier,monospace">touchStartHandler()</span> and <span style="font-family: Courier New,Courier,monospace">touchMoveHandler()</span> event handlers to define the lines the user is drawing.</p>
-<ol>
+<ol type="a">
<li>
<p>When a <span style="font-family: Courier New,Courier,monospace">touchstart</span> event is triggered, the event handler stores the initial position.</p>
<pre class="prettyprint">
<h3 id="stroke" name="stroke">Applying the Stroke Styles</h3>
<ol class="tutorstep">
<li>main.js Source File
-<ol>
+<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()
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<p>This task, based on the TouchPaint sample delivered with the Tizen SDK, demonstrates how you can use the <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#touch">Touch Events version 1</a> API to create a simple paint application using the touch events and the <a href="../../../../../org.tizen.guides/html/web/w3c/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/downloads/sample-applications/sample-wearable-applications" target="blank">TouchPaint</a>.</p>
<p>This task consists of the following parts:</p>
- <ul class="ul">
+ <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>
<p>The following figure shows the main screens of the application.</p>
<p class="figure">Figure: TouchPaint screens</p>
-<p
style="text-align:center;"><img alt="TouchPaint screens" src="../../../images/touchpaint_sd_ww.png" /></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 class="tutorstep">
<p>The line drawing functionality is implemented in the <span style="font-family: Courier New,Courier,monospace">main.js</span> file.</p>
<ol class="tutorstep">
<li>main.js Source File
-<ol><li>
+<ol type="a"><li>
<p>Define event listeners and handlers to manage the <span style="font-family: Courier New,Courier,monospace">touchstart</span>, <span style="font-family: Courier New,Courier,monospace">touchmove</span>, and <span style="font-family: Courier New,Courier,monospace">touchend</span> events on the canvas.</p>
<pre class="prettyprint">
function addCanvasListeners()
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a href="#handle" class="opensection">Handling Touch Events</a></li>
- <li><a href="#retrieve" class="opensection">Retrieving the Event Point Occurrence</a></li>
- <li><a href="#control" class="opensection">Controlling Multi-point Touches</a></li>
- <li><a href="#enhance" class="opensection">Enhancing Touch Responsiveness</a>
+ <li><a href="#handle">Handling Touch Events</a></li>
+ <li><a href="#retrieve">Retrieving the Event Point Occurrence</a></li>
+ <li><a href="#control">Controlling Multi-point Touches</a></li>
+ <li><a href="#enhance">Enhancing Touch Responsiveness</a>
</li>
</ul>
<p class="toc-title">Related Info</p>
<div id="container"><div id="contents"><div class="content">
<h1>Touch Events version 1: Controlling Touch Events</h1>
-<div class="cont"><div class="static-cont">
+
<p>This tutorial demonstrates how you can use touch events in Tizen.</p>
<p>Become familiar with the Touch Events version 1 API basics by learning about:</p>
<ul>
-<li><a class="opensection" href="#handle">Handling Touch Events</a>
+<li><a href="#handle">Handling Touch Events</a>
<p>Define an element for triggering touch events and the event handlers for reacting to the events.</p></li>
-<li><a class="opensection" href="#retrieve">Retrieving the Event Point Occurrence</a>
+<li><a href="#retrieve">Retrieving the Event Point Occurrence</a>
<p>Retrieve the position of the move touch events.</p></li>
-<li><a class="opensection" href="#control">Controlling Multi-point Touches</a>
+<li><a href="#control">Controlling Multi-point Touches</a>
<p>Handle multiple concurrent touch events.</p></li>
</ul>
<h2>Follow-up</h2>
<p>Once we have learned the basics of Touch Events version 1 API, we can now move on to more advanced tasks, including:</p>
<ul>
-<li><a class="opensection" href="#enhance">Enhancing Touch Responsiveness</a>
+<li><a href="#enhance">Enhancing Touch Responsiveness</a>
<p>Enhance touch responsiveness to improve performance.</p></li>
</ul>
-
-
- <!-- Show / Hide all links -->
- <div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
- <!-- Folds -->
- <ul class="devicespecifications">
-
- <li>
- <div class="devicespec-tit">
- <h2 id="handle" name="handle" class="items-tit-h2">Handling Touch Events</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="handle" name="handle">Handling Touch Events</h2>
+
<p>Learning how to handle touch events improves the user interaction of your application:</p>
<ol>
</li></ol>
<p>Depending on the touch type, different touch events occur:</p>
-<ul class="ul">
+<ul>
<li>When the user touches the element, the <a href="http://www.w3.org/TR/2013/WD-touch-events-20130124/#the-touchstart-event" target="_blank">touchstart</a> and <a href="http://www.w3.org/TR/2013/WD-touch-events-20130124/#the-touchend-event" target="_blank">touchend</a> events occur.
<p class="figure">Figure: Simple touch (in mobile applications only)</p>
-<p
style="text-align:center;"><img alt="Simple touch (in mobile applications only)" src="../../../images/touch1.png" /></p>
+<p
align="center"><img alt="Simple touch (in mobile applications only)" src="../../../images/touch1.png" /></p>
</li>
<li>When the user moves their finger across the element, and then removes their finger, the <span style="font-family: Courier New,Courier,monospace">touchstart</span>, <a href="http://www.w3.org/TR/2013/WD-touch-events-20130124/#the-touchmove-event" target="_blank">touchmove</a>, and <span style="font-family: Courier New,Courier,monospace">touchend</span> events occur.
<p class="figure">Figure: Moving touch (in mobile applications only)</p>
-<p
style="text-align:center;"><img alt="Moving touch (in mobile applications only)" src="../../../images/touch2.png" /></p>
+<p
align="center"><img alt="Moving touch (in mobile applications only)" src="../../../images/touch2.png" /></p>
</li>
<li>When the user long-presses the DOM element, such as text or image, in the element, the <span style="font-family: Courier New,Courier,monospace">touchstart</span> and <a href="http://www.w3.org/TR/2013/WD-touch-events-20130124/#the-touchcancel-event" target="_blank">touchcancel</a> events occur.
<p class="figure">Figure: Cancelling touch with long press (in mobile applications only)</p>
-<p
style="text-align:center;"><img alt="Cancelling touch with long press (in mobile applications only)" src="../../../images/touch3.png" /></p>
+<p
align="center"><img alt="Cancelling touch with long press (in mobile applications only)" src="../../../images/touch3.png" /></p>
</li>
</ul>
</table>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following file:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/device/touch_events_version_1" target="_blank">touch_event_types.html</a></li>
</ul>
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="retrieve" name="retrieve" class="items-tit-h2">Retrieving the Event Point Occurrence</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="retrieve" name="retrieve">Retrieving the Event Point Occurrence</h2>
+
<p>Learning how to retrieve the coordinate of the touch event point occurrence improves the user interaction of your application:</p>
<ol>
</ol>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following file:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/device/touch_events_version_1" target="_blank">event_handling_prevent_default.html</a></li>
</ul>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="control" name="control" class="items-tit-h2">Controlling Multi-point Touches</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="control" name="control">Controlling Multi-point Touches</h2>
+
<p>Learning how to control multiple concurrent touch events improves the user interaction of your application:</p>
<ol>
</ol>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following file:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/device/touch_events_version_1" target="_blank">multi_touch.html</a></li>
</ul>
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="enhance" name="enhance" class="items-tit-h2">Enhancing Touch Responsiveness</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="enhance" name="enhance">Enhancing Touch Responsiveness</h2>
+
<p>To avoid having a delay in the single tap gesture, you can make the page unscalable, or modify touch responses:</p>
-<ul class="ul">
+<ul>
<li>Make a page unscalable:
<p>If a page is made unscalable, the double-tap gesture is not required for zooming, so the single tap gesture can be processed without delay. To make a page unscalable, use the <span style="font-family: Courier New,Courier,monospace">viewport</span> meta tag:</p>
<pre class="prettyprint"><meta name="viewport"
maximum-scale=1.0, user-scalable=0"></pre></li>
<li>Modify touch responses
<p>A touch event occurs immediately when the touched point is released, making it faster than the tap event. However, the touch event occurs even though the touched point is moved before releasing.</p>
- <ul class="ul">
+ <ul>
<li> To avoid processing the gesture when the touched point is moved, check whether the touched point is moved by setting a flag in the <span style="font-family: Courier New,Courier,monospace">touchmove()</span> event handler:
<pre class="prettyprint"><a id="test" href="#">Click test using touch event</a>
<div id="log"></div>
</script></pre>
</li>
</ul></li></ul>
- </div>
- </li>
-
-
- </ul>
-</div>
-</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a href="#manage" class="opensection">Managing Vibrations</a></li>
+ <li><a href="#manage">Managing Vibrations</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<div id="container"><div id="contents"><div class="content">
<h1>Vibration: Managing the Vibration Mechanism</h1>
-<div class="cont"><div class="static-cont">
+
<p>This tutorial demonstrates how you can manage the vibration mechanism on a device.</p>
<h2>Warm-up</h2>
<p>Become familiar with the Vibration API basics by learning about:</p>
<ul>
-<li><a class="opensection" href="#manage">Managing Vibrations</a>
+<li><a href="#manage">Managing Vibrations</a>
<p>Launch and stop vibrations with or without patterns.</p></li></ul>
- <!-- Show / Hide all links -->
- <div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
- <!-- Folds -->
- <ul class="devicespecifications">
-
- <li>
- <div class="devicespec-tit">
- <h2 id="manage" name="manage" class="items-tit-h2">Managing Vibrations</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="manage" name="manage">Managing Vibrations</h2>
<p>To enhance the user interaction with the device, you must learn to manage vibrations:</p>
<ol>
<li>To launch a vibration for a given length of time, call the <span style="font-family: Courier New,Courier,monospace">vibrate()</span> method, which is implemented by all <span style="font-family: Courier New,Courier,monospace">Navigator</span> instances:
-<pre class="prettyprint"><pre class="prettyprint lang-html" style="border:0px; margin:0px">
+<pre class="prettyprint lang-html">
<!DOCTYPE html>
<html>
<head>
content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title>Tizen Vibration API Example code</title>
- <script></pre><pre class="prettyprint lang-js" style="border:0px; margin:0px">
+ <script></pre><pre class="prettyprint lang-js">
function singleVibration()
{
/* Vibrate for 2 seconds */
navigator.vibrate(2000);
}
-</pre></pre>
+</pre>
</li>
<li>To launch a vibration that uses a pattern of vibration and still periods, define the pattern as the <span style="font-family: Courier New,Courier,monospace">vibrate()</span> method parameter:
<pre class="prettyprint">
</pre></li></ol>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following file:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/device/vibration_api" target="_blank">vibration_tutorial.html</a></li>
</ul>
- </div>
- </li>
- </ul>
-</div>
-</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a href="#create" class="opensection">Creating a Logo Animation</a>
+ <li><a href="#create">Creating a Logo Animation</a>
</li>
</ul>
<p class="toc-title">Related Info</p>
<div id="container"><div id="contents"><div class="content">
<h1>CSS Animations Module Level 3: Creating Animations</h1>
-<div class="cont"><div class="static-cont">
+
<p>This tutorial demonstrates how you can create animations in your application.</p>
<h2>Warm-up</h2>
<p>Become familiar with the CSS Animations Module Level 3 API basics by learning about:</p>
<ul>
-<li><a class="opensection" href="#create">Creating a Logo Animation</a>
+<li><a href="#create">Creating a Logo Animation</a>
<p>Animate the Tizen logo on the screen.</p></li>
</ul>
-<!-- Show / Hide all links -->
- <div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
- <!-- Folds -->
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="create" name="create" class="items-tit-h2">Creating a Logo Animation</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="create" name="create">Creating a Logo Animation</h2>
+
<p>To enhance the user experience of your application, you must learn to create a logo animation, where element properties can be assigned and changed for each element and keyframe. The logo animation is similar to the animation that appears when a Tizen device (or Emulator) is switched on:</p>
<ol>
<li>Each letter in the word "TIZEN" consecutively comes in from the left of the screen and moves to the right to its correct location.</li>
</ol>
<p class="figure">Figure: Logo animation (in mobile applications only)</p>
-<p
style="text-align:center;"><img alt="Logo animation" src="../../../images/animation1.png" /></p>
+<p
align="center"><img alt="Logo animation" src="../../../images/animation1.png" /></p>
<p>To create a logo animation:</p>
<ol>
<li>Create the HTML layout for the animation. To be able to manage the movement of each animation part separately, you must define individual elements for each part.
</pre>
</li>
<li>Create the animation:
-<ol>
+<ol type="a">
<li>To ensure that all the animation elements are played within the same time frame, some common properties are defined for the animation. The animation movement time is 7 seconds, and the animation repeats infinitely.
<p>When an animation that repeats itself is activated, it can look unnatural when it suddenly returns to its initial position after finishing an iteration. To make the repetition move naturally, set the <span style="font-family: Courier New,Courier,monospace">animation-direction</span> property to <span style="font-family: Courier New,Courier,monospace">alternate</span>. The alternate direction means that during the odd iterations the animation proceeds in the normal direction (from the 0% keyframe to the 100% keyframe), while during the even iterations the keyframes are played in the opposite direction from 100% to 0%.</p>
<pre class="prettyprint">
</pre>
</li>
<li>Create the keyframes to implement the flow for the Tizen logo:
-<ul class="ul">
+<ul>
<li>During the first 25% of the animation total playing time (7 seconds), the transparency disappears and the Tizen logo appears.</li>
<li>During the 25 - 50% of the playing time, the logo size becomes smaller as the width and height values are reduced, and due to the left and top value, the logo is positioned to the top right corner of the screen.</li>
<li>During the 50 - 100% of the playing time, the values do not change, and the logo remains in its new position.</li>
</tbody>
</table></li>
<li>Create the keyframes to implement the flow for each letter in the word "TIZEN":
-<ul class="ul">
+<ul>
<li>To hide the letter initially, the property has been assigned outside the screen at the 0% keyframe. To allow the Tizen logo to appear first, the first letter is introduced at the 30% keyframe.</li>
<li>To create a slight collision animation, the letter element moves to -10 px of the final value at the 40% keyframe before reaching its final 0 px value at the 45% keyframe.</li>
<li>The <span style="font-family: Courier New,Courier,monospace">animation-timing-function</span> property can be changed for each keyframe point, and is used to determine the pace of the animation. When the letter is actually shown on the screen and moved to its final location, the ease in and out timing functions are used.</li>
</ol></li></ol>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following files:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_animations_module_level_3" target="_blank">animation_practical.html</a></li>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_animations_module_level_3/images/" target="_blank">logo_tizen.png</a></li>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_animations_module_level_3/images/" target="_blank">txt_e.png</a></li>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_animations_module_level_3/images/" target="_blank">txt_tm.png</a></li>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_animations_module_level_3/images/" target="_blank">txt_z.png</a></li>
</ul>
- </div>
- </li>
-
- </ul>
-</div>
-</div>
+
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a href="#create" class="opensection">Creating Backgrounds</a>
+ <li><a href="#create">Creating Backgrounds</a>
</li>
</ul>
<p class="toc-title">Related Info</p>
<div id="container"><div id="contents"><div class="content">
<h1>CSS Backgrounds and Borders Module Level 3: Specifying Background and Border Styles</h1>
-<div class="cont"><div class="static-cont">
<p>This tutorial demonstrates how you can create a background for your application.</p>
<h2>Warm-up</h2>
<p>Become familiar with the CSS Backgrounds and Borders Module Level 3 API basics by learning about:</p>
<ul>
-<li><a class="opensection" href="#create">Creating Backgrounds</a>
+<li><a href="#create">Creating Backgrounds</a>
<p>Create a multilayer background with the parallax effect.</p></li>
</ul>
-<!-- Show / Hide all links -->
- <div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
- <!-- Folds -->
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="create" name="create" class="items-tit-h2">Creating Backgrounds</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="create" name="create">Creating Backgrounds</h2>
<p>To enhance the user experience of your application, you must learn to create a multilayer background with the parallax effect using the <a href="http://www.w3.org/TR/CSS2/box.html" target="_blank">CSS box model</a>. The background consists of 3 images on separate layers, and 2 of the layers can be moved over each other.</p>
<p class="figure">Figure: Background with the parallax effect</p>
-<p
style="text-align:center;"><img alt="Background with the parallax effect" src="../../../images/css_bg_tutorial1.png" /></p>
+<p
align="center"><img alt="Background with the parallax effect" src="../../../images/css_bg_tutorial1.png" /></p>
<ol><li>Prepare 3 images (<span style="font-family: Courier New,Courier,monospace">tizen.png</span>, <span style="font-family: Courier New,Courier,monospace">tizen2.png</span>, and <span style="font-family: Courier New,Courier,monospace">dot.png</span>), each with a transparent background.
-<p
style="text-align:center;"><img alt="tizen.png, tizen2.png, and dot.png images" src="../../../images/css_bg_tutorial2.png" /></p> </li>
+<p
align="center"><img alt="tizen.png, tizen2.png, and dot.png images" src="../../../images/css_bg_tutorial2.png" /></p> </li>
<li>Create a <span style="font-family: Courier New,Courier,monospace">div</span> element with <span style="font-family: Courier New,Courier,monospace">id="parallelexample"</span> and a slider input element with the minimum, maximum, and initial value:
<pre class="prettyprint">
</pre></li></ol>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following files:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_backgrounds_and_borders_module_level_3" target="_blank">css_background.html</a></li>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_backgrounds_and_borders_module_level_3" target="_blank">dot.png</a></li>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_backgrounds_and_borders_module_level_3" target="_blank">tizen2_32_s.png</a></li>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_backgrounds_and_borders_module_level_3" target="_blank">tizen3_32.png</a></li>
</ul>
- </div>
- </li>
-
- </ul>
-</div>
-</div>
+
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a href="#selector" class="opensection">Using Pseudo-element Selectors</a></li>
- <li><a href="#boxmodel" class="opensection">Using Box Model Properties</a>
+ <li><a href="#selector">Using Pseudo-element Selectors</a></li>
+ <li><a href="#boxmodel">Using Box Model Properties</a>
</li>
</ul>
<p class="toc-title">Related Info</p>
<div id="container"><div id="contents"><div class="content">
<h1>CSS Basic User Interface Module Level 3 (CSS3 UI): Applying Styles to HTML Documents</h1>
-<div class="cont"><div class="static-cont">
+
<p>This tutorial demonstrates how you can change the Web form UI and control the box model in HTML documents.</p>
<h2 id="warm-up" name="warm-up">Warm-up</h2>
<p>Become familiar with the CSS Basic User Interface Module Level 3 (CSS3 UI) API basics by learning about:</p>
<ul>
-<li><a
class="opensection" href="#selector">Using Pseudo-element Selectors</a><p>Change the Web Form UI using a CSS3 pseudo-class based on the user actions.</p></li>
-<li><a
class="opensection" href="#boxmodel">Using Box Model Properties</a><p>Use the box model properties to control the box model.</p></li>
+<li><a href="#selector">Using Pseudo-element Selectors</a><p>Change the Web Form UI using a CSS3 pseudo-class based on the user actions.</p></li>
+<li><a href="#boxmodel">Using Box Model Properties</a><p>Use the box model properties to control the box model.</p></li>
</ul>
-
- <!-- Show / Hide all links -->
- <div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
- <!-- Folds -->
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="selector" name="selector" class="items-tit-h2">Using Pseudo-element Selectors</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="selector" name="selector">Using Pseudo-element Selectors</h2>
+
<p>To enhance the user experience of your application, you must learn how to use pseudo-element selectors:</p>
<ol>
<li><p>Use the pseudo-classes, such as <span style="font-family: Courier New,Courier,monospace">:enabled</span> and <span style="font-family: Courier New,Courier,monospace">:disabled</span>, to add different styles based on the state of the DOM elements:</p>
</table></li>
<li>To control the state of the HTML5 Web Forms (in <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#forms">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#forms">wearable</a> applications), use the <span style="font-family: Courier New,Courier,monospace">:in-range</span> and <span style="font-family: Courier New,Courier,monospace">:out-of-range</span> pseudo-classes.
<p>They check for any values that have exceeded the inserted range. (The following figure applies to mobile applications only.)</p>
-<pre><pre class="prettyprint" style="border:0px">
-<!-- HTML -->
+<pre class="prettyprint">
+<!--HTML-->
<input type="number" step="10" min="10" max="100">
</pre>
-<pre class="prettyprint lang-js" style="border:0px">
-/* css */
+<pre class="prettyprint">
+<!--CSS-->
input[type="number"]: in-range {border: 3px solid blue; width: 90%}
input[type="number"]: out-of-range {border: 3px solid red; width: 90%}
-</pre></pre>
+</pre>
<p align="center"><img alt="Element ranges (in mobile applications only)" src="../../../images/pseudo_elements_selector_range.png"/></p></li>
<li>To apply different styles to required input items and option items, use the <span style="font-family: Courier New,Courier,monospace">:required</span> and <span style="font-family: Courier New,Courier,monospace">:optional</span> pseudo-classes. (The following figure applies to mobile applications only.)
-<pre><pre class="prettyprint" style="border:0px">
-<!-- HTML -->
+<pre class="prettyprint">
+<!--HTML-->
<fieldset>
<legend>required and optional</legend>
<label>email: <input type="email" required></label>
<label>date: <input type="date" placeholder="You know what to do, huh?"></label>
<textarea placeholder="Comment"></textarea>
</fieldset></pre>
-<pre class="prettyprint lang-js" style="border:0px">
-/* css */
+<pre class="prettyprint">
+<!--CSS-->
input: required, textarea: required {border: 1px solid red}
input: optional, textarea: optional {border: 1px solid #777}
-</pre></pre>
+</pre>
<p align="center"><img alt="Required and optional elements (in mobile applications only)" src="../../../images/pseudo_elements_selector_required.png"/></p></li></ol>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following files:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_basic_user_interface_module_level_3" target="_blank">range.html</a></li>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_basic_user_interface_module_level_3" target="_blank">required_and_optional.html</a></li>
</ul>
- </div>
- </li>
-
-
- <li>
- <div class="devicespec-tit">
- <h2 id="boxmodel" name="boxmodel" class="items-tit-h2">Using Box Model Properties</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="boxmodel" name="boxmodel">Using Box Model Properties</h2>
+
<p>To enhance the user experience of your application, you must learn how to use box model properties:</p>
<table>
<tbody>
<ol>
<li>To assign the area that is included in the width and height of the box automatically, use the <span style="font-family: Courier New,Courier,monospace">box-sizing</span> property. To assign the width without a margin, use the <span style="font-family: Courier New,Courier,monospace">box-sizing: border-box</span> property.
<pre class="prettyprint">
-div.content-box {box-sizing: content-box} /* width (height) = content */
-div.border-box {box-sizing: border-box} /* width (height) = content + padding + border */
+div.content-box {box-sizing: content-box} <!--width (height) = content-->
+div.border-box {box-sizing: border-box} <!--width (height) = content + padding + border-->
div.border-box: before {height: 40px}
</pre></li>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following files:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_basic_user_interface_module_level_3" target="_blank">box_sizing_property.html</a></li>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_basic_user_interface_module_level_3" target="_blank">outline_property.html</a></li>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_basic_user_interface_module_level_3" target="_blank">text_overflow_property.html</a></li>
</ul>
- </div>
- </li>
-
-
- </ul>
-</div>
-</div>
-
+
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a href="#create" class="opensection">Creating a Color Generator</a>
+ <li><a href="#create">Creating a Color Generator</a>
</li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a class="opensection" href="../../../../../org.tizen.guides/html/web/w3c/dom/color_w.htm">CSS Color Module Level 3 Guide</a></li>
+ <li><a href="../../../../../org.tizen.guides/html/web/w3c/dom/color_w.htm">CSS Color Module Level 3 Guide</a></li>
<li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#color">CSS Color Module Level 3 API for Mobile Web</a></li>
<li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#color">CSS Color Module Level 3 API for Wearable Web</a></li>
</ul>
<div id="container"><div id="contents"><div class="content">
<h1>CSS Color Module Level 3: Specifying Color and Opacity</h1>
-<div class="cont"><div class="static-cont">
<p>This tutorial demonstrates how you can manage colors in your application.</p>
<h2>Warm-up</h2>
<p>Become familiar with the CSS Color Module Level 3 API basics by learning about:</p>
<ul>
-<li><a class="opensection" href="#create">Creating a Color Generator</a>
+<li><a href="#create">Creating a Color Generator</a>
<p>Create a HSLA color generator to set the color value for an element in the HSLA format.</p></li>
</ul>
-<!-- Show / Hide all links -->
- <div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
- <!-- Folds -->
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="create" name="create" class="items-tit-h2">Creating a Color Generator</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="create" name="create">Creating a Color Generator</h2>
<p>To enhance the user experience of your application, you must learn to create a HSLA color generator to set the color value for an element in the HSLA format.</p>
<p class="figure">Figure: HSLA color generator</p>
-<p
style="text-align:center;"><img alt="HSLA color generator" src="../../../images/css_color_tutorial1.png" /></p>
+<p
align="center"><img alt="HSLA color generator" src="../../../images/css_color_tutorial1.png" /></p>
<ol><li>To create the color generator, define 2 <span style="font-family: Courier New,Courier,monospace"><div></span> elements for displaying the HSLA value as text and in a color box. You also need 4 slider inputs for defining the HSLA color:
-<ul class="ul">
+<ul>
<li>The first input has a range of 0 - 360 and represents hue.</li>
<li>The second and third inputs have a range of 0 - 100 and represent saturation and lightness.</li>
<li>The last input has a range of 0 - 10 and represents alpha transparency.
</pre></li></ol>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following file:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_color_module_level_3" target="_blank">css_color.html</a></li>
</ul>
- </div>
- </li>
-
- </ul>
-</div>
-</div>
+
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a class="opensection" href="../../../../../org.tizen.guides/html/web/w3c/dom/dom_guide_w.htm">DOM, Forms and Styles Guides</a></li>
+ <li><a href="../../../../../org.tizen.guides/html/web/w3c/dom/dom_guide_w.htm">DOM, Forms and Styles Guides</a></li>
<li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#dom">DOM, Forms and Styles API for Mobile Web</a></li>
<li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#dom">DOM, Forms and Styles API for Wearable Web</a></li>
</ul>
<div id="container"><div id="contents"><div class="content">
<h1>DOM, Forms and Styles: Managing CSS Styles and HTML Forms</h1>
- <p>The DOM, forms and styles tutorials demonstrate how you can manage CSS style and HTML5 form features in all Tizen Web applications:</p>
+ <p>The DOM, forms and styles tutorials demonstrate how to manage CSS style and HTML5 form features in all Tizen Web applications:</p>
<ul>
<li><a href="animation_tutorial_w.htm">CSS Animations Module Level 3: Creating Animations</a> <p>Demonstrates how you can create animations.</p></li>
<li><a href="background_tutorial_w.htm">CSS Backgrounds and Borders Module Level 3: Specifying Background and Border Styles</a> <p>Demonstrates how you can create multilayer backgrounds.</p></li>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a href="#usecont" class="opensection">Using the Flex Container</a></li>
- <li><a href="#item" class="opensection">Using the Flex Items</a></li>
- <li><a href="#create" class="opensection">Creating a Flexible Layout with CSS3</a>
+ <li><a href="#usecont">Using the Flex Container</a></li>
+ <li><a href="#item">Using the Flex Items</a></li>
+ <li><a href="#create">Creating a Flexible Layout with CSS3</a>
</li>
</ul>
<p class="toc-title">Related Info</p>
<div id="container"><div id="contents"><div class="content">
<h1>CSS Flexible Box Layout Module: Adjusting the Layout</h1>
-<div class="cont"><div class="static-cont">
<p>This tutorial demonstrates how you can create a flexible box layout.</p>
<h2 id="warm-up" name="warm-up">Warm-up</h2>
<p>Become familiar with the CSS Flexible Box Layout Module API basics by learning about:</p>
<ul>
-<li><a
class="opensection" href="#usecont">Using the Flex Container</a><p>Assign a flexible area and align flex items within the area.</p></li>
-<li><a
class="opensection" href="#item">Using the Flex Items</a><p>Set the properties of the flex items included in the flexible area.</p></li>
+<li><a href="#usecont">Using the Flex Container</a><p>Assign a flexible area and align flex items within the area.</p></li>
+<li><a href="#item">Using the Flex Items</a><p>Set the properties of the flex items included in the flexible area.</p></li>
</ul>
<h2 id="follow-up" name="follow-up">Follow-up</h2>
<p>Once we have learned the basics of the CSS Flexible Box Layout Module API, we can now move on to more advanced tasks, including:</p>
<ul>
-<li><a
class="opensection" href="#create">Creating a Flexible Layout with CSS3</a><p>Use CSS3 to create a flexible box layout for your application.</p></li>
+<li><a href="#create">Creating a Flexible Layout with CSS3</a><p>Use CSS3 to create a flexible box layout for your application.</p></li>
</ul>
- <!-- Show / Hide all links -->
- <div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
- <!-- Folds -->
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="usecont" name="usecont" class="items-tit-h2">Using the Flex Container</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="usecont" name="usecont">Using the Flex Container</h2>
<p>To enhance the user experience of your application, you must learn how to assign size and alignment to the flex container:</p>
<ol>
<p>The child nodes within the assigned flex container become flex items.</p>
</li>
<li><p>Define the necessary properties for the flex container to assign the alignment of the flex items within it:</p>
-<ul class="ul">
+<ul>
<li><span style="font-family: Courier New,Courier,monospace">flex-direction</span> property sets the alignment direction of the flex items:
-<ul class="ul">
+<ul>
<li><span style="font-family: Courier New,Courier,monospace">row</span>: Align from left to right.</li>
<li><span style="font-family: Courier New,Courier,monospace">row-reverse</span>: Align from right to left.</li>
<li><span style="font-family: Courier New,Courier,monospace">column</span>: Align from top to bottom.</li>
</ul></li>
<li><span style="font-family: Courier New,Courier,monospace">flex-wrap</span> property sets the line changing of the flex items:
-<ul class="ul">
+<ul>
<li><span style="font-family: Courier New,Courier,monospace">nowrap</span>: Reduces the size of the flex items without changing lines.</li>
<li><span style="font-family: Courier New,Courier,monospace">wrap</span>: The flex items reaching beyond the flex container area are divided into multiple lines using the cross axis direction of the current writing mode.</li>
<li><span style="font-family: Courier New,Courier,monospace">wrap-reverse</span>: The flex items reaching beyond the flex container area are divided into multiple lines using the opposite cross axis direction than in the <span style="font-family: Courier New,Courier,monospace">wrap</span> value.</li>
</ul></li>
<li><span style="font-family: Courier New,Courier,monospace">justify-content</span> property sets the handling of gaps between the flex items on the main axis:
-<ul class="ul">
+<ul>
<li><span style="font-family: Courier New,Courier,monospace">flex-start</span>: Gathers the items at the alignment starting point.</li>
<li><span style="font-family: Courier New,Courier,monospace">flex-end</span>: Gathers the items at the alignment finishing point.</li>
<li><span style="font-family: Courier New,Courier,monospace">center</span>: Gathers the items in the center.</li>
</table></li>
<li><span style="font-family: Courier New,Courier,monospace">align-content</span> property sets the handling of gaps between the flex items on the cross axis. It has the same values as the <span style="font-family: Courier New,Courier,monospace">justify-content</span> property, and 1 additional value:
-<ul class="ul">
+<ul>
<li><span style="font-family: Courier New,Courier,monospace">stretch</span>: Extends the size of the flex items and aligns them without gaps.</li>
</ul></li>
<li id="alignitems"><span style="font-family: Courier New,Courier,monospace">align-items</span> property sets the relative location and size between the flex items on the cross axis:
-<ul class="ul">
+<ul>
<li><span style="font-family: Courier New,Courier,monospace">flex-start</span>: Aligns the items vertically to the top.</li>
<li><span style="font-family: Courier New,Courier,monospace">flex-end</span>: Aligns the items vertically to the bottom.</li>
<li><span style="font-family: Courier New,Courier,monospace">center</span>: Aligns the items vertically to the middle.</li>
</table></li></ul></li></ol>
<p>The following figure shows examples of flex containers and how their flex items have been aligned.</p>
<p class="figure">Figure: Flex container properties (in mobile applications only)</p>
-<p
style="text-align: center;"><img alt="Flex container properties (in mobile applications only)" src="../../../images/flexcontainer_properties.png"/></p>
+<p
align="center"><img alt="Flex container properties (in mobile applications only)" src="../../../images/flexcontainer_properties.png"/></p>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following files:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_flexible_box_layout_module" target="_blank">flex_container_properties_2.html</a></li>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_flexible_box_layout_module" target="_blank">flex_container_properties_3.html</a></li>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_flexible_box_layout_module" target="_blank">flex_container_properties_4.html</a></li>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_flexible_box_layout_module" target="_blank">flex_container_properties_5.html</a></li>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_flexible_box_layout_module" target="_blank">flex_container_properties_6.html</a></li>
</ul>
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="item" name="item" class="items-tit-h2">Using the Flex Items</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="item" name="item">Using the Flex Items</h2>
+
<p>To enhance the user experience of your application, you must learn how to assign size and alignment to the flex items:</p>
<ol>
</li>
<li><p>Define the necessary properties for the flex items:</p>
-<ul class="ul">
+<ul>
<li><span style="font-family: Courier New,Courier,monospace">align-self</span> property is similar as the <a href="#usecont">align-items</a> property of the flex container.
<table class="note">
<tbody>
</table></li>
<li><span style="font-family: Courier New,Courier,monospace">flex</span> property is a shorthand expression defining the flex item size handling:
-<ul class="ul">
+<ul>
<li><span style="font-family: Courier New,Courier,monospace">flex-grow</span>: Sets whether the spaces between flex items are filled.</li>
<li><span style="font-family: Courier New,Courier,monospace">flex-shrink</span>: Sets whether the width of the flex items is reduced according to the size of the flex container.</li>
<li><span style="font-family: Courier New,Courier,monospace">flex-basis</span>: Sets the default width of the relevant flex items.</li>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following files:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_flexible_box_layout_module" target="_blank">flex_item_properties_2.html</a></li>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_flexible_box_layout_module" target="_blank">flex_item_properties_3.html</a></li>
</ul>
- </div>
- </li>
-
-
- <li>
- <div class="devicespec-tit">
- <h2 id="create" name="create" class="items-tit-h2">Creating a Flexible Layout with CSS3</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="create" name="create">Creating a Flexible Layout with CSS3</h2>
<p>To enhance the user experience of your application, you must learn how to create flexible box layout:</p>
<ol>
<li>Define the HTML content for the flexible layout. In this example, create 2 articles areas, 1 for a text list and 1 for an icon list:
</div></pre></li>
<li>Define styles to decorate the article areas. (The following figure applies to mobile applications only.)
-<pre class="prettyprint">/* Border for the article areas */
+<pre class="prettyprint"><!--Border for the article areas-->
.container article > * {border: 1px solid #ccc;}
-/* Font style for the article area titles */
+<!--Font style for the article area titles-->
.container .events > h2, .container .schedule > h2
{
padding: 10px 20px;
text-shadow: 1px 1px 2px #fff, -1px -1px 2px #000;
}
-/* List styles */
+<!--List styles-->
.container .events > ul, .container .schedule .img_list
{
height: 100%;
padding: 10px;
}
-/* Text style for the text list item title */
+<!--Text style for the text list item title-->
.container .events > ul > li .title
{
color: #51809e;
text-shadow: 1px 1px 2px #000;
}
-/* Text style for the text list item location info */
+<!--Text style for the text list item location info-->
.container .events > ul > li .title .local
{
text-indent: 10px;
text-shadow: 0 0 0 #fff;
}
-/* Styles for the text list item date box */
+<!--Styles for the text list item date box-->
.container .events > ul > li .date
{
text-align: center;
<li>Define a flexible alignment for the article areas to support screen orientation changes and ensure that the content fills up the entire available screen area regardless of the orientation:
-<ol>
+<ol type="a">
<li>Define the text list items and the icon list as flex containers using the <span style="font-family: Courier New,Courier,monospace">display: -webkit-flex;</span> property:
-<ul class="ul">
+<ul>
<li>For the text list items, align them vertically in the middle, define a 0 margin at the top for the first item, and center-align the text for the date box.</li>
<li>For the icon list, align the icon list so that the first and last icon are placed at the ends and the gaps between the rest of the icons are equal.</li></ul>
<p>(The following figure applies to mobile applications only.)</p>
-<pre class="prettyprint">/* Flexible alignment of text list */
+<pre class="prettyprint"><!--Flexible alignment of text list-->
.container .events > ul > li
{
display: -webkit-flex;
text-align: center;
}
-/* Flexible alignment of icon list */
+<!--Flexible alignment of icon list-->
.container .schedule .img_list
{
display: -webkit-flex;
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following files:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_flexible_box_layout_module" target="_blank">flexible_layout_1.html</a></li>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_flexible_box_layout_module" target="_blank">flexible_layout_2.html</a></li>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_flexible_box_layout_module" target="_blank">alert.png</a></li>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_flexible_box_layout_module" target="_blank">folder.png</a></li>
</ul>
- </div>
- </li>
-
-
- </ul>
-</div>
-</div>
+
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a href="#font" class="opensection">Manipulating Fonts</a></li>
+ <li><a href="#font">Manipulating Fonts</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<div id="container"><div id="contents"><div class="content">
<h1>CSS Fonts Module Level 3: Manipulating Fonts</h1>
-<div class="cont"><div class="static-cont">
<p>This tutorial demonstrates how you can modify fonts.</p>
<h2>Warm-up</h2>
<p>Become familiar with the CSS Fonts Module Level 3 API basics by learning about:</p>
<ul>
-<li><a href="#font" class="opensection" >Manipulating Fonts</a>
+<li><a href="#font">Manipulating Fonts</a>
<p>Control the appearance of text using the CSS font properties.</p></li>
</ul>
- <!-- Show / Hide all links -->
- <div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
- <!-- Folds -->
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="font" name="font" class="items-tit-h2">Manipulating Fonts</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="font" name="font">Manipulating Fonts</h2>
+
<p>To enhance the user experience of your application, you must learn to handle fonts using CSS font properties:</p>
<ol>
<p>The following figure shows examples of manipulating the text font properties.</p>
<p class="figure">Figure: Font properties (in mobile applications only)</p>
-<p
style="text-align: center;"><img alt="Font properties (in mobile applications only)" src="../../../images/font_properties.png"/></p>
+<p
align="center"><img alt="Font properties (in mobile applications only)" src="../../../images/font_properties.png"/></p>
<table class="note">
<tbody>
</tr>
</tbody>
</table>
- </div>
- </li>
-
-
-
-
- </ul>
-</div>
-</div>
-
+
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a href="#basic" class="opensection">Creating a Basic Login Form</a></li>
- <li><a href="#advanced" class="opensection">Creating an Advanced Login Form</a>
+ <li><a href="#basic">Creating a Basic Login Form</a></li>
+ <li><a href="#advanced">Creating an Advanced Login Form</a>
</li>
</ul>
<p class="toc-title">Related Info</p>
<div id="container"><div id="contents"><div class="content">
<h1>HTML5 Forms: Managing User Input</h1>
-<div class="cont"><div class="static-cont">
+
<p>This tutorial demonstrates how you can implement Web forms with HTML5.</p>
<h2>Warm-up</h2>
<p>Become familiar with the HTML5 Forms API basics by learning about:</p>
<ul>
-<li><a class="opensection" href="#basic">Creating a Basic Login Form</a>
+<li><a href="#basic">Creating a Basic Login Form</a>
<p>Create a login form with mandatory fields, validity checks, and hint texts.</p></li>
-<li><a class="opensection" href="#advanced">Creating an Advanced Login Form</a>
+<li><a href="#advanced">Creating an Advanced Login Form</a>
<p>Create a login form with autofocus, autocompletion, password security, and specific input value patterns.</p></li>
</ul>
-<!-- Show / Hide all links -->
- <div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
- <!-- Folds -->
- <ul class="devicespecifications">
-
- <li>
- <div class="devicespec-tit">
- <h2 id="basic" name="basic" class="items-tit-h2">Creating a Basic Login Form</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="basic" name="basic">Creating a Basic Login Form</h2>
+
<p>To create simple user input forms, you must learn to use the HTML5 features in Web forms:</p>
<ol>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following file:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/html5_forms" target="_blank">basicLogin.html</a></li>
</ul>
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="advanced" name="advanced" class="items-tit-h2">Creating an Advanced Login Form</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="advanced" name="advanced">Creating an Advanced Login Form</h2>
+
<p>To create advanced user input forms, you must learn to use the HTML5 features in Web forms:</p>
<ol>
<input type="submit" value="Login">
</form>
</pre>
- </div>
- </li>
-
-
-
- </ul>
-</div>
-</div>
+
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a href="#create" class="opensection">Creating a Liquid Layout</a>
+ <li><a href="#create">Creating a Liquid Layout</a>
</li>
</ul>
<p class="toc-title">Related Info</p>
<div id="container"><div id="contents"><div class="content">
<h1>Media Queries: Labeling Output Devices in Style Sheets</h1>
-<div class="cont"><div class="static-cont">
+
<p>This tutorial demonstrates how you can define media queries to determine the styles to be used in the Web document.</p>
<h2>Warm-up</h2>
<p>Become familiar with the Media Queries API basics by learning about:</p>
<ul>
-<li><a class="opensection" href="#create">Creating a Liquid Layout</a>
+<li><a href="#create">Creating a Liquid Layout</a>
<p>Create a liquid document layout that organically changes according to the device resolution.</p></li>
</ul>
-<!-- Show / Hide all links -->
- <div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
- <!-- Folds -->
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="create" name="create" class="items-tit-h2">Creating a Liquid Layout</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="create" name="create">Creating a Liquid Layout</h2>
<p>To enhance the user experience of your application, you must learn to define media queries to determine the styles to be used in the Web document. This example creates a simple Web document with a liquid layout that organically changes according to the device resolution to show the optimized layout on both portrait and landscape modes.</p>
}
</pre>
-<p
style="text-align:center;"><img alt="Fixed layout example (in mobile applications only)" src="../../../images/media_queries1.png" /></p>
+<p
align="center"><img alt="Fixed layout example (in mobile applications only)" src="../../../images/media_queries1.png" /></p>
<p>The page is easy to view as long as the screen width is about 600 px; however, in a smaller screen below 400 px, the legibility rapidly decreases. You can edit the layout by reducing the number of columns to 1 and moving the <strong>Aside</strong> area at the bottom of the screen, but those changes then decrease legibility on a wider screen.</p>
</li>
}
</pre>
<p>With the above media query, the normal resolution has 2 columns (shown on the right in the figure), while in a smaller resolution in a portrait mode only 1 column is used (shown on the left). (The following figure applies to mobile applications only.)</p>
-<p
style="text-align:center;"><img alt="Liquid layout example (in mobile applications only)" src="../../../images/media_queries3.png" /></p>
+<p
align="center"><img alt="Liquid layout example (in mobile applications only)" src="../../../images/media_queries3.png" /></p>
</li>
<li><p>If you need to define specific styles for a certain resolution range, simply add more media queries. However, too many conditions make the maintenance harder, so carefully consider what kind of resolution ranges you need.
</ol>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following files:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/media_queries" target="_blank">liquid_layout_2.html</a></li>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/media_queries" target="_blank">logo.png</a></li>
</ul>
- </div>
- </li>
- </ul>
-</div>
-</div>
-
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a href="#basic" class="opensection">Creating a Basic Layout</a></li>
- <li><a href="#dynamic" class="opensection">Creating a Layout with Dynamic Content</a></li>
+ <li><a href="#basic">Creating a Basic Layout</a></li>
+ <li><a href="#dynamic">Creating a Layout with Dynamic Content</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a class="opensection" href="../../../../../org.tizen.guides/html/web/w3c/dom/multi_w.htm">CSS Multi-column Layout Module Guide</a></li>
+ <li><a href="../../../../../org.tizen.guides/html/web/w3c/dom/multi_w.htm">CSS Multi-column Layout Module Guide</a></li>
<li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#multicolumn">CSS Multi-column Layout Module API for Mobile Web</a></li>
</ul>
</div></div>
<div id="container"><div id="contents"><div class="content">
<h1>CSS Multi-column Layout Module: Creating Multi-column Layouts</h1>
-<div class="cont"><div class="static-cont">
<table class="note">
<tbody>
<p>Build a GUI with a changing amount of data displayed in multiple columns.</p></li>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
- <!-- Folds -->
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="basic" name="basic" class="items-tit-h2">Creating a Basic Layout</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="basic" name="basic">Creating a Basic Layout</h2>
<p>To enhance the user experience of your application by providing a consistent behavior across a wide range of displays with different resolution and orientation, you must learn to create a basic layout using CSS:</p>
<ol>
</pre></li>
<li>Set the CSS column properties:
-<ol>
+<ol type="a">
<li>
<p>The <span style="font-family: Courier New,Courier,monospace">article</span> element acts as a multi-column container. Set the <span style="font-family: Courier New,Courier,monospace">column-width</span> (or <span style="font-family: Courier New,Courier,monospace">-webkit-column-width</span>) property to enable the multi-column layout:</p>
<p>The figure below shows the layout with the <span style="font-family: Courier New,Courier,monospace">column-rule</span> <span style="font-family: Courier New,Courier,monospace">width</span> set to 40 px and the <span style="font-family: Courier New,Courier,monospace">column-gap</span> set to 10 px.</p>
<p class="figure">Figure: Column settings</p>
-<p
style="text-align:center;"><img alt="Column settings" src="../../../images/column_settings.png" /></p>
+<p
align="center"><img alt="Column settings" src="../../../images/column_settings.png" /></p>
</li>
<li>
<p>Define the <span style="font-family: Courier New,Courier,monospace">footer</span> element with the display height set to 5/100 and padding set to 2 * 2vh:</p>
<p>The following figures illustrate the created layout in different display sizes and orientations.</p>
<p class="figure">Figure: Basic layout on a 480 x 800 display</p>
-<p
style="text-align:center;"><img alt="Basic layout on a 480 x 800 display" src="../../../images/basic_layout_480x800.png" /></p>
+<p
align="center"><img alt="Basic layout on a 480 x 800 display" src="../../../images/basic_layout_480x800.png" /></p>
<p class="figure">Figure: Basic layout on a 720 x 1280 display</p>
-<p
style="text-align:center;"><img alt="Basic layout on a 720 x 1280 display" src="../../../images/basic_layout_720x1280.png" /></p>
+<p
align="center"><img alt="Basic layout on a 720 x 1280 display" src="../../../images/basic_layout_720x1280.png" /></p>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following files:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_warm_up" target="_blank">renamed_index.html</a></li>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_warm_up/css" target="_blank">style.css</a></li>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_warm_up/images" target="_blank">pinwheel_green.png</a></li>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_warm_up/images" target="_blank">Tizen_Pinwheel_Secondary_Confetti.png</a></li>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_warm_up/images" target="_blank">Tizen_WhiteFold_4.png</a></li>
</ul>
- </div>
- </li>
-
-
- <li>
- <div class="devicespec-tit">
- <h2 id="dynamic" name="dynamic" class="items-tit-h2">Creating a Layout with Dynamic Content</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="dynamic" name="dynamic">Creating a Layout with Dynamic Content</h2>
+
<p>To enhance the user experience of your application by providing a consistent behavior across a wide range of displays with different resolution and orientation, you must learn to create a layout displaying a varying amount of content using CSS:</p>
<ol>
<li>
</pre>
</li>
<li>Set the CSS properties:
-<ol>
+<ol type="a">
<li>
<p>Define the CSS display and column properties:</p>
<pre class="prettyprint">
</ol>
</li>
<li>Add the JavaScript code to make the content dynamic:
-<ol>
+<ol type="a">
<li>
<p>Declare a variable for the images. Elements included in the variable amount to data displayed in a column layout, such as a newsfeed:</p>
<pre class="prettyprint">
<p>The following figures illustrate the created layout in different display sizes and orientations.</p>
<p class="figure">Figure: Dynamic layout on a 480 x 800 display</p>
-<p
style="text-align:center;"><img alt="Dynamic layout on a 480 x 800 display" src="../../../images/dynamic_layout_480x800.png" /></p>
+<p
align="center"><img alt="Dynamic layout on a 480 x 800 display" src="../../../images/dynamic_layout_480x800.png" /></p>
<p class="figure">Figure: Dynamic layout on a 720 x 1280 display</p>
-<p
style="text-align:center;"><img alt="Dynamic layout on a 720 x 1280 display" src="../../../images/dynamic_layout_720x1280.png" /></p>
+<p
align="center"><img alt="Dynamic layout on a 720 x 1280 display" src="../../../images/dynamic_layout_720x1280.png" /></p>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following files:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_follow_up" target="_blank">renamed_index.html</a></li>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_follow_up/css" target="_blank">style.css</a></li>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_follow_up/js" target="_blank">main.js</a></li>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_follow_up/images" target="_blank">Tizen_WhiteFold_4.png</a></li>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_multi_column_layout_module/multi_column_follow_up/images" target="_blank">white_logo.png</a></li>
</ul>
- </div>
- </li>
-
-
- </ul>
-</div>
-</div>
+
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a href="#single" class="opensection">Selecting a Single Node</a></li>
- <li><a href="#multi" class="opensection">Selecting Multiple Nodes</a></li>
- <li><a href="#create" class="opensection">Creating an Accordion Menu</a>
+ <li><a href="#single">Selecting a Single Node</a></li>
+ <li><a href="#multi">Selecting Multiple Nodes</a></li>
+ <li><a href="#create">Creating an Accordion Menu</a>
</li>
</ul>
<p class="toc-title">Related Info</p>
<div id="container"><div id="contents"><div class="content">
<h1>Selectors API Level 1 and Level 2: Selecting DOM Elements</h1>
-<div class="cont"><div class="static-cont">
<p>This tutorial demonstrates how you can retrieve desired elements from a page and modify them.</p>
<h2 id="warm-up" name="warm-up">Warm-up</h2>
<p>Become familiar with the Selectors API Level 1 and Level 2 basics by learning about:</p>
<ul>
- <li><a
class="opensection" href="#single">Selecting a Single Node</a> <p>Select a single element using the <span style="font-family: Courier New,Courier,monospace">querySelector()</span> method.</p></li>
- <li><a
class="opensection" href="#multi">Selecting Multiple Nodes</a> <p>Select multiple elements using the <span style="font-family: Courier New,Courier,monospace">querySelectorAll()</span> method.</p></li>
+ <li><a href="#single">Selecting a Single Node</a> <p>Select a single element using the <span style="font-family: Courier New,Courier,monospace">querySelector()</span> method.</p></li>
+ <li><a href="#multi">Selecting Multiple Nodes</a> <p>Select multiple elements using the <span style="font-family: Courier New,Courier,monospace">querySelectorAll()</span> method.</p></li>
</ul>
<h2 id="follow-up" name="follow-up">Follow-up</h2>
<p>Once we have learned the basics of the Selectors API Level 1 and Level 2, we can now move on to more advanced tasks, including:</p>
<ul>
- <li><a
class="opensection" href="#create">Creating an Accordion Menu</a> <p>Create a simple accordion menu.</p></li>
+ <li><a href="#create">Creating an Accordion Menu</a> <p>Create a simple accordion menu.</p></li>
</ul>
-<!-- Show / Hide all links -->
- <div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
- <!-- Folds -->
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="single" name="single" class="items-tit-h2">Selecting a Single Node</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="single" name="single">Selecting a Single Node</h2>
<p>To enhance the user experience of your application, you must learn to use selectors to handle page elements, and to select a single node:</p>
<ol>
<li>To select the first matching element found in the child nodes, use the <span style="font-family: Courier New,Courier,monospace">querySelector()</span> method with <a href="http://www.w3.org/TR/css3-selectors/" target="blank">CSS selectors</a>. You get the same result as when using the <span style="font-family: Courier New,Courier,monospace">getElementById()</span>, <span style="font-family: Courier New,Courier,monospace">getElementsByTagName()</span>, and <span style="font-family: Courier New,Courier,monospace">getElementsByClassName()</span> methods.
</ol>
<p class="figure">Figure: Single node selection (in mobile applications only)</p>
-<p
style="text-align:center;"><img alt="Single node selection (in mobile applications only)" src="../../../images/single_node_selection.png" /></p>
+<p
align="center"><img alt="Single node selection (in mobile applications only)" src="../../../images/single_node_selection.png" /></p>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following file:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/selectors_api" target="_blank">accordion.html</a></li>
</ul>
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="multi" name="multi" class="items-tit-h2">Selecting Multiple Nodes</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="multi" name="multi">Selecting Multiple Nodes</h2>
<p>To enhance the user experience of your application, you must learn to use selectors to handle page elements, and to select multiple nodes in a node list:</p>
<ol>
<li>Select an element in the node list using the <span style="font-family: Courier New,Courier,monospace">querySelector()</span> method:
}</pre></li></ol>
<p class="figure">Figure: Multiple node selection (in mobile applications only)</p>
- <p
style="text-align:center;"><img alt="Multiple node selection (in mobile applications only)" src="../../../images/multi_node_selection.png" /></p>
+ <p
align="center"><img alt="Multiple node selection (in mobile applications only)" src="../../../images/multi_node_selection.png" /></p>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following file:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/selectors_api" target="_blank">accordion.html</a></li>
</ul>
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="create" name="create" class="items-tit-h2">Creating an Accordion Menu</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="create" name="create">Creating an Accordion Menu</h2>
+
<p>To enhance the user experience of your application, you must learn to retrieve element nodes from the DOM tree to create a simple accordion menu.</p>
<p>The accordion menu is created using the CSS3 Basic User Interface Module Level 3 API (in <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#basicui">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#basicui">wearable</a> applications). When a title is touched, the relevant content is shown, and other content is hidden.</p>
<ol>
<p class="title">Title 2</p>
<div>contents 2</div>
</li>
- <!-- Other list elements -->
+ <!--Other list elements-->
</ul></pre></li>
<li>Use <a href="../../../../../org.tizen.guides/html/web/w3c/dom/transition_w.htm">CSS transitions</a> to add sliding effects when content appears:
{
padding: 0 15px;
- /* Assign time for CSS transformation */
+ <!--Assign time for CSS transformation-->
-webkit-transition: all .5s;
opacity: 0;
height: 0;
box-shadow: inset 1px 1px 4px rgba(0, 0, 0, .5);
line-height: 2;
}
-/* Assign styles to be applied in case the current class is added to p.title */
+<!--Assign styles to be applied in case the current class is added to p.title-->
.accordion > li > p.current
{
background: -webkit-linear-gradient(top, #666, #000);
<pre class="prettyprint">testAccordion('.accordion');</pre></li></ol>
<p class="figure">Figure: Accordion menu (in mobile applications only)</p>
-
<p style="text-align:center;"><img alt="Accordion menu (in mobile applications only)" src="../../../images/accordion_menu.png" /></p>
+
<p align="center"><img alt="Accordion menu (in mobile applications only)" src="../../../images/accordion_menu.png" /></p>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following file:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/selectors_api" target="_blank">selector_sample.html</a></li>
</ul>
- </div>
- </li>
-
- </ul>
-</div>
-</div>
+
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a class="opensection" href="#Managing_Session_History">Managing Session History Entries</a></li>
- <li><a class="opensection" href="#Detecting_Session_History">Detecting Session History Changes</a></li>
+ <li><a href="#Managing_Session_History">Managing Session History Entries</a></li>
+ <li><a href="#Detecting_Session_History">Detecting Session History Changes</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<div id="container"><div id="contents"><div class="content">
<h1>HTML5 session history of browsing contexts: Managing Browsing Contexts</h1>
- <div class="cont"><div class="static-cont">
<p>This tutorial demonstrates how you can store and use session history details.</p>
<h2 id="warmup" name="warmup">Warm-up</h2>
<p>Become familiar with the HTML5 session history of browsing contexts API basics by learning about:</p>
<ul>
- <li><a class="opensection" href="#Managing_Session_History">Managing Session History Entries</a>
+ <li><a href="#Managing_Session_History">Managing Session History Entries</a>
<p>Add a new entry to the session history and update its details.</p></li>
- <li><a class="opensection" href="#Detecting_Session_History">Detecting Session History Changes</a>
+ <li><a href="#Detecting_Session_History">Detecting Session History Changes</a>
<p>Register a change event handler and use the event to take advantage of the stored history information.</p></li>
</ul>
- <div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
-<ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="Managing_Session_History" name="Managing_Session_History" class="items-tit-h2">Managing Session History Entries</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="Managing_Session_History" name="Managing_Session_History">Managing Session History Entries</h2>
<p>Learning how to manage the session history enhances the user browsing experience in your application:</p>
</li>
<li>To use the session history information:
-<ol>
+<ol type="a">
<li>Implement a page with the <strong>Prev</strong> and <strong>Next</strong> buttons:
<pre class="prettyprint">
<nav class="paging">
</ol>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following file:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/communication/html5_the_session_history_of_browsing_contexts" target="_blank">history_state.html</a></li>
</ul>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
-<h2 id="Detecting_Session_History" name="Detecting_Session_History" class="items-tit-h2">Detecting Session History Changes</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+<h2 id="Detecting_Session_History" name="Detecting_Session_History">Detecting Session History Changes</h2>
<p>Learning how to track session history changes enhances the user browsing experience in your application: </p>
</li></ol>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following file:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/communication/html5_the_session_history_of_browsing_contexts" target="_blank">history_state.html</a></li>
</ul>
- </div>
- </li>
- </ul>
-</div>
-</div>
+
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a href="#text" class="opensection">Manipulating Text</a>
+ <li><a href="#text">Manipulating Text</a>
</li>
</ul>
<p class="toc-title">Related Info</p>
<div id="container"><div id="contents"><div class="content">
<h1>CSS Text Module Level 3: Manipulating Text</h1>
-<div class="cont"><div class="static-cont">
<p>This tutorial demonstrates how you can manipulate and transform text.</p>
<h2>Warm-up</h2>
<p>Become familiar with the CSS Text Module Level 3 API basics by learning about:</p>
<ul>
-<li><a href="#text" class="opensection" >Manipulating Text</a>
+<li><a href="#text">Manipulating Text</a>
<p>Control the appearance of text using the CSS text properties.</p></li>
</ul>
-
- <!-- Show / Hide all links -->
- <div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
- <!-- Folds -->
- <ul class="devicespecifications">
-
- <li>
- <div class="devicespec-tit">
- <h2 id="text" name="text" class="items-tit-h2">Manipulating Text</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="text" name="text">Manipulating Text</h2>
+
<p>To enhance the user experience of your application, you must learn to handle line breaking, justification, alignment, white space handling, and text transformations using CSS text properties:</p>
<ol>
<p>The following figure shows examples of manipulating the text properties.</p>
<p class="figure">Figure: Text properties (in mobile applications only)</p>
-<p
style="text-align: center;"><img alt="Text properties (in mobile applications only)" src="../../../images/text_properties.png"/></p>
+<p
align="center"><img alt="Text properties (in mobile applications only)" src="../../../images/text_properties.png"/></p>
<table class="note">
<tbody>
</tr>
</tbody>
</table>
- </div>
- </li>
-
-
- </ul>
-</div>
-</div>
-
+
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a href="#animation" class="opensection">Creating an Animation with Transforms</a></li>
- <li><a href="#effect" class="opensection">Creating Fade Animation Effect</a></li>
- <li><a href="#hw" class="opensection">Using Hardware Acceleration</a>
+ <li><a href="#animation">Creating an Animation with Transforms</a></li>
+ <li><a href="#effect">Creating Fade Animation Effect</a></li>
+ <li><a href="#hw">Using Hardware Acceleration</a>
</li>
</ul>
<p class="toc-title">Related Info</p>
</div>
<div id="container"><div id="contents"><div class="content">
-<h1>CSS Transforms: Manipulating Elements</h1>
-<div class="cont"><div class="static-cont">
+<h1>CSS Transforms: Manipulating Elements</h1>
<p>This tutorial demonstrates how you can use transforms with animations. </p>
<h2>Warm-up</h2>
<p>Become familiar with the CSS Transforms API basics by learning about:</p>
<ul>
-<li><a class="opensection" href="#animation">Creating an Animation with Transforms</a>
+<li><a href="#animation">Creating an Animation with Transforms</a>
<p>Create a logo animation where the animation parts rotate and are translated in the 3D space.</p></li>
</ul>
<h2>Follow-up</h2>
<p>Once we have learned the basics of CSS Transforms API, we can now move on to more advanced tasks, including:</p>
<ul>
-<li><a class="opensection" href="#effect">Creating Fade Animation Effects</a>
+<li><a href="#effect">Creating Fade Animation Effects</a>
<p>Create a fade animation effect using JavaScript and CSS3.</p>
</li>
-<li><a class="opensection" href="#hw">Using Hardware Acceleration</a>
+<li><a href="#hw">Using Hardware Acceleration</a>
<p>Use hardware acceleration to enhance performance.</p></li>
</ul>
-
- <!-- Show / Hide all links -->
- <div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
- <!-- Folds -->
- <ul class="devicespecifications">
-
- <li>
- <div class="devicespec-tit">
- <h2 id="animation" name="animation" class="items-tit-h2">Creating an Animation with Transforms</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="animation" name="animation">Creating an Animation with Transforms</h2>
<p>To enhance the user experience of your application, you must learn to use transforms with animations. This example uses the animation from the <a href="animation_tutorial_w.htm#create">Creating a Logo Animation</a> use case as a basis, and adds a more diverse visual effect to it with the <span style="font-family: Courier New,Courier,monospace">transform</span> property. In the modified animation:</p>
-<ul class="ul">
+<ul>
<li>As in the original animation, no elements are initially shown on the screen.</li>
<li>The Tizen logo gradually appears in the middle of the screen, and as it moves to the right, it becomes smaller. With the <span style="font-family: Courier New,Courier,monospace">transform</span> property, the logo is made to rotate.</li>
<li>Each letter in the word "TIZEN" consecutively comes in from the left of the screen and moves to the right to its correct location. With the <span style="font-family: Courier New,Courier,monospace">transform</span> property, the letters are translated in the 3D space and rotated around the Y axis.</li>
</ul>
<p class="figure">Figure: Tizen logo to be transformed</p>
-<p
style="text-align:center;"><img alt="Tizen logo to be transformed" src="../../../images/css_transforms1.png" /></p>
+<p
align="center"><img alt="Tizen logo to be transformed" src="../../../images/css_transforms1.png" /></p>
<ol>
</pre>
</li>
<li>Create the animation:
-<ol>
+<ol type="a">
<li>
<p>Assign keyframes for the logo element to transform it. In order to rotate the logo, use the <span style="font-family: Courier New,Courier,monospace">-webkit-transform: rotate()</span> function, which defines the angle of the rotation.
</p>
</table></li>
<li>Create the keyframes for the first letter in the word "TIZEN". In the animation, due to the <span style="font-family: Courier New,Courier,monospace">translate3d()</span> and <span style="font-family: Courier New,Courier,monospace">rotateY()</span> methods, each letter transforms slightly from the right to the left as it comes in.
-<p
style="text-align:center;"><img alt="Animation" src="../../../images/css_transforms2.png" /></p>
+<p
align="center"><img alt="Animation" src="../../../images/css_transforms2.png" /></p>
<pre class="prettyprint">
@-webkit-keyframes tizen-txt-t
<p>The following figure shows the full Tizen logo animation with the <span style="font-family: Courier New,Courier,monospace">transform</span> properties.</p>
<p class="figure">Figure: Full Tizen logo animation</p>
-<p
style="text-align:center;"><img alt="Full Tizen logo animation" src="../../../images/css_transforms5.png" /></p>
+<p
align="center"><img alt="Full Tizen logo animation" src="../../../images/css_transforms5.png" /></p>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following files:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_3d_transforms_module_level_3" target="_blank">transform_practical.html</a></li>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_3d_transforms_module_level_3/images/" target="_blank">logo_tizen.png</a></li>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_3d_transforms_module_level_3/images/" target="_blank">txt_e.png</a></li>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_3d_transforms_module_level_3/images/" target="_blank">txt_tm.png</a></li>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_3d_transforms_module_level_3/images/" target="_blank">txt_z.png</a></li>
</ul>
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="effect" name="effect" class="items-tit-h2">Creating Fade Animation Effects</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="effect" name="effect">Creating Fade Animation Effects</h2>
+
+
<p>To enhance the user experience of your application, you must learn to use fade animation effects.</p>
<p>The modal layer pop-up can be used to, for example, show enlarged thumbnail images or notice messages. The modal layer pop-up has the following basic properties:</p>
-<ul class="ul">
+<ul>
<li>If an event is fired, it gradually becomes visible. This is known as the Fade In effect.</li>
<li>The existing background is covered with a translucent layer to make the user focus on the pop-up.</li>
<li>When the pop-up is closed, it gradually becomes transparent. This is known as the Fade Out effect.</li>
</ul>
<p class="figure">Figure: Fade effect</p>
-<p
style="text-align:center;"><img alt="Fade effect" src="../../../images/fade_affect_animation.png" /></p>
+<p
align="center"><img alt="Fade effect" src="../../../images/fade_affect_animation.png" /></p>
<p>You can control UI events and change the DOM elements in the following ways:</p>
-<ul class="ul">
+<ul>
<li>Events can be controlled with JavaScript, and DOM elements can be devised with CSS.</li>
<li>You can use JavaScript frameworks, such as jQuery, Prototype, and Dojo.</li>
</ul>
<p>To create fade effects:</p>
-<ul class="ul">
+<ul>
<li>Create a modal layer pop-up using jQuery:
<pre class="prettyprint">
</li>
<li>Create a modal layer pop-up using CSS3:
<pre class="prettyprint">
-/* CSS */
+<!--CSS-->
.mask
{
opacity: 0;
z-index: 498;
}
-/* Layer pop-up public styles */
+<!--Layer pop-up public styles-->
.layerpop
{
opacity: 0;
<p>There can be a difference in performance depending on how the modal layer pop-up is used.</p>
<p>The following figures illustrate the difference in event performance, when using JavaScript and CSS3.</p>
<p class="figure">Figure: Event performance using JavaScript</p>
-<p
style="text-align:center;"><img alt="Events using JavaScript" src="../../../images/events_using_javascript.png" /></p>
+<p
align="center"><img alt="Events using JavaScript" src="../../../images/events_using_javascript.png" /></p>
<p class="figure">Figure: Event performance using CSS3</p>
-<p
style="text-align:center;"><img alt="Events using CSS3" src="../../../images/events_using_css3.png" /></p>
+<p
align="center"><img alt="Events using CSS3" src="../../../images/events_using_css3.png" /></p>
<p>The following figures illustrate the difference in memory performance, when using JavaScript and CSS3.</p>
<p class="figure">Figure: Memory performance using JavaScript</p>
-<p
style="text-align:center;"><img alt="Memory when using JavaScript" src="../../../images/memory_using_javascript.png" /></p>
+<p
align="center"><img alt="Memory when using JavaScript" src="../../../images/memory_using_javascript.png" /></p>
<p class="figure">Figure: Memory performance using CSS3</p>
-<p
style="text-align:center;"><img alt="Memory when using CSS3" src="../../../images/memory_using_css3.png" /></p>
+<p
align="center"><img alt="Memory when using CSS3" src="../../../images/memory_using_css3.png" /></p>
<p>When the styles are applied using JavaScript, the UI thread is used to create the pop-up. The UI thread increases the usage of CPU memory in proportion to the number of pop-ups used.</p>
<th class="note">Note</th>
</tr>
<tr>
- <td class="note">Tizen provides remote debugging through the <a href="../../../../../org.tizen.devtools/html/web_tools/remote_inspector_w.htm">JavaScript Debugger tool</a>.</td>
+ <td class="note">Tizen provides remote debugging through the <a href="../../../../../org.tizen.devtools/html/web_tools/web_inspector_w.htm">JavaScript Debugger tool</a>.</td>
</tr>
</tbody>
</table>
</tr>
</tbody>
</table>
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="hw" name="hw" class="items-tit-h2">Using Hardware Acceleration</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="hw" name="hw">Using Hardware Acceleration</h2>
+
<p>The rendering performance of a Web application depends on both the Tizen platform and application design.</p>
<p>In hardware acceleration, GPU is used to perform a function faster than is possible if the application is running on the CPU. It enhances the rendering performance in the dynamic objects used in Web applications.</p>
<p>To improve the rendering performance, separate moving elements to independent layers as much as possible. You can use CSS transition with the <span style="font-family: Courier New,Courier,monospace">-webkit-transition</span> CSS attribute, or 3D transform with the <span style="font-family: Courier New,Courier,monospace">-webkit-transform</span> attribute. For the best performance, set the <span style="font-family: Courier New,Courier,monospace">-webkit-transform</span> attribute to the 3D type.</p>
<p>In all the following examples, a blue box moves from top left to bottom right for a second.</p>
<p class="figure">Figure: Blue box</p>
- <p
style="text-align:center;"><img alt="Blue box" src="../../../images/blue_box.png" /></p>
+ <p
align="center"><img alt="Blue box" src="../../../images/blue_box.png" /></p>
- <ul class="ul">
+ <ul>
<li>Use CPU painting:
<p>JavaScript performs CPU painting for a moving element for each frame at 16 ms interval using the <span style="font-family: Courier New,Courier,monospace">setTimeout()</span> method over the changing top-left coordinate. This approach does not use hardware acceleration, but only running on the CPU.</p>
<ol>
overflow: scroll;
-webkit-overflow-scrolling: touch;
}</pre>
- </div>
- </li>
-
-
-
- </ul>
-</div>
-</div>
+
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a href="#modify" class="opensection">Modifying Element Properties</a></li>
- <li><a href="#hw" class="opensection">Using Hardware Acceleration</a>
+ <li><a href="#modify">Modifying Element Properties</a></li>
+ <li><a href="#hw">Using Hardware Acceleration</a>
</li>
</ul>
<p class="toc-title">Related Info</p>
<div id="container"><div id="contents"><div class="content">
<h1>CSS Transitions Module Level 3: Changing Element Styles</h1>
-<div class="cont"><div class="static-cont">
<p>This tutorial demonstrates how you can use transitions to change element property values naturally.</p>
<h2>Warm-up</h2>
<p>Become familiar with the CSS Transitions Module Level 3 API basics by learning about:</p>
<ul>
-<li><a class="opensection" href="#modify">Modifying Element Properties</a>
+<li><a href="#modify">Modifying Element Properties</a>
<p>Modify element properties by adding a background color and transition effects, and changing the font color and size.</p></li>
</ul>
<h2>Follow-up</h2>
<p>Once we have learned the basics of CSS Transitions Module Level 3 API, we can now move on to more advanced tasks, including:</p>
<ul>
-<li><a class="opensection" href="#hw">Using Hardware Acceleration</a>
+<li><a href="#hw">Using Hardware Acceleration</a>
<p>Use hardware acceleration to enhance performance.</p>
</li>
</ul>
- <!-- Show / Hide all links -->
- <div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
- <!-- Folds -->
- <ul class="devicespecifications">
-
- <li>
- <div class="devicespec-tit">
- <h2 id="modify" name="modify" class="items-tit-h2">Modifying Element Properties</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="modify" name="modify">Modifying Element Properties</h2>
+
<p>To enhance the user experience of your application, you must learn to use transitions to change element property values naturally. This example uses a partial section of the <span style="font-family: Courier New,Courier,monospace">http://tizen.org</span> Web site, where the current "UPCOMING EVENTS" area only has the <span style="font-family: Courier New,Courier,monospace">text-decoration: underline</span> property in a <span style="font-family: Courier New,Courier,monospace">mouseover</span> state (the text gets underlined when the mouse hovers over it). To improve the effects, the example adds various <span style="font-family: Courier New,Courier,monospace">transitions</span> properties in this area.</p>
<p class="figure">Figure: Tizen site section to be transitioned</p>
-<p
style="text-align:center;"><img alt="Tizen site section to be transitioned" src="../../../images/transitions1.png" /></p>
+<p
align="center"><img alt="Tizen site section to be transitioned" src="../../../images/transitions1.png" /></p>
<ol><li><p>Add a background color change to the "UPCOMING EVENTS" area during a <span style="font-family: Courier New,Courier,monospace">mouseover</span> state:</p>
-<ol><li><p>Originally, the area on the site is defined as follows:</p>
+<ol
type="a"><li><p>Originally, the area on the site is defined as follows:</p>
<pre class="prettyprint">
<h2 class="block-title">Upcoming Events</h2>
<p>When the mouse is moved over the "UPCOMING EVENTS" area, the background color changes.</p>
-<p
style="text-align:center;"><img alt="Background color change" src="../../../images/transitions2.png" /></p> </li>
+<p
align="center"><img alt="Background color change" src="../../../images/transitions2.png" /></p> </li>
<li>
<p>Apply the transition effect in other elements:</p>
-<ol><li>To avoid unnecessary repetition, tie a list of <span style="font-family: Courier New,Courier,monospace">transition</span> elements together into groups <span style="font-family: Courier New,Courier,monospace">a</span> and <span style="font-family: Courier New,Courier,monospace">span</span>:
+<ol type="a"><li>To avoid unnecessary repetition, tie a list of <span style="font-family: Courier New,Courier,monospace">transition</span> elements together into groups <span style="font-family: Courier New,Courier,monospace">a</span> and <span style="font-family: Courier New,Courier,monospace">span</span>:
<pre class="prettyprint">
.location, .date, .location .anibg, h3 > a, .day > span
.event-info: hover h3 > a {color: #ec4986;}
</pre></li></ol>
-<p
style="text-align:center;"><img alt="Before mouseover" src="../../../images/transitions3.png" />
+<p
align="center"><img alt="Before mouseover" src="../../../images/transitions3.png" />
</p> </li>
<li>
<p>Emphasize the location phrase by adding an empty element. The emphasis is made by filling the background with black from left to right, and changing the font color to an appropriate value for the black background.</p>
-<ol>
+<ol type="a">
<li><p>Add the empty element:</p>
<pre class="prettyprint">
<p>The transition takes place when the property in question is at the front on the screen. The <span style="font-family: Courier New,Courier,monospace">event-info</span> class is used as the subject for the change, and it has been defined so that the transition occurs simultaneously in the <span style="font-family: Courier New,Courier,monospace">.location</span> and <span style="font-family: Courier New,Courier,monospace">.anibg</span> elements when the mouse hovers over any of the elements tied together as group <span style="font-family: Courier New,Courier,monospace">a</span>.
</p></li>
- </ol><p
style="text-align:center;"><img alt="Location phrase emphasis" src="../../../images/transitions5.png" /></p>
+ </ol><p
align="center"><img alt="Location phrase emphasis" src="../../../images/transitions5.png" /></p>
</li></ol>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following file:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/css_transitions_module_level_3" target="_blank">transition_practical.html</a></li>
</ul>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="hw" name="hw" class="items-tit-h2">Using Hardware Acceleration</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="hw" name="hw">Using Hardware Acceleration</h2>
+
<p>The rendering performance of a Web application depends on both the Tizen platform and application design.</p>
<p>In hardware acceleration, GPU is used to perform a function faster than is possible if the application is running on the CPU. It enhances the rendering performance in the dynamic objects used in Web applications.</p>
<p>To improve the rendering performance, separate moving elements to independent layers as much as possible. You can use CSS transition with the <span style="font-family: Courier New,Courier,monospace">-webkit-transition</span> CSS attribute, or 3D transform with the <span style="font-family: Courier New,Courier,monospace">-webkit-transform</span> attribute. For the best performance, set the <span style="font-family: Courier New,Courier,monospace">-webkit-transform</span> attribute to the 3D type.</p>
<p>In all the following examples, a blue box moves from top left to bottom right for a second.</p>
<p class="figure">Figure: Blue box</p>
- <p
style="text-align:center;"><img alt="Blue box" src="../../../images/blue_box.png" /></p>
+ <p
align="center"><img alt="Blue box" src="../../../images/blue_box.png" /></p>
- <ul class="ul">
+ <ul>
<li>Use CPU painting:
<p>JavaScript performs CPU painting for a moving element for each frame at 16 ms interval using the <span style="font-family: Courier New,Courier,monospace">setTimeout()</span> method over the changing top-left coordinate. This approach does not use hardware acceleration, but only running on the CPU.</p>
<ol>
overflow: scroll;
-webkit-overflow-scrolling: touch;
}</pre>
- </div>
- </li>
-
-
- </ul>
-</div>
-</div>
-
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a href="#woff" class="opensection">Using the WOFF File Format</a></li>
+ <li><a href="#woff">Using the WOFF File Format</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<div id="container"><div id="contents"><div class="content">
<h1>WOFF File Format 1.0: Changing Fonts Using WOFF</h1>
-<div class="cont"><div class="static-cont">
<p>This tutorial demonstrates how you can modify fonts with WOFF.</p>
<h2>Warm-up</h2>
<p>Become familiar with the WOFF File Format 1.0 API basics by learning about:</p>
<ul>
-<li><a href="#woff" class="opensection" >Using the WOFF File Format</a>
+<li><a href="#woff">Using the WOFF File Format</a>
<p>Change fonts using the WOFF (Web Open Font Format) packaging format.</p></li>
</ul>
-
- <!-- Show / Hide all links -->
- <div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
- <!-- Folds -->
- <ul class="devicespecifications">
-
- <li>
- <div class="devicespec-tit">
- <h2 id="woff" name="woff" class="items-tit-h2">Using the WOFF File Format</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="woff" name="woff">Using the WOFF File Format</h2>
+
<p>To enhance the user experience of your application, you must learn to use the WOFF (Web Open Font Format) file format 1.0, which is a W3C standard font packaging format used in Web pages:</p>
<ol>
<li>Download and use fonts installed on the Web server by creating <a href="http://www.w3.org/TR/2012/WD-css3-fonts-20120823/#font-face-rule" target="_blank"><span style="font-family: Courier New,Courier,monospace">@font-face</span> rules</a>. Within the rules, you can define the following properties:
-<ul class="ul">
+<ul>
<li><span style="font-family: Courier New,Courier,monospace">font-family</span>
<p>Defines a name for the font. This property is mandatory.</p></li>
<li><span style="font-family: Courier New,Courier,monospace">src</span>
</li>
</ol>
<p class="figure">Figure: Implementing the @font-face rules (in mobile applications only)</p>
-<p style="text-align:center;"><img alt="Implementing the @font-face rules (in mobile applications only)" src="../../../images/font_face.png" /></p>
- </div>
- </li>
-
-
-
- </ul>
-</div>
-</div>
+<p align="center"><img alt="Implementing the @font-face rules (in mobile applications only)" src="../../../images/font_face.png" /></p>
+
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a href="#canvas" class="opensection">Using a Canvas</a></li>
- <li><a href="#image" class="opensection">Using Images on the Canvas</a></li>
- <li><a href="#shape" class="opensection">Drawing Shapes to the Canvas</a></li>
- <li><a href="#mask" class="opensection">Drawing Masks to the Canvas</a></li>
- <li><a href="#text" class="opensection">Creating Text and Lines on the Canvas</a></li>
+ <li><a href="#canvas">Using a Canvas</a></li>
+ <li><a href="#image">Using Images on the Canvas</a></li>
+ <li><a href="#shape">Drawing Shapes to the Canvas</a></li>
+ <li><a href="#mask">Drawing Masks to the Canvas</a></li>
+ <li><a href="#text">Creating Text and Lines on the Canvas</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<div id="container"><div id="contents"><div class="content">
<h1>HTML5 Canvas: Creating Shapes and Text</h1>
-<div class="cont"><div class="static-cont">
<p>This tutorial demonstrates how you can create images, shapes, text, and lines on a canvas.</p>
<h2>Warm-up</h2>
<p>Become familiar with the HTML5 Canvas Element and HTML Canvas 2D Context API basics by learning about:</p>
<ul>
-<li><a class="opensection" href="#canvas">Using a Canvas</a>
+<li><a href="#canvas">Using a Canvas</a>
<p>Create and manage a canvas.</p></li>
-<li><a class="opensection" href="#image">Using Images on the Canvas</a>
+<li><a href="#image">Using Images on the Canvas</a>
<p>Connect an image to the canvas and transform it.</p></li>
-<li><a class="opensection" href="#shape">Drawing Shapes to the Canvas</a>
+<li><a href="#shape">Drawing Shapes to the Canvas</a>
<p>Draw shapes to the canvas and transform them.</p></li>
-<li><a class="opensection" href="#mask">Drawing Masks to the Canvas</a>
+<li><a href="#mask">Drawing Masks to the Canvas</a>
<p>Replace a background image by drawing a mask on it with a brush.</p></li>
-<li><a class="opensection" href="#text">Creating Text and Lines on the Canvas</a>
+<li><a href="#text">Creating Text and Lines on the Canvas</a>
<p>Draw text and line on the canvas and assigning styles for them.</p></li>
</ul>
<h2>Task in Wearable Applications</h2>
-<p>In the <a href="task_clockwidget_w.htm">Clock Widget</a> task, we will walk through using canvas contexts to create and display a clock on the canvas.</p>
+<p>In the <a href="task_basicwatch_w.htm">Basic Watch</a> task, we will walk through using canvas contexts to create and display a clock on the canvas.</p>
-<!-- Show / Hide all links -->
- <div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
- <!-- Folds -->
- <ul class="devicespecifications">
-
- <li>
- <div class="devicespec-tit">
- <h2 id="canvas" name="canvas" class="items-tit-h2">Using a Canvas</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="canvas" name="canvas">Using a Canvas</h2>
+
<p>To draw images with JavaScript, you must learn to use a canvas in your application:</p>
<ol>
</pre>
<p>The interface has various methods and attributes for expressing images and shapes.</p></li>
<li>To manage the work stack of the canvas, use the following methods:
-<ul class="ul">
+<ul>
<li><span style="font-family: Courier New,Courier,monospace">save()</span>: Pushes the current state onto the stack.</li>
<li><span style="font-family: Courier New,Courier,monospace">restore()</span>: Pops the top state on the stack, restoring the context to that state.</li>
</ul>
</pre>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following files:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/html5_the_canvas_element_and_html_canvas_2d_context" target="_blank">canvas_tutorial1.html</a></li>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/html5_the_canvas_element_and_html_canvas_2d_context" target="_blank">canvas_tutorial2.html</a></li>
</ul>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="image" name="image" class="items-tit-h2">Using Images on the Canvas</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="image" name="image">Using Images on the Canvas</h2>
+
<p>To use a canvas in your application, you must learn to use images on it:</p>
<ol><li>
context.rotate(45 * Math.PI/180);
context.drawImage(image, 70, 20);
context.restore();</pre>
-<p
style="text-align:center;"><img alt="Using images on the canvas (in mobile applications only)" src="../../../images/canvas_using_images.png" /></p>
+<p
align="center"><img alt="Using images on the canvas (in mobile applications only)" src="../../../images/canvas_using_images.png" /></p>
</li></ol>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following files:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/html5_the_canvas_element_and_html_canvas_2d_context" target="_blank">canvas_tutorial1.html</a></li>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/html5_the_canvas_element_and_html_canvas_2d_context" target="_blank">canvas_tutorial2.html</a></li>
</ul>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="shape" name="shape" class="items-tit-h2">Drawing Shapes to the Canvas</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="shape" name="shape">Drawing Shapes to the Canvas</h2>
<p>To use a canvas in your application, you must learn to create draw shapes on it:</p>
<ol>
/* Rectangle clear style */
context.clearRect(50, 50, 100, 100);
</pre>
-<p
style="text-align:center;"><img alt="Assign rectangle attributes (in mobile applications only)" src="../../../images/canvas_drawing_shapes1.png" /></p>
+<p
align="center"><img alt="Assign rectangle attributes (in mobile applications only)" src="../../../images/canvas_drawing_shapes1.png" /></p>
</li>
<li>Use the <span style="font-family: Courier New,Courier,monospace">arc()</span> method to create a circle.
/* Draw line B */
context.lineTo(300, 200);
context.stroke();</pre>
-<p
style="text-align:center;"><img alt="Assign circle attributes (in mobile applications only)" src="../../../images/canvas_drawing_shapes2.png" /></p>
+<p
align="center"><img alt="Assign circle attributes (in mobile applications only)" src="../../../images/canvas_drawing_shapes2.png" /></p>
</li>
<li><p>Use the <span style="font-family: Courier New,Courier,monospace">CanvasTransformation</span> interface to transform the created shapes. With compositing, a certain part of the shape can be made transparent. (The following figure applies to mobile applications only.)</p>
/* Fill the shape */
context.fillStyle = 'tomato';
</pre>
-<p
style="text-align:center;"><img alt="Transform shapes (in mobile applications only)" src="../../../images/canvas_drawing_shapes3.png" /></p>
+<p
align="center"><img alt="Transform shapes (in mobile applications only)" src="../../../images/canvas_drawing_shapes3.png" /></p>
</li>
</ol>
</table>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following file:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/html5_the_canvas_element_and_html_canvas_2d_context" target="_blank">canvas_tutorial3.html</a></li>
</ul>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="mask" name="mask" class="items-tit-h2">Drawing Masks to the Canvas</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="mask" name="mask">Drawing Masks to the Canvas</h2>
+
<p>To use a canvas in your application, you must learn to draw masks on it:</p>
<ol>
/* Event listeners for mouse events */
</pre>
<p>The <span style="font-family: Courier New,Courier,monospace">touchstart</span> and <span style="font-family: Courier New,Courier,monospace">mousedown</span> events only store the event coordinates, the <span style="font-family: Courier New,Courier,monospace">touchmove</span> and <span style="font-family: Courier New,Courier,monospace">mousemove</span> events define the position and direction of the drawing, and the <span style="font-family: Courier New,Courier,monospace">touchend</span> and <span style="font-family: Courier New,Courier,monospace">mouseup</span> events indicate that the user event ends, as illustrated in the following figure.</p>
-
<p style="text-align:center;"><img alt="Drawing events" src="../../../images/drawing_line_sequence.png" /></p>
+
<p align="center"><img alt="Drawing events" src="../../../images/drawing_line_sequence.png" /></p>
</li>
<li>Use the <span style="font-family: Courier New,Courier,monospace">updateLastPos()</span> method to update the <span style="font-family: Courier New,Courier,monospace">lastX</span> and <span style="font-family: Courier New,Courier,monospace">lastY</span> variable values. The real coordinates can be calculated by reducing the offset position of the canvas element from the touch position coordinates. The <span style="font-family: Courier New,Courier,monospace">'touch'</span> string indicates that the event is a touch event.
<pre class="prettyprint">
mouseBtn = false;
}
</pre>
-<p
style="text-align:center;"><img alt="Drawing masks" src="../../../images/canvas_drawing_masks.png" /></p>
+<p
align="center"><img alt="Drawing masks" src="../../../images/canvas_drawing_masks.png" /></p>
</li>
</ol>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following file:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/html5_the_canvas_element_and_html_canvas_2d_context/scratchcard" target="_blank">renamed_index.html</a></li>
</ul>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="text" name="text" class="items-tit-h2">Creating Text and Lines on the Canvas</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="text" name="text">Creating Text and Lines on the Canvas</h2>
<p>To use a canvas in your application, you must learn to create text and lines:</p>
<ol>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following files:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/html5_the_canvas_element_and_html_canvas_2d_context" target="_blank">Line_Styles_3.html</a></li>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/html5_the_canvas_element_and_html_canvas_2d_context" target="_blank">Text_Styles_2.html</a></li>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/html5_the_canvas_element_and_html_canvas_2d_context" target="_blank">Text_Styles_4.html</a></li>
</ul>
- </div>
- </li>
-
-
- </ul>
-</div>
-</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a class="opensection" href="../../../../../org.tizen.guides/html/web/w3c/graphics/graphics_guide_w.htm">Graphics Guides</a></li>
+ <li><a href="../../../../../org.tizen.guides/html/web/w3c/graphics/graphics_guide_w.htm">Graphics Guides</a></li>
<li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#graphics">Graphics API for Mobile Web</a></li>
<li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#graphics">Graphics API for Wearable Web</a></li>
</ul>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a href="#make" class="opensection">Making Shapes</a></li>
- <li><a href="#group" class="opensection">Grouping SVG Elements</a></li>
- <li><a href="#animate" class="opensection">Animating SVG Elements</a></li>
- <li><a href="#control" class="opensection">Controlling SVG Elements through Scripting</a></li>
+ <li><a href="#make">Making Shapes</a></li>
+ <li><a href="#group">Grouping SVG Elements</a></li>
+ <li><a href="#animate">Animating SVG Elements</a></li>
+ <li><a href="#control">Controlling SVG Elements through Scripting</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<div id="container"><div id="contents"><div class="content">
<h1>HTML5 SVG: Using SVG Elements</h1>
-<div class="cont"><div class="static-cont">
<p>This tutorial demonstrates how you can use SVG as inline elements in HTML.</p>
<p>Become familiar with the HTML5 SVG API basics by learning about:</p>
<ul>
-<li><a class="opensection" href="#make">Making Shapes</a>
+<li><a href="#make">Making Shapes</a>
<p>Create various vector graphic shapes in SVG.</p></li>
-<li><a class="opensection" href="#group">Grouping SVG Elements</a>
+<li><a href="#group">Grouping SVG Elements</a>
<p>Group various SVG elements together for easier element management.</p></li>
-<li><a class="opensection" href="#animate">Animating SVG Elements</a>
+<li><a href="#animate">Animating SVG Elements</a>
<p>Animate SVG elements.</p></li>
-<li><a class="opensection" href="#control">Controlling SVG Elements through Scripting</a>
+<li><a href="#control">Controlling SVG Elements through Scripting</a>
<p>Control SVG elements using scripts.</p></li>
</ul>
- <!-- Show / Hide all links -->
- <div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
- <!-- Folds -->
- <ul class="devicespecifications">
-
- <li>
- <div class="devicespec-tit">
- <h2 id="make" name="make" class="items-tit-h2">Making Shapes</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
- </div>
- <div class="devicespec-con">
- <p>To use inline SVG elements in your application, you must learn to create shapes:</p>
+ <h2 id="make" name="make">Making Shapes</h2>
+
+<p>To use inline SVG elements in your application, you must learn to create shapes:</p>
<ol>
<li>Create the SVG with the <span style="font-family: Courier New,Courier,monospace">svg</span> tag.</li>
<li>Use the graphic elements to create various shapes. The absolute coordinates of the graphics element determine the size of the SVG.
-<ul class="ul">
+<ul>
<li><p>To create a line between 2 assigned coordinates, use the <span style="font-family: Courier New,Courier,monospace"><line></span> element:</p>
<pre class="prettyprint">
</pre></li></ul></li></ol>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following file:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/html5_svg" target="_blank">svg_shape.html</a></li>
</ul>
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="group" name="group" class="items-tit-h2">Grouping SVG Elements</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
- </div>
- <div class="devicespec-con">
- <p>To use inline SVG elements in your application, you must learn to group elements:</p>
+
+ <h2 id="group" name="group">Grouping SVG Elements</h2>
+
+<p>To use inline SVG elements in your application, you must learn to group elements:</p>
<ol>
<li><p>Combine various SVG elements in a group using the <span style="font-family: Courier New,Courier,monospace"><g></span> container element, whose <span style="font-family: Courier New,Courier,monospace">id</span> attribute must be defined.</p>
</pre></li></ol>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following file:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/html5_svg" target="_blank">svg_group.html</a></li>
</ul>
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="animate" name="animate" class="items-tit-h2">Animating SVG Elements</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="animate" name="animate">Animating SVG Elements</h2>
+
<p>To use inline SVG elements in your application, you must learn to animate elements:</p>
<ol>
</pre></li></ol>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following file:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/html5_svg" target="_blank">svg_animation.html</a></li>
</ul>
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="control" name="control" class="items-tit-h2">Controlling SVG Elements through Scripting</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="control" name="control">Controlling SVG Elements through Scripting</h2>
+
<p>To use inline SVG elements in your application, you must learn to use scripting:</p>
<ol>
</pre></li></ol>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following file:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/html5_svg" target="_blank">svg_script.html</a></li>
</ul>
- </div>
- </li>
-
- </ul>
-</div>
-</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></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: Clock Widget</title>
+ <title>Task: Basic Watch</title>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<div id="container"><div id="contents"><div class="content">
-<h1>Task: Clock Widget</h1>
+<h1>Task: Basic Watch</h1>
-<p>This task, based on the ClockWidget sample delivered with the Tizen SDK, 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/downloads/sample-applications/sample-wearable-applications" target="blank">ClockWidget</a>.</p>
-
+<p>This task, based on the BasicWatch sample delivered with the Tizen SDK, 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/downloads/sample-applications/sample-wearable-applications" target="blank">BasicWatch</a>.</p>
+
<p>This task consists of the following parts:</p>
- <ul class="ul">
+ <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>
<h2 id="layout" name="layout">Defining the Application Layout</h2>
- <p>The ClockWidget sample application layout contains only 1 screen: the main screen that displays the clock.</p>
+ <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 class="figure">Figure: ClockWidget screen</p>
- <p style="text-align: center;"><img alt="ClockWidget screen" src="../../../images/clockwidget_sd.png" /></p>
+ <p class="figure">Figure: BasicWatch screen</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 class="tutorstep">
</body>
</pre> </li>
<li>main.js Source File
-<ol>
+<ol type="a">
<li>
<p>Create the clock in the middle of the canvas. Define the clock face style.</p>
<pre class="prettyprint">
</pre></li></ol></li></ol>
<h2 id="initialize" name="initialize">Initializing the Application</h2>
+
<ol class="tutorstep">
<li>config.xml Source File
<p>Define the application category.</p>
+
<pre class="prettyprint">
<tizen:category name="http://tizen.org/category/wearable_clock" />
</pre>
<th class="note">Note</th>
</tr>
<tr>
- <td class="note">To run your application on Samsung Gear devices, use <span style="font-family: Courier New,Courier,monospace"><tizen:category name="com.samsung.wmanager.WATCH_CLOCK" /></span> instead of <span style="font-family: Courier New,Courier,monospace"><tizen:category name="http://tizen.org/category/wearable_clock" /></span>.</td>
+ <td class="note"><p>To run your application on Samsung Gear 2, Samsung Gear 2 Neo, and Samsung Gear S devices, use <span style="font-family: Courier New,Courier,monospace"><tizen:category name="com.samsung.wmanager.WATCH_CLOCK" /></span> instead of <span style="font-family: Courier New,Courier,monospace"><tizen:category name="http://tizen.org/category/wearable_clock" /></span>.</p></td>
</tr>
</tbody>
</table>
-
</li>
<li>main.js Source File
- <ol>
+ <ol type="a">
<li>
<p>Modify the <span style="font-family: Courier New,Courier,monospace">window.requestAnimationFrame()</span> method to make the application compatible with the main browsers.</p>
<pre class="prettyprint">
</head>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Geolocation API Specification: Managing Location Information</h1>
-<div class="cont"><div class="static-cont">
<p>This tutorial demonstrates how you can retrieve location information.</p>
<h2>Warm-up</h2>
<p>Become familiar with the Geolocation API Specification basics by learning about:</p>
<ul>
- <li><a
class="opensection" href="#Retrieving_Location_Info">Retrieving Location Information</a><p>Create a mobile GPS application to retrieve location information.</p></li>
+ <li><a href="#Retrieving_Location_Info">Retrieving Location Information</a><p>Create a mobile GPS application to retrieve location information.</p></li>
</ul>
-<!-- Show / Hide all links -->
- <div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
- <!-- Folds -->
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="Retrieving_Location_Info" name="Retrieving_Location_Info" class="items-tit-h2">Retrieving Location Information</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
- </div>
- <div class="devicespec-con">
+<h2 id="Retrieving_Location_Info" name="Retrieving_Location_Info">Retrieving Location Information</h2>
<p>To provide users with location-based features, you must learn to create a mobile GPS application to retrieve location information:</p>
<ol>
<p>The following figure illustrates the GPS application.</p>
<p class="figure">Figure: GPS application (in mobile applications only)</p>
- <p
style="text-align:center;"><img alt="GPS application (in mobile applications only)" src="../../../images/geolocation.png" /></p>
+ <p
align="center"><img alt="GPS application (in mobile applications only)" src="../../../images/geolocation.png" /></p>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following file:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/location/geolocation_api_specification" target="_blank">geolocation tutorial.html</a></li>
</ul>
-
- </div>
- </li>
-
- </ul>
- </div></div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a class="opensection" href="#access">Accessing a Video Stream</a>
+ <li><a href="#access">Accessing a Video Stream</a>
</li>
- <li><a class="opensection" href="#capture">Capturing a Media Frame</a>
+ <li><a href="#capture">Capturing a Media Frame</a>
</li>
</ul>
<p class="toc-title">Related Info</p>
<div id="container"><div id="contents"><div class="content">
<h1>getUserMedia: Accessing Media Streams</h1>
- <div class="cont"><div class="static-cont">
<p>This tutorial demonstrates how you can access media streams and use them to capture media.</p>
<h2>Warm-up</h2>
<p>Become familiar with the getUserMedia API basics by learning about: </p>
<ul>
-<li><a href="#access" class="opensection">Accessing a Video Stream</a>
+<li><a href="#access">Accessing a Video Stream</a>
<p>Access a video stream on a device.</p></li>
-<li><a href="#capture" class="opensection">Capturing a Media Frame</a>
+<li><a href="#capture">Capturing a Media Frame</a>
<p>Capture a frame and display it in a video element.</p></li>
</ul>
<h2>Task in Mobile Applications</h2>
<p>In the <a href="task_selfcamera_w.htm">Self Camera</a> task, we will walk through displaying a camera video stream and capturing images from it.</p>
- <div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
-
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="access" name="access" class="items-tit-h2">Accessing a Video Stream</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="access" name="access">Accessing a Video Stream</h2>
<p>Learning how to access a video stream is a basic user media management skill:</p>
<ol>
</ol>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following file:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/media/get_user_media" target="_blank">video_stream.html</a></li>
</ul>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="capture" name="capture" class="items-tit-h2">Capturing a Media Frame</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="capture" name="capture">Capturing a Media Frame</h2>
+
<p>Learning how to capture a frame and display it in a video element is a basic user media management skill:</p>
<ol>
<li><p>Create a <a href="../../../../../org.tizen.guides/html/web/w3c/graphics/canvas_w.htm">canvas</a> element and use the <span style="font-family: Courier New,Courier,monospace">getCapture()</span> method to capture a frame:</p>
</ol>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following file:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/media/get_user_media" target="_blank">capturing_webcam.html</a></li>
</ul>
- </div>
- </li>
- </ul>
-</div>
-</div>
+
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a href="#activate" class="opensection">Activating the Media Capture</a></li>
+ <li><a href="#activate">Activating the Media Capture</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a class="opensection" href="../../../../../org.tizen.guides/html/web/w3c/media/media_capture_w.htm">HTML Media Capture Guide</a></li>
+ <li><a href="../../../../../org.tizen.guides/html/web/w3c/media/media_capture_w.htm">HTML Media Capture Guide</a></li>
<li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#mediacapture">HTML Media Capture API for Mobile Web</a></li>
</ul>
</div></div>
<div id="container"><div id="contents"><div class="content">
<h1>HTML Media Capture: Activating Media Capture Capabilities</h1>
-<div class="cont"><div class="static-cont">
<p>This tutorial demonstrates how you can use the HTML media capture feature.</p>
<p>Activate the media capture feature by selecting the file type during file upload.</p></li>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
-
- <ul class="devicespecifications">
-
- <li>
- <div class="devicespec-tit">
- <h2 id="activate" name="Creating_Web_Worker" class="items-tit-h2">Activating the Media Capture</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="activate" name="Creating_Web_Worker">Activating the Media Capture</h2>
<p>To provide users with the HTML media capture feature, you must learn to activate the media capture feature by selecting the file type during file upload:</p>
<input type="file" capture="filesystem">
</pre>
-<p
style="text-align:center;"><img alt="File types" src="../../../images/media_capture_file_types.png" /></p>
+<p
align="center"><img alt="File types" src="../../../images/media_capture_file_types.png" /></p>
</li>
<li>
<p>Assign format, such as <span style="font-family: Courier New,Courier,monospace">filesystem</span>, <span style="font-family: Courier New,Courier,monospace">camera</span>, or <span style="font-family: Courier New,Courier,monospace">camcorder</span>:</p>
</tbody>
</table>
<p>The <a href="http://www.w3.org/TR/2011/WD-html5-20110525/number-state.html#attr-input-accept" target="_blank">accept</a> attribute indicates which file types are appropriate. If used with a device that has a camera, it activates the device camera. With a device without a camera, it activates the My photo folder.</p>
-<p
style="text-align:center;"><img alt="Activating media features" src="../../../images/media_capture_activating_features.png" /></p>
+<p
align="center"><img alt="Activating media features" src="../../../images/media_capture_activating_features.png" /></p>
</li>
</ol>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following file:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/media/html_media_capture" target="_blank">media_capture.html</a></li>
</ul>
- </div>
- </li>
-
- </ul>
-</div>
-</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a class="opensection" href="../../../../../org.tizen.guides/html/web/w3c/media/media_guide_w.htm">Media Guides</a></li>
+ <li><a href="../../../../../org.tizen.guides/html/web/w3c/media/media_guide_w.htm">Media Guides</a></li>
<li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#media">Media API for Mobile Web</a></li>
<li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#media">Media API for Wearable Web</a></li>
</ul>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
</div>
<p>This task, based on the Piano sample delivered with the Tizen SDK, 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/downloads/sample-applications/sample-mobile-applications" target="blank">Piano</a>.</p>
<p>This task consists of the following parts:</p>
- <ul class="ul">
+ <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>
<p>The following figure shows the main screen of the application.</p>
<p class="figure">Figure: Piano screen</p>
- <p
style="text-align: center;"><img alt="Piano screen" src="../../../images/piano.png" /></p>
+ <p
align="center"><img alt="Piano screen" src="../../../images/piano.png" /></p>
<h3 id="main" name="main">Defining the Main Screen</h3>
<ol class="tutorstep">
<h2 id="initialize" name="initialize">Initializing the Application</h2>
<ol class="tutorstep">
<li>main.js Source File
- <ol>
+ <ol type="a">
<li>
<p>The <span style="font-family: Courier New,Courier,monospace;">piano</span> variable is declared to create the <span style="font-family: Courier New,Courier,monospace;">Piano</span> 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">
<p>The event handling functionality is implemented in the <span style="font-family: Courier New,Courier,monospace;">main.js</span> file.</p>
<ol class="tutorstep">
<li>Creating Event Listeners
- <ol><li>
+ <ol type="a"><li>
<p>The <span style="font-family: Courier New,Courier,monospace;">onPianoKeyTouchDown()</span> event listener is created to detect the touch event, when the user presses a piano key.</p>
<pre class="prettyprint">
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
</div>
<h1>Task: Self Camera</h1>
<p>This task, based on the SelfCamera sample delivered with the Tizen SDK, 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 the <a href="https://developer.tizen.org/downloads/sample-applications/sample-mobile-applications" target="blank">SelfCamera</a>.</p>
<p>This task consists of the following parts:</p>
- <ul class="ul">
+ <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>
<p>The following figure shows the main screen of the application.</p>
<p class="figure">Figure: SelfCamera screen</p>
- <p
style="text-align: center;"><img alt="SelfCamera screen" src="../../../images/selfcamera.png" /></p>
+ <p
align="center"><img alt="SelfCamera screen" src="../../../images/selfcamera.png" /></p>
<h3 id="main" name="main">Defining the Main Screen</h3>
<ol class="tutorstep">
<p>The application object functionality is implemented in the <span style="font-family: Courier New,Courier,monospace">main.js</span> file.</p>
<ol class="tutorstep">
<li>Creating and Initializing the Application Object
- <ol>
+ <ol type="a">
<li>The <span style="font-family: Courier New,Courier,monospace">SelfCamera</span> object represents the entire application entity, and by using the prototype, the member methods are registered in the object.
<pre class="prettyprint">
}); </pre></li>
</ol></li>
<li>Binding Events to the Application Object
-<ol>
+<ol type="a">
<li><p>To bind video events to the application object, call the <span style="font-family: Courier New,Courier,monospace">bindVideoEvents()</span> method, which registers the event handlers to the corresponding events using the <span style="font-family: Courier New,Courier,monospace">bind()</span> method.</p>
<pre class="prettyprint">
<h3 id="access" name="access">Accessing the Camera Stream</h3>
<ol class="tutorstep">
<li>main.js Source File
- <ol>
+ <ol type="a">
<li> The <span style="font-family: Courier New,Courier,monospace">startPreview()</span> method requests the video stream using the <span style="font-family: Courier New,Courier,monospace">getUserMedia()</span> method of the navigator.
<pre class="prettyprint">
navigator.getUserMedia(options, this.onCaptureVideoSuccess.bind(this),
<h2 id="capture" name="capture">Capturing Pictures from Video</h2>
<ol class="tutorstep">
<li>main.js Source File
- <ol>
+ <ol type="a">
<li>Capture a video frame with canvas.
<pre class="prettyprint">
SelfCamera.prototype.captureImage = function captureImage(video)
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
</li>
<li>Playback management
<ul class="toc">
- <li><a class="opensection" href="#play">Playing Media Files</a>
+ <li><a href="#play">Playing Media Files</a>
</li>
- <li><a class="opensection" href="#retrieve">Retrieving Media Information</a>
+ <li><a href="#retrieve">Retrieving Media Information</a>
</li>
- <li><a class="opensection" href="#move">Moving the Timeline Position</a>
+ <li><a href="#move">Moving the Timeline Position</a>
</li>
- <li><a class="opensection" href="#display">Displaying the Progress State</a>
+ <li><a href="#display">Displaying the Progress State</a>
</li>
</ul>
</li>
- <li><a class="opensection" href="#resize">Resizing the Video Screen</a>
+ <li><a href="#resize">Resizing the Video Screen</a>
</li>
- <li><a class="opensection" href="#check">Checking Supported Media Formats</a>
+ <li><a href="#check">Checking Supported Media Formats</a>
</li>
- <li><a class="opensection" href="#handle">Handling Errors</a>
+ <li><a href="#handle">Handling Errors</a>
</li>
</ul>
<p class="toc-title">Related Info</p>
<div id="container"><div id="contents"><div class="content">
<h1>HTML5 video and audio element: Playing and Managing Multimedia Content</h1>
- <div class="cont"><div class="static-cont">
<p>This tutorial demonstrates how you can use HTML5 <span style="font-family: Courier New,Courier,monospace">audio</span> and <span style="font-family: Courier New,Courier,monospace">video</span> elements with JavaScript in Tizen.</p>
<h2>Warm-up</h2>
<p>Become familiar with the HTML5 video and audio element API basics by learning about:</p>
<ul>
-<li><a class="opensection" href="#create">Creating an Audio and Video Player</a>
+<li><a href="#create">Creating an Audio and Video Player</a>
<p>Create a simple player using the <span style="font-family: Courier New,Courier,monospace">audio</span> and <span style="font-family: Courier New,Courier,monospace">video</span> elements' attributes.</p></li>
<li>Playback management
<ul>
- <li><a class="opensection" href="#play">Playing Media Files</a>
+ <li><a href="#play">Playing Media Files</a>
<p>Provide custom control for play and pause events.</p></li>
- <li><a class="opensection" href="#retrieve">Retrieving Media Information</a>
+ <li><a href="#retrieve">Retrieving Media Information</a>
<p>Retrieve duration and playing time.</p></li>
- <li><a class="opensection" href="#move">Moving the Timeline Position</a>
+ <li><a href="#move">Moving the Timeline Position</a>
<p>Change the play position forward or backward in the timeline.</p></li>
- <li><a class="opensection" href="#display">Displaying the Progress State</a>
+ <li><a href="#display">Displaying the Progress State</a>
<p>Display the download progress state of a media file.</p></li>
</ul>
</li>
-<li><a class="opensection" href="#resize">Resizing the Video Screen</a>
+<li><a href="#resize">Resizing the Video Screen</a>
<p>Resize the video screen. This usage can only be applied to the <span style="font-family: Courier New,Courier,monospace">video</span> element.</p></li>
-<li><a class="opensection" href="#check">Checking Supported Media Formats</a>
+<li><a href="#check">Checking Supported Media Formats</a>
<p>Check whether the media data has an acceptable MIME type, and if not, handle the exceptions.</p></li>
-<li><a class="opensection" href="#handle">Handling Errors</a>
+<li><a href="#handle">Handling Errors</a>
<p>Handle errors that can occur during playback.</p></li>
</ul>
<h2>Task in Mobile Applications</h2>
<p>In the <a href="task_piano_w.htm">Piano</a> task, we will walk through creating a piano in your application and playing sounds.</p>
-
- <div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
-
-<ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="create" name="create" class="items-tit-h2">Creating an Audio and Video Player</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="create" name="create">Creating an Audio and Video Player</h2>
+
<p>To provide users with HTML5 audio and video features, you must learn to create a simple player for streaming playback:
</p>
<ol>
preload="auto" controls muted loop autoplay>
</audio>
</pre>
-<p
style="text-align:center;"><img alt="Audio player" src="../../../images/video_audio3.png" /></p>
+<p
align="center"><img alt="Audio player" src="../../../images/video_audio3.png" /></p>
</li>
<li>
<p>To create a video player, create a <span style="font-family: Courier New,Courier,monospace">video</span> element including the necessary attributes. In addition to the attributes available for the <span style="font-family: Courier New,Courier,monospace">audio</span> element, you can also use the <span style="font-family: Courier New,Courier,monospace">width</span>, <span style="font-family: Courier New,Courier,monospace">height</span>, and <span style="font-family: Courier New,Courier,monospace">poster</span> attributes.</p>
<p>A player with a play control (built-in control provided in the
browser) is created. The control is visible only when the <span style="font-family: Courier New,Courier,monospace">controls</span> attribute is added. If the <span style="font-family: Courier New,Courier,monospace">poster</span> attribute is not defined, the video's first frame is shown on the screen before the playback. The following figure shows the video player before and during playback.
</p>
-<p
style="text-align:center;"><img alt="Video player before playback" src="../../../images/video_audio1.png" /> <img alt="Video player during playback" src="../../../images/video_audio2.png" /></p>
+<p
align="center"><img alt="Video player before playback" src="../../../images/video_audio1.png" /> <img alt="Video player during playback" src="../../../images/video_audio2.png" /></p>
</li>
</ol>
</table>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following files:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/media/html5_the_video_element_and_html5_the_audio_element" target="_blank">mini_code_audio.html</a></li>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/media/html5_the_video_element_and_html5_the_audio_element" target="_blank">mini_code_video.html</a></li>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/media/html5_the_video_element_and_html5_the_audio_element/media" target="_blank">audio_sample.mp3</a></li>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/media/html5_the_video_element_and_html5_the_audio_element/media" target="_blank">poster_sample.png</a></li>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/media/html5_the_video_element_and_html5_the_audio_element/media" target="_blank">video_sample.mp4</a></li>
</ul>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="play" name="play" class="items-tit-h2">Playing Media Files</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="play" name="play">Playing Media Files</h2>
<p>To provide users with HTML5 audio and video features, you must learn to play and pause media files using custom controls:</p>
</pre>
<p class="figure">Figure: Playing files (in mobile applications only)</p>
-<p
style="text-align:center;"><img alt="Playing files (in mobile applications only)" src="../../../images/video_audio4.png" /></p>
+<p
align="center"><img alt="Playing files (in mobile applications only)" src="../../../images/video_audio4.png" /></p>
</li>
</ol>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following files:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/media/html5_the_video_element_and_html5_the_audio_element" target="_blank">play_pause.html</a></li>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/media/html5_the_video_element_and_html5_the_audio_element/media" target="_blank">video_sample.mp4</a></li>
</ul>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="retrieve" name="retrieve" class="items-tit-h2">Retrieving Media Information</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="retrieve" name="retrieve">Retrieving Media Information</h2>
+
<p>To provide users with HTML5 audio and video features, you must learn to retrieve the total duration and playing time of a media file:</p>
<table class="note">
</script>
</pre>
<p class="figure">Figure: Displaying the duration and play time (in mobile applications only)</p>
-<p
style="text-align:center;"><img alt="Displaying the duration and play time (in mobile applications only)" src="../../../images/video_audio5.png" /></p>
+<p
align="center"><img alt="Displaying the duration and play time (in mobile applications only)" src="../../../images/video_audio5.png" /></p>
</li>
</ol>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following files:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/media/html5_the_video_element_and_html5_the_audio_element" target="_blank">play_time_view.html</a></li>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/media/html5_the_video_element_and_html5_the_audio_element/media" target="_blank">video_sample.mp4</a></li>
</ul>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="move" name="move" class="items-tit-h2">Moving the Timeline Position</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="move" name="move">Moving the Timeline Position</h2>
<p>To provide users with HTML5 audio and video features, you must learn to move the play position on the timeline:</p>
<p>If the metadata of the media file is loaded, you can move to the assigned timeline position even when the media file is not playing. For more information, see <a href="#retrieve">Retrieving Media Information.</a></p>
<p class="figure">Figure: Moving the timeline position (in mobile applications only)</p>
-<p
style="text-align:center;"><img alt="Moving the timeline position (in mobile applications only)" src="../../../images/video_audio6.png" /></p>
+<p
align="center"><img alt="Moving the timeline position (in mobile applications only)" src="../../../images/video_audio6.png" /></p>
</li>
</ol>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following files:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/media/html5_the_video_element_and_html5_the_audio_element" target="_blank">time_jumping.html</a></li>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/media/html5_the_video_element_and_html5_the_audio_element/media" target="_blank">video_sample.mp4</a></li>
</ul>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="display" name="display" class="items-tit-h2">Displaying the Progress State</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="display" name="display">Displaying the Progress State</h2>
+
<p>To provide users with HTML5 audio and video features, you must learn to check the download progress status of media content:</p>
<ol>
</script>
</pre>
<p class="figure">Figure: Displaying the progress state (in mobile applications only)</p>
-<p
style="text-align:center;"><img alt="Displaying progress state (in mobile applications only)" src="../../../images/video_audio7.png" /></p>
+<p
align="center"><img alt="Displaying progress state (in mobile applications only)" src="../../../images/video_audio7.png" /></p>
</li>
</ol>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following files:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/media/html5_the_video_element_and_html5_the_audio_element" target="_blank">progress.html</a></li>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/media/html5_the_video_element_and_html5_the_audio_element/media" target="_blank">poster_sample.png</a></li>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/media/html5_the_video_element_and_html5_the_audio_element/media" target="_blank">video_sample.mp4</a></li>
</ul>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="resize" name="resize" class="items-tit-h2">Resizing the Video Screen</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="resize" name="resize">Resizing the Video Screen</h2>
+
<p>To provide users with HTML5 audio and video features, you must learn to resize the video screen:</p>
<table class="note">
}, false);
</script></pre>
<p class="figure">Figure: Resizing the video screen (in mobile applications only)</p>
-<p
style="text-align:center;"><img alt="Resizing the video screen (in mobile applications only)" src="../../../images/video_audio8.png" /></p>
+<p
align="center"><img alt="Resizing the video screen (in mobile applications only)" src="../../../images/video_audio8.png" /></p>
</li>
</ol>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following files:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/media/html5_the_video_element_and_html5_the_audio_element" target="_blank">resize.html</a></li>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/media/html5_the_video_element_and_html5_the_audio_element/media" target="_blank">video_sample.mp4</a></li>
</ul>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="check" name="check" class="items-tit-h2">Checking Supported Media Formats</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="check" name="check">Checking Supported Media Formats</h2>
+
<p>To provide users with HTML5 audio and video features, you must learn to check whether the media data of the assigned MIME type can be played:</p>
<ol>
<p>For more information about the media formats supported in Tizen, see the <a href="../../../../../org.tizen.guides/html/web/w3c/media/video_audio_w.htm">HTML5 video and audio element</a> guide.</p>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following files:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/media/html5_the_video_element_and_html5_the_audio_element" target="_blank">can_play_type.html</a></li>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/media/html5_the_video_element_and_html5_the_audio_element/media" target="_blank">video_sample_001.ogv</a></li>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/media/html5_the_video_element_and_html5_the_audio_element/media" target="_blank">video_sample_002.webm</a></li>
</ul>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="handle" name="handle" class="items-tit-h2">Handling Errors</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="handle" name="handle">Handling Errors</h2>
<p>To provide users with HTML5 audio and video features, you must learn to handle errors that can occur during playback:</p>
<ol>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following files:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/media/html5_the_video_element_and_html5_the_audio_element" target="_blank">error.html</a></li>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/media/html5_the_video_element_and_html5_the_audio_element/media" target="_blank">video_sample.mp4</a></li>
</ul>
- </div>
- </li>
- </ul>
-</div>
-</div>
+
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
</div>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a class="opensection" href="../../../../../org.tizen.guides/html/web/w3c/media/webaudio_w.htm">Web Audio Guide</a></li>
+ <li><a href="../../../../../org.tizen.guides/html/web/w3c/media/webaudio_w.htm">Web Audio Guide</a></li>
<li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#webaudio">Web Audio API for Mobile Web</a></li>
</ul>
</div></div>
<div id="container"><div id="contents"><div class="content">
<h1>Web Audio: Playing Audio Content</h1>
- <div class="cont"><div class="static-cont">
- <p>This tutorial demonstrates how to play audio content using the Web audio.</p>
+ <p>This tutorial demonstrates how you can play audio content using the Web audio.</p>
<table class="note">
<tbody>
<p>Play sound by using the <span style="font-family: Courier New,Courier,monospace">noteOn()</span> method.</p></li>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
-
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="load" name="load" class="items-tit-h2">Loading Data and Creating Audio Context</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="load" name="load">Loading Data and Creating Audio Context</h2>
<p>To provide users with sophisticated audio features, you must learn to modulate source data into decoded audio data using <a href="../../../../../org.tizen.guides/html/web/w3c/communication/xmlhttprequest_w.htm">XMLHttpRequest</a>, and create an instance of the <a href="http://www.w3.org/TR/2012/WD-webaudio-20121213/#AudioContext-section" target="_blank">AudioContext</a> interface:</p>
<ol>
<li>To load source audio data:
-<ol>
+<ol type="a">
<li><p>Load a source audio file using XMLHttpRequest. Set the <span style="font-family: Courier New,Courier,monospace">responseType</span> to <span style="font-family: Courier New,Courier,monospace">arraybuffer</span> to receive binary response:</p>
<pre class="prettyprint">
<script>
<li>To create an audio buffer:
<p>Create an <a href="http://www.w3.org/TR/2012/WD-webaudio-20121213/#AudioBuffer-section" target="_blank">AudioBuffer</a> interface using the array buffer of audio data response attributes of the <span style="font-family: Courier New,Courier,monospace">XMLHttpRequest()</span> method. Select from the following options:</p>
-<ul class="ul">
+<ul>
<li><p>Create the audio buffer using the <span style="font-family: Courier New,Courier,monospace">createBuffer()</span> method:</p>
<pre class="prettyprint">
<script>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following file:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/media/web_audio_api" target="_blank">web_audio_basic_playback.html</a></li>
</ul>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="use" name="use" class="items-tit-h2">Using Modular Routing</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="use" name="use">Using Modular Routing</h2>
<p>To provide users with sophisticated audio features, you must learn to enable routing audio source data using <a href="http://www.w3.org/TR/2012/WD-webaudio-20121213/#AudioNode-section" target="_blank">AudioNode</a> objects:</p>
<ol>
<li>To route to speaker output in a direct sound destination:
-<ol>
+<ol type="a">
<li><p>Create a WebKit-based <a href="http://www.w3.org/TR/2012/WD-webaudio-20121213/#AudioContext-section" target="_blank">AudioContext</a> instance:</p>
<pre class="prettyprint">
<script>
</pre>
<p>All routing occurs within an <span style="font-family: Courier New,Courier,monospace">AudioContext</span> containing a single <a href="http://www.w3.org/TR/2012/WD-webaudio-20121213/#AudioDestinationNode-section" target="_blank">AudioDestinationNode</a>.</p>
-<p
style="text-align:center;"><img alt="Direct routing" src="../../../images/web_audio1.png" /></p>
+<p
align="center"><img alt="Direct routing" src="../../../images/web_audio1.png" /></p>
</li>
</ol>
</li>
<li><p>To route to the sound destination using <span style="font-family: Courier New,Courier,monospace">AudioNodes</span>:</p>
-<ol>
+<ol type="a">
<li><p>Create an <span style="font-family: Courier New,Courier,monospace">AudioContext</span> instance:</p>
<pre class="prettyprint">
<script>
<p>The figure below illustrates using 3 sources and a convolution reverb sent with a dynamics compressor at the final output stage.</p>
-<p
style="text-align:center;"><img alt="Routing from multiple sources" src="../../../images/web_audio2.png" /></p>
+<p
align="center"><img alt="Routing from multiple sources" src="../../../images/web_audio2.png" /></p>
</li>
</ol>
</li>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following file:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/media/web_audio_api" target="_blank">web_audio_basic_playback.html</a></li>
</ul>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="play" name="play" class="items-tit-h2">Playing Sound</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="play" name="play">Playing Sound</h2>
+
<p>To provide users with sophisticated audio features, you must learn to play sound:</p>
<ol>
<li><p>Create a WebKit-based <a href="http://www.w3.org/TR/2012/WD-webaudio-20121213/#AudioContext-section" target="_blank">AudioContext</a> instance:</p>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following file:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/media/web_audio_api" target="_blank">web_audio_basic_playback.html</a></li>
</ul>
- </div>
- </li>
- </ul>
-</div>
-</div>
+
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a class="opensection" href="#Retrieving_Page_Visibility">Retrieving the Page Visibility Status</a></li>
- <li><a class="opensection" href="#Retrieving_Notifications_Visibility">Receiving Notifications on Visibility Status Changes</a></li>
+ <li><a href="#Retrieving_Page_Visibility">Retrieving the Page Visibility Status</a></li>
+ <li><a href="#Retrieving_Notifications_Visibility">Receiving Notifications on Visibility Status Changes</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a class="opensection" href="../../../../../org.tizen.guides/html/web/w3c/perf_opt/page_w.htm">Page Visibility Guide</a></li>
+ <li><a href="../../../../../org.tizen.guides/html/web/w3c/perf_opt/page_w.htm">Page Visibility Guide</a></li>
<li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#visibility">Page Visibility API for Mobile Web</a></li>
<li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#visibility">Page Visibility API for Wearable Web</a></li>
</ul>
<div id="container"><div id="contents"><div class="content">
<h1>Page Visibility: Managing Hidden and Visible Pages</h1>
-<div class="cont"><div class="static-cont">
<p>This tutorial demonstrates how you can use page visibility in your application.</p>
<li><a href="#Retrieving_Notifications_Visibility">Receiving Notifications on Visibility Status Changes</a> <p>Control the video playback based on the page visibility status change events.</p></li>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
-
- <ul class="devicespecifications">
-
- <li>
- <div class="devicespec-tit">
- <h2 id="Retrieving_Page_Visibility" name="Retrieving_Page_Visibility" class="items-tit-h2">Retrieving the Page Visibility Status</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="Retrieving_Page_Visibility" name="Retrieving_Page_Visibility">Retrieving the Page Visibility Status</h2>
<p>To optimize the performance of your application, you must learn to retrieve the page visibility status:</p>
<ol>
{
logText.innerHTML += '<p>Hidden: <span>' + document.webkitHidden; +
'</span></p>';
- </pre>
+</pre>
<p>The <span style="font-family: Courier New,Courier,monospace">hidden</span> property returns <span style="font-family: Courier New,Courier,monospace">true</span> if the document in the top-level browsing context (root window in the browser's viewport) [HTML5] is not visible at all. If the document is at least partially visible, the property returns <span style="font-family: Courier New,Courier,monospace">false</span>.</p>
</li>
<li><p>Retrieve the page visibility status with the <span style="font-family: Courier New,Courier,monospace">visibilityState</span> property:</p>
+ document.webkitVisibilityState; + '</span></p>';
}
</script>
- </pre>
+</pre>
<p>The <span style="font-family: Courier New,Courier,monospace">visibilityState</span> property returns one of the following DOMString types:</p>
- <ul class="ul">
+ <ul>
<li><p><span style="font-family: Courier New,Courier,monospace">hidden</span>: Document cannot be seen at all</p></li>
<li><p><span style="font-family: Courier New,Courier,monospace">visible</span>: Document can be at least partly seen</p></li>
<li><p><span style="font-family: Courier New,Courier,monospace">prerender</span>: Document is loaded, but cannot be seen on the screen</p></li>
</table>
<p class="figure">Figure: Page visibility (in mobile applications only)</p>
- <p
style="text-align:center;"><img alt="Page visibility (in mobile applications only)" src="../../../images/page_visibility_get.png" /></p>
+ <p
align="center"><img alt="Page visibility (in mobile applications only)" src="../../../images/page_visibility_get.png" /></p>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following file:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/performance_and_optimization/page_visibility" target="_blank">page_1.html</a></li>
</ul>
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="Retrieving_Notifications_Visibility" name="Retrieving_Notifications_Visibility" class="items-tit-h2">Receiving Notifications on Visibility Status Changes</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="Retrieving_Notifications_Visibility" name="Retrieving_Notifications_Visibility">Receiving Notifications on Visibility Status Changes</h2>
<p>To optimize the performance of your application, you must learn to track changes in the page visibility status, and respond to them appropriately:</p>
<ol>
<button id="v-pause" type="button" disabled>pause</button>
</div>
</div>
- </pre>
+</pre>
</li>
<li><p>Add event listeners to play and pause the video based on the button clicks:</p>
<pre class="prettyprint">
pause_button.disabled = true; /* Disable pause button */
}, false);
</script>
- </pre>
+</pre>
</li>
<li><p>Add an event listener to track the page visibility status changes. When the status changes and the <span style="font-family: Courier New,Courier,monospace">visibilityChange</span> event is triggered, use the <span style="font-family: Courier New,Courier,monospace">hidden</span> property to check whether the page is hidden or visible, and to play or pause the video accordingly.</p>
<pre class="prettyprint">
}
}
</script>
- </pre>
+</pre>
</li>
</ol>
<p>If the video page becomes hidden with a tab screen transition, the playback is paused. When the video page is visible again, the playback resumes.</p>
<p class="figure">Figure: Video player (in mobile applications only)</p>
- <p
style="text-align:center;"><img alt="Video player (in mobile applications only)" src="../../../images/page_visibility_change.png" /></p>
+ <p
align="center"><img alt="Video player (in mobile applications only)" src="../../../images/page_visibility_change.png" /></p>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following files:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/performance_and_optimization/page_visibility" target="_blank">visibility_sample.html</a></li>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/performance_and_optimization/page_visibility" target="_blank">video_sample.mp4</a></li>
</ul>
- </div>
- </li>
-
- </ul>
-</div>
-</div>
+
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a class="opensection" href="../../../../../org.tizen.guides/html/web/w3c/perf_opt/performance_guide_w.htm">Performance and Optimization Guides</a></li>
+ <li><a href="../../../../../org.tizen.guides/html/web/w3c/perf_opt/performance_guide_w.htm">Performance and Optimization Guides</a></li>
<li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#performance">Performance and Optimization API for Mobile Web</a></li>
<li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#performance">Performance and Optimization API for Wearable Web</a></li>
</ul>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a class="opensection" href="#Creating_App">Creating an Application with a Controllable Animation</a></li>
+ <li><a href="#Creating_App">Creating an Application with a Controllable Animation</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a class="opensection" href="../../../../../org.tizen.guides/html/web/w3c/perf_opt/timing_control_w.htm">Timing control for script-based animations Guide</a></li>
+ <li><a href="../../../../../org.tizen.guides/html/web/w3c/perf_opt/timing_control_w.htm">Timing control for script-based animations Guide</a></li>
<li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#timing">Timing control for script-based animations API for Mobile Web</a></li>
<li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#timing">Timing control for script-based animations API for Wearable Web</a></li>
</ul>
</div>
<div id="container"><div id="contents"><div class="content">
-<h1>Timing control for script-based animations: Controlling Animation Frame Rate</h1>
-<div class="cont"><div class="static-cont">
+<h1>Timing control for script-based animations: Controlling Animation Frame Rate</h1>
<p>This tutorial demonstrates how you can use animation control in your application.</p>
<p>Create an application whose speed you can control.</p></li>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
-
- <ul class="devicespecifications">
-
- <li>
- <div class="devicespec-tit">
- <h2 id="Creating_App" name="Creating_App" class="items-tit-h2">Creating an Application with a Controllable Animation</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="Creating_App" name="Creating_App">Creating an Application with a Controllable Animation</h2>
+
<p>To optimize the performance of your application, you must learn to create a simple controllable DOM animation.</p>
<p>This example creates a screen with a Tizen pinwheel rotating on it, and buttons to increase or decrease the rotation speed and start or stop the animation.</p>
<p class="figure">Figure: Controllable animation (in mobile applications only)</p>
- <p
style="text-align:center;"><img alt="Controllable animation (in mobile applications only)" src="../../../images/timing.png" /></p>
+ <p
align="center"><img alt="Controllable animation (in mobile applications only)" src="../../../images/timing.png" /></p>
<ol>
<li><p>Create the HTML layout, including a <span style="font-family: Courier New,Courier,monospace"><nav></span> element with 3 buttons and <span style="font-family: Courier New,Courier,monospace"><div></span> elements for the pinwheel image and text:</p>
<pre class="prettyprint">
</pre>
</li>
<li>Set the CSS properties:
- <ol>
+ <ol type="a">
<li><p>Define properties for a flexible vertical layout for the content area, and the <span style="font-family: Courier New,Courier,monospace">nav</span> container:</p>
<pre class="prettyprint">
body
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following file:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/performance_and_optimization/timing_control_for_script_based_animations/animation_timing_warm_up" target="_blank">renamed_index.html</a></li>
</ul>
- </div>
- </li>
-
- </ul>
-</div>
-</div>
+
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a class="opensection" href="#Creating_Web_Worker">Creating a Web Worker and Handling Errors</a></li>
- <li><a class="opensection" href="#Sending_Messages">Sending Messages between Web Workers</a></li>
+ <li><a href="#Creating_Web_Worker">Creating a Web Worker and Handling Errors</a></li>
+ <li><a href="#Sending_Messages">Sending Messages between Web Workers</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a class="opensection" href="../../../../../org.tizen.guides/html/web/w3c/perf_opt/web_workers_w.htm">Web Workers Guide</a></li>
+ <li><a href="../../../../../org.tizen.guides/html/web/w3c/perf_opt/web_workers_w.htm">Web Workers Guide</a></li>
<li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#web_workers">Web Workers API for Mobile Web</a></li>
<li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#web_workers">Web Workers API for Wearable Web</a></li>
</ul>
<div id="container"><div id="contents"><div class="content">
<h1>Web Workers: Running JavaScript on the Background</h1>
-<div class="cont"><div class="static-cont">
<p>This tutorial demonstrates how you can create and terminate a Web worker, handle errors, and send messages between workers.</p>
<p>Send messages between host workers and subworkers.</p></li>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
-
- <ul class="devicespecifications">
-
- <li>
- <div class="devicespec-tit">
- <h2 id="Creating_Web_Worker" name="Creating_Web_Worker" class="items-tit-h2">Creating a Web Worker and Handling Errors</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
- </div>
- <div class="devicespec-con">
+<h2 id="Creating_Web_Worker" name="Creating_Web_Worker">Creating a Web Worker and Handling Errors</h2>
+
<p>Learning how to create Web workers is a useful resource management skill:</p>
<ol>
<li>To create and execute a Web worker:
- <ol>
+ <ol type="a">
<li><p>Create JavaScript code for a simple Boolean operation:</p>
<pre class="prettyprint">
var n = 1;
</li>
<li>
<p>Create a Web worker to be activated in the background. The JavaScript URL defining the worker needs to be delivered when creating the worker object:</p>
- <pre><pre class="prettyprint lang-html" style="border:0px">
+ <pre class="prettyprint lang-html">
<button type="button" onclick="workerStart()">Start</button>
<button type="button" onclick="worker.terminate()">Stop</button>
<output></output>
- </pre><pre class="prettyprint lang-js" style="border:0px">
+</pre><pre class="prettyprint lang-js">
<script>
var worker = new Worker("worker3.js");
document.querySelector("output").textContent = e.data;
};
}
-</script></pre></pre>
+</script></pre>
<p>When the <strong>Start</strong> button is clicked, message data is received from the worker and displayed in the <span style="font-family: Courier New,Courier,monospace"><output></span> element. When the <strong>Stop</strong> button is clicked, the worker is terminated.</p>
<p>Simple operations can be sufficiently handled with a single worker, however, in order to execute a more complex operations, more workers are needed.</p>
</li>
<p>The subworker creates its own independent thread, and is activated in it, so it has the same restrictions as a host worker. This means that communication between subworkers is impossible, but a host worker can communicate with subworkers within the same object.</p>
</li>
<li>To handle errors:
- <ul class="ul">
+ <ul>
<li><p>If an error occurs when the worker is being executed, the <span style="font-family: Courier New,Courier,monospace">onerror()</span> event is triggered. It takes <span style="font-family: Courier New,Courier,monospace">filename</span>, <span style="font-family: Courier New,Courier,monospace">lineno</span>, and <span style="font-family: Courier New,Courier,monospace">message</span> attributes, and displays an error message:</p>
<pre class="prettyprint">
worker.onerror = function(e)
</ul>
</li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="Sending_Messages" name="Sending_Messages" class="items-tit-h2">Sending Messages between Web Workers</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="Sending_Messages" name="Sending_Messages">Sending Messages between Web Workers</h2>
+
<p>Learning how to send messages between Web workers is a useful resource management skill:</p>
<ol>
<li>Send a message in one of the following ways:
- <ul class="ul">
+ <ul>
<li>
<p>Use the <span style="font-family: Courier New,Courier,monospace">postMessage()</span> method to send a "Hello" message to a Web worker:</p>
<pre class="prettyprint">var worker = new Worker('worker1.js');
</li>
</ul></li>
<li><p>Receive a message in one of the following ways:</p>
- <ul class="ul">
+ <ul>
<li><p>Use the <span style="font-family: Courier New,Courier,monospace">onMessage</span> event handler to respond to receiving a message:</p>
<pre class="prettyprint">worker.onmessage = function(e)
{
</ul>
</li>
<li><p>Use the workers to execute threads:</p>
- <ul class="ul">
+ <ul>
<li><p>Use <span style="font-family: Courier New,Courier,monospace">worker1.js</span>:</p>
<pre class="prettyprint">self.onmessage = function(e)
{
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following files:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/performance_and_optimization/web_workers" target="_blank">web_worker_1.html</a></li>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/performance_and_optimization/web_workers" target="_blank">web_worker_2.html</a></li>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/performance_and_optimization/web_workers" target="_blank">worker_1.js</a></li>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/performance_and_optimization/web_workers" target="_blank">worker_2.js</a></li>
</ul>
- </div>
- </li>
-
- </ul>
-</div>
-</div>
+
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a class="opensection" href="#Using_Simple_Requests">Using Simple Requests</a></li>
- <li><a class="opensection" href="#Using_Preflight_Requests">Using Preflight Requests</a></li>
+ <li><a href="#Using_Simple_Requests">Using Simple Requests</a></li>
+ <li><a href="#Using_Preflight_Requests">Using Preflight Requests</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<div id="container"><div id="contents"><div class="content">
<h1>Cross-Origin Resource Sharing: Enabling Client-side Cross-origin Requests</h1>
-<div class="cont"><div class="static-cont">
+
<p>This tutorial demonstrates how you can allow cross-origin resource sharing (CORS) through simple and preflight requests.</p>
<h2>Warm-up</h2>
<p>Become familiar with the Cross-Origin Resource Sharing API basics by learning about:</p>
<ul>
- <li><a class="opensection" href="#Using_Simple_Requests">Using Simple Requests</a>
+ <li><a href="#Using_Simple_Requests">Using Simple Requests</a>
<p>Create a simple request based on <a href="../communication/xmlhttprequest_tutorial_w.htm">XML HTTP Request level 2</a>, and receive a response.</p></li>
- <li><a class="opensection" href="#Using_Preflight_Requests">Using Preflight Requests</a>
+ <li><a href="#Using_Preflight_Requests">Using Preflight Requests</a>
<p>Create a preflight request based on <a href="../communication/xmlhttprequest_tutorial_w.htm">XML HTTP Request level 2</a>, and receive a response. After a successful authorization, send the actual data request and receive a response.</p></li>
</ul>
- <div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
-
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="Using_Simple_Requests" name="Using_Simple_Requests" class="items-tit-h2">Using Simple Requests</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="Using_Simple_Requests" name="Using_Simple_Requests">Using Simple Requests</h2>
+
<p>Learning how to handle a simple request based on XML HTTP Request level 2 enhances the security features of your application:</p>
<ol>
</li>
<li>Check the response header:
-<ul class="ul">
+<ul>
<li><p>If the request is received from a domain with access authority, the server allows a response.
The response header includes the <span style="font-family: Courier New,Courier,monospace">Access-Control-Allow-Origin</span> header set in the server side.</p>
<pre class="prettyprint">
</ol>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following file:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/security/cross_origin_resource_sharing" target="_blank">simple_request.html</a></li>
</ul>
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="Using_Preflight_Requests" name="Using_Preflight_Requests" class="items-tit-h2">Using Preflight Requests</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="Using_Preflight_Requests" name="Using_Preflight_Requests">Using Preflight Requests</h2>
+
<p>Learning how to handle a preflight request based on XML HTTP Request level 2 enhances the security features of your application.</p>
<ol>
<li>Check the request and response headers.
<p>If you check the network log, you find that 2 communications between the browser and server occur consecutively: first the preflight request and response, and then the actual request and response.</p>
-<ul class="ul">
+<ul>
<li><p>The preflight request checks the access authority before sending the actual data. The <span style="font-family: Courier New,Courier,monospace">Origin</span> and <span style="font-family: Courier New,Courier,monospace">Access-Control-Request-Headers</span> headers have been added to the request, because the request has a user-defined custom header, and the <span style="font-family: Courier New,Courier,monospace">Content-Type</span> set to <span style="font-family: Courier New,Courier,monospace">application/json</span>:</p>
<pre>
OPTION http://origin-domain.com/CORS/non_simple_reqeust.html HTTP/1.1
</li>
</ol>
- </div>
- </li>
-
- </ul>
-</div>
-</div>
+
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a href="#Sandboxed_Cookies" class="opensection">Accessing Sandboxed Cookies</a></li>
- <li><a href="#Sandboxed_Page" class="opensection">Redirecting a Sandboxed Page</a></li>
- <li><a href="#Sandboxed_Form" class="opensection">Submitting a Sandboxed Form</a></li>
- <li><a href="#Sandboxed_Popups" class="opensection">Managing Sandboxed Pop-ups</a></li>
- <li><a href="#Parent_Document" class="opensection">Including Rendered Content in the Parent Document</a>
+ <li><a href="#Sandboxed_Cookies">Accessing Sandboxed Cookies</a></li>
+ <li><a href="#Sandboxed_Page">Redirecting a Sandboxed Page</a></li>
+ <li><a href="#Sandboxed_Form">Submitting a Sandboxed Form</a></li>
+ <li><a href="#Sandboxed_Popups">Managing Sandboxed Pop-ups</a></li>
+ <li><a href="#Parent_Document">Including Rendered Content in the Parent Document</a>
</li>
</ul>
<p class="toc-title">Related Info</p>
<div id="container"><div id="contents"><div class="content">
<h1>HTML5 iframe element: Controlling HTML Elements</h1>
-<div class="cont"><div class="static-cont">
<p>This tutorial demonstrates how you can block areas that threaten security using the <span style="font-family: Courier New,Courier,monospace">iframe</span> element, and render the browsing content to include it seamlessly in the parent document.</p>
<h2 id="warm-up" name="warm-up">Warm-up</h2>
<p>Become familiar with the HTML5 iframe element API basics by learning about:</p>
<ul>
- <li><a
class="opensection" href="#Sandboxed_Cookies">Accessing Sandboxed Cookies</a> <p>Allow or block access to cookies within the same domain.</p></li>
- <li><a
class="opensection" href="#Sandboxed_Page">Redirecting a Sandboxed Page</a> <p>Allow or block external links from the <span style="font-family: Courier New,Courier,monospace">iframe</span> element.</p></li>
- <li><a
class="opensection" href="#Sandboxed_Form">Submitting a Sandboxed Form</a> <p>Allow or block form submission.</p></li>
- <li><a
class="opensection" href="#Sandboxed_Popups">Managing Sandboxed Pop-ups</a> <p>Allow or block pop-up alarm within the <span style="font-family: Courier New,Courier,monospace">iframe</span> content.</p></li>
- <li><a
class="opensection" href="#Parent_Document">Including Rendered Content in the Parent Document</a> <p>Include rendered content seamlessly in the parent document.</p></li>
+ <li><a href="#Sandboxed_Cookies">Accessing Sandboxed Cookies</a> <p>Allow or block access to cookies within the same domain.</p></li>
+ <li><a href="#Sandboxed_Page">Redirecting a Sandboxed Page</a> <p>Allow or block external links from the <span style="font-family: Courier New,Courier,monospace">iframe</span> element.</p></li>
+ <li><a href="#Sandboxed_Form">Submitting a Sandboxed Form</a> <p>Allow or block form submission.</p></li>
+ <li><a href="#Sandboxed_Popups">Managing Sandboxed Pop-ups</a> <p>Allow or block pop-up alarm within the <span style="font-family: Courier New,Courier,monospace">iframe</span> content.</p></li>
+ <li><a href="#Parent_Document">Including Rendered Content in the Parent Document</a> <p>Include rendered content seamlessly in the parent document.</p></li>
</ul>
-
- <!-- Show / Hide all links -->
- <div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
- <!-- Folds -->
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="Sandboxed_Cookies" name="Sandboxed_Cookies" class="items-tit-h2">Accessing Sandboxed Cookies</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="Sandboxed_Cookies" name="Sandboxed_Cookies">Accessing Sandboxed Cookies</h2>
+
<p>Learning how to control <span style="font-family: Courier New,Courier,monospace">iframe</span> element content when accessing the cookies of the parent document enhances the security features of your application:</p>
<ol>
<li>Create an <span style="font-family: Courier New,Courier,monospace"><input></span> element of the <span style="font-family: Courier New,Courier,monospace">checkbox</span> type that enables the sandbox activation. In addition, create an <span style="font-family: Courier New,Courier,monospace">iframe</span> element with the <a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html#attr-iframe-sandbox" target="blank">sandbox</a> property. To allow script execution in the <span style="font-family: Courier New,Courier,monospace">iframe</span> element content and cookie access, set the <span style="font-family: Courier New,Courier,monospace">sandbox</span> attribute value as <span style="font-family: Courier New,Courier,monospace">allow-same-origin</span>:
<p align="center"><img alt="Sandbox cookie access (in mobile applications only)" src="../../../images/sandbox_cookie_access.png"/></p>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following files:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/security/html5_the_iframe_element" target="_blank">cookie_stolen.html</a></li>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/security/html5_the_iframe_element" target="_blank">iframe_cookie_stolen.html</a></li>
</ul>
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="Sandboxed_Page" name="Sandboxed_Page" class="items-tit-h2">Redirecting a Sandboxed Page</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="Sandboxed_Page" name="Sandboxed_Page">Redirecting a Sandboxed Page</h2>
<p>Learning how to control <span style="font-family: Courier New,Courier,monospace">iframe</span> element content when redirecting a page enhances the security features of your application:</p>
<ol>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following files:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/security/html5_the_iframe_element" target="_blank">iframe_page_redirection.html</a></li>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/security/html5_the_iframe_element" target="_blank">page_redirection.html</a></li>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/security/html5_the_iframe_element" target="_blank">warning.html</a></li>
</ul>
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="Sandboxed_Form" name="Sandboxed_Form" class="items-tit-h2">Submitting a Sandboxed Form</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="Sandboxed_Form" name="Sandboxed_Form">Submitting a Sandboxed Form</h2>
<p>Learning how to control <span style="font-family: Courier New,Courier,monospace">iframe</span> element content when submitting a form enhances the security features of your application:</p>
<ol>
<li>Create an <span style="font-family: Courier New,Courier,monospace"><input></span> element of the <span style="font-family: Courier New,Courier,monospace">checkbox</span> type that enables the sandbox activation. In addition, create an <span style="font-family: Courier New,Courier,monospace">iframe</span> element with the <a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html#attr-iframe-sandbox" target="blank">sandbox</a> property. To allow form submission, set the <span style="font-family: Courier New,Courier,monospace">sandbox</span> attribute value as <span style="font-family: Courier New,Courier,monospace">allow-forms</span>:
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following files:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/security/html5_the_iframe_element" target="_blank">form_submission.html</a></li>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/security/html5_the_iframe_element" target="_blank">iframe_form_submission.html</a></li>
</ul>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="Sandboxed_Popups" name="Sandboxed_Popups" class="items-tit-h2">Managing Sandboxed Pop-ups</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="Sandboxed_Popups" name="Sandboxed_Popups">Managing Sandboxed Pop-ups</h2>
+
<p>Learning how to control the opening of the <span style="font-family: Courier New,Courier,monospace">iframe</span> element content enhances the security features of your application:</p>
<ol>
<li>Create an <span style="font-family: Courier New,Courier,monospace"><input></span> element of the <span style="font-family: Courier New,Courier,monospace">checkbox</span> type that enables the sandbox activation. In addition, create an <span style="font-family: Courier New,Courier,monospace">iframe</span> element with the <a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html#attr-iframe-sandbox" target="blank">sandbox</a> property. To allow pop-ups, set the <span style="font-family: Courier New,Courier,monospace">sandbox</span> attribute value as <span style="font-family: Courier New,Courier,monospace">allow-popups</span>:
<p align="center"><img alt="Sandbox pop-up (in mobile applications only)" src="../../../images/sandbox_popup.png"/></p>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following files:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/security/html5_the_iframe_element" target="_blank">iframe_popup.html</a></li>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/security/html5_the_iframe_element" target="_blank">popup.html</a></li>
</ul>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="Parent_Document" name="Parent_Document" class="items-tit-h2">Including Rendered Content in the Parent Document</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="Parent_Document" name="Parent_Document">Including Rendered Content in the Parent Document</h2>
+
<p>Learning how to include rendered content seamlessly in the parent document using the <span style="font-family: Courier New,Courier,monospace">iframe</span> element enhances the security features of your application:</p>
<ol>
<li>Create the needed HTML elements, including the CSS style of the parent document. Create an <span style="font-family: Courier New,Courier,monospace">iframe</span> element with the <a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html#attr-iframe-seamless" target="blank">seamless</a> attribute setting, and another <span style="font-family: Courier New,Courier,monospace">iframe</span> element without the setting:
<p align="center"><img alt="Seamless content appending (in mobile applications only)" src="../../../images/execution_screen.png"/></p>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following files:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/security/html5_the_iframe_element" target="_blank">iframe_seamless.html</a></li>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/security/html5_the_iframe_element" target="_blank">seamless.html</a></li>
</ul>
- </div>
- </li>
-
- </ul>
-</div>
-</div>
+
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a class="opensection" href="../../../../../org.tizen.guides/html/web/w3c/security/security_guide_w.htm">Security Guides</a></li>
+ <li><a href="../../../../../org.tizen.guides/html/web/w3c/security/security_guide_w.htm">Security Guides</a></li>
<li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#security">Security API for Mobile Web</a></li>
<li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#security">Security API for Wearable Web</a></li>
</ul>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a class="opensection" href="#set">Setting the Cache Manifest</a></li>
- <li><a class="opensection" href="#update">Updating the Cache</a></li>
- <li><a class="opensection" href="#manage">Managing the Cache Events</a></li>
+ <li><a href="#set">Setting the Cache Manifest</a></li>
+ <li><a href="#update">Updating the Cache</a></li>
+ <li><a href="#manage">Managing the Cache Events</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a class="opensection" href="../../../../../org.tizen.guides/html/web/w3c/storage/appcache_w.htm">HTML5 Application caches Guide</a></li>
+ <li><a href="../../../../../org.tizen.guides/html/web/w3c/storage/appcache_w.htm">HTML5 Application caches Guide</a></li>
<li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#cache">HTML5 Application caches API for Mobile Web</a></li>
</ul>
</div></div>
<div id="container"><div id="contents"><div class="content">
<h1>HTML5 Application caches: Storing Application Resources</h1>
- <div class="cont"><div class="static-cont">
+
<p>This tutorial demonstrates how you can use HTML5 application caches.</p>
<li><a href="#manage">Managing the Cache Events</a>
<p>Check the cache status and manage events based on it.</p></li>
</ul>
-
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
-
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="set" name="set" class="items-tit-h2">Setting the Cache Manifest</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="set" name="set">Setting the Cache Manifest</h2>
<p>To enable application caches, you must learn to set the cache manifest file:</p>
</tbody>
</table>
-</div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="update" name="update" class="items-tit-h2">Updating the Cache</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="update" name="update">Updating the Cache</h2>
<p>To enable application caches in your application, you must learn to update the cache:</p>
<ol>
</table>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following file:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/storage/html5_application_caches" target="_blank">appcache_update.html</a></li>
</ul>
-</div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="manage" name="manage" class="items-tit-h2">Managing the Cache Events</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="manage" name="manage">Managing the Cache Events</h2>
+
<p>To enable application caches in your application, you must learn to check the current status of the cache:</p>
<ol>
</pre>
</li>
</ol>
- </div>
- </li>
- </ul>
-</div>
-</div>
+
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<ul class="toc">
<li>Local files
<ul class="toc">
- <li><a class="opensection" href="#read_info">Reading Local File Information</a>
+ <li><a href="#read_info">Reading Local File Information</a>
</li>
- <li><a class="opensection" href="#read_content">Reading Local File Content</a>
+ <li><a href="#read_content">Reading Local File Content</a>
</li>
- <li><a class="opensection" href="#slice">Slicing Blob</a>
+ <li><a href="#slice">Slicing Blob</a>
</li></ul></li>
<li>Sandboxed file system
<ul class="toc">
- <li><a class="opensection" href="#access">Accessing a Sandboxed File System</a>
+ <li><a href="#access">Accessing a Sandboxed File System</a>
</li>
- <li><a class="opensection" href="#display">Displaying Files in a Sandboxed File System</a>
+ <li><a href="#display">Displaying Files in a Sandboxed File System</a>
</li>
- <li><a class="opensection" href="#create_dir">Creating a Directory or File</a>
+ <li><a href="#create_dir">Creating a Directory or File</a>
</li>
- <li><a class="opensection" href="#remove">Removing a Directory or File</a>
+ <li><a href="#remove">Removing a Directory or File</a>
</li></ul></li>
</ul>
<p class="toc-title">Related Info</p>
<div id="container"><div id="contents"><div class="content">
<h1>File: Managing Files</h1>
- <div class="cont"><div class="static-cont">
<p>This tutorial demonstrates how you can control files and directories on the device, and access the sandboxed sections of a local file system to search, create, or delete a directory or file.
</p>
<ul>
<li>Local files
<ul>
-<li><a class="opensection" href="#read_info">Reading Local File Information</a>
+<li><a href="#read_info">Reading Local File Information</a>
<p>Access and read local file information.</p></li>
-<li><a class="opensection" href="#read_content">Reading Local File Content</a>
+<li><a href="#read_content">Reading Local File Content</a>
<p>Access, read, and display a local image file.</p></li>
-<li><a class="opensection" href="#slice">Slicing Blob</a>
+<li><a href="#slice">Slicing Blob</a>
<p>Read a local file as a binary string and slice it.</p></li>
</ul>
</li>
<li>Sandboxed file system in mobile applications
<ul>
-<li><a class="opensection" href="#access">Accessing a Sandboxed File System</a>
+<li><a href="#access">Accessing a Sandboxed File System</a>
<p>Request access to sandboxed sections of a local file system.</p></li>
-<li><a class="opensection" href="#display">Displaying Files in a Sandboxed File System</a>
+<li><a href="#display">Displaying Files in a Sandboxed File System</a>
<p>Display entries (directories or files) in sandboxed sections of a local file system.</p></li>
-<li><a class="opensection" href="#create_dir">Creating a Directory or File</a>
+<li><a href="#create_dir">Creating a Directory or File</a>
<p>Create a directory or file in a sandboxed section of a local file system. </p></li>
-<li><a class="opensection" href="#remove">Removing a Directory or File</a>
+<li><a href="#remove">Removing a Directory or File</a>
<p>Delete the directory or file in a sandboxed section of a local file system.</p></li>
</ul>
</li>
</ul>
-
-
- <div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
-
- <ul class="devicespecifications">
-
- <li>
- <div class="devicespec-tit">
- <h2 id="read_info" name="read_info" class="items-tit-h2">Reading Local File Information</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="read_info" name="read_info">Reading Local File Information</h2>
<p>Reading basic information, such as file name, size, MIME type, modification date, and path, of a local file is a useful file management skill:</p>
</script>
</pre>
<p class="figure">Figure: Displaying file information (in mobile applications only)</p>
-<p
style="text-align:center;"><img alt="Displaying file information (in mobile applications only)" src="../../../images/file1.png" /></p>
+<p
align="center"><img alt="Displaying file information (in mobile applications only)" src="../../../images/file1.png" /></p>
</li>
</ol>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following file:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/storage/file_api" target="_blank">file_api_reading_local_files_info.html</a></li>
</ul>
-</div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="read_content" name="read_content" class="items-tit-h2">Reading Local File Content</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="read_content" name="read_content">Reading Local File Content</h2>
+
<p>Reading a local image file in a Web application is a useful file management skill:</p>
</pre>
<p class="figure">Figure: Displaying an image file (in mobile applications only)</p>
-<p
style="text-align:center;"><img alt="Displaying an image file (in mobile applications only)" src="../../../images/file2.png" /></p>
+<p
align="center"><img alt="Displaying an image file (in mobile applications only)" src="../../../images/file2.png" /></p>
</li>
</ol>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following file:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/storage/file_api" target="_blank">file_api_reading_local_files.html</a></li>
</ul>
-</div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="slice" name="slice" class="items-tit-h2">Slicing Blob</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="slice" name="slice">Slicing Blob</h2>
<p>Slicing a local file using the <a href="http://www.w3.org/TR/2011/WD-FileAPI-20111020/#blob" target="_blank">Blob</a> interface is a useful file management skill:</p>
</pre>
<p class="figure">Figure: Slicing a file (in mobile applications only)</p>
-<p
style="text-align:center;"><img alt="Slicing a file (in mobile applications only)" src="../../../images/file3.png" /></p>
+<p
align="center"><img alt="Slicing a file (in mobile applications only)" src="../../../images/file3.png" /></p>
</li>
</ol>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following file:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/storage/file_api" target="_blank">file_api_slicing_blob.htm</a></li>
</ul>
-</div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="access" name="access" class="items-tit-h2">Accessing a Sandboxed File System</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="access" name="access">Accessing a Sandboxed File System</h2>
<p>Requesting access to sandboxed sections of a local file system is a useful file management skill:</p>
</ol>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following file:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/storage/file_api" target="_blank">file_api_file_system.htm</a></li>
</ul>
-</div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="display" name="display" class="items-tit-h2">Displaying Files in a Sandboxed File System</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="display" name="display">Displaying Files in a Sandboxed File System</h2>
<p>Reading a file or directory in a sandboxed section of a local file system is a useful file management skill:</p>
</tbody>
</table>
<p class="figure">Figure: Displaying files</p>
-<p
style="text-align:center;"><img alt="Displaying files" src="../../../images/file4.png" /></p>
+<p
align="center"><img alt="Displaying files" src="../../../images/file4.png" /></p>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following files:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/storage/file_api" target="_blank">file_api_file_system.htm</a></li>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/storage/file_api/img" target="_blank">icon_file.png</a></li>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/storage/file_api/img" target="_blank">icon_folder.png</a></li>
</ul>
-</div>
- </li>
- <li>
- <div class="devicespec-tit">
-<h2 id="create_dir" name="create_dir" class="items-tit-h2">Creating a Directory or File</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+<h2 id="create_dir" name="create_dir">Creating a Directory or File</h2>
<p>Creating a directory or file in a sandboxed section of a local file system is a useful file management skill:</p>
</table>
<p class="figure">Figure: Adding a file</p>
-<p
style="text-align:center;"><img alt="Adding a file" src="../../../images/file5.png" /></p>
+<p
align="center"><img alt="Adding a file" src="../../../images/file5.png" /></p>
</li>
</ol>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following file:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/storage/file_api" target="_blank">file_api_file_system.htm</a></li>
</ul>
-</div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="remove" name="remove" class="items-tit-h2">Removing a Directory or File</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="remove" name="remove">Removing a Directory or File</h2>
<p>Deleting a directory or file in a sandboxed section of a local file system is a useful file management skill:</p>
</tbody>
</table>
<p class="figure">Figure: Deleting files</p>
-<p
style="text-align:center;"><img alt="Deleting files" src="../../../images/file6.png" /></p>
+<p
align="center"><img alt="Deleting files" src="../../../images/file6.png" /></p>
</li>
</ol>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following file:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/storage/file_api" target="_blank">file_api_file_system.htm</a></li>
</ul>
- </div>
- </li>
- </ul>
-</div>
-</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a class="opensection" href="#db">Creating a Database</a>
+ <li><a href="#db">Creating a Database</a>
</li>
- <li><a class="opensection" href="#store">Creating an Object Store</a>
+ <li><a href="#store">Creating an Object Store</a>
</li>
- <li><a class="opensection" href="#manage">Managing Data</a>
+ <li><a href="#manage">Managing Data</a>
</li>
- <li><a class="opensection" href="#index">Creating an Index</a>
+ <li><a href="#index">Creating an Index</a>
</li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a class="opensection" href="../../../../../org.tizen.guides/html/web/w3c/storage/indexdb_w.htm">Indexed Database Guide</a></li>
+ <li><a href="../../../../../org.tizen.guides/html/web/w3c/storage/indexdb_w.htm">Indexed Database Guide</a></li>
<li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#database">Indexed Database API for Mobile Web</a></li>
- <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#database">Indexed Database API for Wearable Web</a></li>
+
<li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#database">Indexed Database API for Wearable Web</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Indexed Database: Managing an Object Store</h1>
- <div class="cont"><div class="static-cont">
<p>This tutorial demonstrates how you can create an indexed database and manage the data in it.</p>
<h2>Warm-up</h2>
<p>Become familiar with the Indexed Database API basics by learning about: </p>
<ul>
-<li><a class="opensection" href="#db">Creating a Database</a>
+<li><a href="#db">Creating a Database</a>
<p>Create a database which can contain an object store for data storage.</p></li>
-<li><a class="opensection" href="#store">Creating an Object Store</a>
+<li><a href="#store">Creating an Object Store</a>
<p>Create and delete and object store, which is the core mechanism in a database.</p></li>
-<li><a class="opensection" href="#manage">Managing Data</a>
+<li><a href="#manage">Managing Data</a>
<p>Store, call, and delete data.</p></li>
-<li><a class="opensection" href="#index">Creating an Index</a>
+<li><a href="#index">Creating an Index</a>
<p>Create an index to search for a list of records.</p></li>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
-
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="db" name="db" class="items-tit-h2">Creating a Database</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="db" name="db">Creating a Database</h2>
<p>Creating and deleting a database is a useful data management skill:</p>
</ol>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following file:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/storage/indexed_database_api" target="_blank">indexedDB_opening_database.html</a></li>
</ul>
-</div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="store" name="store" class="items-tit-h2">Creating an Object Store</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="store" name="store">Creating an Object Store</h2>
<p>Creating and deleting an <a href="http://www.w3.org/TR/2011/WD-IndexedDB-20111206/#object-store-concept" target="_blank">object store</a> is a useful data management skill:</p>
<ol>
</ol>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following file:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/storage/indexed_database_api" target="_blank">indexedDB_creating_objectStore.html</a></li>
</ul>
-</div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="manage" name="manage" class="items-tit-h2">Managing Data</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="manage" name="manage">Managing Data</h2>
<p>Saving, accessing, and deleting data in an object store is a useful data management skill:</p>
</ol>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following file:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/storage/indexed_database_api" target="_blank">indexedDB_saving_data.html</a></li>
</ul>
-</div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="index" name="index" class="items-tit-h2">Creating an Index</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="index" name="index">Creating an Index</h2>
<p>Creating, accessing, and deleting an index is a useful data management skill:</p>
</ol>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following file:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/storage/indexed_database_api" target="_blank">indexedDB_creating_index.html</a></li>
</ul>
- </div>
- </li>
- </ul>
-</div>
-</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a class="opensection" href="../../../../../org.tizen.guides/html/web/w3c/storage/storage_guide_w.htm">Storage Guides</a></li>
+ <li><a href="../../../../../org.tizen.guides/html/web/w3c/storage/storage_guide_w.htm">Storage Guides</a></li>
<li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#storage">Storage API for Mobile Web</a></li>
<li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#storage">Storage API for Wearable Web</a></li>
</ul>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
</div>
<ul class="toc">
<li>Asynchronous operations
<ul class="toc">
- <li><a class="opensection" href="#create_a">Opening a Database Asynchronously</a></li>
- <li><a class="opensection" href="#execute_a">Executing SQL Statements Asynchronously</a></li>
- <li><a class="opensection" href="#access_a">Accessing SQL Results Asynchronously</a></li>
- <li><a class="opensection" href="#handle_a">Handling a Syntax Error Asynchronously</a></li>
+ <li><a href="#create_a">Opening a Database Asynchronously</a></li>
+ <li><a href="#execute_a">Executing SQL Statements Asynchronously</a></li>
+ <li><a href="#access_a">Accessing SQL Results Asynchronously</a></li>
+ <li><a href="#handle_a">Handling a Syntax Error Asynchronously</a></li>
</ul>
</li>
<li>Synchronous operations
<ul class="toc">
- <li><a class="opensection" href="#create">Opening a Database Synchronously</a></li>
- <li><a class="opensection" href="#execute">Executing SQL Statements Synchronously</a></li>
- <li><a class="opensection" href="#access">Accessing SQL Results Synchronously</a></li>
- <li><a class="opensection" href="#handle">Handling a Syntax Error Synchronously</a></li>
+ <li><a href="#create">Opening a Database Synchronously</a></li>
+ <li><a href="#execute">Executing SQL Statements Synchronously</a></li>
+ <li><a href="#access">Accessing SQL Results Synchronously</a></li>
+ <li><a href="#handle">Handling a Syntax Error Synchronously</a></li>
</ul>
</li>
</ul>
<div id="container"><div id="contents"><div class="content">
<h1>Web SQL Database: Creating and Querying Databases</h1>
- <div class="cont"><div class="static-cont">
<p>This tutorial demonstrates how you can use SQL databases in Tizen applications.</p>
<table class="note">
</ul>
</li></ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
-
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="create_a" name="create_a" class="items-tit-h2">Opening a Database Asynchronously</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="create_a" name="create_a">Opening a Database Asynchronously</h2>
<p>To provide users with SQL database features, you must learn to create and open an SQL database asynchronously:</p>
<ol>
});
}
</pre>
-</li>
-<p>The method takes the following arguments: unique name of the database, expected version of the database to be opened (if an empty string is given any version can be loaded), display name, the estimated size of database (number of bytes), and, optionally, the database creation event handler.
- </p>
+<p>The method takes the following arguments: unique name of the database, expected version of the database to be opened (if an empty string is given any version can be loaded), display name, the estimated size of database (number of bytes), and, optionally, the database creation event handler.</p>
<table class="note">
<tbody>
<td class="note">The creation event handler is invoked only once if the database does not exist. There is no event handler for the database <span style="font-family: Courier New,Courier,monospace">opened</span> event.</td>
</tr>
</tbody>
-</table>
+</table></li>
</ol>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following file:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/storage/web_sql_database" target="_blank">websqldatabase_example.html</a></li>
</ul>
-</div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="execute_a" name="execute_a" class="items-tit-h2">Executing SQL Statements Asynchronously</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="execute_a" name="execute_a">Executing SQL Statements Asynchronously</h2>
<p>To provide users with SQL database features, you must learn to execute SQL statements asynchronously:</p>
<ol>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following file:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/storage/web_sql_database" target="_blank">websqldatabase_example.html</a></li>
</ul>
-</div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="access_a" name="access_a" class="items-tit-h2">Accessing SQL Results Asynchronously</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="access_a" name="access_a">Accessing SQL Results Asynchronously</h2>
<p>To provide users with SQL database features, you must learn to access SQL statement results asynchronously:</p>
<ol>
<li>
<p>When a SQL statement is executed, its event handler is invoked and returns the result as a <span style="font-family: Courier New,Courier,monospace">sqlResultSet</span> object:</p>
-<ul class="ul">
+<ul>
<li>The result object of the INSERT statement contains the insert ID, which stores the identifier of the added record. If multiple records were inserted, the insert ID contains the ID of the last inserted record:
<pre class="prettyprint">
sqlTransaction.executeSql("INSERT INTO tizenTable(title, content, insertDay) VALUES (?, ?, ?)",
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following file:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/storage/web_sql_database" target="_blank">websqldatabase_example.html</a></li>
</ul>
-</div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="handle_a" name="handle_a" class="items-tit-h2">Handling a Syntax Error Asynchronously</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="handle_a" name="handle_a">Handling a Syntax Error Asynchronously</h2>
<p>To provide users with SQL database features, you must learn to handle SQL database-related errors asynchronously:</p>
<ol>
</li>
</ol>
-</div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="create" name="create" class="items-tit-h2">Opening a Database Synchronously</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="create" name="create">Opening a Database Synchronously</h2>
<p>To provide users with SQL database features, you must learn to create and open an SQL database synchronously:</p>
});
}
</pre>
-</li>
-<p>The method takes the following arguments: unique name of the database, expected version of the database to be opened (if an empty string is given any version can be loaded), display name, the estimated size of database (number of bytes), and, optionally, the database creation event handler.
- </p>
+
+<p>The method takes the following arguments: unique name of the database, expected version of the database to be opened (if an empty string is given any version can be loaded), display name, the estimated size of database (number of bytes), and, optionally, the database creation event handler.</p>
<table class="note">
<tbody>
<td class="note">The creation event handler is invoked only once if the database does not exist. There is no event handle for the database opened event but, in the synchronous database API, no other code is run until the database creation operation is completed.</td>
</tr>
</tbody>
-</table>
+</table></li>
</ol>
-</div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="execute" name="execute" class="items-tit-h2">Executing SQL Statements Synchronously</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="execute" name="execute">Executing SQL Statements Synchronously</h2>
+
<p>To provide users with SQL database features, you must learn to execute SQL statements synchronously:</p>
<ol>
</table>
</li>
</ol>
-</div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="access" name="access" class="items-tit-h2">Accessing SQL Results Synchronously</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="access" name="access">Accessing SQL Results Synchronously</h2>
<p>To provide users with SQL database features, you must learn to access SQL statement results synchronously:</p>
<ol>
<li>
<p>When a SQL statement is executed, its event handler is invoked and returns the result as a <span style="font-family: Courier New,Courier,monospace">sqlResultSet</span> object:</p>
-<ul class="ul">
+<ul>
<li>The result object of the INSERT statement contains the insert ID, which stores the identifier of the added record. If multiple records were inserted, the insert ID contains the ID of the last inserted record:
<pre class="prettyprint">
var sqlResultSet = sqlTransactionSync.executeSql("INSERT INTO books (id, title, author) VALUES(NULL, ?, ?)",
</ul>
</li>
</ol>
-</div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="handle" name="handle" class="items-tit-h2">Handling Errors Synchronously</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="handle" name="handle">Handling Errors Synchronously</h2>
<p>To provide users with SQL database features, you must learn to handle SQL database-related errors synchronously:</p>
<ol>
</tr>
</tbody>
</table>
- </div>
- </li>
- </ul>
-</div>
-</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a class="opensection" href="#use">Using a Local Storage</a>
+ <li><a href="#use">Using a Local Storage</a>
</li>
- <li><a class="opensection" href="#save">Saving Data in Local and Session Storage</a>
+ <li><a href="#save">Saving Data in Local and Session Storage</a>
</li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../../org.tizen.guides/html/web/w3c/storage/web_storage_w.htm">Web Storage Guide</a></li>
<li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#webstorage">Web Storage API for Mobile Web</a></li>
- <li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#webstorage">Web Storage API for Wearable Web</a></li>
+
<li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#webstorage">Web Storage API for Wearable Web</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Web Storage: Saving Structured Data on the Client Side</h1>
- <div class="cont"><div class="static-cont">
<p>This tutorial demonstrates how you can use the Web storage to create and save data locally or temporarily.</p>
<h2>Warm-up</h2>
<p>Become familiar with the Web Storage API basics by learning about:</p>
<ul>
-<li><a class="opensection" href="#use">Using a Local Storage</a>
+<li><a href="#use">Using a Local Storage</a>
<p>Create, import, and delete data in a local Web storage. </p></li>
-<li><a class="opensection" href="#save">Saving Data in Local Storage and Session Storage</a>
+<li><a href="#save">Saving Data in Local Storage and Session Storage</a>
<p>Save the same data in a local storage and session storage, and check whether the data exists after the browser is closed and reopened.</p>
</li>
</ul>
- <div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
-
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="use" name="use" class="items-tit-h2">Using a Local Storage</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="use" name="use">Using a Local Storage</h2>
+
<p>Saving, reading, and deleting data in a local Web storage is a useful data management skill:</p>
<ol>
<li>
<li>
<p>To delete the saved data: </p>
-<ul class="ul">
+<ul>
<li>To delete a specific item, use the <span style="font-family: Courier New,Courier,monospace">removeItem()</span> method with the data key:
<pre class="prettyprint">
<script>
</ol>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following file:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/storage/web_storage" target="_blank">local_storage_session_storage.htm</a></li>
</ul>
-</div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="save" name="save" class="items-tit-h2">Saving Data in Local and Session Storage</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="save" name="save">Saving Data in Local and Session Storage</h2>
+
<p>Knowing how the same data is saved in local storage and session storage, and checking whether data exists when the browser is closed and reopened is a useful data management skill: </p>
</pre>
<p class="figure">Figure: Displaying local and session storage data (in mobile applications only)</p>
-<p
style="text-align:center;"><img alt="Displaying local and session storage data (in mobile applications only)" src="../../../images/web_storage1.png" /></p>
+<p
align="center"><img alt="Displaying local and session storage data (in mobile applications only)" src="../../../images/web_storage1.png" /></p>
<p>If the browser is closed and reopened, only the local storage data can be displayed, as illustrated in the figure below.</p>
<p class="figure">Figure: Displaying data after reopening the browser (in mobile applications only)</p>
-<p
style="text-align:center;"><img alt="Displaying data after reopening the browser (in mobile applications only)" src="../../../images/web_storage2.png" /></p>
+<p
align="center"><img alt="Displaying data after reopening the browser (in mobile applications only)" src="../../../images/web_storage2.png" /></p>
</li>
</ol>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following file:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/storage/web_storage" target="_blank">local_storage_session_storage.htm</a></li>
</ul>
- </div>
- </li>
- </ul>
-</div>
-</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a class="opensection" href="../../../../../org.tizen.guides/html/web/w3c/supplement/camera_w.htm">Camera API (Tizen Extension) Guide</a></li>
+ <li><a href="../../../../../org.tizen.guides/html/web/w3c/supplement/camera_w.htm">Camera API (Tizen Extension) Guide</a></li>
<li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/camera_w.html">Camera API (Tizen Extension) API for Wearable Web</a></li>
</ul>
</div></div>
<div id="container"><div id="contents"><div class="content">
<h1>Camera API (Tizen Extension): Using the Camera</h1>
- <div class="cont"><div class="static-cont">
<p>This tutorial demonstrates how you can control the camera on a wearable device.</p>
<h2>Task</h2>
<p>In the <a href="task_camera_w.htm">Camera</a> task, we will walk through launching and controlling the camera on the Tizen wearable device.</p>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
+ <h2 id="access" name="access">Accessing the Camera Device</h2>
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="access" name="access" class="items-tit-h2">Accessing the Camera Device</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
<p>To take advantage of the camera features, you must learn to access the camera device:</p>
<ol>
<li>Access the camera with the stream that you can receive from the <span style="font-family: Courier New,Courier,monospace">getUserMedia()</span> method. The second parameter for that method is an event handler that is triggered when the stream is successfully retrieved.
</pre>
</li>
</ol>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="manage" name="manage" class="items-tit-h2">Managing the Camera</h2>
-<span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="manage" name="manage">Managing the Camera</h2>
<p>To take advantage of the camera features, you must learn to manage the camera:</p>
- <ul class="ul">
+ <ul>
<li>You can record videos with the <span style="font-family: Courier New,Courier,monospace">cameraControl</span> object.
<p>Use the <span style="font-family: Courier New,Courier,monospace">start()</span> to start the recording, and the <span style="font-family: Courier New,Courier,monospace">stop()</span> method to stop the recording:</p>
<pre class="prettyprint">
</tbody>
</table></li>
</ul>
- </div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="deallocate" name="deallocate" class="items-tit-h2">Deallocating the Camera Preview Stream</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="deallocate" name="deallocate">Deallocating the Camera Preview Stream</h2>
+
<p>To take advantage of the camera features, you must learn to deallocate the camera preview stream resources when the application is invisible, so that the preview stream can be assigned to another application:</p>
</pre>
</li>
</ol>
- </div>
- </li>
- </ul>
-</div>
-</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a href="#use" class="opensection">Using the Fullscreen Mode</a></li>
+ <li><a href="#use">Using the Fullscreen Mode</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a class="opensection" href="../../../../../org.tizen.guides/html/web/w3c/supplement/fullscreen_w.htm">FullScreen API - Mozilla Guide</a></li>
+ <li><a href="../../../../../org.tizen.guides/html/web/w3c/supplement/fullscreen_w.htm">FullScreen API - Mozilla Guide</a></li>
<li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#fullscreen">FullScreen API - Mozilla API for Mobile Web</a></li>
</ul>
</div></div>
<div id="container"><div id="contents"><div class="content">
<h1>FullScreen API - Mozilla: Using Fullscreen Display</h1>
-<div class="cont"><div class="static-cont">
+
<p>This tutorial demonstrates how you can display an element in the fullscreen mode.</p>
<li><a href="#use">Using the FullScreen Mode</a> <p>Activate and cancel the fullscreen mode for an element.</p></li>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
- <!-- Folds -->
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="use" name="use" class="items-tit-h2">Using the Fullscreen Mode</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
- <p>To display and element on full screen, you must learn to use the fullscreen mode:</p>
+<h2 id="use" name="use">Using the Fullscreen Mode</h2>
+
+<p>To display and element on full screen, you must learn to use the fullscreen mode:</p>
<ol>
<li><p>Define the element to be shown in the fullscreen mode.</p>
<p>In the following example, the screen contains an image, a video playback area, and 2 buttons. For the fullscreen mode, the image and 1 button are defined as an element (<span style="font-family: Courier New,Courier,monospace">fs-image</span>). The video playback area (<span style="font-family: Courier New,Courier,monospace">video</span>) is another element.</p>
</ol>
<p class="figure">Figure: Normal and fullscreen modes</p>
-<p
style="text-align:center;"><img alt="Normal and fullscreen modes" src="../../../images/fullscreen.png" /></p>
+<p
align="center"><img alt="Normal and fullscreen modes" src="../../../images/fullscreen.png" /></p>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following files:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/ui/mozilla_fullscreen" target="_blank">fullscreen.html</a></li>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/ui/mozilla_fullscreen/images" target="_blank">tizen_logo_light.png</a></li>
</ul>
- </div>
- </li>
-
-
- </ul>
-</div>
-</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a class="opensection" href="../../../../../org.tizen.guides/html/web/w3c/supplement/supplement_guide_w.htm">Supplementary Features Guides</a></li>
+ <li><a href="../../../../../org.tizen.guides/html/web/w3c/supplement/supplement_guide_w.htm">Supplementary Features Guides</a></li>
<li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#Supplementary">Supplementary API for Mobile Web</a></li>
<li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#Supplementary">Supplementary API for Wearable Web</a></li>
</ul>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<p>This task, based on the Camera sample delivered with the Tizen SDK, 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/downloads/sample-applications/sample-wearable-applications" target="blank">Camera</a>.</p>
<p>This task consists of the following parts:</p>
- <ul class="ul">
+ <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>index.html Source File
<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 <span style="font-family: Courier New,Courier,monospace;"><div></span> element whose <span style="font-family: Courier New,Courier,monospace;">class</span> attribute is set to <span style="font-family: Courier New,Courier,monospace;">ui-header</span>. The header section determines the title of the screen. The content section contains a list view widget with links to different settings.</p>
-<p>Each individual setting has its own sub-screen with a screen title and a list view widget displaying the available settings values.</p>
+<p>The header section of the screen is defined within a <span style="font-family: Courier New,Courier,monospace;"><div></span> element whose <span style="font-family: Courier New,Courier,monospace;">class</span> attribute is set to <span style="font-family: Courier New,Courier,monospace;">ui-header</span>. 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 <span style="font-family: Courier New,Courier,monospace;">css/style.css</span> 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 <span style="font-family: Courier New,Courier,monospace;">js/views/settings.js</span> file.</p>
<pre class="prettyprint">
<li>js/views/main.js Source File
-<ol><li>
+<ol type="a"><li>
<p>After launching the application, set the variables for the camera preview, call the <span style="font-family: Courier New,Courier,monospace;">initCameraPreview()</span> 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,
</pre>
</li>
<li>js/models/camera.js Source File
-<ol><li><p>In the <span style="font-family: Courier New,Courier,monospace;">registerStream()</span> method, create the camera control for the media stream.</p>
+<ol
type="a"><li><p>In the <span style="font-family: Courier New,Courier,monospace;">registerStream()</span> method, create the camera control for the media stream.</p>
<pre class="prettyprint">
function registerStream(mediaStream)
{
<h3 id="initialize3" name="initialize3">Initializing Video Recording</h3>
<ol class="tutorstep">
<li>js/views/main.js Source File
- <ol>
+ <ol type="a">
<li>
<p>Set the needed variables for the image capture.</p>
<p>The maximum recording time is set for 10 seconds (<span style="font-family: Courier New,Courier,monospace;">maxRecordingTimeSeconds</span>). Set the <span style="font-family: Courier New,Courier,monospace;">RECORDING_INTERVAL_STEP</span> variable in milliseconds for checking the length of the recording.</p>
<h3 id="record" name="record">Starting Video Recording</h3>
<ol class="tutorstep">
<li>js/views/main.js Source File
- <ol><li>
+ <ol type="a"><li>
<p>The <span style="font-family: Courier New,Courier,monospace">startRecording()</span> method starts the recording process, and the <span style="font-family: Courier New,Courier,monospace">stopRecording()</span> method stops it.</p>
<pre class="prettyprint">
function startRecording()
</li></ol></li>
<li>js/models/camera.js Source File
-<ol><li>
+<ol type="a"><li>
<p>Start video recording by applying video file parameters.</p>
<pre class="prettyprint">
function startRecording()
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a class="opensection" href="#array">Creating an Array Buffer</a>
+ <li><a href="#array">Creating an Array Buffer</a>
</li>
- <li><a class="opensection" href="#view">Creating Typed Array Views</a>
+ <li><a href="#view">Creating Typed Array Views</a>
</li>
- <li><a class="opensection" href="#use">Using Typed Arrays</a>
+ <li><a href="#use">Using Typed Arrays</a>
</li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a class="opensection" href="../../../../../org.tizen.guides/html/web/w3c/supplement/typedarray_w.htm">Typed Array - Khronos Guide</a></li>
+ <li><a href="../../../../../org.tizen.guides/html/web/w3c/supplement/typedarray_w.htm">Typed Array - Khronos Guide</a></li>
<li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#typed_array">Typed Array - Khronos API for Mobile Web</a></li>
<li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#typed_array">Typed Array - Khronos API for Wearable Web</a></li>
</ul>
<div id="container"><div id="contents"><div class="content">
<h1>Typed Array - Khronos: Handling Binary Data</h1>
- <div class="cont"><div class="static-cont">
<p>This tutorial demonstrates how you can access binary data in JavaScript.</p>
<h2 id="warm-up" name="warm-up">Warm-up</h2>
<p>Become familiar with the Typed Array - Khronos API basics by learning about:</p>
<ul>
-<li><a class="opensection" href="#array">Creating an Array Buffer</a>
+<li><a href="#array">Creating an Array Buffer</a>
<p>Create a buffer to save data on the array buffer view.</p></li>
-<li><a class="opensection" href="#view">Creating Typed Array Views</a>
+<li><a href="#view">Creating Typed Array Views</a>
<p>Create a typed array view of the array buffer and provide access to read and write binary data.</p></li>
-<li><a class="opensection" href="#use">Using Typed Arrays</a>
+<li><a href="#use">Using Typed Arrays</a>
<p>Deliver binary data in other HTML5 APIs that use a typed array.</p></li>
</ul>
- <div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="array" name="array" class="items-tit-h2">Creating an Array Buffer</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+ <h2 id="array" name="array">Creating an Array Buffer</h2>
+
<p>To handle binary data in your application with JavaScript, you must learn to create array buffers:</p>
<ol>
</script></pre></li>
</ol>
<p class="figure">Figure: Creating and slicing array buffers (in mobile applications only)</p>
-<p
style="text-align:center;"><img alt="Creating and slicing array buffers (in mobile applications only)" src="../../../images/arraybuffer.png"/></p>
+<p
align="center"><img alt="Creating and slicing array buffers (in mobile applications only)" src="../../../images/arraybuffer.png"/></p>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following file:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/khronos_typed_array" target="_blank">sample_1.html</a></li>
</ul>
-</div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="view" name="view" class="items-tit-h2">Creating Typed Array Views</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="view" name="view">Creating Typed Array Views</h2>
+
<p>To handle binary data in your application with JavaScript, you must learn to access the binary data for reading and writing:</p>
<ol>
log.innerHTML += "<div>" + x.byteOffset + "<div>";
</script></pre>
-<p
style="text-align:center;"><img alt="Typed Array implementation" src="../../../images/typed_array_implementation.png"/></p></li>
+<p
align="center"><img alt="Typed Array implementation" src="../../../images/typed_array_implementation.png"/></p></li>
<li>Replace the <span style="font-family: Courier New,Courier,monospace">CanvasPixelArray</span> instance with the <span style="font-family: Courier New,Courier,monospace">Uint8ClampedArray</span> instance:
<pre class="prettyprint">
<p>The <span style="font-family: Courier New,Courier,monospace">Uint8ClampedArray</span> behavior is identical to the other typed array views. The only notable exception is that the setters and constructors use clamping rather than modulo arithmetic while converting incoming number values.</p>
-<p
style="text-align:center;"><img alt="Clamped Array implementation" src="../../../images/clamped_array.png"/></p></li>
+<p
align="center"><img alt="Clamped Array implementation" src="../../../images/clamped_array.png"/></p></li>
<li>When an <span style="font-family: Courier New,Courier,monospace">ArrayBuffer</span> with heterogeneous type of data is used, you can take advantage of the <span style="font-family: Courier New,Courier,monospace">DataView</span> of the buffer:
<pre class="prettyprint">
log.innerHTML += "<div>" + Math.PI + "<div>";
</script></pre>
<p>The <span style="font-family: Courier New,Courier,monospace">DataView</span> stores the values of the given type at the specified byte offset from the start of the view. Moreover, alignment is not a constraint, and it can store the multi-byte values at any offset. For multi-byte values, the optional <span style="font-family: Courier New,Courier,monospace">littleEndian</span> argument indicates that the value can be stored in a big-endian or little-endian byte order. If the argument is set to <span style="font-family: Courier New,Courier,monospace">false</span> or is undefined, the value gets stored in the big-endian byte order.</p>
-<p
style="text-align:center;"><img alt="DataView" src="../../../images/data_view.png"/></p></li>
+<p
align="center"><img alt="DataView" src="../../../images/data_view.png"/></p></li>
</ol>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following files:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/khronos_typed_array" target="_blank">sample_2.html</a></li>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/khronos_typed_array" target="_blank">sample_3.html</a></li>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/khronos_typed_array" target="_blank">sample_4.html</a></li>
</ul>
-</div>
- </li>
- <li>
- <div class="devicespec-tit">
- <h2 id="use" name="use" class="items-tit-h2">Using Typed Arrays</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
+
+ <h2 id="use" name="use">Using Typed Arrays</h2>
+
<p>To handle binary data in your application with JavaScript, you must learn to deliver binary data effectively in other HTML5 APIs that employ a typed array:</p>
</script></pre></li>
<li>For the HTML5 canvas element API (in <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#canvas">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#canvas">wearable</a> applications), use the typed array with the following steps:
-<ol>
+<ol type="a">
<li>Create an <span style="font-family: Courier New,Courier,monospace">ImageData</span> object of the canvas internally.</li>
<li>Deliver the pixel expression of the canvas element:
<pre class="prettyprint">
request.send();
}</pre></li>
</ol>
- </div>
- </li>
- </ul>
-</div>
-</div>
+
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a href="#import" class="opensection">Importing the WebGL Context</a></li>
- <li><a href="#shader" class="opensection">Initializing Programs and Shaders</a></li>
- <li><a href="#buffer" class="opensection">Initializing Buffers</a></li>
- <li><a href="#draw" class="opensection">Drawing Shapes on the Screen</a></li>
- <li><a href="#color" class="opensection">Setting Colors</a></li>
- <li><a href="#texture" class="opensection">Setting Textures</a></li>
- <li><a href="#animation" class="opensection">Creating an Animation</a></li>
- <li><a href="#threed" class="opensection">Creating a 3D Perspective</a></li>
- <li><a href="#touch" class="opensection">Using Touch Events</a></li>
- <li><a href="#framework" class="opensection">Using WebGL Frameworks</a></li>
+ <li><a href="#import">Importing the WebGL Context</a></li>
+ <li><a href="#shader">Initializing Programs and Shaders</a></li>
+ <li><a href="#buffer">Initializing Buffers</a></li>
+ <li><a href="#draw">Drawing Shapes on the Screen</a></li>
+ <li><a href="#color">Setting Colors</a></li>
+ <li><a href="#texture">Setting Textures</a></li>
+ <li><a href="#animation">Creating an Animation</a></li>
+ <li><a href="#threed">Creating a 3D Perspective</a></li>
+ <li><a href="#touch">Using Touch Events</a></li>
+ <li><a href="#framework">Using WebGL Frameworks</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a class="opensection" href="../../../../../org.tizen.guides/html/web/w3c/supplement/webgl_w.htm">WebGL - Khronos Guide</a></li>
+ <li><a href="../../../../../org.tizen.guides/html/web/w3c/supplement/webgl_w.htm">WebGL - Khronos Guide</a></li>
<li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#webgl">WebGL - Khronos API for Mobile Web</a></li>
<li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#webgl">WebGL - Khronos API for Wearable Web</a></li>
</ul>
<div id="container"><div id="contents"><div class="content">
<h1>WebGL - Khronos: Creating 3D Graphics</h1>
-<div class="cont"><div class="static-cont">
<p>This tutorial demonstrates how you can use the WebGL graphics library and <a href="http://www.khronos.org/registry/gles/specs/2.0/GLSL_ES_Specification_1.0.17.pdf" target="_blank">OpenGL® ES Shading Language</a> to create 3D effects, such as texture and animation.</p>
<h2>Warm-up</h2>
<p>Become familiar with the WebGL - Khronos API basics by learning about:</p>
<ul>
- <li><a class="opensection" href="#import">Importing the WebGL Context</a>
+ <li><a href="#import">Importing the WebGL Context</a>
<p>Import the WebGL context to your application.</p>
</li>
- <li><a class="opensection" href="#shader">Initializing Programs and Shaders</a>
+ <li><a href="#shader">Initializing Programs and Shaders</a>
<p>Bind the shaders and GLSL ES in WebGL by creating and compiling shaders and programs.</p>
</li>
- <li><a class="opensection" href="#buffer">Initializing Buffers</a>
+ <li><a href="#buffer">Initializing Buffers</a>
<p>Create a buffer, bind it, and store data in it.</p>
</li>
- <li><a class="opensection" href="#draw">Drawing Shapes on the Screen</a>
+ <li><a href="#draw">Drawing Shapes on the Screen</a>
<p>Use attribute array data and a drawing buffer to display shapes on the screen.</p>
</li>
- <li><a class="opensection" href="#color">Setting Colors</a>
+ <li><a href="#color">Setting Colors</a>
<p>Use attribute array data and a drawing buffer to display colors on the screen.</p>
</li>
- <li><a class="opensection" href="#texture">Setting Textures</a>
+ <li><a href="#texture">Setting Textures</a>
<p>Use an image texture in your application.</p>
</li>
- <li><a class="opensection" href="#animation">Creating an Animation</a>
+ <li><a href="#animation">Creating an Animation</a>
<p>Use a moving animation in your application.</p>
</li>
- <li><a class="opensection" href="#threed">Creating a 3D Perspective</a>
+ <li><a href="#threed">Creating a 3D Perspective</a>
<p>Apply a 3D perspective to your application with the Z-index.</p>
</li>
</ul>
<h2>Follow-up</h2>
<p>Once we have learned the basics of the WebGL - Khronos API, we can now move on to more advanced tasks, including:</p>
<ul>
- <li><a class="opensection" href="#touch">Using Touch Events</a>
+ <li><a href="#touch">Using Touch Events</a>
<p>Create a dice using texture, 3D perspective, animation, and touch events.</p>
</li>
- <li><a class="opensection" href="#framework">Using WebGL Frameworks</a>
+ <li><a href="#framework">Using WebGL Frameworks</a>
<p>Use the three.js WebGL framework to apply illumination and camera effects.</p>
</li>
</ul>
-<!-- Show / Hide all links -->
- <div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
- <!-- Folds -->
- <ul class="devicespecifications">
-
- <li>
- <div class="devicespec-tit">
- <h2 id="import" name="import" class="items-tit-h2">Importing the WebGL Context</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
- </div>
- <div class="devicespec-con">
- <p>To enhance the user experience of your application with WebGL features, you must learn to import the WebGL context from the HTML5 <span style="font-family: Courier New,Courier,monospace"><canvas></span> element:</p>
+<h2 id="import" name="import">Importing the WebGL Context</h2>
+
+<p>To enhance the user experience of your application with WebGL features, you must learn to import the WebGL context from the HTML5 <span style="font-family: Courier New,Courier,monospace"><canvas></span> element:</p>
<ol>
<li><p>Define the <span style="font-family: Courier New,Courier,monospace"><canvas></span> element ID and set its width and height:</p>
<pre class="prettyprint">
</ol>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following file:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/khronos_webgl" target="_blank">webgl_camera_effect.html</a></li>
</ul>
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="shader" name="shader" class="items-tit-h2">Initializing Programs and Shaders</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
- </div>
- <div class="devicespec-con">
- <p>To enhance the user experience of your application with WebGL features, you must learn to bind the shaders and GLSL ES in WebGL by using shaders and programs:
+
+ <h2 id="shader" name="shader" >Initializing Programs and Shaders</h2>
+
+<p>To enhance the user experience of your application with WebGL features, you must learn to bind the shaders and GLSL ES in WebGL by using shaders and programs:
</p>
<ol>
<li><p>Define the vertex shader and fragment shader using the <span style="font-family: Courier New,Courier,monospace">gl_Position</span> and <span style="font-family: Courier New,Courier,monospace">gl_FragColor</span> variables of the <a href="http://www.khronos.org/registry/gles/specs/2.0/GLSL_ES_Specification_1.0.17.pdf" target="_blank">OpenGL® ES Shading Language</a> (GLSL ES):</p>
</ol>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following file:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/khronos_webgl" target="_blank">webgl_circle.html</a></li>
</ul>
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="buffer" name="buffer" class="items-tit-h2">Initializing Buffers</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
- </div>
- <div class="devicespec-con">
- <p>To enhance the user experience of your application with WebGL features, you must learn to create buffers, bind them, and store data in them:
+
+ <h2 id="buffer" name="buffer">Initializing Buffers</h2>
+
+<p>To enhance the user experience of your application with WebGL features, you must learn to create buffers, bind them, and store data in them:
</p>
<ol>
<li><p>To create a triangle (shown on the left in the figure), define the coordinates of a triangle according to the WebGL coordinate system (shown on the right):</p>
-<p
style="text-align:center;"><img alt="WebGL native coordinate system" src="../../../images/initializing_buffers_coordsystem.png" /></p>
+<p
align="center"><img alt="WebGL native coordinate system" src="../../../images/initializing_buffers_coordsystem.png" /></p>
<pre class="prettyprint">
<script>
<p>The following figure shows the final triangle as it is displayed on the screen.</p>
<p class="figure">Figure: Triangle on the screen</p>
-<p
style="text-align:center;"><img alt="Triangle on the screen" src="../../../images/initializing_buffers.png" /></p>
+<p
align="center"><img alt="Triangle on the screen" src="../../../images/initializing_buffers.png" /></p>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following file:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/khronos_webgl" target="_blank">webgl_triangle.html</a></li>
</ul>
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="draw" name="draw" class="items-tit-h2">Drawing Shapes on the Screen</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
- </div>
- <div class="devicespec-con">
- <p>To enhance the user experience of your application with WebGL features, you must learn to display shapes on the screen using attribute array data and a drawing buffer:
+
+ <h2 id="draw" name="draw">Drawing Shapes on the Screen</h2>
+
+<p>To enhance the user experience of your application with WebGL features, you must learn to display shapes on the screen using attribute array data and a drawing buffer:
</p>
<ol>
<tr>
<td rowspan="1" colspan="1"> <p><span style="font-family: Courier New,Courier,monospace">POINTS</span></p> </td>
<td rowspan="1" colspan="1"><p>The point type renders 1 point at a time.</p>
-<p
style="text-align:center;"><img alt="Points" src="../../../images/drawing_points.png" /></p>
+<p
align="center"><img alt="Points" src="../../../images/drawing_points.png" /></p>
<pre class="prettyprint">
var vertices = [1.0, 1.0,
<tr>
<td rowspan="1" colspan="1"> <p><span style="font-family: Courier New,Courier,monospace">LINES</span></p> </td>
<td rowspan="1" colspan="1"><p>In the lines type, 2 lines share the same vertex, but each is defined separately. In the example, 6 vertices are needed.</p>
-<p
style="text-align:center;"><img alt="Lines" src="../../../images/drawing_lines.png" /></p>
+<p
align="center"><img alt="Lines" src="../../../images/drawing_lines.png" /></p>
<pre class="prettyprint">
var vertices = [-1.0, 1.0,
<tr>
<td rowspan="1" colspan="1"> <p><span style="font-family: Courier New,Courier,monospace">LINE_STRIP</span></p> </td>
<td rowspan="1" colspan="1"> <p>In the line strip type, a part of the vertex is shared. In the example, 4 vertices are needed.</p>
-<p
style="text-align:center;"><img alt="Lines strip" src="../../../images/drawing_line_strip.png" /></p>
+<p
align="center"><img alt="Lines strip" src="../../../images/drawing_line_strip.png" /></p>
<pre class="prettyprint">
var vertices = [-1.0, 1.0,
<td rowspan="1" colspan="1"> <p><span style="font-family: Courier New,Courier,monospace">LINE_LOOP</span></p> </td>
<td rowspan="1" colspan="1">
<p>In the line loop type, the first vertex and the last vertex are connected, otherwise this type is similar to the line strip type. In the example, 4 vertices are needed. </p>
-<p
style="text-align:center;"><img alt="Line loop" src="../../../images/drawing_line_loop.png" /></p>
+<p
align="center"><img alt="Line loop" src="../../../images/drawing_line_loop.png" /></p>
<pre class="prettyprint">
var vertices = [-1.0, 1.0,
<td rowspan="1" colspan="1"> <p><span style="font-family: Courier New,Courier,monospace">TRIANGLES</span></p> </td>
<td rowspan="1" colspan="1"><p>In the triangles type, 2 triangles are comprised of 3 vertices. In the example, 6 vertices are needed.
</p>
-<p
style="text-align:center;"><img alt="Triangles" src="../../../images/drawing_triangles.png" /></p>
+<p
align="center"><img alt="Triangles" src="../../../images/drawing_triangles.png" /></p>
<pre class="prettyprint">
var vertices = [-1.0, 1.0,
<td rowspan="1" colspan="1"> <p><span style="font-family: Courier New,Courier,monospace">TRIANGLE_STRIP</span></p> </td>
<td rowspan="1" colspan="1"><p>In the triangle strip type, a triangle is created using the last 2 vertices and the next vertex. In the example, 6 vertices are needed.
</p>
-<p
style="text-align:center;"><img alt="Triangle strip" src="../../../images/drawing_triangle_strip.png" /></p>
+<p
align="center"><img alt="Triangle strip" src="../../../images/drawing_triangle_strip.png" /></p>
<pre class="prettyprint">
var vertices = [1.0, 1.0, /* p1 */
<td rowspan="1" colspan="1"> <p><span style="font-family: Courier New,Courier,monospace">TRIANGLE_FAN</span></p> </td>
<td rowspan="1" colspan="1"> <p>In the triangle fan type, the first IBO index is shared in all elements. In the example, the <span style="font-family: Courier New,Courier,monospace">p0</span> vertex is shared by all triangles, so 4 triangles are created with 6 vertices.
</p>
-<p
style="text-align:center;"><img alt="Triangle fan" src="../../../images/drawing_triangle_fan.png" /></p>
+<p
align="center"><img alt="Triangle fan" src="../../../images/drawing_triangle_fan.png" /></p>
<pre class="prettyprint">
var vertices = [0.0, 0.0, /* p0 */
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following files:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/khronos_webgl" target="_blank">webgl_circle.html</a></li>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/khronos_webgl" target="_blank">webgl_rectangle.html</a></li>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/khronos_webgl" target="_blank">webgl_triangle.html</a></li>
</ul>
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="color" name="color" class="items-tit-h2">Setting Colors</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
- </div>
- <div class="devicespec-con">
- <p>To enhance the user experience of your application with WebGL features, you must learn to set colors using attributes and a buffer:</p>
+
+ <h2 id="color" name="color">Setting Colors</h2>
+
+<p>To enhance the user experience of your application with WebGL features, you must learn to set colors using attributes and a buffer:</p>
<ol>
<li><p>Define the vertex shader and fragment shader using the <span style="font-family: Courier New,Courier,monospace">gl_Position</span> and <span style="font-family: Courier New,Courier,monospace">gl_FragColor</span> variables of the <a href="http://www.khronos.org/registry/gles/specs/2.0/GLSL_ES_Specification_1.0.17.pdf" target="_blank">OpenGL® ES Shading Language</a> (GLSL ES):</p>
-1.0, -1.0]; /* p4 */
</pre>
-<p
style="text-align:center;"><img alt="Result of the coordinates on the left" src="../../../images/color_vertex.png" /></p>
+<p
align="center"><img alt="Result of the coordinates on the left" src="../../../images/color_vertex.png" /></p>
</li>
</ol>
<p>The following figure shows the result as it is displayed on the screen.</p>
<p class="figure">Figure: Color on the screen</p>
-<p
style="text-align:center;"><img alt="Color on the screen" src="../../../images/color_final.png" /></p>
+<p
align="center"><img alt="Color on the screen" src="../../../images/color_final.png" /></p>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following file:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/khronos_webgl" target="_blank">webgl_color.html</a></li>
</ul>
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="texture" name="texture" class="items-tit-h2">Setting Textures</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
- </div>
- <div class="devicespec-con">
- <p>To enhance the user experience of your application with WebGL features, you must learn to use a texture, which is an image applied to the surface:</p>
+
+<h2 id="texture" name="texture">Setting Textures</h2>
+
+<p>To enhance the user experience of your application with WebGL features, you must learn to use a texture, which is an image applied to the surface:</p>
<ol>
<li><p>Define the vertex shader and fragment shader using the <span style="font-family: Courier New,Courier,monospace">gl_Position</span> and <span style="font-family: Courier New,Courier,monospace">gl_FragColor</span> variables of the <a href="http://www.khronos.org/registry/gles/specs/2.0/GLSL_ES_Specification_1.0.17.pdf" target="_blank">OpenGL® ES Shading Language</a> (GLSL ES). In this example, the texture coordinate attribute is used instead of the vertex coordinate attribute.</p>
</ol>
<p>The following figure shows the result as it is displayed on the screen.</p>
<p class="figure">Figure: Texture on the screen</p>
-<p
style="text-align:center;"><img alt="Texture on the screen" src="../../../images/texture.png" /></p>
+<p
align="center"><img alt="Texture on the screen" src="../../../images/texture.png" /></p>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following files:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/khronos_webgl" target="_blank">webgl_texture.html</a></li>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/khronos_webgl/images" target="_blank">carp.jpg</a></li>
</ul>
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="animation" name="animation" class="items-tit-h2">Creating an Animation</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
- </div>
- <div class="devicespec-con">
- <p>To enhance the user experience of your application with WebGL features, you must learn to adjust and move object coordinates to create an animation:</p>
+
+ <h2 id="animation" name="animation">Creating an Animation</h2>
+
+<p>To enhance the user experience of your application with WebGL features, you must learn to adjust and move object coordinates to create an animation:</p>
<ol>
<li>Calculate the central point:
</ol>
<p>The following figure shows the animation as it is displayed on the screen.</p>
<p class="figure">Figure: Animation on the screen</p>
-<p
style="text-align:center;"><img alt="Animation on the screen" src="../../../images/animation_up_down.png" /></p>
+<p
align="center"><img alt="Animation on the screen" src="../../../images/animation_up_down.png" /></p>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following file:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/khronos_webgl" target="_blank">webgl_animation.html</a></li>
</ul>
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="threed" name="threed" class="items-tit-h2">Creating a 3D Perspective</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
- </div>
- <div class="devicespec-con">
- <p>To enhance the user experience of your application with WebGL features, you must learn to create 3D perspective using the <a href="https://github.com/toji/gl-matrix" target="_blank">glMatrix library</a>:</p>
+
+ <h2 id="threed" name="threed">Creating a 3D Perspective</h2>
+
+ <p>To enhance the user experience of your application with WebGL features, you must learn to create 3D perspective using the <a href="https://github.com/toji/gl-matrix" target="_blank">glMatrix library</a>:</p>
<ol>
<li><p>Set the vertex coordinate and color buffer values to draw 2 triangles:</p>
}
</script>
</pre>
-<p
style="text-align:center;"><img alt="2 triangles" src="../../../images/3d.png" /></p>
+<p
align="center"><img alt="2 triangles" src="../../../images/3d.png" /></p>
</li>
<li><p>Define the vertex shader and fragment shader with using the <span style="font-family: Courier New,Courier,monospace">gl_Position</span> and <span style="font-family: Courier New,Courier,monospace">gl_FragColor</span> variables of the <a href="http://www.khronos.org/registry/gles/specs/2.0/GLSL_ES_Specification_1.0.17.pdf" target="_blank">OpenGL® ES Shading Language</a> (GLSL ES), and modify the GLSL ES variables:</p>
</ol>
<p>The following figure shows the 3D perspective as it is displayed on the screen.</p>
<p class="figure">Figure: 3D perspective on the screen</p>
-<p
style="text-align:center;"><img alt="3D perspective on the screen" src="../../../images/3d_final.png" /></p>
+<p
align="center"><img alt="3D perspective on the screen" src="../../../images/3d_final.png" /></p>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following files:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/khronos_webgl" target="_blank">webgl_camera_effect.html</a></li>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/khronos_webgl/js/lib" target="_blank">gl-matrix-min.js</a></li>
</ul>
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="touch" name="touch" class="items-tit-h2">Using Touch Events</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
- </div>
- <div class="devicespec-con">
- <p>To enhance the user experience of your application with WebGL features, you must learn to apply a texture and 3D perspective with touch events using the <a href="https://github.com/toji/gl-matrix" target="_blank">glMatrix library</a>. The following example demonstrates how to display and turn a dice on the screen based on touch events.</p>
+
+ <h2 id="touch" name="touch">Using Touch Events</h2>
+
+<p>To enhance the user experience of your application with WebGL features, you must learn to apply a texture and 3D perspective with touch events using the <a href="https://github.com/toji/gl-matrix" target="_blank">glMatrix library</a>. The following example demonstrates how to display and turn a dice on the screen based on touch events.</p>
<ol>
<li><p>Define the vertex shader and fragment shader using the <span style="font-family: Courier New,Courier,monospace">gl_Position</span> and <span style="font-family: Courier New,Courier,monospace">gl_FragColor</span> variables of the <a href="http://www.khronos.org/registry/gles/specs/2.0/GLSL_ES_Specification_1.0.17.pdf" target="_blank">OpenGL® ES Shading Language</a> (GLSL ES):</p>
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
}
</pre>
-<p
style="text-align:center;"><img alt="Image and coordinate of image to be loaded" src="../../../images/dice.png" /></p>
+<p
align="center"><img alt="Image and coordinate of image to be loaded" src="../../../images/dice.png" /></p>
</li>
<li><p>Define the rendering location and canvas width and height:</p>
</li></ol>
<p>The following figure shows the dice as it is displayed on the screen.</p>
<p class="figure">Figure: Dice on the screen</p>
-<p
style="text-align:center;"><img alt="Dice on the screen" src="../../../images/dice_3d.png" /></p>
+<p
align="center"><img alt="Dice on the screen" src="../../../images/dice_3d.png" /></p>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following files:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/khronos_webgl" target="_blank">webgl_dice.html</a></li>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/khronos_webgl/images" target="_blank">dice.gif</a></li>
</ul>
- </div>
- </li>
-
- <li>
- <div class="devicespec-tit">
- <h2 id="framework" name="framework" class="items-tit-h2">Using WebGL Frameworks</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>hide</em></a></span>
- </div>
- <div class="devicespec-con">
- <p>To enhance the user experience of your application with WebGL features, you must learn to use the three.js framework:</p>
+
+ <h2 id="framework" name="framework">Using WebGL Frameworks</h2>
+
+<p>To enhance the user experience of your application with WebGL features, you must learn to use the three.js framework:</p>
<ol>
<li><p>Download the <a href="http://threejs.org/" target="_blank">three.js library</a> and included it in HTML file:</p>
</li></ol>
<p>The following figure shows the final result as it is displayed on the screen.</p>
<p class="figure">Figure: Final result</p>
-<p
style="text-align:center;"><img alt="Final result" src="../../../images/threejs.png" /></p>
+<p
align="center"><img alt="Final result" src="../../../images/threejs.png" /></p>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following files:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/khronos_webgl" target="_blank">webgl_using_three_js.html</a></li>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/graphics/khronos_webgl/js/lib" target="_blank">three.js</a></li>
</ul>
- </div>
- </li>
-
- </ul>
-</div>
-</div>
+
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../images/ww_icon.png"/></p>
</div>
<p>Demonstrates how you can use W3C features related to multiple APIs.</p></li>
<li><a href="supplement/supplement_tutorials_w.htm">Supplementary Features: Managing Supplementary Features</a>
<p>Demonstrates how you can take advantage of supplementary features, such as full screen views, typed arrays, and the WebGL graphics library.</p></li>
+ <li><a href="watchface/developing_watch_app.htm">Watch Application: Developing a Watch Face Application</a> <span style="color: red">in wearable applications only</span>
+ <p>Demonstrates how you can create and run a wearable watch face application using the Tizen IDE.</p></li>
</ul>
+
+
+
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/><br/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a href="#copy" class="opensection">Copying Content</a></li>
- <li><a href="#cut" class="opensection">Cutting Content</a></li>
- <li><a href="#paste" class="opensection">Pasting Content</a></li>
- <li><a href="#target" class="opensection">Copying and Pasting Content into an Editable Element</a></li>
+ <li><a href="#copy">Copying Content</a></li>
+ <li><a href="#cut">Cutting Content</a></li>
+ <li><a href="#paste">Pasting Content</a></li>
+ <li><a href="#target">Copying and Pasting Content into an Editable Element</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<div id="container"><div id="contents"><div class="content">
<h1>Clipboard API and events: Transferring Content Between Applications</h1>
-<div class="cont"><div class="static-cont">
-
<p>This tutorial demonstrates how you can use clipboard operations in Tizen.</p>
+<p>This tutorial demonstrates how you can use clipboard operations in Tizen.</p>
<table class="note">
<tbody>
<li><a href="#target">Copying and Pasting Content into an Editable Element</a> <p>Copy content and paste in a specific editable area.</p></li>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
- <!-- Folds -->
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="copy" name="copy" class="items-tit-h2">Copying Content</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
- <p>To enhance the user experience of your application with clipboard operations, you must learn to use the <span style="font-family: Courier New,Courier,monospace">copy</span> event:</p>
+<h2 id="copy" name="copy">Copying Content</h2>
+
+<p>To enhance the user experience of your application with clipboard operations, you must learn to use the <span style="font-family: Courier New,Courier,monospace">copy</span> event:</p>
<ol>
<li> Add an event listener to detect the <span style="font-family: Courier New,Courier,monospace">copy</span> event:
<pre class="prettyprint lang-js">
</ol>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following file:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/ui/clipboard_api_and_events" target="_blank">clipboard.html</a></li>
</ul>
- </div>
- </li>
-
-
- <li>
- <div class="devicespec-tit">
- <h2 id="cut" name="cut" class="items-tit-h2">Cutting Content</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
- <p>To enhance the user experience of your application with clipboard operations, you must learn to use the <span style="font-family: Courier New,Courier,monospace">cut</span> event:</p>
+
+ <h2 id="cut" name="cut">Cutting Content</h2>
+
+<p>To enhance the user experience of your application with clipboard operations, you must learn to use the <span style="font-family: Courier New,Courier,monospace">cut</span> event:</p>
<ol>
<li> Add an event listener to detect the <span style="font-family: Courier New,Courier,monospace">cut</span> event:
<pre class="prettyprint lang-js">
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following file:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/ui/clipboard_api_and_events" target="_blank">clipboard.html</a></li>
</ul>
- </div>
- </li>
-
-
- <li>
- <div class="devicespec-tit">
- <h2 id="paste" name="paste" class="items-tit-h2">Pasting Content</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
- <p>To enhance the user experience of your application with clipboard operations, you must learn to use the <span style="font-family: Courier New,Courier,monospace">paste</span> event:</p>
+
+ <h2 id="paste" name="paste">Pasting Content</h2>
+
+<p>To enhance the user experience of your application with clipboard operations, you must learn to use the <span style="font-family: Courier New,Courier,monospace">paste</span> event:</p>
<ol>
<li> Add an event listener to detect the <span style="font-family: Courier New,Courier,monospace">paste</span> event:
<pre class="prettyprint lang-js">
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following file:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/ui/clipboard_api_and_events" target="_blank">clipboard.html</a></li>
</ul>
- </div>
- </li>
-
-
- <li>
- <div class="devicespec-tit">
- <h2 id="target" name="target" class="items-tit-h2">Copying and Pasting Content into an Editable Element</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
- <p>To enhance the user experience of your application with clipboard operations, you must learn to copy content and paste it in an editable HTML element:</p>
+
+ <h2 id="target" name="target">Copying and Pasting Content into an Editable Element</h2>
+
+<p>To enhance the user experience of your application with clipboard operations, you must learn to copy content and paste it in an editable HTML element:</p>
<ol>
<li><p>Define the editable element into which copied data is to be pasted:</p>
</ol>
<p class="figure">Figure: Copying and pasting</p>
-<p
style="text-align:center;"><img alt="Copying and pasting" src="../../../images/copy_pasting.png" /></p>
+<p
align="center"><img alt="Copying and pasting" src="../../../images/copy_pasting.png" /></p>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following file:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/ui/clipboard_api_and_events" target="_blank">clipboard.html</a></li>
</ul>
- </div>
- </li>
-
- </ul>
-</div>
-</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/><br/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a href="#handle" class="opensection">Handling Drag and Drop Events</a></li>
- <li><a href="#transfer" class="opensection">Transferring Data over Drag and Drop</a></li>
+ <li><a href="#handle">Handling Drag and Drop Events</a></li>
+ <li><a href="#transfer">Transferring Data over Drag and Drop</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a class="opensection" href="../../../../../org.tizen.guides/html/web/w3c/ui/drag_drop_w.htm">HTML5 Drag and drop Guide</a></li>
+ <li><a href="../../../../../org.tizen.guides/html/web/w3c/ui/drag_drop_w.htm">HTML5 Drag and drop Guide</a></li>
<li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#dnd">HTML5 Drag and drop API for Mobile Web</a></li>
</ul>
</div></div>
<div id="container"><div id="contents"><div class="content">
<h1>HTML5 Drag and drop: Handling Drag and Drop Events</h1>
-<div class="cont"><div class="static-cont">
-
<p>This tutorial demonstrates how you can use drag and drop in Tizen.</p>
+<p>This tutorial demonstrates how you can use drag and drop in Tizen.</p>
<table class="note">
<tbody>
<p>Make a simple puzzle to transfer puzzle pieces with drag and drop.</p></li>
</ul>
-<div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
- <!-- Folds -->
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="handle" name="handle" class="items-tit-h2">Handling Drag and Drop Events</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
- <p>Learning how to handle drag and drop events is a basic user interaction skill:</p>
+<h2 id="handle" name="handle">Handling Drag and Drop Events</h2>
+
+<p>Learning how to handle drag and drop events is a basic user interaction skill:</p>
<ol>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following file:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/ui/html5_drag_and_drop" target="_blank">drag_and_drop.html</a></li>
</ul>
- </div>
- </li>
-
-
- <li>
- <div class="devicespec-tit">
- <h2 id="transfer" name="transfer" class="items-tit-h2">Transferring Data over Drag and Drop</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
- <p>Learning how to transfer data in a simple drag and drop puzzle is a basic user interaction skill:</p>
+
+ <h2 id="transfer" name="transfer">Transferring Data over Drag and Drop</h2>
+
+<p>Learning how to transfer data in a simple drag and drop puzzle is a basic user interaction skill:</p>
<ol>
<li>Define the draggable elements by adding the <span style="font-family: Courier New,Courier,monospace">draggable="true"</span> attribute to them.
</li>
<li>Transfer data (in this case, image parts):
-<ol>
+<ol type="a">
<li>Declare the <span style="font-family: Courier New,Courier,monospace">dragElem</span> variable, which is an empty object for the data exchange:
<pre class="prettyprint">
var dragElem = null;
</li>
</ol>
<p class="figure">Figure: Drag and drop puzzle</p>
-<p
style="text-align:center;"><img alt="Drag and drop puzzle" src="../../../images/dragdrop.png" /></p>
+<p
align="center"><img alt="Drag and drop puzzle" src="../../../images/dragdrop.png" /></p>
<h3>Source Code</h3>
<p>For the complete source code related to this use case, see the following files:</p>
- <ul class="ul">
+ <ul>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/ui/html5_drag_and_drop" target="_blank">drag_and_drop_practical.html</a></li>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/ui/html5_drag_and_drop/images" target="_blank">logo.png</a></li>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/ui/html5_drag_and_drop/images" target="_blank">puzz_01.png</a></li>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/ui/html5_drag_and_drop/images" target="_blank">puzz_05.png</a></li>
<li><a href="http://download.tizen.org/misc/examples/w3c_html5/ui/html5_drag_and_drop/images" target="_blank">puzz_06.png</a></li>
</ul>
- </div>
- </li>
-
- </ul>
-</div>
-</div>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/><br/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a class="opensection" href="../../../../../org.tizen.guides/html/web/w3c/ui/ui_guide_w.htm">UI Guides</a></li>
+ <li><a href="../../../../../org.tizen.guides/html/web/w3c/ui/ui_guide_w.htm">UI Guides</a></li>
<li><a href="../../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#ui">UI API for Mobile Web</a></li>
</ul>
</tbody>
</table>
- <p>The UI tutorials demonstrate how you can manage screen elements and events related to them in creating Tizen Web applications:</p>
+ <p>The UI tutorials demonstrate how to manage screen elements and events related to them in creating Tizen Web applications:</p>
<ul>
<li><a href="clipboard_tutorial_w.htm">Clipboard API and events: Transferring Content Between Applications</a> <p>Demonstrates how you can use clipboard operations.</p></li>
<li><a href="drag_drop_tutorial_w.htm">HTML5 Drag and drop: Handling Drag and Drop Events</a> <p>Demonstrates how you can use the drag and drop features.</p></li>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a href="#use" class="opensection">Using JavaScript Code within HTML</a>
+ <li><a href="#use">Using JavaScript Code within HTML</a>
</li>
</ul>
<p class="toc-title">Related Info</p>
<div id="container"><div id="contents"><div class="content">
<h1>HTML Priorities: Understanding HTML Behavior</h1>
-<div class="cont"><div class="static-cont">
<p>The HTML behavior tutorial demonstrates how you can use JavaScript methods within HTML code.</p>
<h2>Warm-up</h2>
<p>Become familiar with HTML priorities by learning about:</p>
<ul>
-<li><a class="opensection" href="#use">Using JavaScript Code within HTML</a>
+<li><a href="#use">Using JavaScript Code within HTML</a>
<p>Learn how to format and place JavaScript code within HTML code.</p></li>
</ul>
+<h2 id="use" name="use">Using JavaScript Code within HTML</h2>
- <!-- Show / Hide all links -->
- <div class="devicespecs-util mt5 clfix">
- <ul class="dutil">
- <li><a href="#" class="showA">Show All</a></li>
- <li class="none"><a href="#" class="hideA">Hide All</a></li>
- </ul>
- </div>
- <!-- Folds -->
- <ul class="devicespecifications">
- <li>
- <div class="devicespec-tit">
- <h2 id="use" name="use" class="items-tit-h2">Using JavaScript Code within HTML</h2>
- <span class="fr"><a href="#" class="bt-arr"><em>Hide</em></a></span>
- </div>
- <div class="devicespec-con">
- <p>To provide users with JavaScript-based features, you must learn to use JavaScript code within an HTML document:</p>
-
-<ul class="ul">
+<p>To provide users with JavaScript-based features, you must learn to use JavaScript code within an HTML document:</p>
+
+<ul>
<li>To use JavaScript code in the <span style="font-family: Courier New,Courier,monospace;"><head></span> element, place the relevant JavaScript content in a <span style="font-family: Courier New,Courier,monospace;"><script></span> tag:
<pre class="prettyprint lang-html">
<head>
</tr>
</tbody>
</table>
- </div>
- </li>
-
-
- </ul>
-</div>
-</div>
-
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../../scripts/showhide.js"></script>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
<p><img alt="Mobile Web" src="../../../images/mw_icon.png"/> <img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a class="opensection" href="../../../../../org.tizen.guides/html/web/w3c/useful/useful_guide_w.htm">Useful Guides for W3C/HTML5 Features</a></li>
+ <li><a href="../../../../../org.tizen.guides/html/web/w3c/useful/useful_guide_w.htm">Useful Guides for W3C/HTML5 Features</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Useful Practices for W3C/HTML5 Features: Managing Information Related to Various APIs</h1>
- <p>The useful practices for W3C/HTML5 features tutorials demonstrate how you can manage W3C information related to multiple APIs:</p>
+ <p>The useful practices for W3C/HTML5 features tutorials demonstrate how to manage W3C information related to multiple APIs:</p>
<ul>
<li><a href="html_priority_tutorial_w.htm">HTML Priorities: Understanding HTML Behavior</a> <p>Demonstrates how you can use JavaScript methods within HTML code.</p></li>
</ul>
--- /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>Watch Application: Developing a Watch Face Application</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<div id="toc-navigation">
+ <div id="profile">
+ <p><img alt="Wearable Web" src="../../../images/ww_icon.png"/></p>
+ </div>
+
+ <div id="toc_border"><div id="toc">
+ <p class="toc-title">Content</p>
+ <ul class="toc">
+ <li><a href="#project">Step 1: Creating the Project</a></li>
+ <li><a href="#build">Step 2: Building the Project</a></li>
+ <li><a href="#run">Step 3: Running the Application</a></li>
+ <li><a href="#source">BasicWatch Source Code</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Watch Application: Developing a Watch Face Application</h1>
+
+<p>You can easily create a watch face application for a wearable device by taking advantage of the BasicWatch sample delivered with the Tizen SDK. The sample is a fully functional application that displays an analog clock on a canvas, and you can use it as a basis for your watch face application.</p>
+
+<p>For more information on the sample functionality and the full source code, see <a href="../graphics/task_basicwatch_w.htm">Basic Watch task</a>.</p>
+
+ <table class="note">
+<tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">This feature is supported in wearable applications only.</td>
+ </tr>
+ </tbody>
+ </table>
+
+<p>This article describes the main steps required to develop a watch face application using the Tizen IDE. For more detailed information about the application development process, see <a href="../../../../../org.tizen.gettingstarted/html/web/process/app_dev_process_w.htm">Web Application Development Process</a>. To learn how to design a watch face, see the Gear UI guides on the <a href="http://developer.samsung.com/technical-doc/list.do" target="_blank">Samsung Developers</a> site.</p>
+
+<h2 id="project" name="project">Step 1: Creating the Project</h2>
+
+<p>To create the application project in the IDE:</p>
+
+<ol>
+ <li>Launch the <strong>Tizen IDE</strong>.</li>
+ <li>In the IDE menu, select <strong>File > New > Tizen Web Project</strong>.
+ <p>If the project option you want is not visible, make sure that you are using the correct perspective (Tizen Web). To switch perspectives, go to <strong>Window > Open Perspective > Other</strong> and select the perspective you need.</p></li>
+ <li>In the <strong>New Tizen Web Project</strong> window, select <strong>Sample > WEARABLE-[version] > Basic > BasicWatch</strong>.</li>
+ <li>Define your project name and location, and click <strong>Finish</strong>.</li>
+</ol>
+
+<p class="figure">Figure: Creating the project</p>
+<p align="center"><img alt="Creating the project" src="../../../images/watchface_project.png" /></p>
+
+<p>The new project is shown in the <strong>Project Explorer</strong> view of the IDE, with full sample content:</p>
+<ul>
+ <li><span style="font-family: Courier New,Courier,monospace">css</span> folder: CSS file directory</li>
+ <li><span style="font-family: Courier New,Courier,monospace">js</span> folder: JavaScript file directory</li>
+ <li><span style="font-family: Courier New,Courier,monospace">config.xml</span>: Application configuration file</li>
+ <li><span style="font-family: Courier New,Courier,monospace">icon.png</span>: Icon file</li>
+ <li><span style="font-family: Courier New,Courier,monospace">index.html</span>: HTML file defining the application layout</li>
+</ul>
+
+<h3>Setting the Application Layout</h3>
+
+<p>You can define the application layout with the <span style="font-family: Courier New,Courier,monospace">index.html</span> file.</p>
+
+<p class="figure">Figure: BasicWatch screen</p>
+<p align="center"><img alt="BasicWatch screen" src="../../../images/watchface_screen.png" /></p>
+
+<p>By default, the BasicWatch sample application layout contains only the main screen that displays the clock on a <a href="http://www.w3.org/TR/2012/WD-html5-20120329/the-canvas-element.html#the-canvas-element" target="_blank">canvas</a> element.</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>
+ <div id="box">
+ <canvas class="canvas"></canvas>
+ </div>
+ <script src="js/main.js"></script>
+</body>
+</pre>
+
+<p>To draw the watch face on the canvas, use the <span style="font-family: Courier New,Courier,monospace">main.js</span> file:</p>
+<ol>
+ <li>Create the clock in the middle of the canvas, and define the watch face style:
+ <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>Create 4 dots on the sides of the watch face and use the <span style="font-family: Courier New,Courier,monospace">fill()</span> method to style the dots:
+ <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>Create the center point:
+ <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>
+
+<h3>Configuring and Initializing the Application</h3>
+
+<p>You can set the application configuration using the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file.</p>
+
+<table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">By default, the BasicWatch sample has the application category defined as <span style="font-family: Courier New,Courier,monospace"><tizen:category name="http://tizen.org/category/wearable_clock" /></span>.
+ <p>To run your application on Samsung Gear 2, Samsung Gear 2 Neo, and Samsung Gear S devices, use <span style="font-family: Courier New,Courier,monospace"><tizen:category name="com.samsung.wmanager.WATCH_CLOCK" /></span> instead.</p></td>
+ </tr>
+ </tbody>
+</table>
+
+<p>To initialize the application and define basic features, use the <span style="font-family: Courier New,Courier,monospace">main.js</span> file:</p>
+
+<ol>
+ <li>Modify the <span style="font-family: Courier New,Courier,monospace">window.requestAnimationFrame()</span> method to make the application compatible with the main browsers:
+ <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>Initialize the canvas context and define the canvas area:
+ <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>Define an event listener to detect back key events:
+ <pre class="prettyprint">
+ window.addEventListener('tizenhwkey', function (e)
+ {
+ if (e.keyName == 'back')
+ {
+ tizen.application.getCurrentApplication().exit();
+ }
+ });
+
+ window.requestAnimationFrame(watch);
+};</pre>
+ </li>
+</ol>
+
+<h3>Coding the Main Features</h3>
+
+<p>To display the actual time on the watch face, create the clock needles and set their position using the <span style="font-family: Courier New,Courier,monospace">main.js</span> file:</p>
+
+<ol>
+ <li>Render the clock needles:
+ <ol type="a">
+ <li>The needles can be created using the <span style="font-family: Courier New,Courier,monospace">renderNeedle()</span> method.
+ <p>To create the needle as a triangle or a polygon, assign the coordinate of the beginning point with the <span style="font-family: Courier New,Courier,monospace">moveTo()</span> method. To assign the rest of the points of the triangle or polygon, use the <span style="font-family: Courier New,Courier,monospace">lineTo()</span> method, which defines the position of the next connecting vertex. You can also adjust the size of each clock needle with the <span style="font-family: Courier New,Courier,monospace">lineTo()</span> 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>Create the hour needle using the <span style="font-family: Courier New,Courier,monospace">renderHourNeedle()</span> method:
+ <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>Create the minute needle using the <span style="font-family: Courier New,Courier,monospace">renderMinuteNeedle()</span> method:
+ <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>
+ </li>
+ <li>Indicate the current time:
+ <ol>
+ <li>Determine the current time using the <span style="font-family: Courier New,Courier,monospace">new Date()</span> method.
+ <p>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>Every time a new time is indicated, erase the previous time (the previously positioned needles) using the <span style="font-family: Courier New,Courier,monospace">clearRect()</span> method:
+ <pre class="prettyprint">
+ context.clearRect(0, 0, context.canvas.width, context.canvas.height);</pre>
+ </li>
+ <li>Point the clock needles to display the current time:
+ <pre class="prettyprint">
+ renderDots();
+ renderHourNeedle(hour);
+ renderMinuteNeedle(minute);
+
+ context.restore();
+ setTimeout(function()
+ {
+ window.requestAnimationFrame(watch);
+ }, nextMove);}</pre>
+ </li>
+ </ol>
+ </li>
+</ol>
+
+<h2 id="build" name="build">Step 2: Building the Project</h2>
+
+<p>When your code is ready, you can build the project:</p>
+
+<ol>
+ <li>In the <strong>Project Explorer</strong> view, select your project.</li>
+ <li>In the IDE menu, select <strong>Project > Build Project</strong>.
+ <p>Any build errors are shown in the <strong>Problems</strong> and <strong>Project Explorer</strong> views.</p>
+ </li>
+</ol>
+
+<p>After building, the Tizen IDE automatically packages the project by creating a <span style="font-family: Courier New,Courier,monospace">.wgt</span> package file.</p>
+
+<h2 id="run" name="run">Step 3: Running the Application</h2>
+
+<p>You can run the application on the Emulator or a real target device.</p>
+
+<p>To run the application on the Emulator:</p>
+
+<ol>
+ <li>Launch the Emulator:
+ <ol type="a">
+ <li>Start the Emulator Manager by clicking the Emulator Manager icon in the <strong>Connection Explorer</strong> view.</li>
+ <li>In the <strong>Emulator Manager</strong> window, select the <strong>wearable-[version]</strong> tab.</li>
+ <li>If no Emulator images exist, create one by clicking <strong>Create New</strong>.</li>
+ <li>Launch the Emulator by clicking the play button.</li>
+ </ol>
+ <p align="center"><img alt="Emulator Manager" src="../../../images/watchface_emulator.png" /></p>
+ </li>
+ <li>In the <strong>Project Explorer</strong> view, right-click the project and select <strong>Run As > Tizen Web Application</strong>.</li>
+</ol>
+
+<p>To run the application on a target device:</p>
+
+<ol>
+ <li>Connect the target device to your computer.</li>
+ <li>In the <strong>Project Explorer</strong> view, right-click the project and select <strong>Run As > Run Configurations</strong>.</li>
+ <li>In the <strong>Run Configurations</strong> window, click <strong>New Launch Configuration</strong> and set the timeout using the <strong>Timeout value</strong> slider.
+ <p>The timeout value represents the waiting time for the application launch operation. If you are using a lower configuration computer, set a higher timeout value to avoid application launch failure errors.</p></li>
+ <li>To start the run, click <strong>Run</strong>.</li>
+</ol>
+
+<h2 id="source" name="source">BasicWatch Source Code</h2>
+
+<p><span style="font-family: Courier New,Courier,monospace">index.html</span>:</p>
+
+<pre class="prettyprint">
+<!DOCTYPE html><html><head>
+ <meta charset="utf-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
+ <meta name="description" content="Canvas Clock - Canvas API Tutorial" />
+
+ <title>Canvas Clock - Canvas API Tutorial</title>
+
+ <link rel="stylesheet" type="text/css" href="css/style.css" />
+</head>
+<body>
+ <div id="box">
+ <canvas class="canvas"></canvas>
+ </div>
+ <script src="js/main.js"></script>
+</body>
+</html></pre>
+
+<p><span style="font-family: Courier New,Courier,monospace">main.js</span>:</p>
+
+<pre class="prettyprint">
+var canvas, context, clockRadius;
+
+window.requestAnimationFrame = window.requestAnimationFrame ||
+ window.webkitRequestAnimationFrame ||
+ window.mozRequestAnimationFrame ||
+ window.oRequestAnimationFrame ||
+ window.msRequestAnimationFrame ||
+ function (callback)
+ {
+ 'use strict';
+ window.setTimeout(callback, 1000 / 60);
+ };
+
+function renderDots()
+{
+ 'use strict';
+
+ var dx = 0,
+ dy = 0,
+ i = 1,
+ angle = null;
+
+ context.save();
+
+ /* Assign the clock creation location in the middle of the canvas */
+ context.translate(canvas.width / 2, canvas.height / 2);
+
+ /* Assign the style of the number which will be applied to the clock plate */
+ context.beginPath();
+
+ context.fillStyle = '#999999';
+
+ /* Create 4 dots in a circle */
+ 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();
+
+ /* Render center dot */
+ 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();
+}
+
+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();
+}
+
+function renderHourNeedle(hour)
+{
+ 'use strict';
+
+ var angle = null,
+ radius = null;
+
+ angle = (hour - 3) * (Math.PI * 2) / 12;
+ radius = clockRadius * 0.55;
+ renderNeedle(angle, radius);
+}
+
+function renderMinuteNeedle(minute)
+{
+ 'use strict';
+
+ var angle = null,
+ radius = null;
+
+ angle = (minute - 15) * (Math.PI * 2) / 60;
+ radius = clockRadius * 0.75;
+ renderNeedle(angle, radius);
+}
+
+function getDate()
+{
+ 'use strict';
+
+ var date;
+ try
+ {
+ date = tizen.time.getCurrentDateTime();
+ }
+ catch (err)
+ {
+ console.error('Error: ', err.message);
+ date = new Date();
+ }
+
+ return date;
+}
+
+function watch()
+{
+ 'use strict';
+
+ /* Import the current time */
+ /* noinspection JSUnusedAssignment */
+ var date = getDate(),
+ hours = date.getHours(),
+ minutes = date.getMinutes(),
+ seconds = date.getSeconds(),
+ hour = hours + minutes / 60,
+ minute = minutes + seconds / 60,
+ nextMove = 1000 - date.getMilliseconds();
+
+ /* Erase the previous time */
+ context.clearRect(0, 0, context.canvas.width, context.canvas.height);
+
+ renderDots();
+ renderHourNeedle(hour);
+ renderMinuteNeedle(minute);
+
+ context.restore();
+ setTimeout(function ()
+ {
+ window.requestAnimationFrame(watch);
+ }, nextMove);
+}
+
+window.onload = function ()
+{
+ 'use strict';
+
+ canvas = document.querySelector('canvas');
+ context = canvas.getContext('2d');
+ clockRadius = document.width / 2;
+
+ /* Assign the area that will use Canvas */
+ canvas.width = document.width;
+ canvas.height = canvas.width;
+
+ /* Add eventListener for tizenhwkey */
+ window.addEventListener('tizenhwkey', function (e)
+ {
+ if (e.keyName === 'back')
+ {
+ try
+ {
+ tizen.application.getCurrentApplication().exit();
+ }
+ catch (err)
+ {
+ console.error('Error: ', err.message);
+ }
+ }
+ });
+
+ window.requestAnimationFrame(watch);
+};</pre>
+
+<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
<topic href="html/web/tizen/application/package_tutorial_w.htm" label="Package"></topic>
<topic href="html/web/tizen/application/data_tutorial_w.htm" label="Data Control"></topic>
</topic>
+ <topic href="html/web/tizen/communication/comm_tutorials_w.htm" label="Communication">
+ <topic href="html/web/tizen/communication/bluetooth_tutorial_w.htm" label="Bluetooth">
+ <topic href="html/web/tizen/communication/task_bluetoothchat_w.htm" label="Task: Bluetooth Chat"></topic>
+ </topic>
+ <topic href="html/web/tizen/communication/nfc_tutorial_w.htm" label="NFC">
+ <topic href="html/web/tizen/communication/task_contactsexchanger_w.htm" label="Task: Contacts Exchanger"></topic>
+ </topic>
+ <topic href="html/web/tizen/communication/push_tutorial_w.htm" label="Push"></topic>
+ <topic href="html/web/tizen/communication/secure_element_tutorial_w.htm" label="Secure Element"></topic>
+ <topic href="html/web/tizen/communication/messaging_tutorial_w.htm" label="Messaging">
+ <topic href="html/web/tizen/communication/task_chatter_w.htm" label="Task: Chatter"></topic>
+ </topic>
+ </topic>
<topic href="html/web/tizen/content/content_tutorials_w.htm" label="Content">
<topic href="html/web/tizen/content/content_tutorial_w.htm" label="Content">
<topic href="html/web/tizen/content/task_mediacontent_w.htm" label="Task: Media Content"></topic>
<topic href="html/web/tizen/content/exif_tutorial_w.htm" label="Exif"></topic>
</topic>
<topic href="html/web/tizen/input_output/io_tutorials_w.htm" label="Input/Output">
+ <topic href="html/web/tizen/input_output/archive_tutorial_w.htm" label="Archive"></topic>
<topic href="html/web/tizen/input_output/filesystem_tutorial_w.htm" label="Filesystem">
<topic href="html/web/tizen/input_output/task_filemanager_w.htm" label="Task: File Manager"></topic>
</topic>
<topic href="html/web/tizen/input_output/message_port_tutorial_w.htm" label="Message Port"></topic>
- <topic href="html/web/tizen/input_output/archive_tutorial_w.htm" label="Archive"></topic>
</topic>
<topic href="html/web/tizen/multimedia/multimedia_tutorials_w.htm" label="Multimedia">
<topic href="html/web/tizen/multimedia/media_controller_tutorial_w.htm" label="Media Controller"></topic>
<topic href="html/web/tizen/system/system_tutorials_w.htm" label="System">
<topic href="html/web/tizen/system/ham_tutorial_w.htm" label="Human Activity Monitor"></topic>
<topic href="html/web/tizen/system/power_tutorial_w.htm" label="Power"></topic>
- <topic href="html/web/tizen/system/sensor_tutorial_w.htm" label="Sensor"></topic>
+ <topic href="html/web/tizen/system/sensor_tutorial_w.htm" label="Sensor">
+ <topic href="html/web/tizen/system/task_sensorball_w.htm" label="Task: Sensor Ball"></topic>
+ </topic>
<topic href="html/web/tizen/system/system_info_tutorial_w.htm" label="System Information">
<topic href="html/web/tizen/system/task_systeminfo_w.htm" label="Task: System Information"></topic>
</topic>
<topic href="html/web/tizen/ui/badge_tutorial_w.htm" label="Badge"></topic>
<topic href="html/web/tizen/ui/noti_tutorial_w.htm" label="Notification"></topic>
</topic>
- <topic href="html/web/tizen/communication/comm_tutorials_w.htm" label="Communication">
- <topic href="html/web/tizen/communication/bluetooth_tutorial_w.htm" label="Bluetooth">
- <topic href="html/web/tizen/communication/task_bluetoothchat_w.htm" label="Task: Bluetooth Chat"></topic>
- </topic>
- <topic href="html/web/tizen/communication/messaging_tutorial_w.htm" label="Messaging">
- <topic href="html/web/tizen/communication/task_chatter_w.htm" label="Task: Chatter"></topic>
- </topic>
- <topic href="html/web/tizen/communication/nfc_tutorial_w.htm" label="NFC">
- <topic href="html/web/tizen/communication/task_contactsexchanger_w.htm" label="Task: Contacts Exchanger"></topic>
- </topic>
- <topic href="html/web/tizen/communication/push_tutorial_w.htm" label="Push"></topic>
- <topic href="html/web/tizen/communication/secure_element_tutorial_w.htm" label="Secure Element"></topic>
- </topic>
<topic href="html/web/tizen/social/social_tutorials_w.htm" label="Social">
<topic href="html/web/tizen/social/account_tutorial_w.htm" label="Account"></topic>
<topic href="html/web/tizen/social/bookmark_tutorial_w.htm" label="Bookmark"></topic>
</topic>
<topic href="html/web/w3c/device/device_tutorials_w.htm" label="Device">
<topic href="html/web/w3c/device/battery_tutorial_w.htm" label="Battery Status"></topic>
- <topic href="html/web/w3c/device/device_orientation_tutorial_w.htm" label="DeviceOrientation Event Specification">
- <topic href="html/web/w3c/device/task_compass_w.htm" label="Task: Compass"></topic>
- <topic href="html/web/w3c/device/task_sensorball_w.htm" label="Task: Sensor Ball"></topic>
+ <topic href="html/web/w3c/device/device_orientation_tutorial_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/touch_tutorial_w.htm" label="Touch Events version 1">
<topic href="html/web/w3c/device/task_touch_paint_mw.htm" label="Task: Touch Paint in Mobile Applications"></topic>
</topic>
<topic href="html/web/w3c/graphics/graphics_tutorials_w.htm" label="Graphics">
<topic href="html/web/w3c/graphics/canvas_tutorial_w.htm" label="HTML5 Canvas">
- <topic href="html/web/w3c/graphics/task_clockwidget_w.htm" label="Task: Clock Widget"></topic>
+ <topic href="html/web/w3c/graphics/task_basicwatch_w.htm" label="Task: Basic Watch"></topic>
</topic>
<topic href="html/web/w3c/graphics/svg_tutorial_w.htm" label="HTML5 SVG"></topic>
</topic>
<topic href="html/web/w3c/supplement/camera_tutorial_w.htm" label="Camera API (Tizen Extension)">
<topic href="html/web/w3c/supplement/task_camera_w.htm" label="Task: Camera"></topic>
</topic>
- </topic>
+ </topic>
+ <topic href="html/web/w3c/watchface/developing_watch_app.htm" label="Watch Application"></topic>
</topic>
</topic>
<topic href="html/native/tutorials_n.htm" label="Native Application">
<topic href="html/native/app_framework/app_framework_tutorials_n.htm" label="Application Framework">
<topic href="html/native/app_framework/application_tutorial_n.htm" label="Application"></topic>
+ <topic href="html/native/app_framework/appgroup_tutorial_n.htm" label="Application Group"></topic>
<topic href="html/native/app_framework/app_manager_tutorial_n.htm" label="Application Manager"></topic>
<topic href="html/native/app_framework/badge_tutorial_n.htm" label="Badge"></topic>
<topic href="html/native/app_framework/bundle_tutorial_n.htm" label="Bundle"></topic>
<topic href="html/native/app_framework/notification_tutorial_n.htm" label="Notification"></topic>
<topic href="html/native/app_framework/package_tutorial_n.htm" label="Package Manager"></topic>
<topic href="html/native/app_framework/service_app_tutorial_n.htm" label="Service Application"></topic>
+ <topic href="html/native/app_framework/widget_tutorial_n.htm" label="Widget"></topic>
<topic href="html/native/app_framework/shortcut_tutorial_n.htm" label="Shortcut"></topic>
+ <topic href="html/native/app_framework/watch_tutorial_n.htm" label="Watch Application"></topic>
</topic>
<topic href="html/native/base/base_tutorials_n.htm" label="Base">
<topic href="html/native/base/sqlite_tutorial_n.htm" label="Sqlite"></topic>
<topic href="html/native/base/i18n_tutorial_n.htm" label="i18n"></topic>
</topic>
<topic href="html/native/content/content_tutorials_n.htm" label="Content">
- <topic href="html/native/content/download_tutorial_n.htm" label="Download"></topic>
<topic href="html/native/content/media_content_tutorial_n.htm" label="Media Content"></topic>
<topic href="html/native/content/mime_type_tutorial_n.htm" label="MIME Type"></topic>
+ <topic href="html/native/content/download_tutorial_n.htm" label="Download"></topic>
</topic>
<topic href="html/native/context/context_tutorials_n.htm" label="Context">
<topic href="html/native/context/activity_tutorial_n.htm" label="Activity Recognition"></topic>
<topic href="html/native/context/gesture_tutorial_n.htm" label="Gesture Recognition"></topic>
+ <topic href="html/native/context/history_tutorial_n.htm" label="Contextual History"></topic>
+ <topic href="html/native/context/trigger_tutorial_n.htm" label="Contextual Trigger"></topic>
</topic>
<topic href="html/native/graphics/graphics_tutorials_n.htm" label="Graphics">
<topic href="html/native/graphics/opengl_tutorial_n.htm" label="OpenGL ES"></topic>
<topic href="html/native/graphics/tbm_tutorial_n.htm" label="TBM Surface"></topic>
- <topic href="html/native/graphics/cairo_tutorial_n.htm" label="Cairo Integration"></topic>
- <topic href="html/native/graphics/widget_tutorial_n.htm" label="Graphic Widget"></topic>
+ <topic href="html/native/graphics/cairo_tutorial_n.htm" label="Cairo"></topic>
+ <topic href="html/native/graphics/graphic_comp_tutorial_n.htm" label="Graphic UI Component"></topic>
+ </topic>
+ <topic href="html/native/location/location_tutorials_n.htm" label="Location">
+ <topic href="html/native/location/location_tutorial_n.htm" label="Location"></topic>
+ <topic href="html/native/location/geofence_tutorial_n.htm" label="Geofence"></topic>
+ <topic href="html/native/location/maps_tutorial_n.htm" label="Maps Service"></topic>
</topic>
- <topic href="html/native/location/location_tutorials_n.htm" label="Location"></topic>
<topic href="html/native/messaging/messaging_tutorials_n.htm" label="Messaging">
<topic href="html/native/messaging/sms_mms_tutorial_n.htm" label="Messages"></topic>
- <topic href="html/native/messaging/email_tutorial_n.htm" label="Email"></topic>
<topic href="html/native/messaging/push_tutorial_n.htm" label="Push"></topic>
+ <topic href="html/native/messaging/email_tutorial_n.htm" label="Email"></topic>
</topic>
<topic href="html/native/multimedia/multimedia_tutorials_n.htm" label="Multimedia">
<topic href="html/native/multimedia/audio_io_tutorial_n.htm" label="Audio I/O"></topic>
<topic href="html/native/multimedia/camera_tutorial_n.htm" label="Camera"></topic>
<topic href="html/native/multimedia/image_util_tutorial_n.htm" label="Image Util"></topic>
<topic href="html/native/multimedia/media_codec_tutorial_n.htm" label="Media Codec"></topic>
+ <topic href="html/native/multimedia/media_controller_tutorial_n.htm" label="Media Controller"></topic>
<topic href="html/native/multimedia/media_tools_tutorial_n.htm" label="Media Tool"></topic>
+ <topic href="html/native/multimedia/metadata_editor_tutorial_n.htm" label="Metadata Editor"></topic>
<topic href="html/native/multimedia/metadata_extractor_tutorial_n.htm" label="Metadata Extractor"></topic>
<topic href="html/native/multimedia/player_tutorial_n.htm" label="Player"></topic>
<topic href="html/native/multimedia/radio_tutorial_n.htm" label="Radio"></topic>
<topic href="html/native/multimedia/recorder_tutorial_n.htm" label="Recorder"></topic>
+ <topic href="html/native/multimedia/thumbnail_util_tutorial_n.htm" label="Thumbnail Util"></topic>
<topic href="html/native/multimedia/tone_player_tutorial_n.htm" label="Tone Player"></topic>
- <topic href="html/native/multimedia/video_util_tutorial_n.htm" label="Video Util"></topic>
<topic href="html/native/multimedia/wav_player_tutorial_n.htm" label="WAV Player"></topic>
<topic href="html/native/multimedia/sound_manager_tutorial_n.htm" label="Sound Manager"></topic>
+ <topic href="html/native/multimedia/screen_mirroring_tutorial_n.htm" label="Screen Mirroring Sink"></topic>
+ <topic href="html/native/multimedia/video_util_tutorial_n.htm" label="Video Util"></topic>
</topic>
<topic href="html/native/network/network_tutorials_n.htm" label="Network">
<topic href="html/native/network/connection_tutorial_n.htm" label="Connection"></topic>
<topic href="html/native/network/bluetooth_tutorial_n.htm" label="Bluetooth"></topic>
- <topic href="html/native/network/nfc_tutorial_n.htm" label="NFC"></topic>
+ <topic href="html/native/network/nfc_tutorial_n.htm" label="NFC"></topic>
+ <topic href="html/native/network/smartcard_tutorial_n.htm" label="SmartCard"></topic>
<topic href="html/native/network/wifi_tutorial_n.htm" label="Wi-Fi"></topic>
<topic href="html/native/network/wifi_direct_tutorial_n.htm" label="Wi-Fi Direct"></topic>
</topic>
+ <topic href="html/native/oauth2/oauth2_tutorials_n.htm" label="OAuth2"></topic>
<topic href="html/native/security/security_tutorials_n.htm" label="Security">
<topic href="html/native/security/key_tutorial_n.htm" label="Key Manager"></topic>
<topic href="html/native/security/privilege_tutorial_n.htm" label="Privilege Info"></topic>
</topic>
<topic href="html/native/social/social_tutorials_n.htm" label="Social">
+ <topic href="html/native/social/phonenumber_util_tutorial_n.htm" label="Phonenumber-utils"></topic>
<topic href="html/native/social/account_tutorial_n.htm" label="Account Manager"></topic>
<topic href="html/native/social/calendar_tutorial_n.htm" label="Calendar"></topic>
<topic href="html/native/social/contact_tutorial_n.htm" label="Contacts"></topic>
- </topic>
- <topic href="html/native/sync/sync_tutorials_n.htm" label="Sync"></topic>
+ </topic>
<topic href="html/native/system/system_tutorials_n.htm" label="System">
<topic href="html/native/system/device_tutorial_n.htm" label="Device"></topic>
<topic href="html/native/system/dlog_tutorial_n.htm" label="dlog"></topic>
</topic>
<topic href="html/native/telephony/telephony_tutorials_n.htm" label="Telephony">
</topic>
- <topic href="html/native/ui/ui_tutorials_n.htm" label="UI">
+ <topic href="html/native/ui/ui_tutorials_n.htm" label="UI Framework">
<topic href="html/native/ui/efl_tutorial_n.htm" label="EFL"></topic>
<topic href="html/native/ui/evas_tutorial_n.htm" label="Evas"></topic>
<topic href="html/native/ui/events_effects_tutorials_n.htm" label="Event and Effect">
<topic href="html/native/ui/gesture_detector_tutorial_n.htm" label="Gesture Detector"></topic>
<topic href="html/native/ui/multipoint_touch_tutorial_n.htm" label="Multi-point Touch"></topic>
</topic>
- <topic href="html/native/ui/ui_control_tutorials_n.htm" label="UI Control">
- <topic href="html/native/ui/basic_tutorial_n.htm" label="Basic"></topic>
- <topic href="html/native/ui/form_tutorial_n.htm" label="Form"></topic>
- <topic href="html/native/ui/naviframe_tutorial_n.htm" label="Naviframe"></topic>
- <topic href="html/native/ui/genlist_tutorial_n.htm" label="Genlist"></topic>
- <topic href="html/native/ui/menu_tutorial_n.htm" label="Menu"></topic>
- <topic href="html/native/ui/panes_tutorial_n.htm" label="Panes"></topic>
- <topic href="html/native/ui/ui_layout_tutorial_n.htm" label="UI Layout"></topic>
+ <topic href="html/native/ui/ui_component_tutorials_n.htm" label="UI Components">
+ <topic href="html/native/ui/ui_component_tutorials_mn.htm" label="Mobile Native">
+ <topic href="html/native/ui/basic_tutorial_mn.htm" label="Basic"></topic>
+ <topic href="html/native/ui/form_tutorial_mn.htm" label="Form"></topic>
+ <topic href="html/native/ui/naviframe_tutorial_mn.htm" label="Naviframe"></topic>
+ <topic href="html/native/ui/genlist_tutorial_mn.htm" label="Genlist"></topic>
+ <topic href="html/native/ui/menu_tutorial_mn.htm" label="Menu"></topic>
+ <topic href="html/native/ui/panes_tutorial_mn.htm" label="Panes"></topic>
+ <topic href="html/native/ui/ui_layout_tutorial_mn.htm" label="UI Layout"></topic>
+ </topic>
+ <topic href="html/native/ui/ui_component_tutorials_wn.htm" label="Wearable Native">
+ <topic href="html/native/ui/button_tutorial_wn.htm" label="Button"></topic>
+ <topic href="html/native/ui/datetime_tutorial_wn.htm" label="Datetime"></topic>
+ <topic href="html/native/ui/genlist_tutorial_wn.htm" label="Genlist"></topic>
+ <topic href="html/native/ui/popup_tutorial_wn.htm" label="Popup"></topic>
+ <topic href="html/native/ui/circle_components_tutorial_wn.htm" label="Circle Components"></topic>
+ </topic>
</topic>
<topic href="html/native/ui/efl_extension_tutorial_n.htm" label="Efl Extension"></topic>
<topic href="html/native/ui/font_settings_tutorial_n.htm" label="Font Setting"></topic>
<topic href="html/native/ui/efl_util_tutorial_n.htm" label="EFL UTIL"></topic>
<topic href="html/native/ui/efl_optimization_tutorial_n.htm" label="EFL Optimization"></topic>
+ <topic href="html/native/ui/eom_tutorial_n.htm" label="EOM"></topic>
</topic>
<topic href="html/native/uix/uix_tutorials_n.htm" label="UIX">
<topic href="html/native/uix/tts_tutorial_n.htm" label="TTS"></topic>
<topic href="html/native/uix/stt_tutorial_n.htm" label="STT"></topic>
</topic>
<topic href="html/native/web/web_tutorials_n.htm" label="Web"></topic>
+ <topic href="html/native/sync/sync_tutorials_n.htm" label="Sync">
+ <topic href="html/native/sync/sync_adapter_tutorial_n.htm" label="Sync Adapter"></topic>
+ <topic href="html/native/sync/sync_manager_tutorial_n.htm" label="Sync Manager"></topic>
+ </topic>
</topic>
</toc>
projects / sdk / online-doc.git / commitdiff
